From 8fb5ca872c03ebd8ec5eb8ee6413022c1f229b50 Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Sun, 28 Mar 2021 13:45:44 +0200
Subject: [PATCH] refactor Router

---
 src/App.tsx                                   | 14 ++--
 .../CategoryController.tsx                    |  0
 .../CategoryListController.tsx                |  0
 .../HomeController.tsx                        |  0
 .../MealController.tsx                        |  0
 .../ProfileController.tsx                     |  0
 .../SearchController.tsx                      |  0
 src/controllers/MainRouter.tsx                | 75 -------------------
 src/router/AppRouter.tsx                      | 74 ++++++++++++++++++
 src/{components => router}/PrivateRoute.tsx   | 13 ++--
 src/router/Router.tsx                         | 18 +++++
 src/router/index.ts                           |  2 +
 src/utils/router.js                           | 51 -------------
 13 files changed, 106 insertions(+), 141 deletions(-)
 rename src/{controllers => containers}/CategoryController.tsx (100%)
 rename src/{controllers => containers}/CategoryListController.tsx (100%)
 rename src/{controllers => containers}/HomeController.tsx (100%)
 rename src/{controllers => containers}/MealController.tsx (100%)
 rename src/{controllers => containers}/ProfileController.tsx (100%)
 rename src/{controllers => containers}/SearchController.tsx (100%)
 delete mode 100644 src/controllers/MainRouter.tsx
 create mode 100644 src/router/AppRouter.tsx
 rename src/{components => router}/PrivateRoute.tsx (64%)
 create mode 100644 src/router/Router.tsx
 create mode 100644 src/router/index.ts
 delete mode 100644 src/utils/router.js

diff --git a/src/App.tsx b/src/App.tsx
index 649fe52..4448c5e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,16 @@
-import React, {FC, useState} from "react";
-import { Router } from "./utils/router";
+import React, { FC, useState } from "react";
+import { Router } from "./router/Router";
 
 import { PreLoader } from "./components/PreLoader";
 
 import { useAuth0 } from "./utils/auth0-spa";
 import { getData } from "./utils/methods";
-import history from "./utils/history";
 
 import "./index.css";
 import MainLayout from "./layouts/MainLayout";
-import MainRouter from "./controllers/MainRouter";
+import { AppRouter } from "./router";
 
