contact

public/index.html

@@ -26,6 +26,6 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!-- <script type="text/javascript" src="js/materialize.min.js"></script> -->
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   </body>
 </html>

src/components/ContactForm.jsx

@@ -1,23 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
-import { useInput } from "../utils/inputHook";
+// import { useInput } from "../utils/inputHook";
 
 export const ContactForm = ({ onSubmit }) => {
-  // const fields = ["firstname", "lastname", "email", "phone", "message"];
+  const [firstName, setFirstName] = useState("");
-
+  const [lastName, setLastName] = useState("");
-  // const [firstName, setFirstName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [message, setMessage] = useState("");
 
   const handleSubmit = ev => {
     ev.preventDefault();
     onSubmit(true);
   };
 
-  // const handleChange = ev => {
+  const changeFirstName = ev => {
-  //   const { value } = ev.target;
+    const { value } = ev.target;
-  //   setFirstName(value);
+    setFirstName(value);
-  // };
+  };
+  const changeLastName = ev => {
+    const { value } = ev.target;
+    setLastName(value);
+  };
+  const changePhone = ev => {
+    const { value } = ev.target;
+    setPhone(value);
+  };
+  const changeEmail = ev => {
+    const { value } = ev.target;
+    setEmail(value);
+  };
+  const changeMessage = ev => {
+    const { value } = ev.target;
+    setMessage(value);
+  };
 
-  // const { value, bind } = useInput("");
-  const { bind } = useInput("");
   return (
     <form onSubmit={handleSubmit}>
       <div className="row">
@@ -25,22 +41,34 @@ export const ContactForm = ({ onSubmit }) => {
           <div className="col s12 m6">
             <ContactFormInput
               id="First Name"
-              // value={firstName}
+              value={firstName}
-              // onChange={handleChange}
+              onChange={changeFirstName}
-              {...bind}
             />
           </div>
           <div className="col s12 m6">
-            <ContactFormInput id="Last Name" {...bind} />
+            <ContactFormInput
+              id="Last Name"
+              value={lastName}
+              onChange={changeLastName}
+            />
           </div>
           <div className="col s12 m6">
-            <ContactFormInput id="Email" type="email" />
+            <ContactFormInput
+              id="Email"
+              type="email"
+              value={email}
+              onChange={changeEmail}
+            />
           </div>
           <div className="col s12 m6">
-            <ContactFormInput id="Phone" />
+            <ContactFormInput id="Phone" value={phone} onChange={changePhone} />
           </div>
           <div className="col s12">
-            <ContactFormTextArea id="Message" />
+            <ContactFormTextArea
+              id="Message"
+              value={message}
+              onChange={changeMessage}
+            />
             <ContactFormSubmit text="Send Message" color="orange darken-2" />
           </div>
         </div>
@@ -52,31 +80,29 @@ export const ContactForm = ({ onSubmit }) => {
 const ContactFormInput = ({ id, type = "text", value, onChange }) => {
   return (
     <div className="input-field">
-      {/* <i class="material-icons prefix">account_circle</i> */}
+      {/* <i className="material-icons prefix">account_circle</i> */}
-      <label htmlFor={id}>{id}</label>
       <input
         className="validate"
         type={type}
         id={id}
-        name={value}
         value={value}
         onChange={onChange}
       />
+      <label htmlFor={id}>{id}</label>
     </div>
   );
 };
 
-const ContactFormTextArea = ({ id }) => {
+const ContactFormTextArea = ({ id, value, onChange }) => {
   return (
     <div className="input-field">
       <label htmlFor={id}>{id}</label>
       <textarea
         className="materialize-textarea validate"
         rows="12"
-        //   cols="50"
         name={id}
-        // value={value}
+        value={value}
-        //   onChange={onChange}
+        onChange={onChange}
       />
     </div>
   );
@@ -93,10 +119,3 @@ const ContactFormSubmit = ({ text, color }) => {
     </button>
   );
 };
-// {fields.map(field => (
-//     <ContactFormInput
-//       value={field}
-//       placeholder={field}
-//       //   onChange={handleChange}
-//     />
-//   ))}

src/controllers/MealController.jsx

@@ -22,17 +22,54 @@ export const MealController = ({ meal, getMeal, getRandomMeal }) => {
     strInstructions
   } = mealItem;
 
-  const favInit = Boolean(localStorage.getItem(strMeal));
+  // const setDbPromise = () => {
-  // console.log(favInit);
+  //   //check for support
-  const [isFav, setIsFav] = useState(favInit);
+  //   if (!("indexedDB" in window)) {
+  //     console.log("This browser doesn't support IndexedDB");
+  //     return;
+  //   }
+
+  //   var dbPromise = indexedDB.open("chefs-db", 1, function(upgradeDb) {
+  //     if (!upgradeDb.objectStoreNames.contains("favourites")) {
+  //       var favOS = upgradeDb.createObjectStore("favourites", {
+  //         keyPath: "mealName"
+  //       });
+  //       favOS.createIndex("isFav", "isFav", { unique: true });
+  //     }
+  //   });
+  //   return dbPromise;
+  // };
+
+  // const [isFav, setIsFav] = useState(false);
+
+  // var dbPromise = setDbPromise();
+
+  // dbPromise
+  //   .then(db => {
+  //     var tx = db.transaction("favourites", "readwrite");
+  //     var store = tx.objectStore("favourites");
+  //     var item = {
+  //       mealName: strMeal,
+  //       isFav: isFav
+  //     };
+  //     store.add(item);
+  //     return tx.complete;
+  //   })
+  //   .then(function() {
+  //     console.log("added item to the favourite os!");
+  //   });
+
+  // const initState = Boolean(localStorage.getItem(strMeal));
+  const [isFav, setIsFav] = useState(localStorage.getItem(strMeal) === "fav");
+
   // console.log(isFav);
 
   useEffect(() => {
     isFav
-      ? localStorage.setItem(strMeal, isFav)
+      ? localStorage.setItem(strMeal, "fav")
-      : localStorage.setItem(strMeal, "");
+      : localStorage.removeItem(strMeal);
-    console.log(localStorage.getItem(strMeal));
+    // console.log(localStorage.getItem(strMeal));
-    console.log(isFav);
+    // console.log(isFav);
   }, [isFav, strMeal]);
 
   const item = {

src/pages/Contact.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { ContactForm } from "../components/ContactForm";
 
-export const ContactPage = props => {
+export const ContactPage = () => {
   const [isSubmitted, setIsSubmitted] = useState(false);
 
   return isSubmitted ? (