Add a button to refresh a show

In the show list and in the show details.

frontend/js/components/buttons/refresh.js

@@ -0,0 +1,21 @@
+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 from "react";
+import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { Plot } from "../../details/plot";
@@ -8,27 +8,35 @@ import { Title } from "../../details/title";
 import { TrackingLabel } from "../../details/tracking";
 
 import { ImdbBadge } from "../../buttons/imdb";
+import { Refresh } from "../../buttons/refresh";
 
-import { showWishlistToggle } from "../../../actions/shows";
+import {
+  showWishlistToggle,
+  fetchShowDetails,
+  getShowDetails,
+} from "../../../actions/shows";
 
 export const Header = () => {
   const dispatch = useDispatch();
-  const posterUrl = useSelector((state) => state.show.show.poster_url);
+  const {
-  const title = useSelector((state) => state.show.show.title);
+    poster_url: posterUrl,
-  const imdbId = useSelector((state) => state.show.show.imdb_id);
+    title,
-  const year = useSelector((state) => state.show.show.year);
+    imdb_id: imdbId,
-  const rating = useSelector((state) => state.show.show.rating);
+    year,
-  const plot = useSelector((state) => state.show.show.plot);
+    rating,
+    plot,
+    tracked_season: trackedSeason,
+    tracked_episode: trackedEpisode,
+    fetchingDetails,
+  } = useSelector((state) => state.show.show);
 
-  const trackedSeason = useSelector((state) => state.show.show.tracked_season);
+  useEffect(() => {
-  const trackedEpisode = useSelector(
+    if (fetchingDetails === false) {
-    (state) => state.show.show.tracked_episode
+      dispatch(fetchShowDetails(imdbId));
-  );
+    }
-  const wishlisted = useSelector(
+  }, [fetchingDetails, imdbId, dispatch]);
-    (state) =>
+
-      state.show.show.tracked_season !== null &&
+  const wishlisted = trackedSeason !== null && trackedEpisode !== null;
-      state.show.show.tracked_episode !== null
-  );
 
   return (
     <div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3">
@@ -55,6 +63,11 @@ 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,6 +12,7 @@ import {
 
 import ListDetails from "../list/details";
 import ListPosters from "../list/posters";
+import { Refresh } from "../buttons/refresh";
 
 const fetchUrl = (match) => {
   switch (match.path) {
@@ -98,17 +99,10 @@ const ShowList = ({ match, history }) => {
             <i className="fa fa-external-link mr-1" />
             Details
           </button>
-          <button
+          <Refresh
             onClick={() => dispatch(getShowDetails(selectedShow.imdb_id))}
-            className="btn btn-secondary btn-sm w-md-100 m-1"
+            loading={selectedShow.fetchingDetails}
-          >
+          />
-            <i
-              className={`fa ${
-                selectedShow.fetchingDetails ? "fa-spin" : ""
-              } fa-refresh mr-1`}
-            />
-            Refresh
-          </button>
         </span>
       </ListDetails>
     </div>

frontend/js/reducers/show.js

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