Merge pull request #53 from colorlessenergy/enhancement/#52-connect-f…

…ood-dictionary-to-food-blocks #52 connect food dictionary to food blocks
colorlessenergy · Jan 21, 2022 · af55431 · af55431 · vercel · Jan 21, 2022
2 parents 46e6a7f + 05c4f82
commit af55431
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 14 deletions.
diff --git a/pages/day/[date]/blocks.js b/pages/day/[date]/blocks.js
@@ -12,7 +12,8 @@ import {
     updateFoodBlockInLocalStorage,
     removeFoodBlockFromLocalStorage,
     addEmptyFoodBlockToLocalStorage,
-    duplicateAndMergeFoodBlocksFromPreviousDate
+    duplicateAndMergeFoodBlocksFromPreviousDate,
+    getFoodDictionaryFromLocalStorage
 } from '../../../shared/food/food';
 
 import useSnackbar from '../../../shared/hooks/useSnackbar';
@@ -28,6 +29,11 @@ export default function Blocks () {
             setFoodBlocks(getFoodFromLocalStorage(date));
         }
     }, [ date ]);
+
+    const [ foodDictionary, setFoodDictionary ] = useState([]);
+    useEffect(() => {
+        setFoodDictionary(getFoodDictionaryFromLocalStorage());
+    }, []);
 
     const [ totalCalories, setTotalCalories ] = useState(0);
     useEffect(() => {
@@ -43,10 +49,38 @@ export default function Blocks () {
     const handleChange = ({ event, index }) => {
         let cloneFoodBlocks = JSON.parse(JSON.stringify(foodBlocks));
 
+        if (cloneFoodBlocks[index].foodDictionaryID && event.target.id === `${ index }-total-amount`) {
+            cloneFoodBlocks[index].calories = getCaloriesFromFoodDictionary({ foodDictionaryID: cloneFoodBlocks[index].foodDictionaryID, foodBlockTotalAmount: event.target.value });
+        }
+
         cloneFoodBlocks[index][event.target.name] = event.target.value;
         setFoodBlocks(cloneFoodBlocks);
     }
 
+    const connectFoodDictionaryToFoodBlock = ({ foodDictionaryID, index }) => {
+        const findFoodInFoodDictionary = foodDictionary.find(food => food.ID === foodDictionaryID);
+        let cloneFoodBlocks = JSON.parse(JSON.stringify(foodBlocks));
+        cloneFoodBlocks[index].foodDictionaryID = findFoodInFoodDictionary.ID;
+        cloneFoodBlocks[index].name = findFoodInFoodDictionary.name;
+        cloneFoodBlocks[index].calories = getCaloriesFromFoodDictionary({ foodDictionaryID, foodBlockTotalAmount: foodBlocks[index].totalAmount });
+
+        setFoodBlocks(cloneFoodBlocks);
+    }
+
+    const removeFoodDictionaryFromFoodBlock = ({ foodDictionaryID, index }) => {
+        let cloneFoodBlocks = JSON.parse(JSON.stringify(foodBlocks));
+
+        delete cloneFoodBlocks[index].foodDictionaryID;
+
+        setFoodBlocks(cloneFoodBlocks);
+    }
+
+    const getCaloriesFromFoodDictionary = ({ foodDictionaryID, foodBlockTotalAmount }) => {
+        const findFoodInFoodDictionary = foodDictionary.find(food => food.ID === foodDictionaryID);
+        const amountOfCaloriesPerUnit = findFoodInFoodDictionary.calories / findFoodInFoodDictionary.amount;
+        return Math.round(amountOfCaloriesPerUnit * foodBlockTotalAmount);
+    }
+
     const { snackbar: updateSnackbar, addSnackbar: addUpdateSnackbar } = useSnackbar({
         initialSnackbar: {
             className: 'snackbar-green',
@@ -161,6 +195,9 @@ export default function Blocks () {
 
             <div className="flex flex-wrap justify-content-between mt-2 mx-15">
                 { foodBlocks?.map((foodBlock, index) => {
+                    const findFoodInFoodDictionary = foodBlock.foodDictionaryID ? foodDictionary.find(food => food.ID === foodBlock.foodDictionaryID) : (null);
+                    const filterFoodDictionary = foodDictionary.filter(food => food.ID !== foodBlock.foodDictionaryID && food.name.toLowerCase().includes(foodBlock.name.toLowerCase().trim()));
+
                     return (
                         <form
                             key={ index }
@@ -184,6 +221,7 @@ export default function Blocks () {
                                     total calories
                                 </label>
                                 <input
+                                    disabled={ foodBlocks[index].foodDictionaryID ? (true) : (false) }
                                     onChange={ (event) => handleChange({ event, index }) }
                                     value={ foodBlocks[index].calories }
                                     type="number"
@@ -217,10 +255,10 @@ export default function Blocks () {
                                     id={`${ index }-unit`}
                                     name="unit" />
 
-                                <div className="text-gray text-small ml-04 mb-04">
+                                <div className="text-gray text-small mb-04">
                                     select a color
                                 </div>
-                                <div className="flex">
+                                <div className="flex mb-1">
                                     { colors.map(color => {
                                         return (
                                             <div
@@ -233,6 +271,56 @@ export default function Blocks () {
                                         );
                                     }) }
                                 </div>
+
+                                { (foodBlocks[index].name && filterFoodDictionary.length) || foodBlocks[index].foodDictionaryID ? (
+                                    <div className="text-gray text-small mb-04">
+                                        connect food dictionary
+                                    </div>
+                                ) : (null) }
+
+                                <div className="flex flex-wrap overflow-y-100 w-100">
+                                    { findFoodInFoodDictionary ? (
+                                        <div
+                                            onClick={() => removeFoodDictionaryFromFoodBlock({ foodDictionaryID: findFoodInFoodDictionary.ID, index }) }
+                                            className="card card--blocks mx-0 cursor-pointer b-color-orange">
+                                            <div className="text-bold">   
+                                                { findFoodInFoodDictionary.name } 
+                                            </div>
+                                            <div className="flex justify-content-between w-100">
+                                                <div>
+                                                    { findFoodInFoodDictionary.calories } calories
+                                                </div>
+
+                                                <div>
+                                                    { findFoodInFoodDictionary.amount } { findFoodInFoodDictionary.unit } 
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ) : (null) }
+                                    { foodBlocks[index].name ? (
+                                        filterFoodDictionary
+                                        .map(food => {
+                                            return (
+                                                <div
+                                                    className={`card card--blocks mx-0 cursor-pointer ${ food.ID == foodBlock.foodDictionaryID ? ("b-color-orange") : ("") }`}
+                                                    onClick={() => connectFoodDictionaryToFoodBlock({ foodDictionaryID: food.ID, index }) }
+                                                    key={ food.ID }>
+                                                    <div className="text-bold">   
+                                                        { food.name } 
+                                                    </div>
+                                                    <div className="flex justify-content-between w-100">
+                                                        <div>
+                                                            { food.calories } calories
+                                                        </div>
+
+                                                        <div>
+                                                            { food.amount } { food.unit } 
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            );
+                                    })) : (null) }
+                                </div>
                             </div> 
 
                             <div className="flex justify-content-between">

diff --git a/pages/day/[date]/index.js b/pages/day/[date]/index.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -12,7 +12,8 @@ import {
     addEmptyFoodBlockToLocalStorage,
     getFoodFromLocalStorage,
     removeFoodBlockFromLocalStorage,
-    updateFoodBlockInLocalStorage
+    updateFoodBlockInLocalStorage,
+    getFoodDictionaryFromLocalStorage,
 } from '../../../shared/food/food';
 
 const colors = ["#ffe58f", "#eaff8f", "#b7eb8f", "#87e8de", "#ffd6e7"];
@@ -28,6 +29,11 @@ export default function Date () {
         }
     }, [ date ]);
 
+    const [ foodDictionary, setFoodDictionary ] = useState([]);
+    useEffect(() => {
+        setFoodDictionary(getFoodDictionaryFromLocalStorage());
+    }, []);
+
     const [ totalCalories, setTotalCalories ] = useState(0);
     const [ confetti, setConfetti ] = useState(null);
     useEffect(() => {
@@ -78,6 +84,7 @@ export default function Date () {
 
     const [ foodBlock, setFoodBlock ] = useState({
         ID: null,
+        foodDictionaryID: null,
         name: '',
         calories: '',
         unit: '',
@@ -87,13 +94,46 @@ export default function Date () {
     });
 
     const handleChange = (event) => { 
+        if (foodBlock.foodDictionaryID && event.target.id == 'totalAmount') {
+            return setFoodBlock(previousFoodBlock => ({
+                    ...previousFoodBlock,
+                    totalAmount: event.target.value,
+                    calories: getCaloriesFromFoodDictionary({ foodDictionaryID: foodBlock.foodDictionaryID, foodBlockTotalAmount: event.target.value })
+                }
+            ));
+        }
+
         setFoodBlock(previousFoodBlock => ({
                 ...previousFoodBlock,
                 [ event.target.id ]: event.target.value
             }
         ));
     }
 
+    const connectFoodDictionaryToFoodBlock = foodDictionaryID => {
+        const findFoodInFoodDictionary = foodDictionary.find(food => food.ID === foodDictionaryID);
+        setFoodBlock(previousFoodBlock => ({
+            ...previousFoodBlock,
+            foodDictionaryID,
+            name: findFoodInFoodDictionary.name,
+            calories: getCaloriesFromFoodDictionary({ foodDictionaryID, foodBlockTotalAmount: foodBlock.totalAmount })
+        }));
+    }
+
+    const removeFoodDictionaryFromFoodBlock = () => {
+        let cloneFoodBlock = JSON.parse(JSON.stringify(foodBlock));
+
+        delete cloneFoodBlock.foodDictionaryID;
+
+        setFoodBlock(cloneFoodBlock);
+    }
+
+    const getCaloriesFromFoodDictionary = ({ foodDictionaryID, foodBlockTotalAmount }) => {
+        const findFoodInFoodDictionary = foodDictionary.find(food => food.ID === foodDictionaryID);
+        const amountOfCaloriesPerUnit = findFoodInFoodDictionary.calories / findFoodInFoodDictionary.amount;
+        return Math.round(amountOfCaloriesPerUnit * foodBlockTotalAmount);
+    }
+
     const updateColor = (color) => {
         setFoodBlock(previousFoodBlock => ({
             ...previousFoodBlock,
@@ -141,6 +181,9 @@ export default function Date () {
         });
     }
 
+    const findFoodInFoodDictionary = foodBlock.foodDictionaryID ? foodDictionary.find(food => food.ID === foodBlock.foodDictionaryID) : (null);
+    const filterFoodDictionary = foodDictionary.filter(food => food.ID !== foodBlock.foodDictionaryID && food.name.toLowerCase().includes(foodBlock.name.toLowerCase().trim()));
+
     return (
         <div className="container">
             <Nav link={{ link: `/day/${ date }`, text: date }} />
@@ -284,6 +327,7 @@ export default function Date () {
                             total calories
                         </label>
                         <input
+                            disabled={ foodBlock.foodDictionaryID ? (true) : (false) }
                             onChange={ (event) => handleChange(event) }
                             value={ foodBlock.calories }
                             type="number"
@@ -317,10 +361,10 @@ export default function Date () {
                             id="unit"
                             name="unit" />
 
-                        <div className="text-gray text-small ml-04 mb-04">
+                        <div className="text-gray text-small mb-04">
                             select a color
                         </div>
-                        <div className="flex">
+                        <div className="flex mb-1">
                             { colors.map(color => {
                                 return (
                                     <div
@@ -334,6 +378,57 @@ export default function Date () {
                             }) }
                         </div>
 
+                        { (foodBlock.name && filterFoodDictionary.length) || foodBlock.foodDictionaryID ? (
+                            <div className="text-gray text-small mb-04">
+                                connect food dictionary
+                            </div>
+                        ) : (null) }
+
+                        <div className="flex flex-wrap overflow-y-100 offset-cards">
+                            { findFoodInFoodDictionary ? (
+                                <div 
+                                    onClick={ removeFoodDictionaryFromFoodBlock }
+                                    className="card text-medium cursor-pointer b-color-orange">
+                                    <div className="text-bold">   
+                                        { findFoodInFoodDictionary.name } 
+                                    </div>
+                                    <div className="flex justify-content-between w-100">
+                                        <div>
+                                            { findFoodInFoodDictionary.calories } calories
+                                        </div>
+
+                                        <div>
+                                            { findFoodInFoodDictionary.amount } { findFoodInFoodDictionary.unit } 
+                                        </div>
+                                    </div>
+                                </div>
+                            ) : (null) }
+
+                            { foodBlock.name ? (
+                                filterFoodDictionary
+                                .map(food => {
+                                    return (
+                                        <div
+                                            className={`card text-medium cursor-pointer ${ food.ID == foodBlock.foodDictionaryID ? ("b-color-orange") : ("") }`}
+                                            onClick={() => connectFoodDictionaryToFoodBlock(food.ID) }
+                                            key={ food.ID }>
+                                            <div className="text-bold">   
+                                                { food.name } 
+                                            </div>
+                                            <div className="flex justify-content-between w-100">
+                                                <div>
+                                                    { food.calories } calories
+                                                </div>
+
+                                                <div>
+                                                    { food.amount } { food.unit } 
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                            })) : (null) }
+                        </div>
+
                         <input
                             type="submit"
                             className="hidden"

diff --git a/pages/settings/data/export-data.js b/pages/settings/data/export-data.js
@@ -4,11 +4,21 @@ import SettingsNav from '../../../shared/components/SettingsNav';
 
 export default function ExportData () {
     const exportData = () => {
-        const foodBlocks = localStorage.getItem('foodBlocks');
+        const foodBlocks = JSON.parse(localStorage.getItem('foodBlocks'));
+        for (const date in foodBlocks) {
+            foodBlocks[date].forEach(foodBlock => {
+                if (!foodBlock.hasOwnProperty('foodDictionaryID')) {
+                    return;
+                }
+
+                delete foodBlock.foodDictionaryID;
+            });
+        }
+
         const calorieGoal = localStorage.getItem('calorieGoal');
         const foodDictionary = localStorage.getItem('foodDictionary');
         const data = {
-            foodBlocks,
+            foodBlocks: JSON.stringify(foodBlocks),
             calorieGoal,
             foodDictionary
         }

diff --git a/pages/settings/food-dictionary.js b/pages/settings/food-dictionary.js
@@ -89,7 +89,7 @@ export default function FoodDictionary () {
 
         setAmountOfCaloriesPerUnit(previousAmountOfCaloriesPerUnit => ({
             ...previousAmountOfCaloriesPerUnit,
-            [ foodBlock.ID ]: (amountOfCaloriesPerUnit * value).toFixed(2)
+            [ foodBlock.ID ]: Math.round((amountOfCaloriesPerUnit * value))
         }));
     }
 

diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -1,5 +1,6 @@
 $dark-blue: #030852;
 $red: #cf1322;
+$orange: #ff8800;
 $green: #389e0d;
 $light-green: #bdd2b6;
 $pink: #c41d7f;
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -97,6 +97,10 @@ input {
   .card {
     width: 30%;
   }
+
+  .card--blocks {
+    width: 50%;
+  }
 }
 
 @media (min-width: 1100px) {

diff --git a/styles/module.scss b/styles/module.scss
@@ -117,6 +117,10 @@ body.modal-is-open {
   overflow-y: scroll;
 }
 
+.offset-cards {
+  margin: 0 -15px;
+}
+
 .text-medium {
   font-size: 20px;
 }