From b5706c3a2e092a100779166c3ae4a86ec59f5a7a Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Wed, 15 Apr 2020 10:32:49 +0200
Subject: [PATCH] add PageLayout; updated pages

---
 TODO.md                        |  3 ++-
 src/layouts/MainLayout.jsx     |  1 -
 src/layouts/PageLayout.jsx     | 12 ++++++++++++
 src/pages/CategoryListPage.jsx |  6 +++---
 src/pages/CategoryPage.jsx     |  6 +++---
 src/pages/Contact.jsx          |  6 +++---
 src/pages/SearchPage.jsx       |  7 +++----
 7 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 src/layouts/PageLayout.jsx

diff --git a/TODO.md b/TODO.md
index 04dd657..8663fd4 100644
--- a/TODO.md
+++ b/TODO.md
@@ -10,5 +10,6 @@
 - [ ] Close Sidebar at outside click
 - [ ] Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default)
 - [ ] Decoupled application and data layers. Abstract such that the front end does not know where the data comes from.
-- [ ] Create PageLayout component
+- [x] Create PageLayout component
 - [ ] Use Css-in-Js
+- [ ] Redirect to 404
diff --git a/src/layouts/MainLayout.jsx b/src/layouts/MainLayout.jsx
index cf44f52..5844a25 100644
--- a/src/layouts/MainLayout.jsx
+++ b/src/layouts/MainLayout.jsx
@@ -18,7 +18,6 @@ const MainLayout = ({
   const [showNav, setShowNav] = useState(false);
 
   const links = ["categories", "contact"];
-  const footerLinks = [...links, "random"];
 
   const openNavClick = (ev) => {
     ev.preventDefault();
diff --git a/src/layouts/PageLayout.jsx b/src/layouts/PageLayout.jsx
new file mode 100644
index 0000000..884a5b7
--- /dev/null
+++ b/src/layouts/PageLayout.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const PageLayout = ({ title, children }) => {
+  return (
+    <div className="container">
+      <h1 className="logo">{title}</h1>
+      {children}
+    </div>
+  );
+};
+
+export default PageLayout;
diff --git a/src/pages/CategoryListPage.jsx b/src/pages/CategoryListPage.jsx
index c453abc..7c6683f 100644
--- a/src/pages/CategoryListPage.jsx
+++ b/src/pages/CategoryListPage.jsx
@@ -1,15 +1,15 @@
 import React from "react";
+import PageLayout from "../layouts/PageLayout";
 import CategoryEntry from "../components/CategoryEntry";
 
 export const CategoryListPage = ({ categories }) => {
   return (
-    <div className="container">
-      <h1 className="logo">Chef's Categories</h1>
+    <PageLayout title="Chef's Categories">
       <ul>
         {categories.map((category, i) => (
           <CategoryEntry key={i} category={category} />
         ))}
       </ul>
-    </div>
+    </PageLayout>
   );
 };
diff --git a/src/pages/CategoryPage.jsx b/src/pages/CategoryPage.jsx
index 72d5c5d..e65ce98 100644
--- a/src/pages/CategoryPage.jsx
+++ b/src/pages/CategoryPage.jsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import PageLayout from "../layouts/PageLayout";
 
 export const CategoryPage = ({ meals, strCategory }) => {
   return (
-    <div className="container">
-      <h1 className="logo">Chef's {strCategory} Recipes</h1>
+    <PageLayout title={`Chef's ${strCategory} Recipes`}>
       <ul>
         <div className="row">
           {meals.meals.map((meal, i) => (
@@ -26,6 +26,6 @@ export const CategoryPage = ({ meals, strCategory }) => {
           ))}
         </div>
       </ul>
-    </div>
+    </PageLayout>
   );
 };
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index 200804a..57fae12 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import PageLayout from "../layouts/PageLayout";
 import { ContactForm } from "../components/ContactForm";
 
 export const ContactPage = () => {
@@ -15,9 +16,8 @@ export const ContactPage = () => {
       <h4>Thank you for your message</h4>
     </div>
   ) : (
-    <div className="container">
-      <h2 className="logo">Contact Us</h2>
+    <PageLayout title="Contact Us">
       <ContactForm setIsSubmitted={setIsSubmitted} />
-    </div>
+    </PageLayout>
   );
 };
diff --git a/src/pages/SearchPage.jsx b/src/pages/SearchPage.jsx
index d295789..97f9b44 100644
--- a/src/pages/SearchPage.jsx
+++ b/src/pages/SearchPage.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { SearchResult } from "../components/SearchResult";
+import PageLayout from "../layouts/PageLayout";
 
 export const SearchPage = ({ searchString, searchResults }) => {
   const { meals } = searchResults;
   return (
-    <div className="container">
-      <h1 className="logo">Results for: {searchString}</h1>
+    <PageLayout title={`Results for: ${searchString}`}>
       {meals === null ? (
         <div className="center-align">
           <p>
@@ -16,7 +16,6 @@ export const SearchPage = ({ searchString, searchResults }) => {
             alt="Nothing here!"
             width="70%"
           />
-          <p></p>
         </div>
       ) : (
         <div className="row">
@@ -27,6 +26,6 @@ export const SearchPage = ({ searchString, searchResults }) => {
           </ul>
         </div>
       )}
-    </div>
+    </PageLayout>
   );
 };