add PageLayout; updated pages

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

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

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;

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

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

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

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