-export const App:FC = () => {
+export const App: FC = () => {
   const { loading } = useAuth0();
   const [searchString, setSearchString] = useState("");
   const [searchResults, setSearchResults] = useState({ meals: [] });
@@ -96,7 +95,6 @@ export const App:FC = () => {
   const handleChange = (e) => {
     const { value } = e.target;
     setSearchString(value);
-
   };
 
   return loading ? (
@@ -104,7 +102,7 @@ export const App:FC = () => {
       <PreLoader />
     </div>
   ) : (
-    <Router >
+    <Router>
       <MainLayout
         buttonUrl={buttonUrl}
         // meal={meal}
@@ -117,7 +115,7 @@ export const App:FC = () => {
         setSearchString={setSearchString}
         getSearchResults={getSearchResults}
       >
-        <MainRouter
+        <AppRouter
           buttonUrl={buttonUrl}
           meal={meal}
           getMeal={getMeal}
diff --git a/src/controllers/CategoryController.tsx b/src/containers/CategoryController.tsx
similarity index 100%
rename from src/controllers/CategoryController.tsx
rename to src/containers/CategoryController.tsx
diff --git a/src/controllers/CategoryListController.tsx b/src/containers/CategoryListController.tsx
similarity index 100%
rename from src/controllers/CategoryListController.tsx
rename to src/containers/CategoryListController.tsx
diff --git a/src/controllers/HomeController.tsx b/src/containers/HomeController.tsx
similarity index 100%
rename from src/controllers/HomeController.tsx
rename to src/containers/HomeController.tsx
diff --git a/src/controllers/MealController.tsx b/src/containers/MealController.tsx
similarity index 100%
rename from src/controllers/MealController.tsx
rename to src/containers/MealController.tsx
diff --git a/src/controllers/ProfileController.tsx b/src/containers/ProfileController.tsx
similarity index 100%
rename from src/controllers/ProfileController.tsx
rename to src/containers/ProfileController.tsx
diff --git a/src/controllers/SearchController.tsx b/src/containers/SearchController.tsx
similarity index 100%
rename from src/controllers/SearchController.tsx
rename to src/containers/SearchController.tsx
diff --git a/src/controllers/MainRouter.tsx b/src/controllers/MainRouter.tsx
deleted file mode 100644
index 90ee109..0000000
--- a/src/controllers/MainRouter.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import { Switch, Route, Redirect } from "react-router-dom";
-import { SearchController } from "./SearchController";
-import { HomeController } from "./HomeController";
-import { MealController } from "./MealController";
-import { CategoryController } from "./CategoryController";
-import { CategoryListController } from "./CategoryListController";
-import { ProfileController } from "./ProfileController";
-import { ContactPage } from "../pages/Contact";
-import { NotFoundPage } from "../pages/NotFoundPage";
-import { PrivateRoute } from "../components/PrivateRoute";
-
-const MainRouter = ({
-  buttonUrl,
-  meal,
-  getMeal,
-  getRandomMeal,
-  searchString,
-  searchResults,
-}) => {
-  return (
-    <Switch>
-      <Route exact path="/">
-        <HomeController buttonUrl={buttonUrl} />
-      </Route>
-
-      <PrivateRoute exact path="/profile" component={ProfileController} />
-
-      <Route exact path={buttonUrl}>
-        <MealController
-          meal={meal}
-          getMeal={getMeal}
-          getRandomMeal={getRandomMeal}
-        />
-      </Route>
-
-      <Route exact path="/categories">
-        <CategoryListController />
-      </Route>
-
-      <Route path="/categories/:strCategory/">
-        <CategoryController />
-      </Route>
-
-      <Route exact path="/search">
-        <SearchController
-          searchString={searchString}
-          searchResults={searchResults}
-        />
-      </Route>
-
-      <Route path="/contact">
-        <ContactPage />
-      </Route>
-
-      <Route path="/404">
-        <NotFoundPage handleClick={getRandomMeal} />
-      </Route>
-
-      <Route path="/:id">
-        <MealController
-          meal={meal}
-          getMeal={getMeal}
-          getRandomMeal={getRandomMeal}
-        />
-      </Route>
-
-      <Route path="*">
-        <Redirect to="/404" />
-      </Route>
-    </Switch>
-  );
-};
-
-export default MainRouter;
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
new file mode 100644
index 0000000..5b3cc46
--- /dev/null
+++ b/src/router/AppRouter.tsx
@@ -0,0 +1,74 @@
+import { Switch, Route, Redirect } from "react-router-dom";
+import { SearchController } from "../containers/SearchController";
+import { HomeController } from "../containers/HomeController";
+import { MealController } from "../containers/MealController";
+import { CategoryController } from "../containers/CategoryController";
+import { CategoryListController } from "../containers/CategoryListController";
+import { ProfileController } from "../containers/ProfileController";
+import { ContactPage } from "../pages/Contact";
+import { NotFoundPage } from "../pages/NotFoundPage";
+import { PrivateRoute } from "./PrivateRoute";
+
+//TODO: remove state from router move to containers
+
+const AppRouter = ({
+  buttonUrl,
+  meal,
+  getMeal,
+  getRandomMeal,
+  searchString,
+  searchResults,
+}) => (
+  <Switch>
+    <Route exact path="/">
+      <HomeController buttonUrl={buttonUrl} />
+    </Route>
+
+    <PrivateRoute exact path="/profile" component={ProfileController} />
+
+    <Route exact path={buttonUrl}>
+      <MealController
+        meal={meal}
+        getMeal={getMeal}
+        getRandomMeal={getRandomMeal}
+      />
+    </Route>
+
+    <Route exact path="/categories">
+      <CategoryListController />
+    </Route>
+
+    <Route path="/categories/:strCategory/">
+      <CategoryController />
+    </Route>
+
+    <Route exact path="/search">
+      <SearchController
+        searchString={searchString}
+        searchResults={searchResults}
+      />
+    </Route>
+
+    <Route path="/contact">
+      <ContactPage />
+    </Route>
+
+    <Route path="/404">
+      <NotFoundPage handleClick={getRandomMeal} />
+    </Route>
+
+    <Route path="/:id">
+      <MealController
+        meal={meal}
+        getMeal={getMeal}
+        getRandomMeal={getRandomMeal}
+      />
+    </Route>
+
+    <Route path="*">
+      <Redirect to="/404" />
+    </Route>
+  </Switch>
+);
+
+export default AppRouter;
diff --git a/src/components/PrivateRoute.tsx b/src/router/PrivateRoute.tsx
similarity index 64%
rename from src/components/PrivateRoute.tsx
rename to src/router/PrivateRoute.tsx
index 11e5e0a..b608d04 100644
--- a/src/components/PrivateRoute.tsx
+++ b/src/router/PrivateRoute.tsx
@@ -1,25 +1,24 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Route } from "react-router-dom";
 import { useAuth0 } from "../utils/auth0-spa";
 
+// TODO use FC and props
 export const PrivateRoute = ({ component: Component, path, ...rest }) => {
   const { loading, isAuthenticated, loginWithRedirect } = useAuth0();
 
   useEffect(() => {
+    // catches infinite loading when no user is logged in
     if (loading || isAuthenticated) {
-      // catches infinite loading when no user is logged in
       return;
     }
-    const fn = async () => {
+    const fn = async () =>
       await loginWithRedirect({
-        appState: { targetUrl: path }
+        appState: { targetUrl: path },
       });
-    };
     fn();
   }, [loading, isAuthenticated, loginWithRedirect, path]);
 
-  const render = props =>
-    isAuthenticated === true ? <Component {...props} /> : null;
+  const render = (props) => (isAuthenticated ? <Component {...props} /> : null);
 
   return <Route path={path} render={render} {...rest} />;
 };
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
new file mode 100644
index 0000000..4653ffd
--- /dev/null
+++ b/src/router/Router.tsx
@@ -0,0 +1,18 @@
+import { FC, useEffect } from "react";
+import { Router as RouterOriginal, useLocation } from "react-router-dom";
+import history from "../utils/history";
+
+export const Router: FC = ({ children }) => (
+  <RouterOriginal history={history}>
+    <ScrollToTop />
+    {children}
+  </RouterOriginal>
+);
+
+export const ScrollToTop: FC = () => {
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+  return null;
+};
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..10056c3
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,2 @@
+import AppRouter from "./AppRouter";
+export { AppRouter };
diff --git a/src/utils/router.js b/src/utils/router.js
deleted file mode 100644
index c6ce817..0000000
--- a/src/utils/router.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useMemo, useEffect } from "react";
-import {
-  Router as RouterOriginal,
-  useParams,
-  useLocation,
-  useHistory,
-  useRouteMatch
-} from "react-router-dom";
-import queryString from "query-string";
-
-import { createBrowserHistory } from "history";
-export const history = createBrowserHistory();
-
-export const Router = ({ children }) => {
-  return (
-    <RouterOriginal history={history}>
-      <ScrollToTop />
-      {children}
-    </RouterOriginal>
-  );
-};
-
-export const ScrollToTop = () => {
-  const location = useLocation();
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [location.pathname]);
-  return null;
-};
-
-export const useRouter = () => {
-  const params = useParams();
-  const location = useLocation();
-  const history = useHistory();
-  const match = useRouteMatch();
-
-  return useMemo(() => {
-    return {
-      push: history.push,
-      replace: history.replace,
-      pathname: location.pathname,
-      query: {
-        ...queryString.parse(location.search),
-        ...params
-      },
-      match,
-      location,
-      history
-    };
-  }, [params, match, location, history]);
-};