refactor categories container

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;

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>
+);

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} />
   );
 };

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[];

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;

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 = () => {

src/pages/CategoryListPage.tsx

@@ -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>
-  );
-};

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/">