6 - Dynamic Movie List with Filtering and Sorting

Description

Develop a React application featuring a dynamic list of movies. Users should be able to:

• View a list of movie titles with basic information like release year and rating.

• Filter the list by genre, release year range, or rating range.

• Sort the list by title, release year, or rating.

• Click on a movie title to access its details (e.g., plot summary, director, cast).

Algorithm

1. Data Source: Implement a way to fetch movie data, either from a local JSON file, API call, or mock data object.

2. State Management: Utilize React's useState hook to manage state variables like:

   • movies: Array of movie objects containing title, release year, rating, genre, and other relevant information.

   • selectedGenre: Genre filter selection (optional).

   • minReleaseYear and maxReleaseYear: Minimum and maximum release year filter range (optional).

   • minRating and maxRating: Minimum and maximum rating filter range (optional).

   • sortField: Field to sort by (title, release year, or rating).

   • sortOrder: Sort order (ascending or descending).

   • selectedMovie: Movie object representing the currently clicked movie for details (optional).

3. Filtering: Implement functions to update state based on user selections:

   • handleGenreChange: Updates selectedGenre based on chosen genre filter.

   • handleReleaseYearRangeChange: Updates minReleaseYear and maxReleaseYear based on chosen range.

   • handleRatingRangeChange: Updates minRating and maxRating based on chosen range.

4. Sorting: Implement a function to update sortField and sortOrder based on user selection (e.g., clicking on table headers).

5. Filtered and Sorted Data: Utilize JavaScript's filter and sort methods to:

   • Filter the movies array based on selected filters (genre, release year, and rating).

   • Sort the filtered movies based on the chosen sortField and sortOrder.

6. Movie Details: Implement conditional rendering or a separate details component to display detailed information about the currently clicked selectedMovie, including plot summary, director, cast, etc.

Code

import React, { useState } from 'react';

const MOVIES = [
  // Array of movie objects containing relevant information
];

function MovieListApp() {
  const [selectedGenre, setSelectedGenre] = useState('');
  const [minReleaseYear, setMinReleaseYear] = useState(null);
  const [maxReleaseYear, setMaxReleaseYear] = useState(null);
  const [minRating, setMinRating] = useState(null);
  const [maxRating, setMaxRating] = useState(null);
  const [sortField, setSortField] = useState('title');
  const [sortOrder, setSortOrder] = useState('asc');
  const [selectedMovie, setSelectedMovie] = useState(null);

  const handleGenreChange = (genre) => setSelectedGenre(genre);
  const handleReleaseYearRangeChange = (minYear, maxYear) => {
    setMinReleaseYear(minYear);
    setMaxReleaseYear(maxYear);
  };
  const handleRatingRangeChange = (minRating, maxRating) => {
    setMinRating(minRating);
    setMaxRating(maxRating);
  };
  const handleSortChange = (field) => {
    setSortField(field);
    setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
  };

  const filteredMovies = MOVIES.filter((movie) => {
    if (selectedGenre && movie.genre !== selectedGenre) return false;
    if (minReleaseYear && movie.releaseYear < minReleaseYear) return false;
    if (maxReleaseYear && movie.releaseYear > maxReleaseYear) return false;
    if (minRating && movie.rating < minRating) return false;
    if (maxRating && movie.rating > maxRating) return false;
    return true;
  });

  const sortedMovies = filteredMovies.sort((movie1, movie2) => {
    if (sortField === 'title') {
      return movie1.title.localeCompare(movie2.title, undefined, {
        sensitivity: 'case-insensitive',
      });
    } else if (sortField === 'releaseYear') {
      return movie1.releaseYear - movie2.releaseYear;
    } else if (sortField === 'rating') {
      return movie2.rating - movie1.rating; // Descending for rating
    }
    return 0;
  });

  return (
    <div className="movie-list-app">
      <h1>Movie List</h1>
      <div className="filters">
        {/* Filter components for genre, release year range, and rating range */}
      </div>
      <div className="sort-buttons">
        <button onClick={() => handleSortChange('title')}>Sort by Title</button>
        <button onClick={() => handleSortChange('releaseYear')}>Sort by Release Year</button>
        <button onClick={() => handleSortChange('rating')}>Sort by Rating</button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Release Year</th>
            <th>Rating</th>
            <th>Genre</th>
          </tr>
        </thead>
        <tbody>
          {sortedMovies.map((movie) => (
            <tr key={movie.id} onClick={() => setSelectedMovie(movie)}>
              <td>{movie.title}</td>
              <td>{movie.releaseYear}</td>
              <td>{movie.rating}</td>
              <td>{movie.genre}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {/* Conditional rendering of movie details for selectedMovie */}
    </div>
  );
}

export default MovieListApp;

Explanation

• This code provides a basic example of filtering and sorting a movie list. You can implement specific filter and sort components tailored to your chosen UI design.

• The filteredMovies array is obtained by applying the selected filters to the MOVIES array using JavaScript's filter method.

• The sortedMovies array is generated by sorting the filteredMovies based on the chosen sortField and sortOrder using sort.

• Each movie item in the table triggers the setSelectedMovie function to display detailed information about the clicked movie upon selection.

Additional Notes

• Consider integrating with a real-time API for dynamic data fetching instead of a static MOVIES array.

• Enhance the UI with visual cues for active filters and sort options.

• Implement pagination for displaying large movie lists efficiently.

• Offer search functionality to allow users to find specific movies within the list.