From 73384212adf1e5127f67648e75033aa26afb466a Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Sun, 28 Mar 2021 16:56:01 +0200
Subject: [PATCH] refactor search and profile container

---
 src/components/SearchResult.tsx               |  5 ----
 .../Profile/components}/ProfilePage.tsx       | 18 ++++++++++---
 src/containers/Profile/index.tsx              | 25 +++++++++++++++++++
 src/containers/ProfileController.tsx          | 25 -------------------
 .../Search/components}/SearchPage.tsx         | 23 +++++++++--------
 .../Search/components/SearchResult.tsx        |  9 +++++++
 src/containers/Search/index.tsx               | 12 +++++++++
 src/containers/SearchController.tsx           | 12 ---------
 src/router/AppRouter.tsx                      | 11 +++-----
 9 files changed, 77 insertions(+), 63 deletions(-)
 delete mode 100644 src/components/SearchResult.tsx
 rename src/{pages => containers/Profile/components}/ProfilePage.tsx (52%)
 create mode 100644 src/containers/Profile/index.tsx
 delete mode 100644 src/containers/ProfileController.tsx
 rename src/{pages => containers/Search/components}/SearchPage.tsx (50%)
 create mode 100644 src/containers/Search/components/SearchResult.tsx
 create mode 100644 src/containers/Search/index.tsx
 delete mode 100644 src/containers/SearchController.tsx

diff --git a/src/components/SearchResult.tsx b/src/components/SearchResult.tsx
deleted file mode 100644
index cd29b7c..0000000
--- a/src/components/SearchResult.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CardEntry } from "./CardEntry";
-
-export const SearchResult = ({ meal }) => {
-  return <CardEntry meal={meal} />;
-};
diff --git a/src/pages/ProfilePage.tsx b/src/containers/Profile/components/ProfilePage.tsx
similarity index 52%
rename from src/pages/ProfilePage.tsx
rename to src/containers/Profile/components/ProfilePage.tsx
index af229b4..c4e32df 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/containers/Profile/components/ProfilePage.tsx
@@ -1,7 +1,13 @@
-import React from "react";
-import { CardEntry } from "../components/CardEntry";
+import { FC } from "react";
+import { CardEntry } from "../../../components/CardEntry";
+import { MealSummary } from "../../../types/meal";
 
