From e362433cab6dc7012dd648a1d430f198ee353bb4 Mon Sep 17 00:00:00 2001 From: tahmid-saj Date: Fri, 24 May 2024 00:44:35 -0400 Subject: [PATCH] nutrition tracker reducers on components --- .../add-micronutrients.component.jsx | 16 ++++--- .../calories-graph.component.jsx | 7 +++- .../consumption-info.component.jsx | 7 +++- .../nutrition-tracker-filter.component.jsx | 11 +++-- .../nutrition-tracker-table.component.jsx | 20 +++++++-- .../nutrition-tracker.component.jsx | 42 +++++++++++++++++-- .../search-days/search-days.component.jsx | 11 +++-- .../summary-graph/summary-graph.component.jsx | 7 +++- .../summary/summary.component.jsx | 7 +++- .../update-consumption-form.component.jsx | 20 ++++++--- src/index.js | 4 +- src/store/root-reducer.js | 5 ++- .../nutrition-tracker.action.js | 4 ++ src/store/store.js | 4 +- 14 files changed, 126 insertions(+), 39 deletions(-) diff --git a/src/components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.component.jsx b/src/components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.component.jsx index 9c973b7..9e9a559 100644 --- a/src/components/signed-out/nutrition-tracker/add-micronutrients/add-micronutrients.component.jsx +++ b/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 ( diff --git a/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx b/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx index f3b9102..516cac4 100644 --- a/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx +++ b/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) => { diff --git a/src/components/signed-out/nutrition-tracker/consumption-info/consumption-info.component.jsx b/src/components/signed-out/nutrition-tracker/consumption-info/consumption-info.component.jsx index 8b953b9..7d2d4f5 100644 --- a/src/components/signed-out/nutrition-tracker/consumption-info/consumption-info.component.jsx +++ b/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 ( diff --git a/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx b/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx index 0cdbd6b..d26925d 100644 --- a/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx +++ b/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 ( diff --git a/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx b/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx index 937cd36..2521ea5 100644 --- a/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx +++ b/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 = () => {
- +
) diff --git a/src/components/signed-out/nutrition-tracker/nutrition-tracker.component.jsx b/src/components/signed-out/nutrition-tracker/nutrition-tracker.component.jsx index bced63d..7d25c7b 100644 --- a/src/components/signed-out/nutrition-tracker/nutrition-tracker.component.jsx +++ b/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 (
{ - nutritionTrackedDays.length !== 0 && + nutritionTrackedDays && nutritionTrackedDays.length !== 0 &&

Summary

diff --git a/src/components/signed-out/nutrition-tracker/search-days/search-days.component.jsx b/src/components/signed-out/nutrition-tracker/search-days/search-days.component.jsx index b118499..2d2d913 100644 --- a/src/components/signed-out/nutrition-tracker/search-days/search-days.component.jsx +++ b/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) => { diff --git a/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx b/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx index 91d13cb..9224a85 100644 --- a/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx +++ b/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 diff --git a/src/components/signed-out/nutrition-tracker/summary/summary.component.jsx b/src/components/signed-out/nutrition-tracker/summary/summary.component.jsx index 9c2411b..2907d4a 100644 --- a/src/components/signed-out/nutrition-tracker/summary/summary.component.jsx +++ b/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 (
diff --git a/src/components/signed-out/nutrition-tracker/update-consumption-form/update-consumption-form.component.jsx b/src/components/signed-out/nutrition-tracker/update-consumption-form/update-consumption-form.component.jsx index 206d8da..e009756 100644 --- a/src/components/signed-out/nutrition-tracker/update-consumption-form/update-consumption-form.component.jsx +++ b/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,7 +36,7 @@ const UpdateConsumptionForm = () => { console.log(formFields); - addDayTracked({ + dispatch(addDayTracked(nutritionTrackedDays, formInputMicronutrients, { dateTracked: formFields.dateTracked, calories: formFields.calories, macronutrients: { @@ -38,7 +44,8 @@ const UpdateConsumptionForm = () => { protein: formFields.protein, fat: formFields.fat, } - }); + })) + dispatch(setFormInputMicronutrients([])) resetFormFields(); }; @@ -48,7 +55,7 @@ const UpdateConsumptionForm = () => { console.log(formFields); - updateDayTracked({ + dispatch(updateDayTracked(nutritionTrackedDays, formInputMicronutrients, { dateTracked: formFields.dateTracked, calories: formFields.calories, macronutrients: { @@ -56,7 +63,8 @@ const UpdateConsumptionForm = () => { protein: formFields.protein, fat: formFields.fat, } - }); + })) + dispatch(setFormInputMicronutrients([])) resetFormFields(); }; diff --git a/src/index.js b/src/index.js index 637e1e0..7f09517 100644 --- a/src/index.js +++ b/src/index.js @@ -29,7 +29,7 @@ root.render( - + {/* */} {/* */} @@ -41,7 +41,7 @@ root.render( {/* */} - + {/* */} diff --git a/src/store/root-reducer.js b/src/store/root-reducer.js index 00cc7e4..cd47c6a 100644 --- a/src/store/root-reducer.js +++ b/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 }) \ No newline at end of file diff --git a/src/store/signed-out/nutrition-tracker/nutrition-tracker.action.js b/src/store/signed-out/nutrition-tracker/nutrition-tracker.action.js index ffa8e13..b401c00 100644 --- a/src/store/signed-out/nutrition-tracker/nutrition-tracker.action.js +++ b/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) } diff --git a/src/store/store.js b/src/store/store.js index 362ea59..d633497 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -7,8 +7,8 @@ import { loggerMiddleware } from "./middleware/logger" // root-reducer const middlewares = [ - process.env.NODE_ENV !== "production" && loggerMiddleware, - process.env.NODE_ENV !== "production" && logger + // process.env.NODE_ENV !== "production" && loggerMiddleware, + // process.env.NODE_ENV !== "production" && logger ].filter(Boolean) const composeEnhancer = (