Feature/free to watch section

[ahmedalsanadi]

New Feature: Free-to-Watch Section Implementation

Summary:

This PR introduces a new Free-to-Watch section, providing users with easy access to free-to-watch movies and TV shows fetched from TMDB (The Movie Database) API. It includes a custom React hook, UI components for content display, and a toggle for switching between "Movies" and "TV Shows". The implementation is based on the accurate categorization of free-to-watch media and includes efficient API handling for performance and error management.

---

Files Added/Modified:

1. useFreeToWatchMedia.jsx (New Hook)

   • Functionality:
     • Fetches free-to-watch media from TMDB.
     • Allows filtering by category (movies, tv, or both) using conditional API endpoints.
     • Handles loading and error states for smooth user experience.
   • Description:
     • It defines two main state variables (media, loading, error).
     • Depending on the category, it fetches data from TMDB's free-to-watch endpoint for movies or TV shows.
     • Combines the results if no category is selected, thus offering a seamless experience in fetching both media types simultaneously.

2. FreeToWatchSection.jsx (Component)

   • Functionality:
     • Displays the Free-to-Watch media section, integrating the useFreeToWatchMedia hook for data fetching.
     • Provides a toggle switch for the user to choose between "Movies" and "TV Shows".
     • Implements a horizontal slider for content display, using responsive settings for various screen sizes.
   • Description:
     • Uses the useState hook to track the selected category.
     • Renders a horizontal slider with placeholders during loading and real media cards once data is fetched.
     • Ensures proper error handling by displaying an error message in case the API fails to fetch data.

3. fetchDataFromTMDB.jsx (Utility function update)

   • Functionality:
     • A flexible utility function to fetch data from TMDB.
     • Includes error handling for unsuccessful responses.
     • Adds the API key dynamically to the URL to ensure authenticated requests.
   • Description:
     • Constructs the URL based on the provided endpoint and API key.
     • Fetches the response, checks for HTTP errors, and returns the parsed data.
     • Logs errors for easier debugging during development.

---

Key Features:

1. Dynamic Data Fetching:

   • The useFreeToWatchMedia hook dynamically adjusts to fetch free-to-watch content based on the selected category (Movies or TV).
   • It combines the results from both categories if no specific category is selected.

2. Responsive UI:

   • The FreeToWatchSection component uses a horizontal slider (react-slick) to display media cards, adjusting the number of displayed cards depending on the viewport size for better user experience across devices.

3. Toggle Switch:

   • Allows users to easily switch between Movies and TV Shows, with the component re-rendering based on the selected category.

4. Error Handling and Loading States:

   • Comprehensive loading state with placeholders for better UX while content is being fetched.
   • Clear error messages to notify users in case of failure when fetching data from the TMDB API.

---

Additional Commit Messages :

1. Commit: "Refactor usePopularMedia hook for improved category handling"

   • Refactored the usePopularMedia hook for more accurate category-based data fetching.
   • Introduced support for content streaming, renting, on TV, and in theaters.
   • Combined movie and TV show data with random shuffling for diverse media presentation.
   • Enhanced error handling and improved logging for easier debugging.

2. Commit: "Updated fetchDataFromTMDB to be more flexible with different kinds of APIs"

   • Made fetchDataFromTMDB more flexible to handle multiple kinds of TMDB API endpoints.
   • Ensured it properly constructs URLs based on the endpoint and includes necessary query parameters.
   • Added better error handling and descriptive logging for API requests.

---

Conclusion:

This PR implements a robust free-to-watch media section in the application, improving user experience by offering categorized and responsive content. It also enhances the reusability of the data-fetching functions for future API integrations, ensuring clean and maintainable code.