From 25fff5c5117c1c12f91de10c1bebdc739ef26fbe Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Sun, 28 Mar 2021 16:18:08 +0200
Subject: [PATCH] refactor category container

---
 src/App.tsx                                   |  1 -
 src/components/CardEntry.tsx                  | 14 ++++---
 src/components/SearchResult.tsx               |  3 +-
 src/constants.ts                              |  1 +
 .../Category/components/CategoryPage.tsx      | 21 ++++++++++
 src/containers/Category/index.tsx             | 21 ++++++++++
 src/containers/CategoryController.tsx         | 25 ------------
 src/containers/Home/index.tsx                 | 38 +++++++++----------
 src/pages/CategoryPage.tsx                    | 31 ---------------
 src/pages/ProfilePage.tsx                     |  2 +-
 src/router/AppRouter.tsx                      | 14 +++----
 src/types/meal.ts                             |  6 +++
 12 files changed, 83 insertions(+), 94 deletions(-)
 create mode 100644 src/constants.ts
 create mode 100644 src/containers/Category/components/CategoryPage.tsx
 create mode 100644 src/containers/Category/index.tsx
 delete mode 100644 src/containers/CategoryController.tsx
 delete mode 100644 src/pages/CategoryPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index bfc36d8..68e315d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,7 +45,6 @@ export const App: FC = () => {
         getSearchResults={getSearchResults}
       >
         <AppRouter
-          buttonUrl={buttonUrl}
           getRandomMeal={getRandomMeal}
           searchString={searchString}
           searchResults={searchResults}
diff --git a/src/components/CardEntry.tsx b/src/components/CardEntry.tsx
index e8a7ab2..48df395 100644
--- a/src/components/CardEntry.tsx
+++ b/src/components/CardEntry.tsx
@@ -1,12 +1,16 @@
-import React from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
+import { MealSummary } from "../types/meal";
 
+type Props = {
+  meal: MealSummary;
+  className?: string;
+};
 
-
-export const CardEntry = ({ item, className = "col s12 m6" }) => {
-  const { idMeal, strMeal, strMealThumb } = item;
+export const CardEntry: FC<Props> = ({ meal, className = "col s12 m6" }) => {
+  const { idMeal, strMeal, strMealThumb } = meal;
   return (
-    <Link to={`${idMeal}`}>
+    <Link to={`/${idMeal}`}>
       <li>
         <div className={className}>
           <div className="card hoverable">
diff --git a/src/components/SearchResult.tsx b/src/components/SearchResult.tsx
index ca43efd..cd29b7c 100644
--- a/src/components/SearchResult.tsx
+++ b/src/components/SearchResult.tsx
@@ -1,6 +1,5 @@
-import React from "react";
 import { CardEntry } from "./CardEntry";
 
 export const SearchResult = ({ meal }) => {
-  return <CardEntry item={meal} />;
+  return <CardEntry meal={meal} />;
 };
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..03f6af4
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1 @@
+export const buttonURL = "/random";
diff --git a/src/containers/Category/components/CategoryPage.tsx b/src/containers/Category/components/CategoryPage.tsx
new file mode 100644
index 0000000..290225e
--- /dev/null
+++ b/src/containers/Category/components/CategoryPage.tsx
@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { CardEntry } from "../../../components/CardEntry";
+import PageLayout from "../../../layouts/PageLayout";
+import { MealSummary } from "../../../types/meal";
+
+type Props = {
+  meals: { meals: MealSummary[] };
+  strCategory: string;
+};
+
+export const CategoryPage: FC<Props> = ({ meals, strCategory }) => (
+  <PageLayout title={`Chef's ${strCategory} Recipes`}>
+    <ul>
+      <div className="row">
+        {meals.meals.map((meal) => (
+          <CardEntry meal={meal} key={meal.idMeal} />
+        ))}
+      </div>
+    </ul>
+  </PageLayout>
+);
diff --git a/src/containers/Category/index.tsx b/src/containers/Category/index.tsx
new file mode 100644
index 0000000..7223cf1
--- /dev/null
+++ b/src/containers/Category/index.tsx
@@ -0,0 +1,21 @@
+import { FC, useEffect, useState } from "react";
+import { Redirect, useParams } from "react-router-dom";
+import { getData } from "../../services/api";
+import { CategoryPage } from "./components/CategoryPage";
+
+export const Category: FC = () => {
+  const { strCategory } = useParams();
+  const [meals, setMeals] = useState({ meals: [] });
+
+  const getMeals = () => getData(strCategory, setMeals, "filter");
+
+  useEffect(() => {
+    getMeals();
+  }, []);
+
+  return !meals.meals ? (
+    <Redirect to="/404" />
+  ) : (
+    <CategoryPage meals={meals} strCategory={strCategory} />
+  );
+};
diff --git a/src/containers/CategoryController.tsx b/src/containers/CategoryController.tsx
deleted file mode 100644
index 06a9c8c..0000000
--- a/src/containers/CategoryController.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect, useState } from "react";
-import { Redirect, useParams } from "react-router-dom";
-import { CategoryPage } from "../pages/CategoryPage";
-import { getData } from "../services/api";
-
-export const CategoryController = () => {
-  const [meals, setMeals] = useState({ meals: [] });
-
-  const { strCategory } = useParams();
-
-  const getMeals = () => {
-    getData(strCategory, setMeals, "filter");
-  };
-
-  useEffect(() => {
-    getMeals();
-    // eslint-disable-next-line
-  }, []);
-
-  return meals.meals === null ? (
-    <Redirect to="/404" />
-  ) : (
-    <CategoryPage meals={meals} strCategory={strCategory} />
-  );
-};
diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx
index 6e9b01e..1ae5678 100644
--- a/src/containers/Home/index.tsx
+++ b/src/containers/Home/index.tsx
@@ -1,25 +1,23 @@
 import React from "react";
 import { RandomButton } from "../../components/RandomButton";
+import { buttonURL } from "../../constants";
 import HeroImage from "../../images/chef.svg";
 
-export const Home = () => {
-  const buttonUrl = "/random";
-  return (
-    <section className="container ">
-      <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={() => {}}
-          />
-        </div>
-        <picture className="col s12 m6">
-          <img src={HeroImage} alt="hero_image" width="100%" />
-        </picture>
+export const Home = () => (
+  <section className="container ">
+    <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={() => {}}
+        />
       </div>
-    </section>
-  );
-};
+      <picture className="col s12 m6">
+        <img src={HeroImage} alt="hero_image" width="100%" />
+      </picture>
+    </div>
+  </section>
+);
diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
deleted file mode 100644
index e65ce98..0000000
--- a/src/pages/CategoryPage.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import PageLayout from "../layouts/PageLayout";
-
-export const CategoryPage = ({ meals, strCategory }) => {
-  return (
-    <PageLayout title={`Chef's ${strCategory} Recipes`}>
-      <ul>
-        <div className="row">
-          {meals.meals.map((meal, i) => (
-            <li key={i}>
-              {/* <CardEntry item={meal} /> */}
-              <Link to={`/${meal.idMeal}`}>
-                <div className="col s12 m6">
-                  <div className="card hoverable">
-                    <div className="card-image">
-                      <img src={meal.strMealThumb} alt={meal.strMeal} />
-                    </div>
-                    <div className="card-content">
-                      <h4>{meal.strMeal}</h4>
-                    </div>
-                  </div>
-                </div>
-              </Link>
-            </li>
-          ))}
-        </div>
-      </ul>
-    </PageLayout>
-  );
-};
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 1d9885e..af229b4 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -17,7 +17,7 @@ export const ProfilePage = ({ user, data }) => {
         <b>Email: </b>
         {user.email}
         <h3>Favourites meals</h3>
-        <ul>{data && data.map((d, i) => <CardEntry key={i} item={d} />)}</ul>
+        <ul>{data && data.map((d, i) => <CardEntry key={i} meal={d} />)}</ul>
       </div>
     </div>
   );
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 22febe0..84ebe8d 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -1,6 +1,7 @@
 import { Redirect, Route, Switch } from "react-router-dom";
-import { CategoryController } from "../containers/CategoryController";
+import { buttonURL } from "../constants";
 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";
@@ -11,12 +12,7 @@ import { PrivateRoute } from "./PrivateRoute";
 
 //TODO: remove state from router move to containers
 
-const AppRouter = ({
-  buttonUrl,
-  getRandomMeal,
-  searchString,
-  searchResults,
-}) => (
+const AppRouter = ({ getRandomMeal, searchString, searchResults }) => (
   <Switch>
     <Route exact path="/">
       <Home />
@@ -24,7 +20,7 @@ const AppRouter = ({
 
     <PrivateRoute exact path="/profile" component={ProfileController} />
 
-    <Route exact path={buttonUrl}>
+    <Route exact path={buttonURL}>
       <Meal />
     </Route>
 
@@ -33,7 +29,7 @@ const AppRouter = ({
     </Route>
 
     <Route path="/categories/:strCategory/">
-      <CategoryController />
+      <Category />
     </Route>
 
     <Route exact path="/search">
diff --git a/src/types/meal.ts b/src/types/meal.ts
index c21089e..d0688d9 100644
--- a/src/types/meal.ts
+++ b/src/types/meal.ts
@@ -6,3 +6,9 @@ export default interface Meal {
   mealArea: string;
   isFav: boolean;
 }
+
+export interface MealSummary {
+  idMeal: string;
+  strMeal: string;
+  strMealThumb: string;
+}