Feature/whats popular section

[ahmedalsanadi]

Overview:

This pull request implements the WhatsPopularSection component, which showcases popular media (both movies and TV shows) using data fetched from TMDB. It introduces key functionalities for users to switch between different media categories (e.g., Streaming, On TV, For Rent, and In Theaters), view media in a responsive slider, and navigate to media details via dynamic links.

Key Features:

1. WhatsPopularSection Component:

   • Introduced a new component that displays media based on popular categories.
   • Users can choose categories (Streaming, On TV, For Rent, In Theaters) via a ToggleSwitch, which updates the content displayed.

2. Media Fetching (usePopularMedia Hook):

   • Implemented a custom hook (usePopularMedia) to fetch popular movies and TV shows concurrently from TMDB's API based on the selected category.
   • The hook merges the movie and TV show results into a single array, sorted by vote average.
   • Categories like Streaming and On TV fetch popular content, while In Theaters fetches currently playing movies.

3. Dynamic Category Switching:

   • Integrated a ToggleSwitch component, enabling users to switch between different media categories.
   • Based on the selected category, different API endpoints are hit, and the displayed media updates accordingly.

4. Responsive Horizontal Slider (react-slick):

   • Added the Slider component from react-slick to allow users to scroll through media items in a horizontal slider.
   • The slider is fully responsive with different slide configurations for large screens (7 slides), medium screens (4 slides), and small screens (2-3 slides).
   • The slider provides a smooth and user-friendly experience, adjusting to different screen sizes and devices.

5. Dynamic Media Links:

   • Implemented dynamic URL routing based on whether the media is a movie or TV show.
   • Movies link to /movie/{id}, and TV shows link to /tv/{id}, ensuring proper navigation for users.

6. Loading and Error States:

   • While fetching data, loading placeholders (MediaCardPlaceholder) are shown, maintaining the section layout and providing visual feedback to users.
   • In case of data fetching errors, a clear error message is displayed to inform the user.

Design and Responsiveness:

• The layout and design are fully responsive, making sure that the user experience is seamless across desktop, tablet, and mobile devices.
• The slider adapts based on the screen size, ensuring that content remains visually appealing and easy to navigate.

Error Handling:

• If there is an error in fetching media from the API, the user will be notified with an error message. This ensures that the section gracefully handles failed API requests.

---

How It Works:

1. User Interaction:

   • The user selects one of the four media categories (Streaming, On TV, For Rent, In Theaters).
   • The slider updates based on the selected category, showcasing either movies or TV shows.

2. Data Fetching:

   • Data is fetched from two endpoints (movies and TV shows) and combined into a single array.
   • The fetched data is displayed in the slider, sorted by popularity based on vote average.

3. Navigation:

   • Each media card dynamically routes the user to the appropriate movie or TV show details page based on its ID.

---

Testing:

• Ensured the slider functions correctly and is responsive across different screen sizes.
• Verified that media items link to the correct page (movies or TV shows).
• Checked that loading states display placeholders, and errors are handled gracefully.

---

Next Steps:

• Improve image lazy loading for performance optimization on mobile devices.
• Potentially introduce caching or pagination for larger data sets.

---