canape/frontend/js/components/movies/list.js

import React, { useEffect, useCallback } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";
import { Map } from "immutable";

import {
  selectMovie,
  updateFilter,
  movieWishlistToggle,
  fetchMovies,
  getMovieExploreOptions,
} from "../../actions/movies";

import ListDetails from "../list/details";
import ListPosters from "../list/posters";

import { inLibrary, isWishlisted } from "../../utils";

import { ShowMore } from "../buttons/showMore";

import { MovieSubtitlesButton } from "./subtitlesButton";
import { MovieTorrentsButton } from "./torrentsButton";

const fetchUrl = (match) => {
  switch (match.path) {
    case "/movies/polochon":
      return "/movies/polochon";
    case "/movies/wishlist":
      return "/wishlist/movies";
    case "/movies/search/:search":
      return "/movies/search/" + match.params.search;
    case "/movies/explore/:source/:category":
      return (
        "/movies/explore?source=" +
        encodeURI(match.params.source) +
        "&category=" +
        encodeURI(match.params.category)
      );
    default:
      return null;
  }
};

const MovieList = ({ match }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    const url = fetchUrl(match);
    if (url !== null) {
      dispatch(fetchMovies(url));
    }
  }, [dispatch, match]);

  const loading = useSelector((state) => state.movieStore.get("loading"));
  const movies = useSelector((state) => state.movieStore.get("movies"));
  const filter = useSelector((state) => state.movieStore.get("filter"));
  const selectedImdbId = useSelector((state) =>
    state.movieStore.get("selectedImdbId")
  );
  const exploreOptions = useSelector((state) =>
    state.movieStore.get("exploreOptions")
  );

  let selectedMovie = Map();
  if (movies !== undefined && movies.has(selectedImdbId)) {
    selectedMovie = movies.get(selectedImdbId);
  }

  const selectFunc = useCallback((id) => dispatch(selectMovie(id)), [dispatch]);
  const filterFunc = useCallback((filter) => dispatch(updateFilter(filter)), [
    dispatch,
  ]);
  const exploreFetchOptions = useCallback(
    () => dispatch(getMovieExploreOptions()),
    [dispatch]
  );

  return (
    <div className="row">
      <ListPosters
        data={movies}
        type="movies"
        placeHolder="Filter movies..."
        exploreFetchOptions={exploreFetchOptions}
        exploreOptions={exploreOptions}
        selectedImdbId={selectedImdbId}
        updateFilter={filterFunc}
        filter={filter}
        onClick={selectFunc}
        onDoubleClick={() => {}}
        onKeyEnter={() => {}}
        params={match.params}
        loading={loading}
      />
      <ListDetails
        data={selectedMovie}
        loading={loading}
        wishlist={() =>
          dispatch(
            movieWishlistToggle(
              selectedMovie.get("imdb_id"),
              isWishlisted(selectedMovie)
            )
          )
        }
      >
        <ShowMore
          id={selectedMovie.get("imdb_id")}
          inLibrary={inLibrary(selectedMovie)}
        >
          <MovieTorrentsButton
            torrents={selectedMovie.get("torrents")}
            imdbId={selectedMovie.get("imdb_id")}
            title={selectedMovie.get("title")}
            searching={selectedMovie.get("fetchingDetails", false)}
          />
          <MovieSubtitlesButton
            subtitles={selectedMovie.get("subtitles")}
            inLibrary={inLibrary(selectedMovie)}
            imdbId={selectedMovie.get("imdb_id")}
            searching={selectedMovie.get("fetchingSubtitles", false)}
          />
        </ShowMore>
      </ListDetails>
    </div>
  );
};
MovieList.propTypes = {
  fetchMovies: PropTypes.func,
  getMovieExploreOptions: PropTypes.func,
  updateFilter: PropTypes.func,
  movieWishlistToggle: PropTypes.func,
  selectMovie: PropTypes.func,
  match: PropTypes.object,
};

export default MovieList;