Use redux hooks on shows components

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,12 +24,17 @@ 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) => (
+  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">
@@ -37,16 +42,18 @@ const episode = (props) => (
           title={`${props.data.get("episode")}. ${props.data.get("title")}`}
           wishlisted={isEpisodeWishlisted(
             props.data,
-          props.trackedSeason,
-          props.trackedEpisode
+            trackedSeason,
+            trackedEpisode
           )}
           wishlist={() =>
-          props.showWishlistToggle(
+            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")} />
@@ -97,14 +104,8 @@ const episode = (props) => (
       </div>
     </div>
   );
-episode.propTypes = {
-  data: PropTypes.instanceOf(Map).isRequired,
-  trackedSeason: PropTypes.number,
-  trackedEpisode: PropTypes.number,
-  showName: PropTypes.string.isRequired,
-  showWishlistToggle: PropTypes.func,
 };
-
-export const Episode = connect(mapStateToProps, { showWishlistToggle })(
-  episode
-);
+Episode.propTypes = {
+  data: PropTypes.instanceOf(Map).isRequired,
+  showName: PropTypes.string.isRequired,
+};

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,7 +15,9 @@ import { TrackingLabel } from "../../details/tracking";
 
 import { ImdbBadge } from "../../buttons/imdb";
 
-export const header = (props) => (
+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">
@@ -31,10 +33,12 @@ export const header = (props) => (
                 title={props.data.get("title")}
                 wishlisted={isWishlisted(props.data)}
                 wishlist={() =>
-                props.showWishlistToggle(
+                  dispatch(
+                    showWishlistToggle(
                       isWishlisted(props.data),
                       props.data.get("imdb_id")
                     )
+                  )
                 }
               />
             </p>
@@ -62,9 +66,7 @@ export const header = (props) => (
       </div>
     </div>
   );
-header.propTypes = {
-  data: PropTypes.instanceOf(Map),
-  showWishlistToggle: PropTypes.func,
 };
-
-export const Header = connect(null, { showWishlistToggle })(header);
+Header.propTypes = {
+  data: PropTypes.instanceOf(Map),
+};

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,
-}) => (
+}) => {
+  const dispatch = useDispatch();
+
+  return (
     <SubtitlesButton
       subtitles={subtitles}
       inLibrary={inLibrary}
       searching={searching}
-    search={() => searchEpisodeSubtitles(imdbId, season, episode)}
+      search={() => dispatch(searchEpisodeSubtitles(imdbId, season, episode))}
     />
   );
+};
 
-episodeSubtitlesButton.propTypes = {
+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
-);

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,
-}) => (
+}) => {
+  const dispatch = useDispatch();
+
+  return (
     <TorrentsButton
       torrents={torrents}
       searching={searching}
-    search={() => getEpisodeDetails(imdbId, 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),
   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
-);