import React, { useEffect, useCallback } from "react"; import PropTypes from "prop-types"; import { useSelector, useDispatch } from "react-redux"; import { fetchShows, selectShow, showWishlistToggle, getShowExploreOptions, getShowDetails, } from "../../actions/shows"; import ListDetails from "../list/details"; import ListPosters from "../list/posters"; import { Refresh } from "../buttons/refresh"; 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.shows.loading); const shows = useSelector((state) => state.shows.shows); const selectedImdbId = useSelector((state) => state.shows.selectedImdbId); const exploreOptions = useSelector((state) => state.shows.exploreOptions); const showDetails = (imdbId) => { history.push("/shows/details/" + imdbId); }; let selectedShow = new Map(); if (selectedImdbId !== "") { selectedShow = shows.get(selectedImdbId); } const selectFunc = useCallback((id) => dispatch(selectShow(id)), [dispatch]); const exploreFetchOptions = useCallback( () => dispatch(getShowExploreOptions()), [dispatch] ); const wishlisted = selectedShow.tracked_season !== null && selectedShow.tracked_episode !== null; return (