refactor category container

src/App.tsx

@@ -45,7 +45,6 @@ export const App: FC = () => {
         getSearchResults={getSearchResults}
       >
         <AppRouter
-          buttonUrl={buttonUrl}
           getRandomMeal={getRandomMeal}
           searchString={searchString}
           searchResults={searchResults}

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

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

src/constants.ts

@@ -0,0 +1 @@
+export const buttonURL = "/random";

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

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

src/containers/CategoryController.tsx

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

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

src/pages/CategoryPage.tsx

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

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

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

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