Merge pull request #41 from the-collab-lab/jvb-dk-sort-by-timeframe

[Feature, Refactor]Order shopping list items by time frame + Code Organization
the-collab-lab · Apr 21, 2020 · efaaec5 · efaaec5
2 parents cbd9027 + 21ead4b
commit efaaec5
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 41 deletions.
diff --git a/src/components/AddItemForm.js b/src/components/AddItemForm.js
@@ -3,6 +3,7 @@ import { Redirect } from 'react-router-dom';
 import fb from '../lib/firebase';
 import '../css/AddItemForm.css';
 import moment from 'moment';
+import normalizeString from '../lib/normalizeString';
 
 const Form = ({ token }) => {
     const [itemName, setItemName] = useState('');
@@ -27,12 +28,7 @@ const Form = ({ token }) => {
                         let documentData = doc.data();
                         let nameData = documentData.itemName;
                         if (nameData) {
-                            nameData = nameData
-                                .toLowerCase()
-                                .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, '')
-                                .trim()
-                                .replace(/\s{2,}/g, ' ');
-
+                            nameData = normalizeString(nameData)
                             fullCollection.push(nameData);
                         }
                     });
@@ -52,11 +48,7 @@ const Form = ({ token }) => {
         setDuplicateError(false);
         let db = fb.firestore();
         let tokenRef = db.collection(userToken);
-        let normalizeItemName = itemName
-            .toLowerCase()
-            .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, '')
-            .trim()
-            .replace(/\s{2,}/g, ' ');
+        let normalizeItemName = normalizeString(itemName);
         if (!shoppingListCollection.includes(normalizeItemName)) {
             let data = {
                 numOfPurchases: 0,

diff --git a/src/components/ShoppingListItem.js b/src/components/ShoppingListItem.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import * as timeframeConstants from '../lib/timeframeConstants';
+
+const timeFrameString = number =>
+{
+    switch(number){
+        case 7:
+            return "Fewer than 7 days";
+        case 14:
+            return "7 to 30 days";
+        case 30:
+            return "More than 30 days";
+        case 0:
+            return "Inactive item";
+        default:
+            return "None";
+    }
+}
+const generateClass = number =>
+{
+    switch(number){
+        case 7:
+            return "soon";
+        case 14:
+            return "kindasoon";
+        case 30:
+            return "notsoon";
+        case 0:
+            return "inactive";
+        default:
+            return "None";
+    }
+}
+// const getStringValue = (numberValue) => {
+//     const dictionary = {};
+//     dictionary[timeframeConstants.SOON.numberValue] = SOON.stringValue;
+
+//     if (dictionary.keys.includes(numberValue)){
+//         return dictionary[numberValue];
+//     }
+//     return "error"
+// }
+
+const ShoppingListItem = ({item, handleCheck, setCurrentItem, setModal}) => {
+    const ariaString = `${item.itemName} to be bought in ${timeFrameString(item.timeFrame)}`;
+    return (
+        <tr className={generateClass(item.timeFrame)}>
+            <td>
+                <input
+                aria-label= {ariaString}
+                key={item.id}
+                id={item.id}
+                type="checkbox"
+                name={item.id}
+                value={item.isChecked}
+                checked={item.isChecked}
+                onChange={e => handleCheck(e, item)}
+                />
+            </td>
+            <td>{item.itemName}</td>
+            <td>{timeFrameString(item.timeFrame)}</td>
+            <td><button
+                    className="deleteItemButton"
+                    onClick={() => {
+                        setCurrentItem(item);
+                        setModal(true);
+                    }}
+                >
+                &#128465;
+                </button></td>
+        </tr>
+    );
+    }
+
+    export default ShoppingListItem;
diff --git a/src/css/ShoppingList.css b/src/css/ShoppingList.css
@@ -0,0 +1,12 @@
+.soon {
+    background-color: red;
+}
+.kindasoon {
+    background-color: orange;
+}
+.notsoon {
+    background-color: green;
+}
+.inactive {
+    background-color: grey;
+}
diff --git a/src/lib/normalizeString.js b/src/lib/normalizeString.js
@@ -0,0 +1,9 @@
+const normalizeString = (inputString) => {
+    const output = inputString
+    .toLowerCase()
+    .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, '')
+    .trim()
+    .replace(/\s{2,}/g, ' ');
+    return output
+}
+export default normalizeString;
diff --git a/src/lib/timeframeConstants.js b/src/lib/timeframeConstants.js
@@ -0,0 +1,6 @@
+const SOON = {stringValue: "fewer that 7 days", integerValue: 7}
+const KIND_OF_SOON = {stringValue: "between 7 and 30 days", integerValue: 14}
+const NOT_SOON = {stringValue: "more than 30 days", integerValue: 30}
+const INACTIVE = {stringValue: "inactive", integerValue: 0}
+
+export {SOON, KIND_OF_SOON, NOT_SOON, INACTIVE};
diff --git a/src/pages/ShoppingList.js b/src/pages/ShoppingList.js
@@ -4,6 +4,9 @@ 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([]);
@@ -13,31 +16,6 @@ const ShoppingList = ({ token }) => {
     const userToken = token;
     let history = useHistory();
 
-    const shoppingListItemInput = item => {
-        return (
-            <div>
-                <input
-                    key={item.id}
-                    id={item.id}
-                    type="checkbox"
-                    name={item.id}
-                    value={item.isChecked}
-                    checked={item.isChecked}
-                    onChange={e => handleCheck(e, item)}
-                />
-                {item.itemName}
-                <button
-                    className="deleteItemButton"
-                    onClick={() => {
-                        setCurrentItem(item);
-                        setModal(true);
-                    }}
-                >
-                    &#128465;
-                </button>
-            </div>
-        );
-    };
     const welcomeInstructions = () => {
         return (
             <div>
@@ -69,6 +47,32 @@ const ShoppingList = ({ token }) => {
         );
     };
 
+    const filterShoppingListByTimeframe = (shoppingListArray) => {
+        const alphabeticalSort = (a,b) => {
+            const aName = normalizeString(a.itemName);
+            const bName = normalizeString(b.itemName);
+            if (aName < bName) {return -1;}
+            if (aName > bName) {return 1;}
+            return 0;
+        }
+        const seven = shoppingListArray.filter(item => item.timeFrame === 7).sort(alphabeticalSort);
+        const fourteen = shoppingListArray.filter(item => item.timeFrame === 14).sort(alphabeticalSort);
+        const thirty = shoppingListArray.filter(item => item.timeFrame === 30).sort(alphabeticalSort);
+        const inactive = shoppingListArray.filter(item => item.timeFrame === 0).sort(alphabeticalSort);
+
+        return seven.concat(fourteen).concat(thirty).concat(inactive);
+    };
+    const flagInactive = (shoppingListArray) => {
+        const now = moment(Date.now());
+        return shoppingListArray.map(item => {
+            const initialDate = moment(item.lastPurchaseDate)
+            if (now.diff(initialDate, "d") > (2*item.timeFrame)) {
+                item.timeFrame = 0
+            }
+            return item;
+        })
+    }
+
     const getShoppingList = () => {
         const db = fb.firestore();
         if (userToken) {
@@ -86,7 +90,8 @@ const ShoppingList = ({ token }) => {
                         };
                         allData.push(data);
                     });
-                    setShoppingListItems(allData);
+                    const flaggedData = flagInactive(allData);
+                    setShoppingListItems(filterShoppingListByTimeframe(flaggedData));
                 });
         } else {
             history.push('/Home');
@@ -186,15 +191,15 @@ const ShoppingList = ({ token }) => {
                 onChange={e => setFilterString(e.target.value)}
             />
             <button onClick={() => setFilterString('')}>X</button>
-            <ul>
+            <table>
                 {filterString
                     ? filteredList.map(item => {
-                          return shoppingListItemInput(item);
+                          return <ShoppingListItem item={item} handleCheck={handleCheck}  setCurrentItem={setCurrentItem} setModal={setModal} />;
                       })
                     : shoppingListItems.length > 0
-                    ? shoppingListItems.map(item => shoppingListItemInput(item))
+                        ? shoppingListItems.map(item => <ShoppingListItem item={item} handleCheck={handleCheck} setCurrentItem={setCurrentItem} setModal={setModal} />)
                     : welcomeInstructions()}
-            </ul>
+            </table>
         </div>
     );
 };