ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Use redux hooks on shows components

Browse Source
This commit is contained in:
Grégoire Delattre 2020-04-03 01:46:25 +02:00
parent 27f5c5d558
commit d998d2838d
4 changed files with 164 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
frontend/js/components/shows/details/episode.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Map } from "immutable"; import { Map } from "immutable";
import { connect } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { showWishlistToggle } from "../../../actions/shows"; import { showWishlistToggle } from "../../../actions/shows";
@ -24,87 +24,88 @@ import { EpisodeSubtitlesButton } from "./subtitlesButton";
import { EpisodeThumb } from "./episodeThumb"; import { EpisodeThumb } from "./episodeThumb";
import { EpisodeTorrentsButton } from "./torrentsButton"; import { EpisodeTorrentsButton } from "./torrentsButton";
const mapStateToProps = (state) => ({ export const Episode = (props) => {
trackedSeason: state.showStore.getIn(["show", "tracked_season"], null), const dispatch = useDispatch();
trackedEpisode: state.showStore.getIn(["show", "tracked_episode"], null),
});
const episode = (props) => ( const trackedSeason = useSelector((state) =>
<div className="d-flex flex-column flex-lg-row mb-3 pb-3 border-bottom border-light"> state.showStore.getIn(["show", "tracked_season"], null)
<EpisodeThumb url={props.data.get("thumb")} /> );
<div className="d-flex flex-column"> const trackedEpisode = useSelector((state) =>
<Title state.showStore.getIn(["show", "tracked_episode"], null)
title={`${props.data.get("episode")}. ${props.data.get("title")}`} );
wishlisted={isEpisodeWishlisted(
props.data, return (
props.trackedSeason, <div className="d-flex flex-column flex-lg-row mb-3 pb-3 border-bottom border-light">
props.trackedEpisode <EpisodeThumb url={props.data.get("thumb")} />
)} <div className="d-flex flex-column">
wishlist={() => <Title
props.showWishlistToggle( title={`${props.data.get("episode")}. ${props.data.get("title")}`}
isEpisodeWishlisted(props.data), wishlisted={isEpisodeWishlisted(
props.data.get("show_imdb_id"), 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("season"),
props.data.get("episode") props.data.get("episode")
) )}
} url={props.data.get("polochon_url")}
/>
<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
subtitles={props.data.get("subtitles")} 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>
</div> );
); };
episode.propTypes = { Episode.propTypes = {
data: PropTypes.instanceOf(Map).isRequired, data: PropTypes.instanceOf(Map).isRequired,
trackedSeason: PropTypes.number, showName: PropTypes.string.isRequired,
trackedEpisode: PropTypes.number,
showName: PropTypes.string.isRequired,
showWishlistToggle: PropTypes.func,
}; };
export const Episode = connect(mapStateToProps, { showWishlistToggle })(
episode
);

