refactor search and profile container

src/components/SearchResult.tsx

@@ -1,5 +0,0 @@
-import { CardEntry } from "./CardEntry";
-
-export const SearchResult = ({ meal }) => {
-  return <CardEntry meal={meal} />;
-};

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

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

src/containers/ProfileController.tsx

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

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

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

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

src/containers/SearchController.tsx

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

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