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 }; const ShowsRoute = ({ component: Component, isExplorerFetched, fetchShows, fetchShowDetails, getShowExploreOptions, ...otherProps }) => { return ( { let fetchUrl = ""; switch (props.match.path) { case "/shows/polochon": fetchUrl = "/shows/polochon"; break; case "/shows/wishlist": fetchUrl = "/wishlist/shows"; break; case "/shows/search/:search": 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) + "&category=" + encodeURI(props.match.params.category); break; case "/shows/details/:imdbId": fetchShowDetails(props.match.params.imdbId); fetchUrl = "" } if (fetchUrl != "") { fetchShows(fetchUrl); } return }} /> ) } ShowsRoute.propTypes = { component: PropTypes.func, 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);