refactoring (#6)

* use tsx * compile * refactor Router * refactor layout * refactor home container * refactor meal container * refactor categories container * refactor category container * refactor search and profile container * refactor * move state over * move state over * css * css
2026-06-06 02:26:49 +00:00 · 2021-03-29 12:37:53 +02:00 · 2021-03-29 12:37:53 +02:00 · 8409d09373
commit 8409d09373
parent 0e3b0a7cee
15 changed files with 82 additions and 9443 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,31 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#ff6d00" />
-    <meta name="description" content="Online Meal Planner | Chef's" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Marck+Script&display=swap"
-      rel="stylesheet"
-    />
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="theme-color" content="#ff6d00"/>
+    <meta name="description" content="Online Meal Planner | Chef's"/>
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Marck+Script&display=swap"/>
    <title>Online Meal Planner | Chef's</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!-- <script type="text/javascript" src="js/materialize.min.js"></script> -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-  </body>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+</body>
 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -12,23 +12,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 +24,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>
  );
--- 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>
--- 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"
                />
--- a/src/components/RandomButton.tsx
+++ b/src/components/RandomButton.tsx
@ -5,11 +5,7 @@ export const RandomButton = ({ url, size = "large", handleClick, color }) => {
  const classString = `waves-effect waves-light btn-${size} ${color}`;
  return (
    <Link to={url}>
-      <button
-        // className="waves-effect waves-light btn-small"
-        className={classString}
-        onClick={handleClick}
-      >
+      <button className={classString} onClick={handleClick}>
        Random Recipe
      </button>
    </Link>
--- 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>
--- 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">
--- a/src/constants.ts
+++ b/src/constants.ts
@ -1 +1,2 @@
 export const buttonURL = "/random";
+export const links = ["categories", "contact"];
--- 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" />
--- 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 />
  );
 };
--- 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>
--- a/src/index.css
+++ b/src/index.css
--- 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 />
    </>
  );
 };
--- 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>
 );

--- 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">