102
frontend/js/components/shows/details/header.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Map } from "immutable"; import { Map } from "immutable";
import { connect } from "react-redux"; import { useDispatch } from "react-redux";
import { isWishlisted } from "../../../utils"; import { isWishlisted } from "../../../utils";
@ -15,56 +15,58 @@ import { TrackingLabel } from "../../details/tracking";
import { ImdbBadge } from "../../buttons/imdb"; import { ImdbBadge } from "../../buttons/imdb";
export const header = (props) => ( export const Header = (props) => {
<div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3"> const dispatch = useDispatch();
<div className="d-flex flex-column flex-md-row"> return (
<div className="d-flex justify-content-center"> <div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3">
<img <div className="d-flex flex-column flex-md-row">
className="overflow-hidden object-fit-cover" <div className="d-flex justify-content-center">
src={props.data.get("poster_url")} <img
/> className="overflow-hidden object-fit-cover"
</div> src={props.data.get("poster_url")}
<div> />
<div className="card-body"> </div>
<p className="card-title"> <div>
<Title <div className="card-body">
title={props.data.get("title")} <p className="card-title">
wishlisted={isWishlisted(props.data)} <Title
wishlist={() => title={props.data.get("title")}
props.showWishlistToggle( wishlisted={isWishlisted(props.data)}
isWishlisted(props.data), wishlist={() =>
props.data.get("imdb_id") 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"> </p>
<Rating rating={props.data.get("rating")} /> <p className="card-text">
</p> <ReleaseDate date={props.data.get("year")} />
<p className="card-text"> </p>
<ImdbBadge imdbId={props.data.get("imdb_id")} /> <p className="card-text">
</p> <Rating rating={props.data.get("rating")} />
<p className="card-text"> </p>
<TrackingLabel <p className="card-text">
inLibrary={false} <ImdbBadge imdbId={props.data.get("imdb_id")} />
trackedSeason={props.data.get("tracked_season")} </p>
trackedEpisode={props.data.get("tracked_episode")} <p className="card-text">
/> <TrackingLabel
</p> inLibrary={false}
<p className="card-text"> trackedSeason={props.data.get("tracked_season")}
<Plot plot={props.data.get("plot")} /> trackedEpisode={props.data.get("tracked_episode")}
</p> />
</p>
<p className="card-text">
<Plot plot={props.data.get("plot")} />
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> );
); };
header.propTypes = { Header.propTypes = {
data: PropTypes.instanceOf(Map), data: PropTypes.instanceOf(Map),
showWishlistToggle: PropTypes.func,
}; };
export const Header = connect(null, { showWishlistToggle })(header);

32
frontend/js/components/shows/details/subtitlesButton.js
View File

@ -1,39 +1,37 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { List } from "immutable"; import { List } from "immutable";
import { connect } from "react-redux"; import { useDispatch } from "react-redux";
import { searchEpisodeSubtitles } from "../../../actions/subtitles"; import { searchEpisodeSubtitles } from "../../../actions/subtitles";
import { SubtitlesButton } from "../../buttons/subtitles"; import { SubtitlesButton } from "../../buttons/subtitles";
const episodeSubtitlesButton = ({ export const EpisodeSubtitlesButton = ({
inLibrary, inLibrary,
imdbId, imdbId,
season, season,
episode, episode,
searching, searching,
searchEpisodeSubtitles,
subtitles, subtitles,
}) => ( }) => {
<SubtitlesButton const dispatch = useDispatch();
subtitles={subtitles}
inLibrary={inLibrary}
searching={searching}
search={() => searchEpisodeSubtitles(imdbId, season, episode)}
/>
);
episodeSubtitlesButton.propTypes = { return (
<SubtitlesButton
subtitles={subtitles}
inLibrary={inLibrary}
searching={searching}
search={() => dispatch(searchEpisodeSubtitles(imdbId, season, episode))}
/>
);
};
EpisodeSubtitlesButton.propTypes = {
inLibrary: PropTypes.bool, inLibrary: PropTypes.bool,
searching: PropTypes.bool, searching: PropTypes.bool,
imdbId: PropTypes.string, imdbId: PropTypes.string,
season: PropTypes.number, season: PropTypes.number,
episode: PropTypes.number, episode: PropTypes.number,
searchEpisodeSubtitles: PropTypes.func,
subtitles: PropTypes.instanceOf(List), subtitles: PropTypes.instanceOf(List),
}; };
export const EpisodeSubtitlesButton = connect(null, { searchEpisodeSubtitles })(
episodeSubtitlesButton
);

37
frontend/js/components/shows/details/torrentsButton.js
View File

@ -1,40 +1,39 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { connect } from "react-redux"; import { useDispatch } from "react-redux";
import { List } from "immutable"; import { List } from "immutable";
import { getEpisodeDetails } from "../../../actions/shows"; import { getEpisodeDetails } from "../../../actions/shows";
import { TorrentsButton } from "../../buttons/torrents"; import { TorrentsButton } from "../../buttons/torrents";
import { prettyEpisodeName } from "../../../utils"; import { prettyEpisodeName } from "../../../utils";
const episodeTorrentsButton = ({ export const EpisodeTorrentsButton = ({
torrents, torrents,
imdbId, imdbId,
season, season,
episode, episode,
showName, showName,
searching, searching,
getEpisodeDetails, }) => {
}) => ( const dispatch = useDispatch();
<TorrentsButton
torrents={torrents} return (
searching={searching} <TorrentsButton
search={() => getEpisodeDetails(imdbId, season, episode)} torrents={torrents}
url={`#/torrents/search/shows/${encodeURI( searching={searching}
prettyEpisodeName(showName, season, episode) search={() => dispatch(getEpisodeDetails(imdbId, season, episode))}
)}`} url={`#/torrents/search/shows/${encodeURI(
/> prettyEpisodeName(showName, season, episode)
); )}`}
episodeTorrentsButton.propTypes = { />
);
};
EpisodeTorrentsButton.propTypes = {
torrents: PropTypes.instanceOf(List), torrents: PropTypes.instanceOf(List),
showName: PropTypes.string.isRequired, showName: PropTypes.string.isRequired,
imdbId: PropTypes.string.isRequired, imdbId: PropTypes.string.isRequired,
episode: PropTypes.number.isRequired, episode: PropTypes.number.isRequired,
season: PropTypes.number.isRequired, season: PropTypes.number.isRequired,
searching: PropTypes.bool.isRequired, searching: PropTypes.bool.isRequired,
getEpisodeDetails: PropTypes.func.isRequired,
}; };
export const EpisodeTorrentsButton = connect(null, { getEpisodeDetails })(
episodeTorrentsButton
);