From 760d54c07cdc8a7ab21762d353c1feb958f252e6 Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Sun, 28 Mar 2021 15:48:41 +0200
Subject: [PATCH] refactor categories container

---
 .../components/CategoriesEntry.tsx}           | 25 +++++++------------
 .../Categories/components/CategoriesPage.tsx  | 21 ++++++++++++++++
 .../index.tsx}                                | 11 ++++----
 .../Meal/{ => components}/MealPage.tsx        |  8 +++---
 .../Meal/components/MealPresentation.tsx      |  2 +-
 src/containers/Meal/index.tsx                 |  2 +-
 src/pages/CategoryListPage.tsx                | 15 -----------
 src/router/AppRouter.tsx                      |  4 +--
 src/types/{Meal.ts => meal.ts}                |  0
 9 files changed, 43 insertions(+), 45 deletions(-)
 rename src/{components/CategoryEntry.tsx => containers/Categories/components/CategoriesEntry.tsx} (58%)
 create mode 100644 src/containers/Categories/components/CategoriesPage.tsx
 rename src/containers/{CategoryListController.tsx => Categories/index.tsx} (53%)
 rename src/containers/Meal/{ => components}/MealPage.tsx (72%)
 delete mode 100644 src/pages/CategoryListPage.tsx
 rename src/types/{Meal.ts => meal.ts} (100%)

diff --git a/src/components/CategoryEntry.tsx b/src/containers/Categories/components/CategoriesEntry.tsx
similarity index 58%
rename from src/components/CategoryEntry.tsx
rename to src/containers/Categories/components/CategoriesEntry.tsx
index 1d0eadd..1d47280 100644
--- a/src/components/CategoryEntry.tsx
+++ b/src/containers/Categories/components/CategoriesEntry.tsx
@@ -1,33 +1,26 @@
-import React from "react";
+import { FC } from "react";
 import { Link, useRouteMatch } from "react-router-dom";
 
