Merge pull request #121 from tahmid-saj/dev-general-cleanup-1

nutrient prediction in recipes added to tracker
tahmid-saj · Jun 17, 2024 · db2cc54 · db2cc54
2 parents 053a17e + a3c04c6
commit db2cc54
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 17 deletions.
diff --git a/src/components/shared/nutrient-predictor/nutrients-info/nutrients-info.component.jsx b/src/components/shared/nutrient-predictor/nutrients-info/nutrients-info.component.jsx
@@ -20,13 +20,13 @@ const outlinedCardStyles = {
 
 const NutrientsInfo = () => {
   const { nutrientPredictions } = useContext(NutrientPredictorContext);
+
   const currentUser = useSelector(selectCurrentUser)
 
   const { addDayTrackedFromPrediction: addDayTrackedFromPredictionSignedIn } = useContext(NutritionTrackerContext)
 
   const dispatch = useDispatch()
   const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
-
 
   const handleAddToTracker = (prediction) => {
     const currentDate = new Date()

diff --git a/...ts/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx b/...ts/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx
@@ -6,6 +6,13 @@ import { RecipesContext } from "../../../../../../contexts/shared/recipes/recipe
 import { Typography } from "@mui/material"
 import OutlinedCard from "../../../../mui/card/card.component"
 import { Divider } from "@mui/material"
+import Button from "../../../../button/button.component.jsx"
+import { ButtonsContainer } from "../../../../button/button.styles.jsx"
+import { useDispatch, useSelector } from "react-redux";
+import { selectCurrentUser } from "../../../../../../store/shared/user/user.selector.js"
+import { NutritionTrackerContext } from "../../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context.js"
+import { addDayTrackedFromPrediction, setFormInputMicronutrients } from "../../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action.js";
+import { selectNutritionTrackedDays } from "../../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector.js";
 
 import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
 
@@ -16,41 +23,106 @@ const outlinedCardStyles = {
 const NutrientPrediction = () => {
   const { displayedRecipe } = useContext(RecipesContext)
 
+  const currentUser = useSelector(selectCurrentUser)
+
+  const { addDayTrackedFromPrediction: addDayTrackedFromPredictionSignedIn } = useContext(NutritionTrackerContext)
+
+  const dispatch = useDispatch()
+  const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
+
+  const handleAddToTracker = (prediction) => {
+    const currentDate = new Date()
+    const predictionNutritionInfo = {
+      dateTracked: currentDate.toISOString().split('T')[0],
+      calories: Number(prediction.calories),
+      macronutrients: {
+        carbohydrates: Number(prediction.macronutrients.carbohydratesTotalG),
+        protein: Number(prediction.macronutrients.proteinG),
+        fat: Number(prediction.macronutrients.fatTotalG)
+      },
+      micronutrients: [
+        {
+          name: "Sodium",
+          amount: Number(prediction.micronutrients.sodiumMG),
+          unit: "mg"
+        },
+        {
+          name: "Potassium",
+          amount: Number(prediction.micronutrients.potassiumMG),
+          unit: "mg"
+        },
+        {
+          name: "Cholesterol",
+          amount: Number(prediction.micronutrients.cholesterolMg),
+          unit: "mg"
+        },
+        {
+          name: "Fiber",
+          amount: Number(prediction.micronutrients.fiberG),
+          unit: "g"
+        },
+        {
+          name: "Sugar",
+          amount: Number(prediction.micronutrients.sugarG),
+          unit: "g"
+        },
+      ]
+    }
+
+    // signed in
+    if (currentUser) {
+      addDayTrackedFromPredictionSignedIn(predictionNutritionInfo)
+
+    // signed out
+    } else {
+      dispatch(addDayTrackedFromPrediction(nutritionTrackedDays, predictionNutritionInfo))
+      dispatch(setFormInputMicronutrients([]))
+    }
+  }
+
   return (
     <Fragment>
       <Typography>
         { displayedRecipe.nutrientPredictions.map((prediction, index) => {
           return (
           <NutrientsInfoContainer key={ index }>
             <OutlinedCard styles={ outlinedCardStyles }>
-            <strong><Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${prediction.name.toUpperCase()}`}</Typography></strong>
-            <br></br>
+              <strong><Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${prediction.name.toUpperCase()}`}</Typography></strong>
+              <br></br>
 
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${prediction.calories}`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Serving size - ${prediction.servingSizeG} g`}</Typography>
+              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${prediction.calories}`}</Typography>
+              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Serving size - ${prediction.servingSizeG} g`}</Typography>
 
-            <br></br>
-            <Divider/>
-            <br></br>
+              <br></br>
+              <Divider/>
+              <br></br>
 
-            <strong><h4>Macronutrients</h4></strong>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Carbohydrates - ${prediction.macronutrients.carbohydratesTotalG} g`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Protein - ${prediction.macronutrients.proteinG} g`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fat - ${prediction.macronutrients.fatTotalG} g`}</Typography>
-            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Saturated fat - ${prediction.macronutrients.fatSaturatedG} g`}</Typography>
+              <strong><h4>Macronutrients</h4></strong>
+              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Carbohydrates - ${prediction.macronutrients.carbohydratesTotalG} g`}</Typography>
+              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Protein - ${prediction.macronutrients.proteinG} g`}</Typography>
+              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fat - ${prediction.macronutrients.fatTotalG} g`}</Typography>
+              <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Saturated fat - ${prediction.macronutrients.fatSaturatedG} g`}</Typography>
 
-            <br></br>
-            <Divider/>
-            <br></br>
+              <br></br>
+              <Divider/>
+              <br></br>
 
-            <strong><h4>Micronutrients</h4></strong>
+              <strong><h4>Micronutrients</h4></strong>
               <Fragment key={ index }>
                 <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Sodium - ${prediction.micronutrients.sodiumMG} mg`}</Typography>
                 <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Potassium - ${prediction.micronutrients.potassiumMG} mg`}</Typography>
                 <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Cholesterol - ${prediction.micronutrients.cholesterolMg} mg`}</Typography>
                 <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fiber - ${prediction.micronutrients.fiberG} g`}</Typography>
                 <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Sugar - ${prediction.micronutrients.sugarG} g`}</Typography>
               </Fragment>
+
+              <br></br>
+              <Divider/>
+              <br></br>
+
+              <ButtonsContainer>
+                <Button buttonType="regular-button" type="button" onClick={ () => handleAddToTracker(prediction) }>Add to tracker</Button>
+              </ButtonsContainer>
             </OutlinedCard>
           </NutrientsInfoContainer>
           )