diff --git a/frontend/js/components/list/explorerOptions.js b/frontend/js/components/list/explorerOptions.js index 2a0527e..7ce08dc 100644 --- a/frontend/js/components/list/explorerOptions.js +++ b/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 }) => { - // Should this componennt be displayed +const ExplorerOptions = ({ + 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); diff --git a/frontend/js/components/list/posters.js b/frontend/js/components/list/posters.js index 2ddb70c..f0012e2 100644 --- a/frontend/js/components/list/posters.js +++ b/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} /> { @@ -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, diff --git a/frontend/js/components/movies/route.js b/frontend/js/components/movies/route.js index f9e5817..d3e9947 100644 --- a/frontend/js/components/movies/route.js +++ b/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) => ({ - isExplorerFetched: state.movieStore.get("exploreOptions").size !== 0, -}); -const mapDispatchToProps = { fetchMovies, getMovieExploreOptions }; - -const MoviesRoute = ({ - component: Component, - isExplorerFetched, - fetchMovies, - getMovieExploreOptions, - ...otherProps -}) => { +const MoviesRoute = ({ component: Component, fetchMovies, ...otherProps }) => { return ( { @@ -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); diff --git a/frontend/js/components/shows/route.js b/frontend/js/components/shows/route.js index 5db1311..35e88a7 100644 --- a/frontend/js/components/shows/route.js +++ b/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 { - fetchShows, - fetchShowDetails, - getShowExploreOptions, -} from "../../actions/shows"; - -const mapStateToProps = (state) => ({ - isExplorerFetched: state.showsStore.get("exploreOptions").size !== 0, -}); -const mapDispatchToProps = { - fetchShows, - fetchShowDetails, - getShowExploreOptions, -}; +import { fetchShows, fetchShowDetails } from "../../actions/shows"; 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);