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 = () => {
) : (
-
+
{
setSearchString={setSearchString}
getSearchResults={getSearchResults}
>
- {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-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,
+}) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+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 ? : null;
+ const render = (props) => (isAuthenticated ? : null);
return ;
};
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 }) => (
+
+
+ {children}
+
+);
+
+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 (
-
-
- {children}
-
- );
-};
-
-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]);
-};