diff --git a/frontend/js/components/buttons/refresh.js b/frontend/js/components/buttons/refresh.js new file mode 100644 index 0000000..050a131 --- /dev/null +++ b/frontend/js/components/buttons/refresh.js @@ -0,0 +1,21 @@ +import React from "react"; +import PropTypes from "prop-types"; + +export const Refresh = ({ onClick, loading, kind }) => { + return ( + + ); +}; +Refresh.propTypes = { + onClick: PropTypes.func.isRequired, + loading: PropTypes.bool.isRequired, + kind: PropTypes.string.isRequired, +}; +Refresh.defaultProps = { + onClick: () => {}, + loading: false, + kind: "secondary", +}; diff --git a/frontend/js/components/shows/details/header.js b/frontend/js/components/shows/details/header.js index b5647ae..0ee2945 100644 --- a/frontend/js/components/shows/details/header.js +++ b/frontend/js/components/shows/details/header.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Plot } from "../../details/plot"; @@ -8,27 +8,35 @@ import { Title } from "../../details/title"; import { TrackingLabel } from "../../details/tracking"; import { ImdbBadge } from "../../buttons/imdb"; +import { Refresh } from "../../buttons/refresh"; -import { showWishlistToggle } from "../../../actions/shows"; +import { + showWishlistToggle, + fetchShowDetails, + getShowDetails, +} from "../../../actions/shows"; export const Header = () => { const dispatch = useDispatch(); - const posterUrl = useSelector((state) => state.show.show.poster_url); - const title = useSelector((state) => state.show.show.title); - const imdbId = useSelector((state) => state.show.show.imdb_id); - const year = useSelector((state) => state.show.show.year); - const rating = useSelector((state) => state.show.show.rating); - const plot = useSelector((state) => state.show.show.plot); + const { + poster_url: posterUrl, + title, + imdb_id: imdbId, + year, + rating, + plot, + tracked_season: trackedSeason, + tracked_episode: trackedEpisode, + fetchingDetails, + } = useSelector((state) => state.show.show); - const trackedSeason = useSelector((state) => state.show.show.tracked_season); - const trackedEpisode = useSelector( - (state) => state.show.show.tracked_episode - ); - const wishlisted = useSelector( - (state) => - state.show.show.tracked_season !== null && - state.show.show.tracked_episode !== null - ); + useEffect(() => { + if (fetchingDetails === false) { + dispatch(fetchShowDetails(imdbId)); + } + }, [fetchingDetails, imdbId, dispatch]); + + const wishlisted = trackedSeason !== null && trackedEpisode !== null; return (