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 title = useSelector((state) => state.show.show.title);
-  const imdbId = useSelector((state) => state.show.show.imdb_id);
-  const year = useSelector((state) => state.show.show.year);
-  const rating = useSelector((state) => state.show.show.rating);
-  const plot = useSelector((state) => state.show.show.plot);
+  const {
+    poster_url: posterUrl,
+    title,
+    imdb_id: imdbId,
+    year,
+    rating,
+    plot,
+    tracked_season: trackedSeason,
+    tracked_episode: trackedEpisode,
+    fetchingDetails,
+  } = useSelector((state) => state.show.show);
 
-  const trackedSeason = useSelector((state) => state.show.show.tracked_season);
-  const trackedEpisode = useSelector(
-    (state) => state.show.show.tracked_episode
-  );
-  const wishlisted = useSelector(
-    (state) =>
-      state.show.show.tracked_season !== null &&
-      state.show.show.tracked_episode !== null
-  );
+  useEffect(() => {
+    if (fetchingDetails === false) {
+      dispatch(fetchShowDetails(imdbId));
+    }
+  }, [fetchingDetails, imdbId, dispatch]);
+
+  const wishlisted = trackedSeason !== null && trackedEpisode !== 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

@@ -7,10 +7,12 @@ import {
   selectShow,
   showWishlistToggle,
   getShowExploreOptions,
+  getShowDetails,
 } from "../../actions/shows";
 
 import ListDetails from "../list/details";
 import ListPosters from "../list/posters";
+import { Refresh } from "../buttons/refresh";
 
 const fetchUrl = (match) => {
   switch (match.path) {
@@ -92,11 +94,15 @@ const ShowList = ({ match, history }) => {
         <span>
           <button
             onClick={() => showDetails(selectedShow.imdb_id)}
-            className="btn btn-primary btn-sm w-md-100"
+            className="btn btn-primary btn-sm w-md-100 m-1"
           >
             <i className="fa fa-external-link mr-1" />
             Details
           </button>
+          <Refresh
+            onClick={() => dispatch(getShowDetails(selectedShow.imdb_id))}
+            loading={selectedShow.fetchingDetails}
+          />
         </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":
+        if (draft.shows.get(action.payload.main.imdbId)) {
           draft.shows.get(action.payload.main.imdbId).fetchingDetails = true;
+        }
         break;
 
       case "SHOW_GET_DETAILS_FULFILLED":