From 8f72bfdb2301231532bec5f2c45d52461a7c9603 Mon Sep 17 00:00:00 2001 From: = <=> Date: Sun, 24 Jan 2021 23:32:34 +0100 Subject: [PATCH] Add marco display --- src/components/MealCard/index.js | 28 +++++++++++++++++++++-- src/containers/BarcodeScanner/Scanner.js | 2 ++ src/pages/Home/actions.js | 8 ++++--- src/pages/Home/index.js | 29 ++++++++++++++++++------ src/pages/Home/reducer.js | 16 +++++++++++-- src/pages/Home/saga.js | 10 ++++---- src/pages/Home/selectors.js | 21 +++++++++++++++++ 7 files changed, 96 insertions(+), 18 deletions(-) diff --git a/src/components/MealCard/index.js b/src/components/MealCard/index.js index b5d2dcc..73189d1 100644 --- a/src/components/MealCard/index.js +++ b/src/components/MealCard/index.js @@ -12,6 +12,8 @@ import {MACRONUTRIENTS, MEALS_LIST} from "utils/mock"; import MacronutrientsChart from "components/MacronutrientsChart"; import ProductCard from "components/ProductCard"; import AddProductToMealDialog from 'components/AddProductToMealDialog'; +import {colors} from "utils/theme"; +import RadialChart from "components/RadialChart"; // {/*{*/} @@ -20,7 +22,10 @@ import AddProductToMealDialog from 'components/AddProductToMealDialog'; // {/* ))*/} // {/*}*/} -const MealCard = ({ id, label, products }) => { +const MealCard = ({ dailyCalories, id, label, products }) => { + const totalCalories = products.reduce((totalCalories, { product: { calories }}) => totalCalories += calories, 0) + const totalProteins = products.reduce((totalProteins, { product: { protein }}) => totalProteins += protein, 0) + const totalFats = products.reduce((totalFats, { product: { fat }}) => totalFats += fat, 0) return ( @@ -32,7 +37,25 @@ const MealCard = ({ id, label, products }) => { - + + + + + {totalCalories} calories + + + + + + {totalProteins} g + + + + + + {totalFats} g + + @@ -58,6 +81,7 @@ const MealCard = ({ id, label, products }) => { MealCard.propTypes = { id: PropTypes.string, + dailyCalories: PropTypes.number.isRequired, label: PropTypes.string.isRequired, products: PropTypes.oneOfType([ PropTypes.array, diff --git a/src/containers/BarcodeScanner/Scanner.js b/src/containers/BarcodeScanner/Scanner.js index 8df284b..0fd357c 100644 --- a/src/containers/BarcodeScanner/Scanner.js +++ b/src/containers/BarcodeScanner/Scanner.js @@ -89,6 +89,7 @@ const Scanner = ({ handleClose, setBarcode }) => { const stop = () => { elements.video.pause(); localMediaStream.getTracks()[0].stop(); + elements.video.removeEventListener('canplay', play) } const init = () => { @@ -268,6 +269,7 @@ const Scanner = ({ handleClose, setBarcode }) => { // output if(quality < config.quality) { const barcode = checkDigit + result.join('') + console.log(barcode) setBarcode(barcode) onClose() } diff --git a/src/pages/Home/actions.js b/src/pages/Home/actions.js index 03add5a..6e6d801 100644 --- a/src/pages/Home/actions.js +++ b/src/pages/Home/actions.js @@ -64,10 +64,13 @@ export const getMealsAction = ({ date }) => ({ date, }) -export const getMealsSuccessAction = ({ meals, dailyCalories }) => ({ +export const getMealsSuccessAction = ({ meals, dailyCalories, dailyFats, dailyProteins, dailyCarbs }) => ({ type: GET_MEALS_SUCCESS, meals, dailyCalories, + dailyFats, + dailyProteins, + dailyCarbs, }) export const getMealsErrorAction = ({ error }) => ({ @@ -96,10 +99,9 @@ export const createMealAction = ({ label, products, date }) => ({ date, }) -export const createMealSuccessAction = ({ meal, dailyCalories }) => ({ +export const createMealSuccessAction = ({ meal }) => ({ type: CREATE_MEAL_SUCCESS, meal, - dailyCalories, }) export const createMealErrorAction = ({error}) => ({ diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js index e277a05..73b2edb 100644 --- a/src/pages/Home/index.js +++ b/src/pages/Home/index.js @@ -1,27 +1,32 @@ import React, { useEffect } from 'react'; -import { Container } from '@material-ui/core'; +import { Container, Grid, Card, Typography, CardContent } from '@material-ui/core'; import {useDispatch, useSelector} from "react-redux"; import {useInjectSaga, useInjectReducer} from "redux-injectors"; import {format} from "date-fns"; +import RadialChart from 'components/RadialChart' +import { colors } from 'utils/theme' import saga from "./saga"; import reducer from "./reducer"; -import {makeSelectMeals} from "./selectors"; +import {makeSelectMeals, makeSelectDailyCalories, makeSelectCaloriesLeft, makeSelectDailyFats, makeSelectDailyCarbs, makeSelectDailyProteins} from "./selectors"; import { getMealsAction } from './actions' import MealCard from "components/MealCard"; import { createStructuredSelector } from 'reselect' -import BarcodeScanner from 'containers/BarcodeScanner' - const stateSelector = createStructuredSelector({ - meals: makeSelectMeals() + meals: makeSelectMeals(), + dailyCalories: makeSelectDailyCalories(), + caloriesLeft: makeSelectCaloriesLeft(), + dailyFats: makeSelectDailyFats(), + dailyProteins: makeSelectDailyProteins(), + dailyCarbs: makeSelectDailyCarbs(), }) const key = 'homePage' const HomePage = () => { useInjectSaga({ key, saga }); useInjectReducer({key, reducer }); - const { meals } = useSelector(stateSelector); + const { meals, dailyCalories, caloriesLeft } = useSelector(stateSelector); const dispatch = useDispatch(); @@ -32,8 +37,18 @@ const HomePage = () => { return ( + + + + + + {caloriesLeft} calories left + + + + {meals.map(({ id, products, label }, index) => ( - + ))} ); diff --git a/src/pages/Home/reducer.js b/src/pages/Home/reducer.js index ecede67..10902b6 100644 --- a/src/pages/Home/reducer.js +++ b/src/pages/Home/reducer.js @@ -52,7 +52,11 @@ export const initialState = { label: '', products: [], dailyCalories: 0, + dailyFats: 0, + dailyProteins: 0, + dailyCarbs: 0, barcode: '', + caloriesLeft: 0, product: {}, date: '', form: { @@ -85,8 +89,17 @@ const homePageReducer = produce((draft, action) => { .concat(action.meals) .sort(({ label: aLabel}, { label: bLabel }) => aLabel.localeCompare(bLabel)) draft.dailyCalories = action.dailyCalories; + draft.dailyFats = action.dailyFats; + draft.dailyProteins = action.dailyProteins; + draft.dailyCarbs = action.dailyCarbs; + const total = draft.meals.reduce( + (totalCalories, meal) => totalCalories += meal.products.reduce( + (mealCalories, { product: { calories }}) => mealCalories += calories, 0) + , 0) - draft.isLoading = false; + draft.caloriesLeft = draft.dailyCalories - total; + + draft.isLoading = false; break; case SEARCH_PRODUCT_BY_BARCODE_REQUEST: @@ -134,7 +147,6 @@ const homePageReducer = produce((draft, action) => { .concat(action.meal) .sort( ({ label: aLabel}, { label: bLabel }) => aLabel.localeCompare(bLabel)) - draft.dailyCalories = action.dailyCalories; draft.isLoading = false; break; diff --git a/src/pages/Home/saga.js b/src/pages/Home/saga.js index 9c0ab76..63dc15d 100644 --- a/src/pages/Home/saga.js +++ b/src/pages/Home/saga.js @@ -20,8 +20,8 @@ export function* getMeals() { }; try { - const {meals, dailyCalories} = yield call(request, requestURL, requestParameters); - yield put(getMealsSuccessAction({ meals, dailyCalories })); + const {meals, dailyCalories, dailyFats, dailyProteins, dailyCarbs} = yield call(request, requestURL, requestParameters); + yield put(getMealsSuccessAction({ meals, dailyCalories, dailyFats, dailyProteins, dailyCarbs })); } catch (error) { yield put(getMealsErrorAction({ error: error.message })); } @@ -68,8 +68,8 @@ export function* createMeal() { }; try { - const {meal, dailyCalories} = yield call(request, requestURL, requestParameters); - yield put(createMealSuccessAction({meal, dailyCalories})); + const meal = yield call(request, requestURL, requestParameters); + yield put(createMealSuccessAction({meal})); yield put(push(routes.dashboard.path)); } catch (error) { yield put(createMealErrorAction({error: error.message})); @@ -104,6 +104,8 @@ export function* searchProductByBarcode() { const requestURL = `${api.products}?barcode=${barcode}`; + console.log(`${api.products}?barcode=${barcode}`) + const requestParameters = { method: 'GET', headers: { diff --git a/src/pages/Home/selectors.js b/src/pages/Home/selectors.js index 8227b1c..d2af324 100644 --- a/src/pages/Home/selectors.js +++ b/src/pages/Home/selectors.js @@ -36,8 +36,29 @@ const makeSelectMealId = () => const makeSelectFormProducts = () => createSelector(selectHomePageDomain, (substate) => substate.form.products); +const makeSelectDailyCalories = () => + createSelector(selectHomePageDomain, (substate) => substate.dailyCalories); + +const makeSelectDailyCarbs = () => + createSelector(selectHomePageDomain, (substate) => substate.dailyCarbs); + +const makeSelectDailyFats = () => + createSelector(selectHomePageDomain, (substate) => substate.dailyFats); + +const makeSelectDailyProteins = () => + createSelector(selectHomePageDomain, (substate) => substate.dailyProteins); + +const makeSelectCaloriesLeft = () => + createSelector(selectHomePageDomain, (substate) => substate.caloriesLeft); + + export { selectHomePageDomain, + makeSelectDailyProteins, + makeSelectDailyCarbs, + makeSelectDailyFats, + makeSelectCaloriesLeft, + makeSelectDailyCalories, makeSelectFormProducts, makeSelectMealLabel, makeSelectMealId,