From df6c0e01bbdbd7835ed24a85f4b2fa49e00b297e Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Thu, 30 Jan 2020 11:24:31 +0100
Subject: [PATCH] footer links

---
 README.md                       | 14 +++++++++++---
 src/components/CategoryEntry.js |  5 ++---
 src/components/Footer.js        | 16 ++++++++++++++++
 src/components/FooterLink.js    | 13 +++++++++++++
 src/components/Navbar.js        |  2 +-
 src/utils/methods.js            |  5 +++++
 6 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 src/components/FooterLink.js

diff --git a/README.md b/README.md
index 550b8d5..9020cc1 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ Free meal planner for cooks short on ideas! (like me …)
 ## Supports
 
 - Web ✓
-- Progressive Web App
+- Progressive Web App ✓
 - Mobile
 
 ## Technical Stack
@@ -80,10 +80,18 @@ Free meal planner for cooks short on ideas! (like me …)
 - List of meals by categories
 - Search by name: you're looking for a recipe? Ours are easy to make and yummy!
 
+### Features in v.0.2
+
+- Progressive Web App
+- User Interface Enhancement
+
 ## TO DO
 
 - put a preloader
-- route bad request to notFOund (exple: /categories/string, when search results is null)
+- redirect after failed fetch request: (history.push('/path'), or write handleFetchResponse function)
+  - https://stackoverflow.com/questions/45089386/what-is-the-best-way-to-redirect-a-page-using-react-router
+  - https://www.henriksommerfeld.se/error-handling-with-fetch/
   - Use ErrorBoundaries component ?
 - add sidenav on mobile
-- contact form
+- accounts v2
+- contact form (with validation)
diff --git a/src/components/CategoryEntry.js b/src/components/CategoryEntry.js
index 6c383af..8224bfb 100644
--- a/src/components/CategoryEntry.js
+++ b/src/components/CategoryEntry.js
@@ -19,16 +19,15 @@ const CategoryEntry = props => {
             <div className="card horizontal hoverable">
               <div className="card-image valign-wrapper">
                 <img
-                  className="responsive-img"
+                  // className="responsive-img"
                   src={strCategoryThumb}
                   alt={strCategory}
                 />
-                {/* <span className="card-title red-text">{strCategory}</span> */}
               </div>
               <div className="card-stacked">
                 <div className="card-content black-text">
                   <h4 className="logo">{strCategory}</h4>
-                  <p>{strCategoryDescription}</p>
+                  {/* <p>{strCategoryDescription}</p> */}
                 </div>
               </div>
             </div>
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 3cb4e33..e2593a5 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,10 +1,26 @@
 import React from "react";
 import { CopyrightText } from "./CopyrightText";
 import { GitHubLink } from "./GitHubLink";
+import { FooterLink } from "./FooterLink";
 
 export const Footer = () => {
+  const links = ["categories", "random"];
+
   return (
     <footer className="page-footer">
+      <div className="row">
+        <div className="container">
+          <div className=" s12">
+            <h5 className="white-text">Links</h5>
+            <ul>
+              {links.map((link, i) => (
+                <FooterLink i={i} link={link} />
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+
       <div className="footer-copyright">
         <div className="container">
           <CopyrightText />
diff --git a/src/components/FooterLink.js b/src/components/FooterLink.js
new file mode 100644
index 0000000..7200d60
--- /dev/null
+++ b/src/components/FooterLink.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { upFirstChar } from "../utils/methods";
+
+export const FooterLink = ({ link, i }) => {
+  return (
+    <li key={i}>
+      <Link className="grey-text text-lighten-3" to={`/${link}`}>
+        {upFirstChar(link)}
+      </Link>
+    </li>
+  );
+};
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index d1e87fa..96909bb 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -27,7 +27,7 @@ export const Navbar = props => {
         </div>
       </nav>
 
-      {/* <ul id="slide-out" class="sidenav">
+      {/* <ul id="slide-out" class="sidenav show-on-small">
         <li>
           <div class="user-view">
             <div class="background">
diff --git a/src/utils/methods.js b/src/utils/methods.js
index 710a97d..2be80f0 100644
--- a/src/utils/methods.js
+++ b/src/utils/methods.js
@@ -15,5 +15,10 @@ export const getData = (keyword, set, option = null) => {
   const URI = createURI(keyword, option);
   fetch(URI)
     .then(response => response.json())
+    .catch(error => console.info(error + "url:" + URI))
     .then(data => set(data));
 };
+
+export const upFirstChar = lower => {
+  return lower.replace(/^\w/, c => c.toUpperCase());
+};