Add a button to refresh a show

frontend/js/components/buttons/refresh.js

@@ -1,21 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-export const Refresh = ({ onClick, loading, kind }) => {
-  return (
-    <button onClick={onClick} className={`btn btn-${kind} btn-sm w-md-100 m-1`}>
-      <i className={`fa ${loading ? "fa-spin" : ""} fa-refresh mr-1`} />
-      Refresh
-    </button>
-  );
-};
-Refresh.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  loading: PropTypes.bool.isRequired,
-  kind: PropTypes.string.isRequired,
-};
-Refresh.defaultProps = {
-  onClick: () => {},
-  loading: false,
-  kind: "secondary",
-};

frontend/js/components/shows/details/header.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { Plot } from "../../details/plot";
@@ -8,35 +8,27 @@ import { Title } from "../../details/title";
 import { TrackingLabel } from "../../details/tracking";
 
 import { ImdbBadge } from "../../buttons/imdb";
-import { Refresh } from "../../buttons/refresh";
 
-import {
+import { showWishlistToggle } from "../../../actions/shows";
-  showWishlistToggle,
-  fetchShowDetails,
-  getShowDetails,
-} from "../../../actions/shows";
 
 export const Header = () => {
   const dispatch = useDispatch();
-  const {
+  const posterUrl = useSelector((state) => state.show.show.poster_url);
-    poster_url: posterUrl,
+  const title = useSelector((state) => state.show.show.title);
-    title,
+  const imdbId = useSelector((state) => state.show.show.imdb_id);
-    imdb_id: imdbId,
+  const year = useSelector((state) => state.show.show.year);
-    year,
+  const rating = useSelector((state) => state.show.show.rating);
-    rating,
+  const plot = useSelector((state) => state.show.show.plot);
-    plot,
-    tracked_season: trackedSeason,
-    tracked_episode: trackedEpisode,
-    fetchingDetails,
-  } = useSelector((state) => state.show.show);
 
-  useEffect(() => {
+  const trackedSeason = useSelector((state) => state.show.show.tracked_season);
-    if (fetchingDetails === false) {
+  const trackedEpisode = useSelector(
-      dispatch(fetchShowDetails(imdbId));
+    (state) => state.show.show.tracked_episode
-    }
+  );
-  }, [fetchingDetails, imdbId, dispatch]);
+  const wishlisted = useSelector(
-
+    (state) =>
-  const wishlisted = trackedSeason !== null && trackedEpisode !== null;
+      state.show.show.tracked_season !== null &&
+      state.show.show.tracked_episode !== null
+  );
 
   return (
     <div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3">
@@ -63,11 +55,6 @@ export const Header = () => {
             </p>
             <p className="card-text">
               <ImdbBadge imdbId={imdbId} />
-              <Refresh
-                onClick={() => dispatch(getShowDetails(imdbId))}
-                loading={fetchingDetails}
-                kind="info"
-              />
             </p>
             <p className="card-text">
               <TrackingLabel

frontend/js/components/shows/list.js

@@ -12,7 +12,6 @@ import {
 
 import ListDetails from "../list/details";
 import ListPosters from "../list/posters";
-import { Refresh } from "../buttons/refresh";
 
 const fetchUrl = (match) => {
   switch (match.path) {
@@ -99,10 +98,17 @@ const ShowList = ({ match, history }) => {
             <i className="fa fa-external-link mr-1" />
             Details
           </button>
-          <Refresh
+          <button
             onClick={() => dispatch(getShowDetails(selectedShow.imdb_id))}
-            loading={selectedShow.fetchingDetails}
+            className="btn btn-secondary btn-sm w-md-100 m-1"
-          />
+          >
+            <i
+              className={`fa ${
+                selectedShow.fetchingDetails ? "fa-spin" : ""
+              } fa-refresh mr-1`}
+            />
+            Refresh
+          </button>
         </span>
       </ListDetails>
     </div>

frontend/js/reducers/show.js

@@ -68,14 +68,6 @@ export default (state = defaultState, action) =>
         break;
       }
 
-      case "SHOW_GET_DETAILS_PENDING":
-        draft.show.fetchingDetails = true;
-        break;
-
-      case "SHOW_GET_DETAILS_FULFILLED":
-        draft.show.fetchingDetails = false;
-        break;
-
       case "SHOW_UPDATE_STORE_WISHLIST":
         // TODO: check with we give the imdb in the payload
         draft.show.tracked_season = action.payload.season; // eslint-disable-line camelcase

frontend/js/reducers/shows.js

@@ -46,9 +46,7 @@ export default (state = defaultState, action) =>
         break;
 
       case "SHOW_GET_DETAILS_PENDING":
-        if (draft.shows.get(action.payload.main.imdbId)) {
+        draft.shows.get(action.payload.main.imdbId).fetchingDetails = true;
-          draft.shows.get(action.payload.main.imdbId).fetchingDetails = true;
-        }
         break;
 
       case "SHOW_GET_DETAILS_FULFILLED":