Merge branch 'master' of https://github.com/the-collab-lab/tcl-5-smar…

…t-shopping-list into jvb-dk-sort-by-timeframe
the-collab-lab · Apr 21, 2020 · 21ead4b · 21ead4b
2 parents 62e5127 + cbd9027
commit 21ead4b
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 36 deletions.
diff --git a/src/App.css b/src/App.css
@@ -98,3 +98,10 @@ input {
   width: fit-content;
 }
 
+.deleteItemButton{
+  width: 45px;
+  height: 45px;
+  margin-left: 5px;
+  background:black;
+};
+
diff --git a/src/components/AddItemForm.js b/src/components/AddItemForm.js
@@ -51,6 +51,7 @@ const Form = ({ token }) => {
         let normalizeItemName = normalizeString(itemName);
         if (!shoppingListCollection.includes(normalizeItemName)) {
             let data = {
+                numOfPurchases: 0,
                 itemName,
                 timeFrame: parseInt(timeFrame),
                 lastPurchaseDate: lastPurchaseDate

diff --git a/src/components/Modal.js b/src/components/Modal.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../App.css';
+
+const Modal = props => {
+    return (
+        <div className="Modal">
+            <p> Are you sure you want to delete {props.item.itemName}?</p>
+            <button onClick={() => props.delete(props.item)}>YES</button>
+            <button onClick={() => props.cancel()}>No</button>
+        </div>
+    );
+};
+
+export default Modal;
diff --git a/src/components/ShoppingListItem.js b/src/components/ShoppingListItem.js
@@ -41,9 +41,7 @@ const generateClass = number =>
 //     return "error"
 // }
 
-
-
-const ShoppingListItem = ({item,handleCheck}) => {
+const ShoppingListItem = ({item, handleCheck, setCurrentItem, setModal}) => {
     const ariaString = `${item.itemName} to be bought in ${timeFrameString(item.timeFrame)}`;
     return (
         <tr className={generateClass(item.timeFrame)}>
@@ -61,6 +59,15 @@ const ShoppingListItem = ({item,handleCheck}) => {
             </td>
             <td>{item.itemName}</td>
             <td>{timeFrameString(item.timeFrame)}</td>
+            <td><button
+                    className="deleteItemButton"
+                    onClick={() => {
+                        setCurrentItem(item);
+                        setModal(true);
+                    }}
+                >
+                &#128465;
+                </button></td>
         </tr>
     );
     }

diff --git a/src/pages/ShoppingList.js b/src/pages/ShoppingList.js
@@ -3,13 +3,16 @@ import { useHistory } from 'react-router-dom';
 import fb from '../lib/firebase';
 import moment from 'moment';
 import calculateEstimate from '../lib/estimates';
+import Modal from '../components/Modal';
 import ShoppingListItem from '../components/ShoppingListItem';
 import normalizeString from '../lib/normalizeString';
 import '../css/ShoppingList.css';
 
 const ShoppingList = ({ token }) => {
     const [shoppingListItems, setShoppingListItems] = useState([]);
     const [filterString, setFilterString] = useState('');
+    const [modal, setModal] = useState(false);
+    const [currentItem, setCurrentItem] = useState(null);
     const userToken = token;
     let history = useHistory();
 
@@ -105,61 +108,81 @@ const ShoppingList = ({ token }) => {
         const lastPurchase = moment(formattedDate);
         return lastPurchase.diff(newDate, 'hours') < 24;
     };
-
-    const handleCheck = (e,item) => {
-        const numberOfPurchases = item.isChecked === false ? (item.numOfPurchases || 0) + 1 : item.numOfPurchases
+
+    const handleCheck = (e, item) => {
+        const numberOfPurchases = !item.isChecked
+            ? (item.numOfPurchases || 0) + 1
+            : item.numOfPurchases;
 
         if (!(item.lastPurchaseDate == null)) {
             let lastEstimate;
             item.nextPurchaseDate
-              ? (lastEstimate = item.nextPurchaseDate)
-              : (lastEstimate = item.timeFrame);
+                ? (lastEstimate = item.nextPurchaseDate)
+                : (lastEstimate = item.timeFrame);
             let lastPurchaseDate = item.lastPurchaseDate;
-            let today = moment(Date.now())
+            let today = moment(Date.now());
             let lastPurchase = moment(lastPurchaseDate);
             let latestInterval = today.diff(lastPurchase, 'days');
 
             let db = fb.firestore();
             let nextPurchaseDate = calculateEstimate(
-              item.lastEstimate,
-              latestInterval,
-              item.numOfPurchases
+                item.lastEstimate,
+                latestInterval,
+                item.numOfPurchases
             );
             db.collection(userToken)
-              .doc(e.target.name)
-              .update({
-                lastPurchaseDate,
-                numOfPurchases: numberOfPurchases,
-                latestInterval,
-                lastEstimate,
-                nextPurchaseDate,
-                isChecked: e.target.checked
-              })
-              .then(function() {
-                getShoppingList();
-            });
-          } else {
+                .doc(e.target.name)
+                .update({
+                    lastPurchaseDate,
+                    numOfPurchases: numberOfPurchases,
+                    latestInterval,
+                    lastEstimate,
+                    nextPurchaseDate,
+                    isChecked: e.target.checked,
+                })
+                .then(function() {
+                    getShoppingList();
+                });
+        } else {
             let lastPurchaseDate = moment(Date.now()).format();
             let db = fb.firestore();
             db.collection(userToken)
-              .doc(e.target.name)
-              .update({
-                  isChecked: e.target.checked,
-                  lastPurchaseDate,
-                  numOfPurchases: numberOfPurchases
+                .doc(e.target.name)
+                .update({
+                    isChecked: e.target.checked,
+                    lastPurchaseDate,
+                    numOfPurchases: numberOfPurchases,
                 })
-              .then(function() {
+                .then(function() {
                     getShoppingList();
-              });
+                });
         }
     };
 
+    const deleteItem = item => {
+        let db = fb.firestore();
+        db.collection(userToken)
+            .doc(item.id)
+            .delete()
+            .then(() => (getShoppingList(), setModal(false)));
+    };
+
     const filteredList = shoppingListItems.filter(item => {
         return item.itemName.toLowerCase().includes(filterString.toLowerCase());
     });
-
     return (
         <div>
+            <div>
+                {modal ? (
+                    <Modal
+                        item={currentItem}
+                        delete={deleteItem}
+                        cancel={() => {
+                            setModal(false);
+                        }}
+                    />
+                ) : null}
+            </div>
             <label>Search for an item</label>
             <input
                 type="text"
@@ -171,13 +194,13 @@ const ShoppingList = ({ token }) => {
             <table>
                 {filterString
                     ? filteredList.map(item => {
-                          return <ShoppingListItem item={item} handleCheck={handleCheck} />;
+                          return <ShoppingListItem item={item} handleCheck={handleCheck}  setCurrentItem={setCurrentItem} setModal={setModal} />;
                       })
                     : shoppingListItems.length > 0
-                        ? shoppingListItems.map(item => <ShoppingListItem item={item} handleCheck={handleCheck}/>)
+                        ? shoppingListItems.map(item => <ShoppingListItem item={item} handleCheck={handleCheck} setCurrentItem={setCurrentItem} setModal={setModal} />)
                     : welcomeInstructions()}
             </table>
         </div>
     );
 };
-export default ShoppingList;
+export default ShoppingList;