compile

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {FC, useState} from "react";
 import { Router } from "./utils/router";
 
 import { PreLoader } from "./components/PreLoader";
@@ -11,7 +11,7 @@ import "./index.css";
 import MainLayout from "./layouts/MainLayout";
 import MainRouter from "./controllers/MainRouter";
 
-export const App = () => {
+export const App:FC = () => {
   const { loading } = useAuth0();
   const [searchString, setSearchString] = useState("");
   const [searchResults, setSearchResults] = useState({ meals: [] });
@@ -77,6 +77,7 @@ export const App = () => {
   };
 
   const [meal, setMeal] = useState(mealDef);
+  const buttonUrl = "/random";
 
   const getMeal = (id) => {
     getData(id, setMeal, "lookup");
@@ -95,23 +96,22 @@ export const App = () => {
   const handleChange = (e) => {
     const { value } = e.target;
     setSearchString(value);
-  };
 
-  const buttonUrl = "/random";
+  };
 
   return loading ? (
     <div className="container center-align valign-wrapper">
       <PreLoader />
     </div>
   ) : (
-    <Router history={history}>
+    <Router >
       <MainLayout
         buttonUrl={buttonUrl}
-        meal={meal}
-        getMeal={getMeal}
+        // meal={meal}
+        // getMeal={getMeal}
         getRandomMeal={getRandomMeal}
         searchString={searchString}
-        searchResults={searchResults}
+        // searchResults={searchResults}
         setSearchResults={setSearchResults}
         handleChange={handleChange}
         setSearchString={setSearchString}

src/components/CardEntry.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
+
+
 export const CardEntry = ({ item, className = "col s12 m6" }) => {
   const { idMeal, strMeal, strMealThumb } = item;
   return (

src/components/ContactForm.tsx

@@ -97,7 +97,7 @@ const ContactFormTextArea = ({ id, value, dispatch }) => {
       <label htmlFor={id}>{id}</label>
       <textarea
         className="materialize-textarea validate"
-        rows="12"
+        rows={12}
         name={id}
         value={value}
         onChange={handleChange}

src/components/SideNav.tsx

@@ -37,7 +37,7 @@ export const SideNav = ({
                 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 */,
+                  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/controllers/MealController.tsx

@@ -27,7 +27,7 @@ export const MealController = ({ meal, getMeal, getRandomMeal }) => {
     strInstructions,
   } = mealItem;
 
-  const [isFav, setIsFav] = useState();
+  const [isFav, setIsFav] = useState<boolean>();
 
   /**
    * Updates fav status in db

src/layouts/MainLayout.tsx

@@ -62,6 +62,7 @@ const MainLayout = ({
           closeNavClick={closeNavClick}
           links={links}
           buttonUrl={buttonUrl}
+          handleClick={()=>{}}
         />
       </header>
       {children}

src/pages/HomePage.tsx

@@ -7,7 +7,7 @@ export const HomePage = ({ buttonUrl }) => {
       <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" />
+          <RandomButton url={buttonUrl} size="large" color="orange darken-2" handleClick={()=>{}}/>
         </div>
         <div className="col s12 m6">
           <img

src/pages/NotFoundPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { RandomButton } from "../components/RandomButton";
 
-export const NotFoundPage = () => {
+export const NotFoundPage = ({handleClick}) => {
   return (
     <div className="container center-align">
       <div className="row">
@@ -16,7 +16,7 @@ export const NotFoundPage = () => {
               />
             </div>
             <div className="card-content">
-              <RandomButton url="/random" />
+              <RandomButton url="/random" handleClick={handleClick} color={null}/>
             </div>
           </div>
         </div>