-export const ProfilePage = ({ user, data }) => {
+type Props = {
+  user: any;
+  meals: MealSummary[];
+};
+
+export const ProfilePage: FC<Props> = ({ user, meals }) => {
   return (
     <div className="container">
       <div className="row valign-wrapper">
@@ -17,7 +23,11 @@ export const ProfilePage = ({ user, data }) => {
         <b>Email: </b>
         {user.email}
         <h3>Favourites meals</h3>
-        <ul>{data && data.map((d, i) => <CardEntry key={i} meal={d} />)}</ul>
+        <ul>
+          {meals?.map((meal) => (
+            <CardEntry key={meal.idMeal} meal={meal} />
+          ))}
+        </ul>
       </div>
     </div>
   );
diff --git a/src/containers/Profile/index.tsx b/src/containers/Profile/index.tsx
new file mode 100644
index 0000000..cea277b
--- /dev/null
+++ b/src/containers/Profile/index.tsx
@@ -0,0 +1,25 @@
+import { FC, useEffect, useState } from "react";
+import { PreLoader } from "../../components/PreLoader";
+import { useFirebase } from "../../services/Firebase";
+import { useAuth0 } from "../../utils/auth0-spa";
+import { ProfilePage } from "./components/ProfilePage";
+
+export const Profile: FC = () => {
+  const { loading, user } = useAuth0();
+  const [favs, setFavs] = useState([]);
+  const db = useFirebase();
+
+  useEffect(() => {
+    db.getByEmail(user.email).then((res) => {
+      setFavs(res.favs);
+    });
+  }, [db, user.email]);
+
+  return loading || !user ? ( // is caught by PrivateRoute
+    <div className="container center-align">
+      <PreLoader />
+    </div>
+  ) : (
+    <ProfilePage user={user} meals={favs} />
+  );
+};
diff --git a/src/containers/ProfileController.tsx b/src/containers/ProfileController.tsx
deleted file mode 100644
index b522a98..0000000
--- a/src/containers/ProfileController.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useAuth0 } from "../utils/auth0-spa";
-import { PreLoader } from "../components/PreLoader";
-import { ProfilePage } from "../pages/ProfilePage";
-import { useFirebase } from "../services/Firebase";
-
-export const ProfileController = () => {
-  const { loading, user } = useAuth0();
-  const [favs, setFavs] = useState([]);
-  const db = useFirebase();
-
-  useEffect(() => {
-    db.getByEmail(user.email).then((res) => {
-      setFavs(res.favs);
-    });
-  }, [db, user.email]);
-
-  return loading || !user ? ( // is catched by PrivateRoute
-    <div className="container center-align">
-      <PreLoader />
-    </div>
-  ) : (
-    <ProfilePage user={user} data={favs} />
-  );
-};
diff --git a/src/pages/SearchPage.tsx b/src/containers/Search/components/SearchPage.tsx
similarity index 50%
rename from src/pages/SearchPage.tsx
rename to src/containers/Search/components/SearchPage.tsx
index 97f9b44..d9f4386 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/containers/Search/components/SearchPage.tsx
@@ -1,21 +1,24 @@
-import React from "react";
-import { SearchResult } from "../components/SearchResult";
-import PageLayout from "../layouts/PageLayout";
+import { FC } from "react";
+import BreakfastImage from "../../../images/breakfast.svg";
+import PageLayout from "../../../layouts/PageLayout";
+import { MealSummary } from "../../../types/meal";
+import { SearchResult } from "./SearchResult";
 
-export const SearchPage = ({ searchString, searchResults }) => {
+type Props = {
+  searchString: string;
+  searchResults: { meals: MealSummary[] };
+};
+
+export const SearchPage: FC<Props> = ({ searchString, searchResults }) => {
   const { meals } = searchResults;
   return (
     <PageLayout title={`Results for: ${searchString}`}>
-      {meals === null ? (
+      {!meals ? (
         <div className="center-align">
           <p>
             No results to display, instead there is a picture of my breakfast.
           </p>
-          <img
-            src={require("../images/breakfast.svg")}
-            alt="Nothing here!"
-            width="70%"
-          />
+          <img src={BreakfastImage} alt="Nothing here!" width="70%" />
         </div>
       ) : (
         <div className="row">
diff --git a/src/containers/Search/components/SearchResult.tsx b/src/containers/Search/components/SearchResult.tsx
new file mode 100644
index 0000000..5e142dc
--- /dev/null
+++ b/src/containers/Search/components/SearchResult.tsx
@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { CardEntry } from "../../../components/CardEntry";
+import { MealSummary } from "../../../types/meal";
+
+type Props = {
+  meal: MealSummary;
+};
+
+export const SearchResult: FC<Props> = ({ meal }) => <CardEntry meal={meal} />;
diff --git a/src/containers/Search/index.tsx b/src/containers/Search/index.tsx
new file mode 100644
index 0000000..181e596
--- /dev/null
+++ b/src/containers/Search/index.tsx
@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { MealSummary } from "../../types/meal";
+import { SearchPage } from "./components/SearchPage";
+
+type Props = {
+  searchString: string;
+  searchResults: { meals: MealSummary[] };
+};
+
+export const Search: FC<Props> = ({ searchString, searchResults }) => (
+  <SearchPage searchString={searchString} searchResults={searchResults} />
+);
diff --git a/src/containers/SearchController.tsx b/src/containers/SearchController.tsx
deleted file mode 100644
index 5565eb5..0000000
--- a/src/containers/SearchController.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import { SearchPage } from "../pages/SearchPage";
-
-export const SearchController = ({ searchString, searchResults }) => {
-  if (searchResults === null) {
-    searchResults = { meals: [] };
-  }
-
-  return (
-    <SearchPage searchString={searchString} searchResults={searchResults} />
-  );
-};
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 84ebe8d..4c88f59 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -4,8 +4,8 @@ import { Categories } from "../containers/Categories";
 import { Category } from "../containers/Category";
 import { Home } from "../containers/Home";
 import { Meal } from "../containers/Meal";
-import { ProfileController } from "../containers/ProfileController";
-import { SearchController } from "../containers/SearchController";
+import { Profile } from "../containers/Profile";
+import { Search } from "../containers/Search";
 import { ContactPage } from "../pages/Contact";
 import { NotFoundPage } from "../pages/NotFoundPage";
 import { PrivateRoute } from "./PrivateRoute";
@@ -18,7 +18,7 @@ const AppRouter = ({ getRandomMeal, searchString, searchResults }) => (
       <Home />
     </Route>
 
-    <PrivateRoute exact path="/profile" component={ProfileController} />
+    <PrivateRoute exact path="/profile" component={Profile} />
 
     <Route exact path={buttonURL}>
       <Meal />
@@ -33,10 +33,7 @@ const AppRouter = ({ getRandomMeal, searchString, searchResults }) => (
     </Route>
 
     <Route exact path="/search">
-      <SearchController
-        searchString={searchString}
-        searchResults={searchResults}
-      />
+      <Search searchString={searchString} searchResults={searchResults} />
     </Route>
 
     <Route path="/contact">