footer links

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)

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>

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

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

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

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