From d998d2838df9bd9ef4fc75e3b5db784186ffb5b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Fri, 3 Apr 2020 01:46:25 +0200 Subject: [PATCH] Use redux hooks on shows components --- .../js/components/shows/details/episode.js | 157 +++++++++--------- .../js/components/shows/details/header.js | 102 ++++++------ .../shows/details/subtitlesButton.js | 32 ++-- .../shows/details/torrentsButton.js | 37 ++--- 4 files changed, 164 insertions(+), 164 deletions(-) diff --git a/frontend/js/components/shows/details/episode.js b/frontend/js/components/shows/details/episode.js index e45d895..ce2c3e8 100644 --- a/frontend/js/components/shows/details/episode.js +++ b/frontend/js/components/shows/details/episode.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Map } from "immutable"; -import { connect } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { showWishlistToggle } from "../../../actions/shows"; @@ -24,87 +24,88 @@ import { EpisodeSubtitlesButton } from "./subtitlesButton"; import { EpisodeThumb } from "./episodeThumb"; import { EpisodeTorrentsButton } from "./torrentsButton"; -const mapStateToProps = (state) => ({ - trackedSeason: state.showStore.getIn(["show", "tracked_season"], null), - trackedEpisode: state.showStore.getIn(["show", "tracked_episode"], null), -}); +export const Episode = (props) => { + const dispatch = useDispatch(); -const episode = (props) => ( -
- -
- - props.showWishlistToggle( - isEpisodeWishlisted(props.data), - props.data.get("show_imdb_id"), + const trackedSeason = useSelector((state) => + state.showStore.getIn(["show", "tracked_season"], null) + ); + const trackedEpisode = useSelector((state) => + state.showStore.getIn(["show", "tracked_episode"], null) + ); + + return ( + <div className="d-flex flex-column flex-lg-row mb-3 pb-3 border-bottom border-light"> + <EpisodeThumb url={props.data.get("thumb")} /> + <div className="d-flex flex-column"> + <Title + title={`${props.data.get("episode")}. ${props.data.get("title")}`} + wishlisted={isEpisodeWishlisted( + props.data, + trackedSeason, + trackedEpisode + )} + wishlist={() => + dispatch( + showWishlistToggle( + isEpisodeWishlisted(props.data), + props.data.get("show_imdb_id"), + props.data.get("season"), + props.data.get("episode") + ) + ) + } + /> + <ReleaseDate date={props.data.get("aired")} /> + <Runtime runtime={props.data.get("runtime")} /> + <Plot plot={props.data.get("plot")} /> + <DownloadAndStream + name={prettyEpisodeName( + props.showName, props.data.get("season"), props.data.get("episode") - ) - } - /> - <ReleaseDate date={props.data.get("aired")} /> - <Runtime runtime={props.data.get("runtime")} /> - <Plot plot={props.data.get("plot")} /> - <DownloadAndStream - name={prettyEpisodeName( - props.showName, - props.data.get("season"), - props.data.get("episode") - )} - url={props.data.get("polochon_url")} - subtitles={props.data.get("subtitles")} - /> - <PolochonMetadata - quality={props.data.get("quality")} - releaseGroup={props.data.get("release_group")} - container={props.data.get("container")} - audioCodec={props.data.get("audio_codec")} - videoCodec={props.data.get("video_codec")} - light - /> - <ShowMore - id={prettyEpisodeName( - props.showName, - props.data.get("season"), - props.data.get("episode") - )} - inLibrary={inLibrary(props.data)} - > - <EpisodeTorrentsButton - torrents={props.data.get("torrents")} - showName={props.showName} - imdbId={props.data.get("show_imdb_id")} - season={props.data.get("season")} - episode={props.data.get("episode")} - searching={props.data.get("fetching")} - /> - <EpisodeSubtitlesButton + )} + url={props.data.get("polochon_url")} subtitles={props.data.get("subtitles")} - inLibrary={inLibrary(props.data)} - searching={props.data.get("fetchingSubtitles", false)} - imdbId={props.data.get("show_imdb_id")} - season={props.data.get("season")} - episode={props.data.get("episode")} /> - </ShowMore> + <PolochonMetadata + quality={props.data.get("quality")} + releaseGroup={props.data.get("release_group")} + container={props.data.get("container")} + audioCodec={props.data.get("audio_codec")} + videoCodec={props.data.get("video_codec")} + light + /> + <ShowMore + id={prettyEpisodeName( + props.showName, + props.data.get("season"), + props.data.get("episode") + )} + inLibrary={inLibrary(props.data)} + > + <EpisodeTorrentsButton + torrents={props.data.get("torrents")} + showName={props.showName} + imdbId={props.data.get("show_imdb_id")} + season={props.data.get("season")} + episode={props.data.get("episode")} + searching={props.data.get("fetching")} + /> + <EpisodeSubtitlesButton + subtitles={props.data.get("subtitles")} + inLibrary={inLibrary(props.data)} + searching={props.data.get("fetchingSubtitles", false)} + imdbId={props.data.get("show_imdb_id")} + season={props.data.get("season")} + episode={props.data.get("episode")} + /> + </ShowMore> + </div> </div> - </div> -); -episode.propTypes = { - data: PropTypes.instanceOf(Map).isRequired, - trackedSeason: PropTypes.number, - trackedEpisode: PropTypes.number, - showName: PropTypes.string.isRequired, - showWishlistToggle: PropTypes.func, + ); +}; +Episode.propTypes = { + data: PropTypes.instanceOf(Map).isRequired, + showName: PropTypes.string.isRequired, }; - -export const Episode = connect(mapStateToProps, { showWishlistToggle })( - episode -); diff --git a/frontend/js/components/shows/details/header.js b/frontend/js/components/shows/details/header.js index bf77ebd..ece6bf0 100644 --- a/frontend/js/components/shows/details/header.js +++ b/frontend/js/components/shows/details/header.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Map } from "immutable"; -import { connect } from "react-redux"; +import { useDispatch } from "react-redux"; import { isWishlisted } from "../../../utils"; @@ -15,56 +15,58 @@ import { TrackingLabel } from "../../details/tracking"; import { ImdbBadge } from "../../buttons/imdb"; -export const header = (props) => ( - <div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3"> - <div className="d-flex flex-column flex-md-row"> - <div className="d-flex justify-content-center"> - <img - className="overflow-hidden object-fit-cover" - src={props.data.get("poster_url")} - /> - </div> - <div> - <div className="card-body"> - <p className="card-title"> - <Title - title={props.data.get("title")} - wishlisted={isWishlisted(props.data)} - wishlist={() => - props.showWishlistToggle( - isWishlisted(props.data), - props.data.get("imdb_id") - ) - } - /> - </p> - <p className="card-text"> - <ReleaseDate date={props.data.get("year")} /> - </p> - <p className="card-text"> - <Rating rating={props.data.get("rating")} /> - </p> - <p className="card-text"> - <ImdbBadge imdbId={props.data.get("imdb_id")} /> - </p> - <p className="card-text"> - <TrackingLabel - inLibrary={false} - trackedSeason={props.data.get("tracked_season")} - trackedEpisode={props.data.get("tracked_episode")} - /> - </p> - <p className="card-text"> - <Plot plot={props.data.get("plot")} /> - </p> +export const Header = (props) => { + const dispatch = useDispatch(); + return ( + <div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3"> + <div className="d-flex flex-column flex-md-row"> + <div className="d-flex justify-content-center"> + <img + className="overflow-hidden object-fit-cover" + src={props.data.get("poster_url")} + /> + </div> + <div> + <div className="card-body"> + <p className="card-title"> + <Title + title={props.data.get("title")} + wishlisted={isWishlisted(props.data)} + wishlist={() => + dispatch( + showWishlistToggle( + isWishlisted(props.data), + props.data.get("imdb_id") + ) + ) + } + /> + </p> + <p className="card-text"> + <ReleaseDate date={props.data.get("year")} /> + </p> + <p className="card-text"> + <Rating rating={props.data.get("rating")} /> + </p> + <p className="card-text"> + <ImdbBadge imdbId={props.data.get("imdb_id")} /> + </p> + <p className="card-text"> + <TrackingLabel + inLibrary={false} + trackedSeason={props.data.get("tracked_season")} + trackedEpisode={props.data.get("tracked_episode")} + /> + </p> + <p className="card-text"> + <Plot plot={props.data.get("plot")} /> + </p> + </div> </div> </div> </div> - </div> -); -header.propTypes = { - data: PropTypes.instanceOf(Map), - showWishlistToggle: PropTypes.func, + ); +}; +Header.propTypes = { + data: PropTypes.instanceOf(Map), }; - -export const Header = connect(null, { showWishlistToggle })(header); diff --git a/frontend/js/components/shows/details/subtitlesButton.js b/frontend/js/components/shows/details/subtitlesButton.js index 2585383..70a8b31 100644 --- a/frontend/js/components/shows/details/subtitlesButton.js +++ b/frontend/js/components/shows/details/subtitlesButton.js @@ -1,39 +1,37 @@ import React from "react"; import PropTypes from "prop-types"; import { List } from "immutable"; -import { connect } from "react-redux"; +import { useDispatch } from "react-redux"; import { searchEpisodeSubtitles } from "../../../actions/subtitles"; import { SubtitlesButton } from "../../buttons/subtitles"; -const episodeSubtitlesButton = ({ +export const EpisodeSubtitlesButton = ({ inLibrary, imdbId, season, episode, searching, - searchEpisodeSubtitles, subtitles, -}) => ( - <SubtitlesButton - subtitles={subtitles} - inLibrary={inLibrary} - searching={searching} - search={() => searchEpisodeSubtitles(imdbId, season, episode)} - /> -); +}) => { + const dispatch = useDispatch(); -episodeSubtitlesButton.propTypes = { + return ( + <SubtitlesButton + subtitles={subtitles} + inLibrary={inLibrary} + searching={searching} + search={() => dispatch(searchEpisodeSubtitles(imdbId, season, episode))} + /> + ); +}; + +EpisodeSubtitlesButton.propTypes = { inLibrary: PropTypes.bool, searching: PropTypes.bool, imdbId: PropTypes.string, season: PropTypes.number, episode: PropTypes.number, - searchEpisodeSubtitles: PropTypes.func, subtitles: PropTypes.instanceOf(List), }; - -export const EpisodeSubtitlesButton = connect(null, { searchEpisodeSubtitles })( - episodeSubtitlesButton -); diff --git a/frontend/js/components/shows/details/torrentsButton.js b/frontend/js/components/shows/details/torrentsButton.js index 931f9ad..f1125ab 100644 --- a/frontend/js/components/shows/details/torrentsButton.js +++ b/frontend/js/components/shows/details/torrentsButton.js @@ -1,40 +1,39 @@ import React from "react"; import PropTypes from "prop-types"; -import { connect } from "react-redux"; +import { useDispatch } from "react-redux"; import { List } from "immutable"; import { getEpisodeDetails } from "../../../actions/shows"; + import { TorrentsButton } from "../../buttons/torrents"; import { prettyEpisodeName } from "../../../utils"; -const episodeTorrentsButton = ({ +export const EpisodeTorrentsButton = ({ torrents, imdbId, season, episode, showName, searching, - getEpisodeDetails, -}) => ( - <TorrentsButton - torrents={torrents} - searching={searching} - search={() => getEpisodeDetails(imdbId, season, episode)} - url={`#/torrents/search/shows/${encodeURI( - prettyEpisodeName(showName, season, episode) - )}`} - /> -); -episodeTorrentsButton.propTypes = { +}) => { + const dispatch = useDispatch(); + + return ( + <TorrentsButton + torrents={torrents} + searching={searching} + search={() => dispatch(getEpisodeDetails(imdbId, season, episode))} + url={`#/torrents/search/shows/${encodeURI( + prettyEpisodeName(showName, season, episode) + )}`} + /> + ); +}; +EpisodeTorrentsButton.propTypes = { torrents: PropTypes.instanceOf(List), showName: PropTypes.string.isRequired, imdbId: PropTypes.string.isRequired, episode: PropTypes.number.isRequired, season: PropTypes.number.isRequired, searching: PropTypes.bool.isRequired, - getEpisodeDetails: PropTypes.func.isRequired, }; - -export const EpisodeTorrentsButton = connect(null, { getEpisodeDetails })( - episodeTorrentsButton -);