-
-
![sidenav_background]({require("../images/special_event.svg")})
-
-
-
- close
-
-
- {isAuthenticated ? (
-
-
-
{user.name}
-
{user.email}
-
- ) : (
- //
-
![user_avatar]({require("../images/chef.svg")})
- //
- )}
+
+ -
+
+
+
-
-
-
-
-
-
-
-
- {!isAuthenticated ? (
-
- ) : (
-
- )}
-
-
+
+ close
+
-
-
-
-
-
-
-
- Navigation
-
-
- {links.map((link, i) => (
-
- ))}
- {isAuthenticated &&
}
-
-
+ {isAuthenticated ? (
+
+
+
{user.name}
+
{user.email}
+
+ ) : (
+ //
+
+ //
+ )}
+
+
+ -
+
+
+ -
+
+ {!isAuthenticated ? (
+
+ ) : (
+
+ )}
+
+
+
+ -
+
+
+ -
+
+ Navigation
+
+
+ {links.map((link, i) => (
+
+ ))}
+ {isAuthenticated && }
+
);
};
diff --git a/src/controllers/CategoryController.jsx b/src/controllers/CategoryController.jsx
index bad75d9..c9e3db2 100644
--- a/src/controllers/CategoryController.jsx
+++ b/src/controllers/CategoryController.jsx
@@ -3,7 +3,7 @@ import { useParams, Redirect } from "react-router-dom";
import { CategoryPage } from "../pages/CategoryPage";
import { getData } from "../utils/methods";
-export const CategoryController = props => {
+export const CategoryController = () => {
const [meals, setMeals] = useState({ meals: [] });
const { strCategory } = useParams();
@@ -17,13 +17,9 @@ export const CategoryController = props => {
// eslint-disable-next-line
}, []);
- return (
- <>
- {meals.meals === null ? (
-
- ) : (
-
- )}
-
+ return meals.meals === null ? (
+
+ ) : (
+
);
};
diff --git a/src/controllers/HomeController.jsx b/src/controllers/HomeController.jsx
index d74fd1a..320cc63 100644
--- a/src/controllers/HomeController.jsx
+++ b/src/controllers/HomeController.jsx
@@ -1,5 +1,4 @@
import React from "react";
-
import { HomePage } from "../pages/HomePage";
export const HomeController = ({ buttonUrl }) => {
diff --git a/src/controllers/MainRouter.jsx b/src/controllers/MainRouter.jsx
new file mode 100644
index 0000000..c5d9bd4
--- /dev/null
+++ b/src/controllers/MainRouter.jsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
+
+import { SearchController } from "../controllers/SearchController";
+import { HomeController } from "../controllers/HomeController";
+import { MealController } from "../controllers/MealController";
+import { CategoryController } from "../controllers/CategoryController";
+import { CategoryListController } from "../controllers/CategoryListController";
+import { ProfileController } from "../controllers/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MainRouter;
diff --git a/src/controllers/MealController.jsx b/src/controllers/MealController.jsx
index 95b3973..59d10d5 100644
--- a/src/controllers/MealController.jsx
+++ b/src/controllers/MealController.jsx
@@ -4,7 +4,6 @@ import { useAuth0 } from "../utils/auth0-spa";
import { MealPage } from "../pages/MealPage";
import { NotFoundPage } from "../pages/NotFoundPage";
import { useFirebase } from "../services/Firebase";
-// import Firebase from "../data/Firebase";
export const MealController = ({ meal, getMeal, getRandomMeal }) => {
const { user, isAuthenticated } = useAuth0();
diff --git a/src/controllers/SearchController.jsx b/src/controllers/SearchController.jsx
index e4615bf..5565eb5 100644
--- a/src/controllers/SearchController.jsx
+++ b/src/controllers/SearchController.jsx
@@ -1,5 +1,4 @@
import React from "react";
-
import { SearchPage } from "../pages/SearchPage";
export const SearchController = ({ searchString, searchResults }) => {
diff --git a/src/layouts/MainLayout.jsx b/src/layouts/MainLayout.jsx
new file mode 100644
index 0000000..cf44f52
--- /dev/null
+++ b/src/layouts/MainLayout.jsx
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+
+import { Navbar } from "../components/Navbar";
+import { SearchBar } from "../components/SearchBar";
+import { Footer } from "../components/Footer";
+import { SideNav } from "../components/SideNav";
+
+const MainLayout = ({
+ buttonUrl,
+ getRandomMeal,
+ handleChange,
+ searchString,
+ setSearchString,
+ getSearchResults,
+ setSearchResults,
+ children,
+}) => {
+ const [showNav, setShowNav] = useState(false);
+
+ const links = ["categories", "contact"];
+ const footerLinks = [...links, "random"];
+
+ const openNavClick = (ev) => {
+ ev.preventDefault();
+ setShowNav(true);
+ document.addEventListener("keydown", handleEscKey);
+ // document.addEventListener("click", handleOutsideClick);
+ };
+
+ const closeNavClick = (ev) => {
+ ev.preventDefault();
+ setShowNav(false);
+ document.removeEventListener("keydown", handleEscKey);
+ };
+
+ const handleEscKey = (ev) => {
+ if (ev.key === "Escape") {
+ setShowNav(false);
+ }
+ };
+ // const handleOutsideClick = ev => {
+ // console.log(ev);
+ // };
+
+ return (
+ <>
+
+ {children}
+
+
+ );
+};
+
+export default MainLayout;
diff --git a/src/pages/CategoryPage.jsx b/src/pages/CategoryPage.jsx
index 81c76f4..72d5c5d 100644
--- a/src/pages/CategoryPage.jsx
+++ b/src/pages/CategoryPage.jsx
@@ -26,7 +26,6 @@ export const CategoryPage = ({ meals, strCategory }) => {
))}