Let the show fetch its own details

frontend/js/app.js

@@ -81,11 +81,7 @@ const App = () => (
           exact
           component={ShowList}
         />
-        <ShowsRoute
-          path="/shows/details/:imdbId"
-          exact
-          component={ShowDetails}
-        />
+        <Route path="/shows/details/:imdbId" exact component={ShowDetails} />
         <Route render={() => <Redirect to="/movies/explore/yts/seeds" />} />
       </Switch>
     </Container>

frontend/js/components/shows/details.js

@@ -1,7 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { Map } from "immutable";
-import { connect } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 
 import Loader from "../loader/loader";
 
@@ -9,12 +8,17 @@ import { Fanart } from "./details/fanart";
 import { Header } from "./details/header";
 import { SeasonsList } from "./details/seasons";
 
-const mapStateToProps = (state) => ({
-  loading: state.showStore.get("loading"),
-  show: state.showStore.get("show"),
-});
+import { fetchShowDetails } from "../../actions/shows";
+
+export const ShowDetails = ({ match }) => {
+  const dispatch = useDispatch();
+  const loading = useSelector((state) => state.showStore.get("loading"));
+  const show = useSelector((state) => state.showStore.get("show"));
+
+  useEffect(() => {
+    dispatch(fetchShowDetails(match.params.imdbId));
+  }, [dispatch, match]);
 
-const showDetails = ({ show, loading }) => {
   if (loading === true) {
     return <Loader />;
   }
@@ -29,8 +33,6 @@ const showDetails = ({ show, loading }) => {
     </React.Fragment>
   );
 };
-showDetails.propTypes = {
-  loading: PropTypes.bool,
-  show: PropTypes.instanceOf(Map),
+ShowDetails.propTypes = {
+  match: PropTypes.object.isRequired,
 };
-export const ShowDetails = connect(mapStateToProps)(showDetails);

frontend/js/components/shows/route.js

@@ -2,14 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Route } from "react-router-dom";
 import { connect } from "react-redux";
-import { fetchShows, fetchShowDetails } from "../../actions/shows";
+import { fetchShows } from "../../actions/shows";
 
-const ShowsRoute = ({
-  component: Component,
-  fetchShows,
-  fetchShowDetails,
-  ...otherProps
-}) => {
+const ShowsRoute = ({ component: Component, fetchShows, ...otherProps }) => {
   return (
     <Route
       {...otherProps}
@@ -32,9 +27,6 @@ const ShowsRoute = ({
               "&category=" +
               encodeURI(props.match.params.category);
             break;
-          case "/shows/details/:imdbId":
-            fetchShowDetails(props.match.params.imdbId);
-            fetchUrl = "";
         }
 
         if (fetchUrl != "") {
@@ -50,10 +42,8 @@ ShowsRoute.propTypes = {
   component: PropTypes.object,
   match: PropTypes.object,
   fetchShows: PropTypes.func.isRequired,
-  fetchShowDetails: PropTypes.func.isRequired,
 };
 
 export default connect(null, {
   fetchShows,
-  fetchShowDetails,
 })(ShowsRoute);