canape/frontend/js/components/shows/list.js

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

import {
  fetchShows,
  selectShow,
  showWishlistToggle,
  updateFilter,
  getShowExploreOptions,
} from "../../actions/shows";

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

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

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

const ShowList = ({ match, history }) => {
  const dispatch = useDispatch();

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

  const loading = useSelector((state) => state.showsStore.get("loading"));
  const shows = useSelector((state) => state.showsStore.get("shows"));
  const filter = useSelector((state) => state.showsStore.get("filter"));
  const selectedImdbId = useSelector((state) =>
    state.showsStore.get("selectedImdbId")
  );
  const exploreOptions = useSelector((state) =>
    state.showsStore.get("exploreOptions")
  );

  const showDetails = (imdbId) => {
    history.push("/shows/details/" + imdbId);
  };

  let selectedShow = Map();
  if (selectedImdbId !== "") {
    selectedShow = shows.get(selectedImdbId);
  }

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

  return (
    <div className="row" id="container">
      <ListPosters
        data={shows}
        type="shows"
        placeHolder="Filter shows..."
        exploreOptions={exploreOptions}
        exploreFetchOptions={exploreFetchOptions}
        updateFilter={filterFunc}
        selectedImdbId={selectedImdbId}
        filter={filter}
        onClick={selectFunc}
        onDoubleClick={showDetails}
        onKeyEnter={showDetails}
        params={match.params}
        loading={loading}
      />
      <ListDetails
        data={selectedShow}
        loading={loading}
        wishlist={() =>
          dispatch(
            showWishlistToggle(
              isWishlisted(selectedShow),
              selectedShow.get("imdb_id")
            )
          )
        }
      >
        <span>
          <button
            onClick={() => showDetails(selectedShow.get("imdb_id"))}
            className="btn btn-primary btn-sm w-md-100"
          >
            <i className="fa fa-external-link mr-1" />
            Details
          </button>
        </span>
      </ListDetails>
    </div>
  );
};
ShowList.propTypes = {
  match: PropTypes.object,
  history: PropTypes.object,
};
export default ShowList;