From 909b4a80cb563888e49108207b5e8529bf0dd01b Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Sun, 28 Mar 2021 17:03:50 +0200
Subject: [PATCH] refactor

---
 TODO.md                                       |  1 +
 .../Contact/index.tsx}                        | 10 ++--
 src/containers/Meal/index.tsx                 |  4 +-
 src/containers/NotFound/index.tsx             | 32 +++++++++++++
 .../Profile/components/ProfilePage.tsx        | 46 +++++++++----------
 src/pages/NotFoundPage.tsx                    | 26 -----------
 src/router/AppRouter.tsx                      |  8 ++--
 7 files changed, 66 insertions(+), 61 deletions(-)
 rename src/{pages/Contact.tsx => containers/Contact/index.tsx} (63%)
 create mode 100644 src/containers/NotFound/index.tsx
 delete mode 100644 src/pages/NotFoundPage.tsx

diff --git a/TODO.md b/TODO.md
index e0f26af..1fcf4a3 100644
--- a/TODO.md
+++ b/TODO.md
@@ -13,3 +13,4 @@
 - [x] Create PageLayout component
 - [ ] Use Css-in-Js
 - [ ] Redirect to 404
+- [x] Typescript
diff --git a/src/pages/Contact.tsx b/src/containers/Contact/index.tsx
similarity index 63%
rename from src/pages/Contact.tsx
rename to src/containers/Contact/index.tsx
index 57fae12..beb5600 100644
--- a/src/pages/Contact.tsx
+++ b/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%"
       />
diff --git a/src/containers/Meal/index.tsx b/src/containers/Meal/index.tsx
index 6a26ac5..66ef870 100644
--- a/src/containers/Meal/index.tsx
+++ b/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} />
   );
 };
diff --git a/src/containers/NotFound/index.tsx b/src/containers/NotFound/index.tsx
new file mode 100644
index 0000000..11e0719
--- /dev/null
+++ b/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>
+);
diff --git a/src/containers/Profile/components/ProfilePage.tsx b/src/containers/Profile/components/ProfilePage.tsx
index c4e32df..0858246 100644
--- a/src/containers/Profile/components/ProfilePage.tsx
+++ b/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>
+);
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
deleted file mode 100644
index af45640..0000000
--- a/src/pages/NotFoundPage.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 4c88f59..373be83 100644
--- a/src/router/AppRouter.tsx
+++ b/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">