From f72c967461cee8d935b4bfa4531c9d3429c3df1a Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Mon, 29 Mar 2021 11:52:07 +0200
Subject: [PATCH] move state over

---
 src/App.tsx                       | 22 ++------------
 src/components/Footer.tsx         | 10 ++++---
 src/components/Navbar.tsx         | 10 +++----
 src/components/SearchBar.tsx      | 18 ++++++++---
 src/components/SideNav.tsx        | 50 +++++++++++++------------------
 src/constants.ts                  |  1 +
 src/containers/Category/index.tsx |  5 ++--
 src/containers/Meal/index.tsx     |  2 +-
 src/containers/NotFound/index.tsx |  9 ++----
 src/layouts/MainLayout.tsx        | 24 ++-------------
 src/layouts/PageLayout.tsx        |  2 +-
 src/router/AppRouter.tsx          |  4 +--
 12 files changed, 60 insertions(+), 97 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 68e315d..ab0a623 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { FC, useState } from "react";
 import { PreLoader } from "./components/PreLoader";
+import { buttonURL } from "./constants";
 import "./index.css";
 import MainLayout from "./layouts/MainLayout";
 import { AppRouter } from "./router";
@@ -12,23 +13,11 @@ export const App: FC = () => {
   const [searchString, setSearchString] = useState("");
   const [searchResults, setSearchResults] = useState({ meals: [] });
   const [meal, setMeal] = useState(null);
-  const buttonUrl = "/random";
 
   const getRandomMeal = () => {
     getData("random", setMeal);
   };
 
-  const getSearchResults = (e) => {
-    searchString === ""
-      ? e.preventDefault()
-      : getData(searchString, setSearchResults, "search");
-  };
-
-  const handleChange = (e) => {
-    const { value } = e.target;
-    setSearchString(value);
-  };
-
   return loading ? (
     <div className="container center-align valign-wrapper">
       <PreLoader />
@@ -36,19 +25,12 @@ export const App: FC = () => {
   ) : (
     <Router>
       <MainLayout
-        buttonUrl={buttonUrl}
         getRandomMeal={getRandomMeal}
         searchString={searchString}
         setSearchResults={setSearchResults}
-        handleChange={handleChange}
         setSearchString={setSearchString}
-        getSearchResults={getSearchResults}
       >
-        <AppRouter
-          getRandomMeal={getRandomMeal}
-          searchString={searchString}
-          searchResults={searchResults}
-        />
+        <AppRouter searchString={searchString} searchResults={searchResults} />
       </MainLayout>
     </Router>
   );
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 865094d..af71ab9 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import { FC } from "react";
+import { links } from "../constants";
 import { CopyrightText } from "./CopyrightText";
-import { GitHubLink } from "./GitHubLink";
 import { FooterLink } from "./FooterLink";
+import { GitHubLink } from "./GitHubLink";
 
-export const Footer = ({ links }) => {
+export const Footer: FC = () => {
+  const footerLinks = [...links, "random"];
   return (
     <footer className="page-footer">
       <div className="row">
@@ -11,7 +13,7 @@ export const Footer = ({ links }) => {
           <div className=" s12">
             <h5 className="black-text">Navigation</h5>
             <ul>
-              {links.map((link, i) => (
+              {footerLinks.map((link, i) => (
                 <FooterLink key={i} link={link} textColor="black" />
               ))}
             </ul>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 92c1629..fd3bb37 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,13 +1,13 @@
-import React from "react";
 import { Link } from "react-router-dom";
+import { buttonURL, links } from "../constants";
 import { useAuth0 } from "../utils/auth0-spa";
-import { Logo } from "./Logo";
-import { RandomButton } from "./RandomButton";
 import { FooterLink } from "./FooterLink";
 import { LogInButton } from "./LogInButton";
+import { Logo } from "./Logo";
 import { LogOutButton } from "./LogOutButton";
+import { RandomButton } from "./RandomButton";
 
-export const Navbar = ({ openNavClick, links, buttonUrl, handleClick }) => {
+export const Navbar = ({ openNavClick, handleClick }) => {
   const { isAuthenticated } = useAuth0();
 
   return (
@@ -26,7 +26,7 @@ export const Navbar = ({ openNavClick, links, buttonUrl, handleClick }) => {
               <li>
                 <RandomButton
                   handleClick={handleClick}
-                  url={buttonUrl}
+                  url={buttonURL}
                   size="small"
                   color="orange darken-2"
                 />
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index c88642f..2cf6de1 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,18 +1,28 @@
-import React from "react";
+import { ChangeEvent } from "react";
 import { Link } from "react-router-dom";
+import { getData } from "../services/api";
 
 export const SearchBar = ({
   searchString,
   setSearchString,
   setSearchResults,
-  handleChange,
-  onSubmit,
 }) => {
+  const getSearchResults = (e) => {
+    searchString === ""
+      ? e.preventDefault()
+      : getData(searchString, setSearchResults, "search");
+  };
+
   const clearSearchBar = () => {
     setSearchString("");
     setSearchResults({ meals: [] });
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setSearchString(value);
+  };
+
   return (
     <div className="section">
       <div className="container">
@@ -44,7 +54,7 @@ export const SearchBar = ({
                     type="submit"
                     name="searchButton"
                     value="Search"
-                    onClick={onSubmit}
+                    onClick={getSearchResults}
                   >
                     <i className="material-icons right">send</i>
                   </button>
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
index de22271..30f2193 100644
--- a/src/components/SideNav.tsx
+++ b/src/components/SideNav.tsx
@@ -1,18 +1,14 @@
-import React from "react";
 import { Link } from "react-router-dom";
+import { buttonURL, links } from "../constants";
+import ChefImage from "../images/chef.svg";
+import SpecialEventImage from "../images/special_event.svg";
 import { useAuth0 } from "../utils/auth0-spa";
-import { RandomButton } from "./RandomButton";
 import { FooterLink } from "./FooterLink";
 import { LogInButton } from "./LogInButton";
 import { LogOutButton } from "./LogOutButton";
+import { RandomButton } from "./RandomButton";
 
-export const SideNav = ({
-  showNav,
-  closeNavClick,
-  links,
-  buttonUrl,
-  handleClick,
-}) => {
+export const SideNav = ({ showNav, closeNavClick, handleClick }) => {
   const { isAuthenticated, user } = useAuth0();
   let transformStyle = {
     transform: showNav ? "translateX(0%)" : "translateX(-105%)",
@@ -25,7 +21,6 @@ export const SideNav = ({
         <div className="user-view" style={{ height: "30vh" }}>
           <div className="background">
             <img
-              // className="responsive-img"
               style={{
                 position: "fixed" /* Sit on top of the page content */,
                 width: "100%" /* Full width (cover the whole page) */,
@@ -36,11 +31,10 @@ export const SideNav = ({
                 bottom: "0",
                 backgroundColor:
                   "rgba(0,0,0,0.5)" /* Black background with opacity */,
-                zIndex:
-                  2 /* Specify a stack order in case you're using a different order for other elements */,
+                zIndex: 2 /* Specify a stack order in case you're using a different order for other elements */,
                 // cursor: "pointer" /* Add a pointer on hover */
               }}
-              src={require("../images/special_event.svg")}
+              src={SpecialEventImage}
               alt="sidenav_background"
             />
           </div>
@@ -49,28 +43,24 @@ export const SideNav = ({
             close
           </i>
 
-          {isAuthenticated ? (
-            <Link to="/profile">
-              <img className="circle" src={user.picture} alt="user_avatar" />
-              <span className="white-text name">{user.name}</span>
-              <span className="white-text email">{user.email}</span>
-            </Link>
-          ) : (
-            // <Link to="/profile">
-            <img
-              className="circle"
-              src={require("../images/chef.svg")}
-              alt="user_avatar"
-            />
-            // </Link>
-          )}
+          <Link to="/profile">
+            {isAuthenticated ? (
+              <div>
+                <img className="circle" src={user.picture} alt="user_avatar" />
+                <span className="white-text name">{user.name}</span>
+                <span className="white-text email">{user.email}</span>
+              </div>
+            ) : (
+              <img className="circle" src={ChefImage} alt="user_avatar" />
+            )}
+          </Link>
         </div>
       </li>
 
       <li>
         <RandomButton
           handleClick={handleClick}
-          url={buttonUrl}
+          url={buttonURL}
           size="small"
           color="orange darken-2"
         />
@@ -86,7 +76,7 @@ export const SideNav = ({
       </li>
 
       <li>
-        <div className="divider"></div>
+        <div className="divider" />
       </li>
       <li>
         <Link to="#" className="subheader">
diff --git a/src/constants.ts b/src/constants.ts
index 03f6af4..1ab5cfb 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +1,2 @@
 export const buttonURL = "/random";
+export const links = ["categories", "contact"];
diff --git a/src/containers/Category/index.tsx b/src/containers/Category/index.tsx
index 7223cf1..12c8728 100644
--- a/src/containers/Category/index.tsx
+++ b/src/containers/Category/index.tsx
@@ -7,11 +7,10 @@ export const Category: FC = () => {
   const { strCategory } = useParams();
   const [meals, setMeals] = useState({ meals: [] });
 
-  const getMeals = () => getData(strCategory, setMeals, "filter");
-
   useEffect(() => {
+    const getMeals = () => getData(strCategory, setMeals, "filter");
     getMeals();
-  }, []);
+  }, [strCategory]);
 
   return !meals.meals ? (
     <Redirect to="/404" />
diff --git a/src/containers/Meal/index.tsx b/src/containers/Meal/index.tsx
index 66ef870..658e9dd 100644
--- a/src/containers/Meal/index.tsx
+++ b/src/containers/Meal/index.tsx
@@ -70,6 +70,6 @@ export const Meal: FC = () => {
       handleFavChange={handleFavChange}
     />
   ) : (
-    <NotFound handleClick={getRandomMeal} />
+    <NotFound />
   );
 };
diff --git a/src/containers/NotFound/index.tsx b/src/containers/NotFound/index.tsx
index 11e0719..46e8a37 100644
--- a/src/containers/NotFound/index.tsx
+++ b/src/containers/NotFound/index.tsx
@@ -1,11 +1,8 @@
 import { FC } from "react";
 import { RandomButton } from "../../components/RandomButton";
+import { getRandomMeal } from "../Meal/service";
 
-type Props = {
-  handleClick: (any) => void;
-};
-
-export const NotFound: FC<Props> = ({ handleClick }) => (
+export const NotFound: FC = () => (
   <div className="container center-align">
     <div className="row">
       <h1>Wrong Way!</h1>
@@ -21,7 +18,7 @@ export const NotFound: FC<Props> = ({ handleClick }) => (
           <div className="card-content">
             <RandomButton
               url="/random"
-              handleClick={handleClick}
+              handleClick={getRandomMeal}
               color={null}
             />
           </div>
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index e00915e..d1f30e6 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -6,24 +6,18 @@ import { SideNav } from "../components/SideNav";
 
 // TODO FC...
 const MainLayout = ({
-  buttonUrl,
   getRandomMeal,
-  handleChange,
   searchString,
   setSearchString,
-  getSearchResults,
   setSearchResults,
   children,
 }) => {
   const [showNav, setShowNav] = useState(false);
 
-  const links = ["categories", "contact"];
-
   const openNavClick = (e) => {
     e.preventDefault();
     setShowNav(true);
     document.addEventListener("keydown", handleEscKey);
-    // document.addEventListener("click", handleOutsideClick);
   };
 
   const closeNavClick = (e) => {
@@ -37,37 +31,25 @@ const MainLayout = ({
       setShowNav(false);
     }
   };
-  // const handleOutsideClick = e => {
-  //   console.log(e);
-  // };
 
   return (
     <>
       <header>
-        <Navbar
-          handleClick={getRandomMeal}
-          buttonUrl={buttonUrl}
-          openNavClick={openNavClick}
-          links={links}
-        />
+        <Navbar handleClick={getRandomMeal} openNavClick={openNavClick} />
 
         <SearchBar
           searchString={searchString}
           setSearchString={setSearchString}
-          handleChange={handleChange}
-          onSubmit={getSearchResults}
           setSearchResults={setSearchResults}
         />
         <SideNav
           showNav={showNav}
           closeNavClick={closeNavClick}
-          links={links}
-          buttonUrl={buttonUrl}
           handleClick={() => {}}
         />
       </header>
-      {children}
-      <Footer links={[...links, "random"]} />
+      <main>{children}</main>
+      <Footer />
     </>
   );
 };
diff --git a/src/layouts/PageLayout.tsx b/src/layouts/PageLayout.tsx
index 6fc282b..04e0f1c 100644
--- a/src/layouts/PageLayout.tsx
+++ b/src/layouts/PageLayout.tsx
@@ -7,7 +7,7 @@ type Props = {
 const PageLayout: FC<Props> = ({ title, children }) => (
   <div className="container">
     <h1 className="logo">{title}</h1>
-    {children}
+    <main>{children}</main>
   </div>
 );
 
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 373be83..a2c5bb2 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -12,7 +12,7 @@ import { PrivateRoute } from "./PrivateRoute";
 
 //TODO: remove state from router move to containers
 
-const AppRouter = ({ getRandomMeal, searchString, searchResults }) => (
+const AppRouter = ({ searchString, searchResults }) => (
   <Switch>
     <Route exact path="/">
       <Home />
@@ -41,7 +41,7 @@ const AppRouter = ({ getRandomMeal, searchString, searchResults }) => (
     </Route>
 
     <Route path="/404">
-      <NotFound handleClick={getRandomMeal} />
+      <NotFound />
     </Route>
 
     <Route path="/:id">