Remove the custom routes for movies and shows

frontend/js/app.js

@@ -28,12 +28,10 @@ import { AdminPanel } from "./components/admins/panel";
 import { Notifications } from "./components/notifications/notifications";
 import Alert from "./components/alerts/alert";
 import MovieList from "./components/movies/list";
-import MoviesRoute from "./components/movies/route";
 import NavBar from "./components/navbar";
 import WsHandler from "./components/websocket";
 import { ShowDetails } from "./components/shows/details";
 import ShowList from "./components/shows/list";
-import ShowsRoute from "./components/shows/route";
 import TorrentList from "./components/torrents/list";
 import TorrentSearch from "./components/torrents/search";
 import UserActivation from "./components/users/activation";
@@ -61,22 +59,18 @@ const App = () => (
           exact
           component={TorrentSearch}
         />
-        <MoviesRoute path="/movies/polochon" exact component={MovieList} />
-        <MoviesRoute path="/movies/wishlist" exact component={MovieList} />
-        <MoviesRoute
-          path="/movies/search/:search"
-          exact
-          component={MovieList}
-        />
-        <MoviesRoute
+        <Route path="/movies/polochon" exact component={MovieList} />
+        <Route path="/movies/wishlist" exact component={MovieList} />
+        <Route path="/movies/search/:search" exact component={MovieList} />
+        <Route
           path="/movies/explore/:source/:category"
           exact
           component={MovieList}
         />
-        <ShowsRoute path="/shows/polochon" exact component={ShowList} />
-        <ShowsRoute path="/shows/wishlist" exact component={ShowList} />
-        <ShowsRoute path="/shows/search/:search" exact component={ShowList} />
-        <ShowsRoute
+        <Route path="/shows/polochon" exact component={ShowList} />
+        <Route path="/shows/wishlist" exact component={ShowList} />
+        <Route path="/shows/search/:search" exact component={ShowList} />
+        <Route
           path="/shows/explore/:source/:category"
           exact
           component={ShowList}

frontend/js/components/movies/list.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import { OrderedMap, Map } from "immutable";
-import { connect } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { Map } from "immutable";
+
 import {
   selectMovie,
   updateFilter,
@@ -20,57 +21,86 @@ import { ShowMore } from "../buttons/showMore";
 import { MovieSubtitlesButton } from "./subtitlesButton";
 import { MovieTorrentsButton } from "./torrentsButton";
 
-function mapStateToProps(state) {
-  return {
-    loading: state.movieStore.get("loading"),
-    movies: state.movieStore.get("movies"),
-    filter: state.movieStore.get("filter"),
-    selectedImdbId: state.movieStore.get("selectedImdbId"),
-    exploreOptions: state.movieStore.get("exploreOptions"),
-  };
-}
-const mapDispatchToProps = {
-  selectMovie,
-  updateFilter,
-  movieWishlistToggle,
-  fetchMovies,
-  getMovieExploreOptions,
+const fetchUrl = (match) => {
+  switch (match.path) {
+    case "/movies/polochon":
+      return "/movies/polochon";
+    case "/movies/wishlist":
+      return "/wishlist/movies";
+    case "/movies/search/:search":
+      return "/movies/search/" + match.params.search;
+    case "/movies/explore/:source/:category":
+      return (
+        "/movies/explore?source=" +
+        encodeURI(match.params.source) +
+        "&category=" +
+        encodeURI(match.params.category)
+      );
+    default:
+      return null;
+  }
 };
 
-const MovieList = (props) => {
+const MovieList = ({ match }) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const url = fetchUrl(match);
+    if (url !== null) {
+      dispatch(fetchMovies(url));
+    }
+  }, [dispatch, match]);
+
+  const loading = useSelector((state) => state.movieStore.get("loading"));
+  const movies = useSelector((state) => state.movieStore.get("movies"));
+  const filter = useSelector((state) => state.movieStore.get("filter"));
+  const selectedImdbId = useSelector((state) =>
+    state.movieStore.get("selectedImdbId")
+  );
+  const exploreOptions = useSelector((state) =>
+    state.movieStore.get("exploreOptions")
+  );
+
   let selectedMovie = Map();
-  if (props.movies !== undefined && props.movies.has(props.selectedImdbId)) {
-    selectedMovie = props.movies.get(props.selectedImdbId);
+  if (movies !== undefined && movies.has(selectedImdbId)) {
+    selectedMovie = movies.get(selectedImdbId);
   }
 
+  const selectFunc = useCallback((id) => dispatch(selectMovie(id)), [dispatch]);
+  const filterFunc = useCallback((filter) => dispatch(updateFilter(filter)), [
+    dispatch,
+  ]);
+  const exploreFetchOptions = useCallback(
+    () => dispatch(getMovieExploreOptions()),
+    [dispatch]
+  );
+
   return (
     <div className="row">
       <ListPosters
-        data={props.movies}
+        data={movies}
         type="movies"
         placeHolder="Filter movies..."
-        exploreFetchOptions={props.getMovieExploreOptions}
-        exploreOptions={props.exploreOptions}
-        selectedImdbId={props.selectedImdbId}
-        updateFilter={props.updateFilter}
-        filter={props.filter}
-        onClick={props.selectMovie}
-        onDoubleClick={function () {
-          return;
-        }}
-        onKeyEnter={function () {
-          return;
-        }}
-        params={props.match.params}
-        loading={props.loading}
+        exploreFetchOptions={exploreFetchOptions}
+        exploreOptions={exploreOptions}
+        selectedImdbId={selectedImdbId}
+        updateFilter={filterFunc}
+        filter={filter}
+        onClick={selectFunc}
+        onDoubleClick={() => {}}
+        onKeyEnter={() => {}}
+        params={match.params}
+        loading={loading}
       />
       <ListDetails
         data={selectedMovie}
-        loading={props.loading}
+        loading={loading}
         wishlist={() =>
-          props.movieWishlistToggle(
-            selectedMovie.get("imdb_id"),
-            isWishlisted(selectedMovie)
+          dispatch(
+            movieWishlistToggle(
+              selectedMovie.get("imdb_id"),
+              isWishlisted(selectedMovie)
+            )
           )
         }
       >
@@ -96,11 +126,6 @@ const MovieList = (props) => {
   );
 };
 MovieList.propTypes = {
-  movies: PropTypes.instanceOf(OrderedMap),
-  exploreOptions: PropTypes.instanceOf(Map),
-  selectedImdbId: PropTypes.string,
-  filter: PropTypes.string,
-  loading: PropTypes.bool,
   fetchMovies: PropTypes.func,
   getMovieExploreOptions: PropTypes.func,
   updateFilter: PropTypes.func,
@@ -109,4 +134,4 @@ MovieList.propTypes = {
   match: PropTypes.object,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(MovieList);
+export default MovieList;

frontend/js/components/movies/route.js

@@ -1,50 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Route } from "react-router-dom";
-import { connect } from "react-redux";
-import { fetchMovies } from "../../actions/movies";
-
-const MoviesRoute = ({ component: Component, fetchMovies, ...otherProps }) => {
-  return (
-    <Route
-      {...otherProps}
-      render={(props) => {
-        let fetchUrl = "";
-        switch (props.match.path) {
-          case "/movies/polochon":
-            fetchUrl = "/movies/polochon";
-            break;
-          case "/movies/wishlist":
-            fetchUrl = "/wishlist/movies";
-            break;
-          case "/movies/search/:search":
-            fetchUrl = "/movies/search/" + props.match.params.search;
-            break;
-          case "/movies/explore/:source/:category":
-            fetchUrl =
-              "/movies/explore?source=" +
-              encodeURI(props.match.params.source) +
-              "&category=" +
-              encodeURI(props.match.params.category);
-            break;
-          default:
-            break;
-        }
-
-        if (fetchUrl != "") {
-          fetchMovies(fetchUrl);
-        }
-
-        return <Component {...props} />;
-      }}
-    />
-  );
-};
-MoviesRoute.propTypes = {
-  component: PropTypes.object,
-  match: PropTypes.object,
-  fetchMovies: PropTypes.func.isRequired,
-  getMovieExploreOptions: PropTypes.func.isRequired,
-};
-
-export default connect(null, { fetchMovies })(MoviesRoute);

frontend/js/components/shows/list.js

@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Map } from "immutable";
-import { connect } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+
 import {
+  fetchShows,
   selectShow,
   showWishlistToggle,
-  getShowDetails,
   updateFilter,
   getShowExploreOptions,
 } from "../../actions/shows";
@@ -15,57 +16,90 @@ import { isWishlisted } from "../../utils";
 import ListDetails from "../list/details";
 import ListPosters from "../list/posters";
 
-function mapStateToProps(state) {
-  return {
-    loading: state.showsStore.get("loading"),
-    shows: state.showsStore.get("shows"),
-    filter: state.showsStore.get("filter"),
-    selectedImdbId: state.showsStore.get("selectedImdbId"),
-    exploreOptions: state.showsStore.get("exploreOptions"),
-  };
-}
-const mapDispatchToProps = {
-  selectShow,
-  showWishlistToggle,
-  getShowDetails,
-  updateFilter,
-  getShowExploreOptions,
+const fetchUrl = (match) => {
+  switch (match.path) {
+    case "/shows/polochon":
+      return "/shows/polochon";
+    case "/shows/wishlist":
+      return "/wishlist/shows";
+    case "/shows/search/:search":
+      return "/shows/search/" + match.params.search;
+    case "/shows/explore/:source/:category":
+      return (
+        "/shows/explore?source=" +
+        encodeURI(match.params.source) +
+        "&category=" +
+        encodeURI(match.params.category)
+      );
+    default:
+      return null;
+  }
 };
 
-const ShowList = (props) => {
+const ShowList = ({ match, history }) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const url = fetchUrl(match);
+    if (url !== null) {
+      dispatch(fetchShows(url));
+    }
+  }, [dispatch, match]);
+
+  const loading = useSelector((state) => state.showsStore.get("loading"));
+  const shows = useSelector((state) => state.showsStore.get("shows"));
+  const filter = useSelector((state) => state.showsStore.get("filter"));
+  const selectedImdbId = useSelector((state) =>
+    state.showsStore.get("selectedImdbId")
+  );
+  const exploreOptions = useSelector((state) =>
+    state.showsStore.get("exploreOptions")
+  );
+
   const showDetails = (imdbId) => {
-    props.history.push("/shows/details/" + imdbId);
+    history.push("/shows/details/" + imdbId);
   };
 
   let selectedShow = Map();
-  if (props.selectedImdbId !== "") {
-    selectedShow = props.shows.get(props.selectedImdbId);
+  if (selectedImdbId !== "") {
+    selectedShow = shows.get(selectedImdbId);
   }
 
+  const selectFunc = useCallback((id) => dispatch(selectShow(id)), [dispatch]);
+  const filterFunc = useCallback((filter) => dispatch(updateFilter(filter)), [
+    dispatch,
+  ]);
+  const exploreFetchOptions = useCallback(
+    () => dispatch(getShowExploreOptions()),
+    [dispatch]
+  );
+
   return (
     <div className="row" id="container">
       <ListPosters
-        data={props.shows}
+        data={shows}
         type="shows"
         placeHolder="Filter shows..."
-        exploreOptions={props.exploreOptions}
-        exploreFetchOptions={props.getShowExploreOptions}
-        updateFilter={props.updateFilter}
-        selectedImdbId={props.selectedImdbId}
-        filter={props.filter}
-        onClick={props.selectShow}
+        exploreOptions={exploreOptions}
+        exploreFetchOptions={exploreFetchOptions}
+        updateFilter={filterFunc}
+        selectedImdbId={selectedImdbId}
+        filter={filter}
+        onClick={selectFunc}
         onDoubleClick={showDetails}
         onKeyEnter={showDetails}
-        params={props.match.params}
-        loading={props.loading}
+        params={match.params}
+        loading={loading}
       />
       <ListDetails
         data={selectedShow}
-        loading={props.loading}
+        loading={loading}
         wishlist={() =>
-          props.showWishlistToggle(
-            isWishlisted(selectedShow),
-            selectedShow.get("imdb_id")
+          dispatch(
+            showWishlistToggle(
+              isWishlisted(selectedShow),
+              selectedShow.get("imdb_id")
+            )
           )
         }
       >
@@ -85,15 +119,5 @@ const ShowList = (props) => {
 ShowList.propTypes = {
   match: PropTypes.object,
   history: PropTypes.object,
-  shows: PropTypes.instanceOf(Map),
-  exploreOptions: PropTypes.instanceOf(Map),
-  selectedImdbId: PropTypes.string,
-  filter: PropTypes.string,
-  loading: PropTypes.bool,
-  showWishlistToggle: PropTypes.func,
-  selectShow: PropTypes.func,
-  getShowDetails: PropTypes.func,
-  updateFilter: PropTypes.func,
-  getShowExploreOptions: PropTypes.func,
 };
-export default connect(mapStateToProps, mapDispatchToProps)(ShowList);
+export default ShowList;

frontend/js/components/shows/route.js

@@ -1,49 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Route } from "react-router-dom";
-import { connect } from "react-redux";
-import { fetchShows } from "../../actions/shows";
-
-const ShowsRoute = ({ component: Component, fetchShows, ...otherProps }) => {
-  return (
-    <Route
-      {...otherProps}
-      render={(props) => {
-        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":
-            fetchUrl =
-              "/shows/explore?source=" +
-              encodeURI(props.match.params.source) +
-              "&category=" +
-              encodeURI(props.match.params.category);
-            break;
-        }
-
-        if (fetchUrl != "") {
-          fetchShows(fetchUrl);
-        }
-
-        return <Component {...props} />;
-      }}
-    />
-  );
-};
-ShowsRoute.propTypes = {
-  component: PropTypes.object,
-  match: PropTypes.object,
-  fetchShows: PropTypes.func.isRequired,
-};
-
-export default connect(null, {
-  fetchShows,
-})(ShowsRoute);