random button with context

src/App.tsx

@@ -4,7 +4,6 @@ import "./index.css";
 import MainLayout from "./layouts/MainLayout";
 import { AppRouter } from "./router";
 import { Router } from "./router/Router";
-import { getData } from "./services/api";
 import { MealSummary } from "./types/meal";
 import { useAuth0 } from "./utils/auth0-spa";
 
@@ -14,11 +13,6 @@ export const App: FC = () => {
   const [searchResults, setSearchResults] = useState({
     meals: [] as MealSummary[],
   });
-  const [_, setMeal] = useState(null);
-
-  const getRandomMeal = () => {
-    getData("random", setMeal);
-  };
 
   return loading ? (
     <div className="container center-align valign-wrapper">
@@ -27,7 +21,6 @@ export const App: FC = () => {
   ) : (
     <Router>
       <MainLayout
-        getRandomMeal={getRandomMeal}
         searchString={searchString}
         setSearchResults={setSearchResults}
         setSearchString={setSearchString}

src/components/Navbar.tsx

@@ -8,12 +8,9 @@ import { Logo } from "./Logo";
 import { LogOutButton } from "./LogOutButton";
 import { RandomButton } from "./RandomButton";
 
-type Props = {
-  openNavClick: React.MouseEventHandler;
-  handleClick: () => void;
-};
+type Props = { openNavClick: React.MouseEventHandler };
 
-export const Navbar: FC<Props> = ({ openNavClick, handleClick }) => {
+export const Navbar: FC<Props> = ({ openNavClick }) => {
   const { isAuthenticated } = useAuth0();
 
   return (
@@ -31,7 +28,6 @@ export const Navbar: FC<Props> = ({ openNavClick, handleClick }) => {
               )}
               <li>
                 <RandomButton
-                  handleClick={handleClick}
                   url={buttonURL}
                   size="small"
                   color="orange darken-2"

src/components/RandomButton.tsx

@@ -1,23 +1,20 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
+import { useMeal } from "../store/meal";
+import { fetchRandomMeal } from "../store/meal/async";
 
 type Props = {
   url: string;
   size?: string;
-  handleClick: () => void;
   color?: string;
 };
 
-export const RandomButton: FC<Props> = ({
-  url,
-  size = "large",
-  handleClick,
-  color,
-}) => {
+export const RandomButton: FC<Props> = ({ url, size = "large", color }) => {
   const classString = `waves-effect waves-light btn-${size} ${color}`;
+  const { dispatch } = useMeal();
   return (
     <Link to={url}>
-      <button className={classString} onClick={handleClick}>
+      <button className={classString} onClick={() => fetchRandomMeal(dispatch)}>
         Random Recipe
       </button>
     </Link>

src/components/SideNav.tsx

@@ -9,13 +9,9 @@ import { LogInButton } from "./LogInButton";
 import { LogOutButton } from "./LogOutButton";
 import { RandomButton } from "./RandomButton";
 
-type Props = {
-  showNav: boolean;
-  closeNavClick: React.MouseEventHandler;
-  handleClick: () => void;
-};
+type Props = { showNav: boolean; closeNavClick: React.MouseEventHandler };
 
-export const SideNav: FC<Props> = ({ showNav, closeNavClick, handleClick }) => {
+export const SideNav: FC<Props> = ({ showNav, closeNavClick }) => {
   const { isAuthenticated, user } = useAuth0();
   let transformStyle = {
     transform: showNav ? "translateX(0%)" : "translateX(-105%)",
@@ -65,12 +61,7 @@ export const SideNav: FC<Props> = ({ showNav, closeNavClick, handleClick }) => {
       </li>
 
       <li>
-        <RandomButton
-          handleClick={handleClick}
-          url={buttonURL}
-          size="small"
-          color="orange darken-2"
-        />
+        <RandomButton url={buttonURL} size="small" color="orange darken-2" />
       </li>
       <li>
         <Link to="#">

src/containers/Home/index.tsx

@@ -8,12 +8,7 @@ export const Home: FC = () => (
     <div className="row">
       <div className="col s12 m6">
         <h1 className="logo">Chef's Online Cookbook</h1>
-        <RandomButton
-          url={buttonURL}
-          size="large"
-          color="orange darken-2"
-          handleClick={() => {}}
-        />
+        <RandomButton url={buttonURL} size="large" color="orange darken-2" />
       </div>
       <picture className="col s12 m6">
         <img src={HeroImage} alt="hero_image" width="100%" />

src/containers/NotFound/index.tsx

@@ -15,7 +15,7 @@ export const NotFound: FC = () => (
             />
           </div>
           <div className="card-content">
-            <RandomButton url="/random" handleClick={() => {}} />
+            <RandomButton url="/random" />
           </div>
         </div>
       </div>

src/layouts/MainLayout.tsx

@@ -6,7 +6,6 @@ import { SideNav } from "../components/SideNav";
 import { MealSummary } from "../types/meal";
 
 type Props = {
-  getRandomMeal: () => void;
   searchString: string;
   setSearchString: React.Dispatch<React.SetStateAction<string>>;
   setSearchResults: React.Dispatch<
@@ -14,7 +13,6 @@ type Props = {
   >;
 };
 const MainLayout: FC<Props> = ({
-  getRandomMeal,
   searchString,
   setSearchString,
   setSearchResults,
@@ -43,18 +41,14 @@ const MainLayout: FC<Props> = ({
   return (
     <>
       <header>
-        <Navbar handleClick={getRandomMeal} openNavClick={openNavClick} />
+        <Navbar openNavClick={openNavClick} />
 
         <SearchBar
           searchString={searchString}
           setSearchString={setSearchString}
           setSearchResults={setSearchResults}
         />
-        <SideNav
-          showNav={showNav}
-          closeNavClick={closeNavClick}
-          handleClick={() => {}}
-        />
+        <SideNav showNav={showNav} closeNavClick={closeNavClick} />
       </header>
       <main>{children}</main>
       <Footer />