Added edit page functionality

Author: claytonleonardcook

debug.log

@@ -0,0 +1 @@
+[1019/003711.474:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

src/pages/Edit.js

@@ -1,22 +1,61 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import firebase from 'firebase/app';
+import '../classes/Item';
 import './Edit.scss';
+import Item from '../classes/Item';
 
 function Edit({ params, user, list }) {
     const history = useHistory();
+    if (!user) {
+        history.push('/');
+    }
     let { key } = params;
-    const [item, setItem] = useState(list[key]);
+
+    const [item, setItem] = useState(list[key] || new Item(''));
 
     const [name, setName] = useState(item?.name);
     const [tags, setTags] = useState(item?.tags);
 
+    /*
+    dairy: false,
+    vegetable: false,
+    fruit: false,
+    meat: false,
+    sweet: false,
+    fiber: false,
+    other: false
+    */
+
+    //onClick={() => firebase.database().ref(`${user.uid}/${key}`).set({ name, checked: false, tags })}
     return (
         <div className="Edit">
-            <label htmlFor="item">Item</label>
-            <input id="item" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+            <div>
+                <label htmlFor="name">
+                    <span>Name</span>
+                    <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+                </label>
+            </div>
+            <ul>
+                {
+                    Object.entries(tags).map(([tag, checked]) => {
+                        return <li key={tag}>
+                            <label htmlFor={tag}>
+                                <span>{`${tag[0].toUpperCase()}${tag.slice(1)}`}</span>
+                                <input id={tag} type="checkbox" checked={checked} onChange={() => {
+                                    let newTags = { ...tags };
+                                    newTags[tag] = !checked;
+                                    setTags(newTags);
+                                }} />
+                            </label>
+                        </li>
+                    })
+                }
+            </ul>
 
-            <button onClick={() => firebase.database().ref(`${user.uid}/${key}`).set({ name, checked: false, tags })}>Update</button>
+            <button onClick={() => {
+                console.log(name, tags);
+            }}>{item ? 'Update' : 'Add'}</button>
             <button onClick={() => {
                 firebase.database().ref(`${user.uid}/${key}`).remove();
                 history.goBack();

src/pages/Edit.scss

@@ -1,3 +1,21 @@
 .Edit {
-    
-}
+    margin: 25vh 0;
+    text-align: center;
+    > div {
+        margin: 20px 0;
+        > label {
+            margin: 5px 20px;
+        }
+    }
+    > ul {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        > li {
+            margin: 5px 0;
+        }
+    }
+    > button {
+        width: 80vw;
+        margin: 5px auto;
+    }
+}

src/pages/Home.js

@@ -9,16 +9,15 @@ import Item from '../classes/Item';
 
 function Home({ list, setList, user }) {
   const history = useHistory();
+  if (!user) {
+    history.push('/');
+  }
   const [name, setName] = useState('');
   const [filters, setFilters] = useState({
     checked: true,
     unchecked: true
   });
 
-  if (!user) {
-    history.push('/');
-  }
-
   const addItem = () => firebase
     .database()
     .ref(`/${user.uid}`)
@@ -64,7 +63,7 @@ function Home({ list, setList, user }) {
           </form>
         </div>
       </div>
-      <List list={list} setList={setList} filters={filters} user={user}/>
+      <List list={list} setList={setList} filters={filters} user={user} />
     </div>
   );
 }