Implement Trending Movies Section

[ahmedalsanadi]

Pull Request: Implement Trending Movies Section

Branch Name: feature/trending-movies

---

Summary

This pull request addresses the issue of adding a new section to display trending movies, allowing users to toggle between different time frames for trending data (Today/This Week). The feature implements a responsive design, error handling, and loading states to enhance user experience. The implementation aligns with the outlined requirements and objectives.

---

Description of Changes

1. Fetch Trending Movies:

   • A custom hook, useTrendingMovies, is used to fetch trending movies based on the selected time frame (day or week).
   • The useTrendingMovies hook retrieves the movie data dynamically as the user toggles between the two time frames, updating the displayed content accordingly.

2. Toggle Functionality:

   • We have implemented a ToggleSwitch component that allows users to select between two trending options: "Today" and "This Week".
   • The ToggleSwitch component updates the trendingType state in the TrendingSection using the useState hook. Changing the option dynamically updates the movie data fetched from the custom hook.

3. Display Movies:

   • The movies are displayed in a visually appealing, horizontally scrollable slider component, HorizontalSlider.
   • Each movie is presented using the MediaCard component, which showcases:
     • Movie poster (imageUrl)
     • Movie title (title)
     • Vote average (voteAverage), including a circular progress bar visualizing the score
     • Release date (releaseDate)
     • A clickable link that directs to a movie's individual details page (/movie/[id]).

4. Responsive Design:

   • The trending section is designed to be fully responsive, ensuring a smooth user experience across various screen sizes and devices.
   • The horizontal slider (HorizontalSlider) allows smooth scrolling for mobile users, with additional styles to hide default scrollbars and enhance visual appeal.

5. Error Handling and Loading States:

   • Error Handling: If an error occurs during data fetching, an error message is displayed.
   • Loading Indicator: While the movies are being fetched, a loading message is displayed to notify users that data is being retrieved.

---

Key Components

• TrendingSection: The main component that handles the logic for rendering the trending movies section.
• useTrendingMovies: Custom hook responsible for fetching movie data from the API based on the selected trending time frame.
• ToggleSwitch: A reusable component that allows users to toggle between daily and weekly trending data.
• HorizontalSlider: A reusable component to display movie cards in a horizontally scrollable container.
• MediaCard: A reusable component that displays individual movie information including title, poster, vote average, and release date.

---

Preview of Changes

• Toggle Switch: The toggle switch is styled to show two options, Today and This Week, with an active state highlighting the selected option.
• Trending Movies Display: Movies are laid out in a horizontal slider format, with each card showing essential movie details, such as title, vote average (with progress), and release date. Cards are interactive and lead to more detailed movie pages.
• Responsiveness: The section adjusts beautifully across different screen sizes, offering a seamless experience on both mobile and desktop devices.

---

Testing & Validation

• Manual Testing:
  • Verified the functionality of the toggle switch to ensure it correctly switches between "Today" and "This Week" data.
  • Ensured the movies display correctly in a horizontal scrollable view.
  • Tested error handling by simulating a failed API request to ensure the error message is displayed.
  • Checked the loading state to ensure that it appears while the movies are being fetched.
  • Tested on various screen sizes to ensure the responsiveness of the section.