Merge pull request #109 from tahmid-saj/dev-redux-nutrition-tracker

nutrition tracker reducers on components

src/components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.component.jsx

@@ -7,14 +7,18 @@ import FormInput from "../../../shared/form-input/form-input.component";
 
 import "./add-micronutrients.styles.scss";
 
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useDispatch, useSelector } from "react-redux"
+import { selectFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+import { addFormInputMicronutrients, updateFormInputMicronutrients, deleteFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
 
 const AddMicronutrients = () => {
-  const { formInputMicronutrients, addFormInputMicronutrients,
-          updateFormInputMicronutrients, deleteFormInputMicronutrients } = useContext(NutritionTrackerContext);
+  // const { formInputMicronutrients, addFormInputMicronutrients, updateFormInputMicronutrients, deleteFormInputMicronutrients } = useContext(NutritionTrackerContext);
+  const dispatch = useDispatch()
+  const formInputMicronutrients = useSelector(selectFormInputMicronutrients)
 
   const handleAdd = () => {
-    addFormInputMicronutrients();
+    dispatch(addFormInputMicronutrients(formInputMicronutrients))
   };
 
   const handleChange = (event, micronutrientIndex) => {
@@ -41,12 +45,12 @@ const AddMicronutrients = () => {
       }
     }
 
-    updateFormInputMicronutrients(micronutrient, micronutrientIndex);
+    dispatch(updateFormInputMicronutrients(formInputMicronutrients, micronutrient, micronutrientIndex))
   };
 
   const handleDelete = (micronutrientIndex) => {
 
-    deleteFormInputMicronutrients(micronutrientIndex);
+    dispatch(deleteFormInputMicronutrients(formInputMicronutrients, micronutrientIndex))
   };
 
   return (

src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx

@@ -1,12 +1,15 @@
 import "./calories-graph.styles.scss"
 import ReactApexChart from "react-apexcharts"
 import { useContext } from "react"
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context"
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context"
+import { useSelector } from "react-redux"
+import { selectNutritionTrackedDaysView } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"
 
 import { GRAPH_FIELDS } from "../../../../utils/constants/nutrition-tracker.constants"
 
 const CaloriesGraph = () => {
-  const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext)
+  // const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext)
+  const nutritionTrackedDaysView = useSelector(selectNutritionTrackedDaysView)
 
   let trackedCalories = new Map()
   const trackedDayCalories = nutritionTrackedDaysView.map((trackedDate) => {

src/components/signed-out/nutrition-tracker/consumption-info/consumption-info.component.jsx

@@ -2,12 +2,15 @@ import { useContext, Fragment } from "react";
 import ReactApexChart from "react-apexcharts";
 import "./consumption-info.styles.scss";
 
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useSelector } from "react-redux"
+import { selectDayTrackedSearchResult } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
 
 import { GRAPH_FIELDS } from "../../../../utils/constants/nutrition-tracker.constants";
 
 const ConsumptionInfo = () => {
-  const { dayTrackedSearchResult } = useContext(NutritionTrackerContext);
+  // const { dayTrackedSearchResult } = useContext(NutritionTrackerContext);
+  const dayTrackedSearchResult = useSelector(selectDayTrackedSearchResult)
 
   if (!dayTrackedSearchResult) {
     return (

src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx

@@ -3,7 +3,9 @@ import FormInput from "../../../shared/form-input/form-input.component";
 import "./nutrition-tracker-filter.styles.scss"
 
 import { useState, useContext } from "react"
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useDispatch } from "react-redux"
+import { filterDayTracked, clearDayTrackedFilter } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
 
 const defaultFormFields = {
   filterStartDate: "",
@@ -12,7 +14,8 @@ const defaultFormFields = {
 
 const NutritionTrackerFilter = () => {
   const [formFields, setFormFields] = useState(defaultFormFields)
-  const { filterDayTracked, clearDayTrackedFilter } = useContext(NutritionTrackerContext)
+  // const { filterDayTracked, clearDayTrackedFilter } = useContext(NutritionTrackerContext)
+  const dispatch = useDispatch()
 
   const resetFormFields = () => {
     setFormFields(defaultFormFields)
@@ -26,7 +29,7 @@ const NutritionTrackerFilter = () => {
       return
     }
 
-    filterDayTracked(formFields)
+    dispatch(filterDayTracked(formFields))
   }
 
   const handleChange = (event) => {
@@ -38,7 +41,7 @@ const NutritionTrackerFilter = () => {
     event.preventDefault()
 
     resetFormFields()
-    clearDayTrackedFilter()
+    dispatch(clearDayTrackedFilter())
   }
 
   return (

src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx

@@ -5,12 +5,19 @@ import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useDispatch, useSelector } from "react-redux"
+import { selectNutritionTrackedDaysView, selectNutritionTrackedDays } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+import { removeDayTracked, clearDayTrackedFilter } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
+
 import Button from "../../../shared/button/button.component";
 
 const NutritionTrackerTable = () => {
   const gridRef = useRef()
-  const { nutritionTrackedDaysView, removeDayTracked, clearDayTrackedFilter } = useContext(NutritionTrackerContext)
+  // const { nutritionTrackedDaysView, removeDayTracked, clearDayTrackedFilter } = useContext(NutritionTrackerContext)
+  const dispatch = useDispatch()
+  const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
+  const nutritionTrackedDaysView = useSelector(selectNutritionTrackedDaysView)
 
   const rowData = nutritionTrackedDaysView.map((trackedDate) => {
     return {
@@ -45,7 +52,12 @@ const NutritionTrackerTable = () => {
 
     console.log(selectedData[0])
 
-    removeDayTracked(selectedData[0].DateTracked)
+    dispatch(removeDayTracked(nutritionTrackedDays, selectedData[0].DateTracked))
+  }
+
+  const onClearFilter = (event) => {
+    event.preventDefault()
+    dispatch(clearDayTrackedFilter())
   }
 
   return (
@@ -58,7 +70,7 @@ const NutritionTrackerTable = () => {
       <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
       <div className="remove-tracked-date-selected-button">
         <Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
-        <Button type="button" onClick={ clearDayTrackedFilter }>Clear Filter</Button>
+        <Button type="button" onClick={ onClearFilter }>Clear Filter</Button>
       </div>
     </div>
   )

src/components/signed-out/nutrition-tracker/nutrition-tracker.component.jsx

@@ -1,4 +1,4 @@
-import React, { Component, useContext, Fragment } from "react";
+import React, { Component, useEffect, Fragment } from "react";
 
 import Summary from "./summary/summary.component";
 
@@ -11,14 +11,50 @@ import TopSearch from "./top-search/top-search.component";
 
 // import { NutritionTrackerContext } from "../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
 import { useDispatch, useSelector } from "react-redux"
+import { selectNutritionTrackedDays, selectFilterConditions, selectNutritionTrackedDaysView } from "../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+import { setNutritionTrackedDaysSummary, setNutritionTrackedDaysView, 
+  filterDayTrackedHelper 
+} from "../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
+import { calculateSummary } from "../../../utils/calculations/nutrition-tracker.calculations";
 
 const NutritionTracker = () => {
-  const { nutritionTrackedDays } = useContext(NutritionTrackerContext);
+  // const { nutritionTrackedDays } = useContext(NutritionTrackerContext);
+  const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
+  const filterConditions = useSelector(selectFilterConditions)
+  const nutritionTrackedDaysView = useSelector(selectNutritionTrackedDaysView)
+  const dispatch = useDispatch()
+
+  // update summary if nutritionTrackedDays changes
+  useEffect(() => {
+    if (nutritionTrackedDays && nutritionTrackedDays.length) {
+      // update nutritionTrackedDaysSummary with average consumptions
+      console.log(nutritionTrackedDays);
+
+      const summary = calculateSummary(nutritionTrackedDays);
+
+      dispatch(setNutritionTrackedDaysSummary({
+        averageDailyCaloriesConsumption: summary.averageDailyCalories,
+        averageDailyCarbohydratesConsumption: summary.averageDailyCarbohydrates,
+        averageDailyProteinConsumption: summary.averageDailyProtein,
+        averageDailyFatConsumption: summary.averageDailyFat,
+      }))
+    }
+  }, [nutritionTrackedDays, dispatch])
+
+  // update nutritionTrackedDaysView when nutritionTrackedDays or filterConditions change
+  useEffect(() => {
+    if (filterConditions) {
+      const filteredTrackedDays = filterDayTrackedHelper(nutritionTrackedDays, filterConditions)
+      dispatch(setNutritionTrackedDaysView(filteredTrackedDays))
+    } else {
+      dispatch(setNutritionTrackedDaysView(nutritionTrackedDays))
+    }
+  }, [nutritionTrackedDays, filterConditions, dispatch])
 
   return (
     <div className="nutrition-tracker-container">
       {
-        nutritionTrackedDays.length !== 0 &&
+        nutritionTrackedDays && nutritionTrackedDays.length !== 0 &&
         <Fragment>
         <h2 className="nutrition-tracker-summary-header">Summary</h2>
           <TopSearch></TopSearch>

src/components/signed-out/nutrition-tracker/search-days/search-days.component.jsx

@@ -7,7 +7,10 @@ import Button from "../../../shared/button/button.component";
 
 import ConsumptionInfo from "../consumption-info/consumption-info.component";
 
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useDispatch, useSelector } from "react-redux"
+import { selectNutritionTrackedDays } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+import { getDayTracked } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
 
 const defaultFormFields = {
   dateTracked: ""
@@ -17,7 +20,9 @@ const SearchDays = () => {
   const [formFields, setFormFields] = useState(defaultFormFields);
   const [searchedClicked, setSearchClicked] = useState(false)
 
-  const { getDayTracked } = useContext(NutritionTrackerContext)
+  // const { getDayTracked } = useContext(NutritionTrackerContext)
+  const dispatch = useDispatch()
+  const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
 
   const resetFormFields = () => {
     setFormFields(defaultFormFields);
@@ -29,7 +34,7 @@ const SearchDays = () => {
 
     console.log(event.target.value);
     // resetFormFields();
-    getDayTracked(formFields.dateTracked)
+    dispatch(getDayTracked(nutritionTrackedDays, formFields.dateTracked))
   };
 
   const handleChange = (event) => {

src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx

@@ -3,12 +3,15 @@ import ReactApexChart from 'react-apexcharts'
 
 import "./summary-graph.styles.scss";
 
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useSelector } from "react-redux"
+import { selectNutritionTrackedDaysView } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
 
 import { GRAPH_FIELDS } from "../../../../utils/constants/nutrition-tracker.constants";
 
 const SummaryGraph = () => {
-  const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext);
+  // const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext);
+  const nutritionTrackedDaysView = useSelector(selectNutritionTrackedDaysView)
 
   const carbohydratesData = nutritionTrackedDaysView.map(nutritionTrackedDay => {
     return nutritionTrackedDay.macronutrients.carbohydrates

src/components/signed-out/nutrition-tracker/summary/summary.component.jsx

@@ -2,7 +2,9 @@ import { useContext } from "react";
 
 import "./summary.styles.scss";
 
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useSelector } from "react-redux"
+import { selectNutritionTrackedDaysSummary } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
 
 const date = new Date();
 let currentDay= String(date.getDate()).padStart(2, '0');
@@ -11,7 +13,8 @@ let currentYear = date.getFullYear();
 let currentDate = `${currentYear}-${currentMonth}-${currentDay}`;
 
 const Summary = () => {
-  const { nutritionTrackedDaysSummary } = useContext(NutritionTrackerContext);
+  // const { nutritionTrackedDaysSummary } = useContext(NutritionTrackerContext);
+  const nutritionTrackedDaysSummary = useSelector(selectNutritionTrackedDaysSummary)
 
   return (
     <div className="nutrition-tracker-summary">

src/components/signed-out/nutrition-tracker/update-consumption-form/update-consumption-form.component.jsx

@@ -6,7 +6,10 @@ import FormInput from "../../../shared/form-input/form-input.component";
 import Button from "../../../shared/button/button.component";
 import AddMicronutrients from "../add-micronutrients/add-micronutrients.component";
 
-import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+import { useDispatch, useSelector } from "react-redux"
+import { selectNutritionTrackedDays, selectFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"
+import { addDayTracked, updateDayTracked, setFormInputMicronutrients } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
 
 const defaultFormFields = {
   dateTracked: "",
@@ -17,7 +20,10 @@ const defaultFormFields = {
 };
 
 const UpdateConsumptionForm = () => {
-  const { nutritionTrackedDays, addDayTracked, updateDayTracked } = useContext(NutritionTrackerContext);
+  // const { nutritionTrackedDays, addDayTracked, updateDayTracked } = useContext(NutritionTrackerContext);
+  const dispatch = useDispatch()
+  const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
+  const formInputMicronutrients = useSelector(selectFormInputMicronutrients)
 
   const [formFields, setFormFields] = useState(defaultFormFields);
 
@@ -30,15 +36,16 @@ const UpdateConsumptionForm = () => {
 
     console.log(formFields);
 
-    addDayTracked({
+    dispatch(addDayTracked(nutritionTrackedDays, formInputMicronutrients, {
       dateTracked: formFields.dateTracked,
       calories: formFields.calories,
       macronutrients: {
         carbohydrates: formFields.carbohydrates,
         protein: formFields.protein,
         fat: formFields.fat,
       }
-    });
+    }))
+    dispatch(setFormInputMicronutrients([]))
 
     resetFormFields(); 
   };
@@ -48,15 +55,16 @@ const UpdateConsumptionForm = () => {
 
     console.log(formFields);
 
-    updateDayTracked({
+    dispatch(updateDayTracked(nutritionTrackedDays, formInputMicronutrients, {
       dateTracked: formFields.dateTracked,
       calories: formFields.calories,
       macronutrients: {
         carbohydrates: formFields.carbohydrates,
         protein: formFields.protein,
         fat: formFields.fat,
       }
-    });
+    }))
+    dispatch(setFormInputMicronutrients([]))
 
     resetFormFields(); 
   };

src/index.js

@@ -29,7 +29,7 @@ root.render(
         <BrowserRouter>
           <ChatBotProvider>
             <NutrientPredictorProvider>
-              <NutritionTrackerProviderSignedOut>
+              {/* <NutritionTrackerProviderSignedOut> */}
                 <CaloriesBurnedProviderSignedOut>
                   <RecipesProvider>
                     {/* <UserProvider> */}
@@ -41,7 +41,7 @@ root.render(
                     {/* </UserProvider> */}
                   </RecipesProvider>
                 </CaloriesBurnedProviderSignedOut>
-              </NutritionTrackerProviderSignedOut>
+              {/* </NutritionTrackerProviderSignedOut> */}
             </NutrientPredictorProvider>
           </ChatBotProvider>
         </BrowserRouter>

src/store/root-reducer.js

@@ -1,7 +1,10 @@
 import { combineReducers } from "redux"
 
 import { userReducer } from "./shared/user/user.reducer"
+import { nutritionTrackerReducer } from "./signed-out/nutrition-tracker/nutrition-tracker.reducer"
 
 export const rootReducer = combineReducers({
-  user: userReducer
+  user: userReducer,
+
+  nutritionTracker: nutritionTrackerReducer
 })

src/store/signed-out/nutrition-tracker/nutrition-tracker.action.js

@@ -181,6 +181,10 @@ export const clearDayTrackedFilter = () => {
   return createAction(NUTRITION_TRACKER_ACTION_TYPES.SET_FILTER_CONDITIONS, null)
 }
 
+export const setFormInputMicronutrients = (formInputMicronutrients) => {
+  return createAction(NUTRITION_TRACKER_ACTION_TYPES.SET_FORM_INPUT_MICRONUTRIENTS, formInputMicronutrients)
+}
+
 export const setNutritionTrackedDaysView = (nutritionTrackedDaysView) => {
   return createAction(NUTRITION_TRACKER_ACTION_TYPES.SET_NUTRITION_TRACKED_DAYS_VIEW, nutritionTrackedDaysView)
 }