Use redux hooks on shows components

2020-04-03 01:46:25 +02:00 · 2020-04-03 01:46:25 +02:00 · d998d2838d
commit d998d2838d
parent 27f5c5d558
4 changed files with 164 additions and 164 deletions
--- 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) => (
-  <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
-);
--- 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);
--- 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
-);
--- 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
-);