ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactoring (#6)

Browse source 
* 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
This commit is contained in:
Ruidy 2021-03-29 12:37:53 +02:00 committed by GitHub
parent 0e3b0a7cee
commit 8409d09373
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 82 additions and 9443 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
public/index.html
View file

@ -1,31 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#ff6d00" /> <meta name="theme-color" content="#ff6d00"/>
<meta name="description" content="Online Meal Planner | Chef's" /> <meta name="description" content="Online Meal Planner | Chef's"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
<link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
rel="stylesheet" <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
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"/>
<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"
/>
<title>Online Meal Planner | Chef's</title> <title>Online Meal Planner | Chef's</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body>
</body>
</html> </html>

21
src/App.tsx
View file

@ -12,23 +12,11 @@ export const App: FC = () => {
const [searchString, setSearchString] = useState(""); const [searchString, setSearchString] = useState("");
const [searchResults, setSearchResults] = useState({ meals: [] }); const [searchResults, setSearchResults] = useState({ meals: [] });
const [meal, setMeal] = useState(null); const [meal, setMeal] = useState(null);
const buttonUrl = "/random";
const getRandomMeal = () => { const getRandomMeal = () => {
getData("random", setMeal); getData("random", setMeal);
}; };
const getSearchResults = (e) => {
searchString === ""
? e.preventDefault()
: getData(searchString, setSearchResults, "search");
};
const handleChange = (e) => {
const { value } = e.target;
setSearchString(value);
};
return loading ? ( return loading ? (
<div className="container center-align valign-wrapper"> <div className="container center-align valign-wrapper">
<PreLoader /> <PreLoader />
@ -36,19 +24,12 @@ export const App: FC = () => {
) : ( ) : (
<Router> <Router>
<MainLayout <MainLayout
buttonUrl={buttonUrl}
getRandomMeal={getRandomMeal} getRandomMeal={getRandomMeal}
searchString={searchString} searchString={searchString}
setSearchResults={setSearchResults} setSearchResults={setSearchResults}
handleChange={handleChange}
setSearchString={setSearchString} setSearchString={setSearchString}
getSearchResults={getSearchResults}
> >
<AppRouter <AppRouter searchString={searchString} searchResults={searchResults} />
getRandomMeal={getRandomMeal}
searchString={searchString}
searchResults={searchResults}
/>
</MainLayout> </MainLayout>
</Router> </Router>
); );

10
src/components/Footer.tsx
View file

@ -1,9 +1,11 @@
import React from "react"; import { FC } from "react";
import { links } from "../constants";
import { CopyrightText } from "./CopyrightText"; import { CopyrightText } from "./CopyrightText";
import { GitHubLink } from "./GitHubLink";
import { FooterLink } from "./FooterLink"; import { FooterLink } from "./FooterLink";
import { GitHubLink } from "./GitHubLink";
export const Footer = ({ links }) => { export const Footer: FC = () => {
const footerLinks = [...links, "random"];
return ( return (
<footer className="page-footer"> <footer className="page-footer">
<div className="row"> <div className="row">
@ -11,7 +13,7 @@ export const Footer = ({ links }) => {
<div className=" s12"> <div className=" s12">
<h5 className="black-text">Navigation</h5> <h5 className="black-text">Navigation</h5>
<ul> <ul>
{links.map((link, i) => ( {footerLinks.map((link, i) => (
<FooterLink key={i} link={link} textColor="black" /> <FooterLink key={i} link={link} textColor="black" />
))} ))}
</ul> </ul>

10
src/components/Navbar.tsx
View file

@ -1,13 +1,13 @@
import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { buttonURL, links } from "../constants";
import { useAuth0 } from "../utils/auth0-spa"; import { useAuth0 } from "../utils/auth0-spa";
import { Logo } from "./Logo";
import { RandomButton } from "./RandomButton";
import { FooterLink } from "./FooterLink"; import { FooterLink } from "./FooterLink";
import { LogInButton } from "./LogInButton"; import { LogInButton } from "./LogInButton";
import { Logo } from "./Logo";
import { LogOutButton } from "./LogOutButton"; import { LogOutButton } from "./LogOutButton";
import { RandomButton } from "./RandomButton";
export const Navbar = ({ openNavClick, links, buttonUrl, handleClick }) => { export const Navbar = ({ openNavClick, handleClick }) => {
const { isAuthenticated } = useAuth0(); const { isAuthenticated } = useAuth0();
return ( return (
@ -26,7 +26,7 @@ export const Navbar = ({ openNavClick, links, buttonUrl, handleClick }) => {
<li> <li>
<RandomButton <RandomButton
handleClick={handleClick} handleClick={handleClick}
url={buttonUrl} url={buttonURL}
size="small" size="small"
color="orange darken-2" color="orange darken-2"
/> />

6
src/components/RandomButton.tsx
View file

@ -5,11 +5,7 @@ export const RandomButton = ({ url, size = "large", handleClick, color }) => {
const classString = `waves-effect waves-light btn-${size} ${color}`; const classString = `waves-effect waves-light btn-${size} ${color}`;
return ( return (
<Link to={url}> <Link to={url}>
<button <button className={classString} onClick={handleClick}>
// className="waves-effect waves-light btn-small"
className={classString}
onClick={handleClick}
>
Random Recipe Random Recipe
</button> </button>
</Link> </Link>

18
src/components/SearchBar.tsx
View file

@ -1,18 +1,28 @@
import React from "react"; import { ChangeEvent } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { getData } from "../services/api";
export const SearchBar = ({ export const SearchBar = ({
searchString, searchString,
setSearchString, setSearchString,
setSearchResults, setSearchResults,
handleChange,
onSubmit,
}) => { }) => {
const getSearchResults = (e) => {
searchString === ""
? e.preventDefault()
: getData(searchString, setSearchResults, "search");
};
const clearSearchBar = () => { const clearSearchBar = () => {
setSearchString(""); setSearchString("");
setSearchResults({ meals: [] }); setSearchResults({ meals: [] });
}; };
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { value } = e.target;
setSearchString(value);
};
return ( return (
<div className="section"> <div className="section">
<div className="container"> <div className="container">
@ -44,7 +54,7 @@ export const SearchBar = ({
type="submit" type="submit"
name="searchButton" name="searchButton"
value="Search" value="Search"
onClick={onSubmit} onClick={getSearchResults}
> >
<i className="material-icons right">send</i> <i className="material-icons right">send</i>
</button> </button>

50
src/components/SideNav.tsx
View file

@ -1,18 +1,14 @@
import React from "react";
import { Link } from "react-router-dom"; 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 { useAuth0 } from "../utils/auth0-spa";
import { RandomButton } from "./RandomButton";
import { FooterLink } from "./FooterLink"; import { FooterLink } from "./FooterLink";
import { LogInButton } from "./LogInButton"; import { LogInButton } from "./LogInButton";
import { LogOutButton } from "./LogOutButton"; import { LogOutButton } from "./LogOutButton";
import { RandomButton } from "./RandomButton";
export const SideNav = ({ export const SideNav = ({ showNav, closeNavClick, handleClick }) => {
showNav,
closeNavClick,
links,
buttonUrl,
handleClick,
}) => {
const { isAuthenticated, user } = useAuth0(); const { isAuthenticated, user } = useAuth0();
let transformStyle = { let transformStyle = {
transform: showNav ? "translateX(0%)" : "translateX(-105%)", transform: showNav ? "translateX(0%)" : "translateX(-105%)",
@ -25,7 +21,6 @@ export const SideNav = ({
<div className="user-view" style={{ height: "30vh" }}> <div className="user-view" style={{ height: "30vh" }}>
<div className="background"> <div className="background">
<img <img
// className="responsive-img"
style={{ style={{
position: "fixed" /* Sit on top of the page content */, position: "fixed" /* Sit on top of the page content */,
width: "100%" /* Full width (cover the whole page) */, width: "100%" /* Full width (cover the whole page) */,
@ -36,11 +31,10 @@ export const SideNav = ({
bottom: "0", bottom: "0",
backgroundColor: backgroundColor:
"rgba(0,0,0,0.5)" /* Black background with opacity */, "rgba(0,0,0,0.5)" /* Black background with opacity */,
zIndex: zIndex: 2 /* Specify a stack order in case you're using a different order for other elements */,
2 /* Specify a stack order in case you're using a different order for other elements */,
// cursor: "pointer" /* Add a pointer on hover */ // cursor: "pointer" /* Add a pointer on hover */
}} }}
src={require("../images/special_event.svg")} src={SpecialEventImage}
alt="sidenav_background" alt="sidenav_background"
/> />
</div> </div>
@ -49,28 +43,24 @@ export const SideNav = ({
close close
</i> </i>
{isAuthenticated ? ( <Link to="/profile">
<Link to="/profile"> {isAuthenticated ? (
<img className="circle" src={user.picture} alt="user_avatar" /> <div>
<span className="white-text name">{user.name}</span> <img className="circle" src={user.picture} alt="user_avatar" />
<span className="white-text email">{user.email}</span> <span className="white-text name">{user.name}</span>
</Link> <span className="white-text email">{user.email}</span>
) : ( </div>
// <Link to="/profile"> ) : (
<img <img className="circle" src={ChefImage} alt="user_avatar" />
className="circle" )}
src={require("../images/chef.svg")} </Link>
alt="user_avatar"
/>
// </Link>
)}
</div> </div>
</li> </li>
<li> <li>
<RandomButton <RandomButton
handleClick={handleClick} handleClick={handleClick}
url={buttonUrl} url={buttonURL}
size="small" size="small"
color="orange darken-2" color="orange darken-2"
/> />
@ -86,7 +76,7 @@ export const SideNav = ({
</li> </li>
<li> <li>
<div className="divider"></div> <div className="divider" />
</li> </li>
<li> <li>
<Link to="#" className="subheader"> <Link to="#" className="subheader">

1
src/constants.ts
View file

@ -1 +1,2 @@
export const buttonURL = "/random"; export const buttonURL = "/random";
export const links = ["categories", "contact"];

5
src/containers/Category/index.tsx
View file

@ -7,11 +7,10 @@ export const Category: FC = () => {
const { strCategory } = useParams(); const { strCategory } = useParams();
const [meals, setMeals] = useState({ meals: [] }); const [meals, setMeals] = useState({ meals: [] });
const getMeals = () => getData(strCategory, setMeals, "filter");
useEffect(() => { useEffect(() => {
const getMeals = () => getData(strCategory, setMeals, "filter");
getMeals(); getMeals();
}, []); }, [strCategory]);
return !meals.meals ? ( return !meals.meals ? (
<Redirect to="/404" /> <Redirect to="/404" />

2
src/containers/Meal/index.tsx
View file

@ -70,6 +70,6 @@ export const Meal: FC = () => {
handleFavChange={handleFavChange} handleFavChange={handleFavChange}
/> />
) : ( ) : (
<NotFound handleClick={getRandomMeal} /> <NotFound />
); );
}; };

9
src/containers/NotFound/index.tsx
View file

@ -1,11 +1,8 @@
import { FC } from "react"; import { FC } from "react";
import { RandomButton } from "../../components/RandomButton"; import { RandomButton } from "../../components/RandomButton";
import { getRandomMeal } from "../Meal/service";
type Props = { export const NotFound: FC = () => (
handleClick: (any) => void;
};
export const NotFound: FC<Props> = ({ handleClick }) => (
<div className="container center-align"> <div className="container center-align">
<div className="row"> <div className="row">
<h1>Wrong Way!</h1> <h1>Wrong Way!</h1>
@ -21,7 +18,7 @@ export const NotFound: FC<Props> = ({ handleClick }) => (
<div className="card-content"> <div className="card-content">
<RandomButton <RandomButton
url="/random" url="/random"
handleClick={handleClick} handleClick={getRandomMeal}
color={null} color={null}
/> />
</div> </div>

9318
src/index.css
View file

File diff suppressed because it is too large Load diff

24
src/layouts/MainLayout.tsx
View file

@ -6,24 +6,18 @@ import { SideNav } from "../components/SideNav";
// TODO FC... // TODO FC...
const MainLayout = ({ const MainLayout = ({
buttonUrl,
getRandomMeal, getRandomMeal,
handleChange,
searchString, searchString,
setSearchString, setSearchString,
getSearchResults,
setSearchResults, setSearchResults,
children, children,
}) => { }) => {
const [showNav, setShowNav] = useState(false); const [showNav, setShowNav] = useState(false);
const links = ["categories", "contact"];
const openNavClick = (e) => { const openNavClick = (e) => {
e.preventDefault(); e.preventDefault();
setShowNav(true); setShowNav(true);
document.addEventListener("keydown", handleEscKey); document.addEventListener("keydown", handleEscKey);
// document.addEventListener("click", handleOutsideClick);
}; };
const closeNavClick = (e) => { const closeNavClick = (e) => {
@ -37,37 +31,25 @@ const MainLayout = ({
setShowNav(false); setShowNav(false);
} }
}; };
// const handleOutsideClick = e => {
// console.log(e);
// };
return ( return (
<> <>
<header> <header>
<Navbar <Navbar handleClick={getRandomMeal} openNavClick={openNavClick} />
handleClick={getRandomMeal}
buttonUrl={buttonUrl}
openNavClick={openNavClick}
links={links}
/>
<SearchBar <SearchBar
searchString={searchString} searchString={searchString}
setSearchString={setSearchString} setSearchString={setSearchString}
handleChange={handleChange}
onSubmit={getSearchResults}
setSearchResults={setSearchResults} setSearchResults={setSearchResults}
/> />
<SideNav <SideNav
showNav={showNav} showNav={showNav}
closeNavClick={closeNavClick} closeNavClick={closeNavClick}
links={links}
buttonUrl={buttonUrl}
handleClick={() => {}} handleClick={() => {}}
/> />
</header> </header>
{children} <main>{children}</main>
<Footer links={[...links, "random"]} /> <Footer />
</> </>
); );
}; };

2
src/layouts/PageLayout.tsx
View file

@ -7,7 +7,7 @@ type Props = {
const PageLayout: FC<Props> = ({ title, children }) => ( const PageLayout: FC<Props> = ({ title, children }) => (
<div className="container"> <div className="container">
<h1 className="logo">{title}</h1> <h1 className="logo">{title}</h1>
{children} <main>{children}</main>
</div> </div>
); );

4
src/router/AppRouter.tsx
View file

@ -12,7 +12,7 @@ import { PrivateRoute } from "./PrivateRoute";
//TODO: remove state from router move to containers //TODO: remove state from router move to containers
const AppRouter = ({ getRandomMeal, searchString, searchResults }) => ( const AppRouter = ({ searchString, searchResults }) => (
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
<Home /> <Home />
@ -41,7 +41,7 @@ const AppRouter = ({ getRandomMeal, searchString, searchResults }) => (
</Route> </Route>
<Route path="/404"> <Route path="/404">
<NotFound handleClick={getRandomMeal} /> <NotFound />
</Route> </Route>
<Route path="/:id"> <Route path="/:id">