Move the fetch of the explorer options to its own component

frontend/js/components/list/explorerOptions.js

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { withRouter } from "react-router-dom";
 import { Form, FormGroup, FormControl, FormLabel } from "react-bootstrap";
 
-const ExplorerOptions = ({ display, params, options, type, history }) => {
+const ExplorerOptions = ({
-  // Should this componennt be displayed
+  display,
+  params,
+  options,
+  type,
+  history,
+  fetch,
+}) => {
+  useEffect(() => {
+    fetch();
+  }, [fetch]);
+
   if (!display) {
     return null;
   }
@@ -103,6 +113,7 @@ ExplorerOptions.propTypes = {
   type: PropTypes.string,
   options: PropTypes.object,
   display: PropTypes.bool,
+  fetch: PropTypes.func,
 };
 
 export default withRouter(ExplorerOptions);

frontend/js/components/list/posters.js

@@ -55,6 +55,7 @@ const ListPosters = (props) => {
         type={props.type}
         display={displayExplorerOptions}
         params={props.params}
+        fetch={props.exploreFetchOptions}
         options={props.exploreOptions}
       />
       <Posters
@@ -81,6 +82,7 @@ ListPosters.propTypes = {
   placeHolder: PropTypes.string.isRequired,
   updateFilter: PropTypes.func.isRequired,
   filter: PropTypes.string,
+  exploreFetchOptions: PropTypes.func,
 };
 
 export default ListPosters;

frontend/js/components/movies/list.js

@@ -6,6 +6,8 @@ import {
   selectMovie,
   updateFilter,
   movieWishlistToggle,
+  fetchMovies,
+  getMovieExploreOptions,
 } from "../../actions/movies";
 
 import ListDetails from "../list/details";
@@ -31,6 +33,8 @@ const mapDispatchToProps = {
   selectMovie,
   updateFilter,
   movieWishlistToggle,
+  fetchMovies,
+  getMovieExploreOptions,
 };
 
 const MovieList = (props) => {
@@ -45,6 +49,7 @@ const MovieList = (props) => {
         data={props.movies}
         type="movies"
         placeHolder="Filter movies..."
+        exploreFetchOptions={props.getMovieExploreOptions}
         exploreOptions={props.exploreOptions}
         selectedImdbId={props.selectedImdbId}
         updateFilter={props.updateFilter}
@@ -96,6 +101,8 @@ MovieList.propTypes = {
   selectedImdbId: PropTypes.string,
   filter: PropTypes.string,
   loading: PropTypes.bool,
+  fetchMovies: PropTypes.func,
+  getMovieExploreOptions: PropTypes.func,
   updateFilter: PropTypes.func,
   movieWishlistToggle: PropTypes.func,
   selectMovie: PropTypes.func,

frontend/js/components/movies/route.js

@@ -2,20 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Route } from "react-router-dom";
 import { connect } from "react-redux";
-import { fetchMovies, getMovieExploreOptions } from "../../actions/movies";
+import { fetchMovies } from "../../actions/movies";
 
-const mapStateToProps = (state) => ({
+const MoviesRoute = ({ component: Component, fetchMovies, ...otherProps }) => {
-  isExplorerFetched: state.movieStore.get("exploreOptions").size !== 0,
-});
-const mapDispatchToProps = { fetchMovies, getMovieExploreOptions };
-
-const MoviesRoute = ({
-  component: Component,
-  isExplorerFetched,
-  fetchMovies,
-  getMovieExploreOptions,
-  ...otherProps
-}) => {
   return (
     <Route
       {...otherProps}
@@ -32,9 +21,6 @@ const MoviesRoute = ({
             fetchUrl = "/movies/search/" + props.match.params.search;
             break;
           case "/movies/explore/:source/:category":
-            if (!isExplorerFetched) {
-              getMovieExploreOptions();
-            }
             fetchUrl =
               "/movies/explore?source=" +
               encodeURI(props.match.params.source) +
@@ -57,9 +43,8 @@ const MoviesRoute = ({
 MoviesRoute.propTypes = {
   component: PropTypes.object,
   match: PropTypes.object,
-  isExplorerFetched: PropTypes.bool.isRequired,
   fetchMovies: PropTypes.func.isRequired,
   getMovieExploreOptions: PropTypes.func.isRequired,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(MoviesRoute);
+export default connect(null, { fetchMovies })(MoviesRoute);

frontend/js/components/shows/list.js

@@ -7,6 +7,7 @@ import {
   showWishlistToggle,
   getShowDetails,
   updateFilter,
+  getShowExploreOptions,
 } from "../../actions/shows";
 
 import { isWishlisted } from "../../utils";
@@ -28,6 +29,7 @@ const mapDispatchToProps = {
   showWishlistToggle,
   getShowDetails,
   updateFilter,
+  getShowExploreOptions,
 };
 
 const ShowList = (props) => {
@@ -47,6 +49,7 @@ const ShowList = (props) => {
         type="shows"
         placeHolder="Filter shows..."
         exploreOptions={props.exploreOptions}
+        exploreFetchOptions={props.getShowExploreOptions}
         updateFilter={props.updateFilter}
         selectedImdbId={props.selectedImdbId}
         filter={props.filter}
@@ -91,5 +94,6 @@ ShowList.propTypes = {
   selectShow: PropTypes.func,
   getShowDetails: PropTypes.func,
   updateFilter: PropTypes.func,
+  getShowExploreOptions: PropTypes.func,
 };
 export default connect(mapStateToProps, mapDispatchToProps)(ShowList);

frontend/js/components/shows/route.js

@@ -2,27 +2,12 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Route } from "react-router-dom";
 import { connect } from "react-redux";
-import {
+import { fetchShows, fetchShowDetails } from "../../actions/shows";
-  fetchShows,
-  fetchShowDetails,
-  getShowExploreOptions,
-} from "../../actions/shows";
-
-const mapStateToProps = (state) => ({
-  isExplorerFetched: state.showsStore.get("exploreOptions").size !== 0,
-});
-const mapDispatchToProps = {
-  fetchShows,
-  fetchShowDetails,
-  getShowExploreOptions,
-};
 
 const ShowsRoute = ({
   component: Component,
-  isExplorerFetched,
   fetchShows,
   fetchShowDetails,
-  getShowExploreOptions,
   ...otherProps
 }) => {
   return (
@@ -41,9 +26,6 @@ const ShowsRoute = ({
             fetchUrl = "/shows/search/" + props.match.params.search;
             break;
           case "/shows/explore/:source/:category":
-            if (!isExplorerFetched) {
-              getShowExploreOptions();
-            }
             fetchUrl =
               "/shows/explore?source=" +
               encodeURI(props.match.params.source) +
@@ -67,10 +49,11 @@ const ShowsRoute = ({
 ShowsRoute.propTypes = {
   component: PropTypes.object,
   match: PropTypes.object,
-  isExplorerFetched: PropTypes.bool.isRequired,
   fetchShows: PropTypes.func.isRequired,
   fetchShowDetails: PropTypes.func.isRequired,
-  getShowExploreOptions: PropTypes.func.isRequired,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ShowsRoute);
+export default connect(null, {
+  fetchShows,
+  fetchShowDetails,
+})(ShowsRoute);