-const CategoryEntry = ({ category }) => {
+type Props = {
+  strCategory: string;
+  strCategoryThumb: string;
+};
+
+const CategoriesEntry: FC<Props> = ({ strCategory, strCategoryThumb }) => {
   const { url } = useRouteMatch();
 
-  const {
-    strCategory,
-    strCategoryThumb,
-    // strCategoryDescription
-  } = category;
-
   return (
-    // <CardEntry item={meal} />
     <Link to={`${url}/${strCategory}`}>
       <li>
         <div className="row">
           <div className="col s12">
             <div className="card horizontal hoverable">
               <div className="card-image valign-wrapper">
-                <img
-                  // className="responsive-img"
-                  src={strCategoryThumb}
-                  alt={strCategory}
-                />
+                <img src={strCategoryThumb} alt={strCategory} />
               </div>
               <div className="card-stacked">
                 <div className="card-content black-text">
                   <h2 className="logo">{strCategory}</h2>
-                  {/* <p>{strCategoryDescription}</p> */}
                 </div>
               </div>
             </div>
@@ -38,4 +31,4 @@ const CategoryEntry = ({ category }) => {
   );
 };
 
-export default CategoryEntry;
+export default CategoriesEntry;
diff --git a/src/containers/Categories/components/CategoriesPage.tsx b/src/containers/Categories/components/CategoriesPage.tsx
new file mode 100644
index 0000000..1695031
--- /dev/null
+++ b/src/containers/Categories/components/CategoriesPage.tsx
@@ -0,0 +1,21 @@
+import { FC } from "react";
+import PageLayout from "../../../layouts/PageLayout";
+import CategoriesEntry from "./CategoriesEntry";
+
+type Props = {
+  categories: { strCategory: string; strCategoryThumb: string }[];
+};
+
+export const CategoriesPage: FC<Props> = ({ categories }) => (
+  <PageLayout title="Chef's Categories">
+    <ul>
+      {categories.map(({ strCategory, strCategoryThumb }, i) => (
+        <CategoriesEntry
+          key={i}
+          strCategory={strCategory}
+          strCategoryThumb={strCategoryThumb}
+        />
+      ))}
+    </ul>
+  </PageLayout>
+);
diff --git a/src/containers/CategoryListController.tsx b/src/containers/Categories/index.tsx
similarity index 53%
rename from src/containers/CategoryListController.tsx
rename to src/containers/Categories/index.tsx
index 92d6a39..a176a98 100644
--- a/src/containers/CategoryListController.tsx
+++ b/src/containers/Categories/index.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { PreLoader } from "../components/PreLoader";
-import { CategoryListPage } from "../pages/CategoryListPage";
-import { getData } from "../services/api";
+import { PreLoader } from "../../components/PreLoader";
+import { getData } from "../../services/api";
+import { CategoriesPage } from "./components/CategoriesPage";
 
-export const CategoryListController = () => {
+export const Categories = () => {
   const [categories, setCategories] = useState({ categories: [] });
 
   const getCategories = () => {
@@ -12,12 +12,11 @@ export const CategoryListController = () => {
 
   useEffect(() => {
     getCategories();
-    // eslint-disable-next-line
   }, []);
 
   return categories.categories.length === 0 ? (
     <PreLoader />
   ) : (
-    <CategoryListPage categories={categories.categories} />
+    <CategoriesPage categories={categories.categories} />
   );
 };
diff --git a/src/containers/Meal/MealPage.tsx b/src/containers/Meal/components/MealPage.tsx
similarity index 72%
rename from src/containers/Meal/MealPage.tsx
rename to src/containers/Meal/components/MealPage.tsx
index e1ce63d..df8b48d 100644
--- a/src/containers/Meal/MealPage.tsx
+++ b/src/containers/Meal/components/MealPage.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react";
-import Meal from "../../types/Meal";
-import { MealIngredientList } from "./components/MealIngredientList";
-import { MealPresentation } from "./components/MealPresentation";
-import { MealRecipe } from "./components/MealRecipe";
+import Meal from "../../../types/meal";
+import { MealIngredientList } from "./MealIngredientList";
+import { MealPresentation } from "./MealPresentation";
+import { MealRecipe } from "./MealRecipe";
 
 type Props = {
   ingredients: string[];
diff --git a/src/containers/Meal/components/MealPresentation.tsx b/src/containers/Meal/components/MealPresentation.tsx
index 01fe712..e414fef 100644
--- a/src/containers/Meal/components/MealPresentation.tsx
+++ b/src/containers/Meal/components/MealPresentation.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
-import Meal from "../../../types/Meal";
+import Meal from "../../../types/meal";
 
 type Props = {
   meal: Meal;
diff --git a/src/containers/Meal/index.tsx b/src/containers/Meal/index.tsx
index 77c7db6..6a26ac5 100644
--- a/src/containers/Meal/index.tsx
+++ b/src/containers/Meal/index.tsx
@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import { NotFoundPage } from "../../pages/NotFoundPage";
 import { useFirebase } from "../../services/Firebase";
 import { useAuth0 } from "../../utils/auth0-spa";
-import { MealPage } from "./MealPage";
+import { MealPage } from "./components/MealPage";
 import { getMeal, getRandomMeal } from "./service";
 
 export const Meal: FC = () => {
diff --git a/src/pages/CategoryListPage.tsx b/src/pages/CategoryListPage.tsx
deleted file mode 100644
index 7c6683f..0000000
--- a/src/pages/CategoryListPage.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import PageLayout from "../layouts/PageLayout";
-import CategoryEntry from "../components/CategoryEntry";
-
-export const CategoryListPage = ({ categories }) => {
-  return (
-    <PageLayout title="Chef's Categories">
-      <ul>
-        {categories.map((category, i) => (
-          <CategoryEntry key={i} category={category} />
-        ))}
-      </ul>
-    </PageLayout>
-  );
-};
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 4d7344b..22febe0 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -1,6 +1,6 @@
 import { Redirect, Route, Switch } from "react-router-dom";
 import { CategoryController } from "../containers/CategoryController";
-import { CategoryListController } from "../containers/CategoryListController";
+import { Categories } from "../containers/Categories";
 import { Home } from "../containers/Home";
 import { Meal } from "../containers/Meal";
 import { ProfileController } from "../containers/ProfileController";
@@ -29,7 +29,7 @@ const AppRouter = ({
     </Route>
 
     <Route exact path="/categories">
-      <CategoryListController />
+      <Categories />
     </Route>
 
     <Route path="/categories/:strCategory/">
diff --git a/src/types/Meal.ts b/src/types/meal.ts
similarity index 100%
rename from src/types/Meal.ts
rename to src/types/meal.ts