refactor

TODO.md

@@ -13,3 +13,4 @@
 - [x] Create PageLayout component
 - [ ] Use Css-in-Js
 - [ ] Redirect to 404
+- [x] Typescript

src/containers/Contact/index.tsx

@@ -1,15 +1,15 @@
-import React, { useState } from "react";
-import PageLayout from "../layouts/PageLayout";
-import { ContactForm } from "../components/ContactForm";
+import { FC, useState } from "react";
+import PageLayout from "../../layouts/PageLayout";
+import { ContactForm } from "../../components/ContactForm";
 
-export const ContactPage = () => {
+export const Contact: FC = () => {
   const [isSubmitted, setIsSubmitted] = useState(false);
 
   return isSubmitted ? (
     <div className="container center-align">
       <img
         className="responsive-img"
-        src={require("../images/mail_sent.svg")}
+        src={require("../../images/mail_sent.svg")}
         alt="mail_sent"
         width="30%"
       />

src/containers/Meal/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { NotFoundPage } from "../../pages/NotFoundPage";
+import { NotFound } from "../NotFound";
 import { useFirebase } from "../../services/Firebase";
 import { useAuth0 } from "../../utils/auth0-spa";
 import { MealPage } from "./components/MealPage";
@@ -70,6 +70,6 @@ export const Meal: FC = () => {
       handleFavChange={handleFavChange}
     />
   ) : (
-    <NotFoundPage handleClick={getRandomMeal} />
+    <NotFound handleClick={getRandomMeal} />
   );
 };

src/containers/NotFound/index.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import { RandomButton } from "../../components/RandomButton";
+
+type Props = {
+  handleClick: (any) => void;
+};
+
+export const NotFound: FC<Props> = ({ handleClick }) => (
+  <div className="container center-align">
+    <div className="row">
+      <h1>Wrong Way!</h1>
+      <div className="col s12 offset-m3 m6">
+        <div className="card hoverable">
+          <div className="card-image">
+            <img
+              className="responsive-img"
+              src="https://images.otstatic.com/prod/26153735/2/large.jpg"
+              alt="404 not found"
+            />
+          </div>
+          <div className="card-content">
+            <RandomButton
+              url="/random"
+              handleClick={handleClick}
+              color={null}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);

src/containers/Profile/components/ProfilePage.tsx

@@ -7,28 +7,26 @@ type Props = {
   meals: MealSummary[];
 };
 
-export const ProfilePage: FC<Props> = ({ user, meals }) => {
-  return (
-    <div className="container">
-      <div className="row valign-wrapper">
-        <img
-          className="left circle responsive-img"
-          src={user.picture}
-          alt="Avatar"
-          width="15%"
-        />
-        <h2 className="col s9">{user.name}</h2>
-      </div>
-      <div className="row">
-        <b>Email: </b>
-        {user.email}
-        <h3>Favourites meals</h3>
-        <ul>
-          {meals?.map((meal) => (
-            <CardEntry key={meal.idMeal} meal={meal} />
-          ))}
-        </ul>
-      </div>
+export const ProfilePage: FC<Props> = ({ user, meals }) => (
+  <div className="container">
+    <div className="row valign-wrapper">
+      <img
+        className="left circle responsive-img"
+        src={user.picture}
+        alt="Avatar"
+        width="15%"
+      />
+      <h2 className="col s9">{user.name}</h2>
     </div>
-  );
-};
+    <div className="row">
+      <b>Email: </b>
+      {user.email}
+      <h3>Favourites meals</h3>
+      <ul>
+        {meals?.map((meal) => (
+          <CardEntry key={meal.idMeal} meal={meal} />
+        ))}
+      </ul>
+    </div>
+  </div>
+);

src/pages/NotFoundPage.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { RandomButton } from "../components/RandomButton";
-
-export const NotFoundPage = ({handleClick}) => {
-  return (
-    <div className="container center-align">
-      <div className="row">
-        <h1>Wrong Way!</h1>
-        <div className="col s12 offset-m3 m6">
-          <div className="card hoverable">
-            <div className="card-image">
-              <img
-                className="responsive-img"
-                src="https://images.otstatic.com/prod/26153735/2/large.jpg"
-                alt="404 not found"
-              />
-            </div>
-            <div className="card-content">
-              <RandomButton url="/random" handleClick={handleClick} color={null}/>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/router/AppRouter.tsx

@@ -6,8 +6,8 @@ import { Home } from "../containers/Home";
 import { Meal } from "../containers/Meal";
 import { Profile } from "../containers/Profile";
 import { Search } from "../containers/Search";
-import { ContactPage } from "../pages/Contact";
-import { NotFoundPage } from "../pages/NotFoundPage";
+import { Contact } from "../containers/Contact";
+import { NotFound } from "../containers/NotFound";
 import { PrivateRoute } from "./PrivateRoute";
 
 //TODO: remove state from router move to containers
@@ -37,11 +37,11 @@ const AppRouter = ({ getRandomMeal, searchString, searchResults }) => (
     </Route>
 
     <Route path="/contact">
-      <ContactPage />
+      <Contact />
     </Route>
 
     <Route path="/404">
-      <NotFoundPage handleClick={getRandomMeal} />
+      <NotFound handleClick={getRandomMeal} />
     </Route>
 
     <Route path="/:id">