110 lines
2.9 KiB
JavaScript
110 lines
2.9 KiB
JavaScript
import React, { useEffect, useCallback } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
|
|
import {
|
|
fetchShows,
|
|
selectShow,
|
|
showWishlistToggle,
|
|
getShowExploreOptions,
|
|
} from "../../actions/shows";
|
|
|
|
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.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 = 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 (
|
|
<div className="row" id="container">
|
|
<ListPosters
|
|
data={shows}
|
|
type="shows"
|
|
placeHolder="Filter shows..."
|
|
exploreOptions={exploreOptions}
|
|
exploreFetchOptions={exploreFetchOptions}
|
|
selectedImdbId={selectedImdbId}
|
|
onClick={selectFunc}
|
|
onDoubleClick={showDetails}
|
|
onKeyEnter={showDetails}
|
|
params={match.params}
|
|
loading={loading}
|
|
/>
|
|
<ListDetails
|
|
data={selectedShow}
|
|
loading={loading}
|
|
wishlisted={wishlisted}
|
|
wishlist={() =>
|
|
dispatch(showWishlistToggle(wishlisted, selectedShow.imdb_id))
|
|
}
|
|
>
|
|
<span>
|
|
<button
|
|
onClick={() => showDetails(selectedShow.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;
|