Use redux hooks on shows components
This commit is contained in:
parent
27f5c5d558
commit
d998d2838d
@ -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) => (
|
||||
<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,
|
||||
props.trackedSeason,
|
||||
props.trackedEpisode
|
||||
)}
|
||||
wishlist={() =>
|
||||
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
|
||||
);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
);
|
||||
|
||||
@ -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
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user