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 = (