s458003/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add marco display

Browse Source
This commit is contained in:
= 2021-01-24 23:32:34 +01:00
parent d3b1fa03fc
commit 8f72bfdb23
7 changed files with 96 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/MealCard/index.js
View File

@ -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 (
<Accordion>
@ -32,7 +37,25 @@ const MealCard = ({ id, label, products }) => {
</Typography>
<AddProductToMealDialog mealId={id} mealLabel={label} />
</Grid>
<Grid container alignItems="center">
<Grid container alignItems="center" justifyContent="space-between">
<Grid container alignItems="center" justifyContent="center">
<RadialChart progress={(totalCalories/dailyCalories) * 100} width={25} height={25} color={colors.calories} />
<Typography gutterBottom>
{totalCalories} calories
</Typography>
</Grid>
<Grid container alignItems="center" justifyContent="center">
<RadialChart progress={(totalProteins/dailyCalories) * 100} width={25} height={25} color={colors.protein} />
<Typography gutterBottom>
{totalProteins} g
</Typography>
</Grid>
<Grid container alignItems="center" justifyContent="center">
<RadialChart progress={(totalFats/dailyCalories) * 100} width={25} height={25} color={colors.fat} />
<Typography gutterBottom>
{totalFats} g
</Typography>
</Grid>
</Grid>
</Grid>
</AccordionSummary>
@ -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,

2
src/containers/BarcodeScanner/Scanner.js
View File

@ -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()
}

8
src/pages/Home/actions.js
View File

@ -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}) => ({

29
src/pages/Home/index.js
View File

@ -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 (
<Container>
<Card>
<CardContent>
<Grid container alignItems="center" justifyContent="center">
<RadialChart progress={(caloriesLeft/dailyCalories) * 100} width={50} height={50} color={colors.calories} />
<Typography gutterBottom>
{caloriesLeft} calories left
</Typography>
</Grid>
</CardContent>
</Card>
{meals.map(({ id, products, label }, index) => (
<MealCard id={id} label={label} products={products} key={index} />
<MealCard dailyCalories={dailyCalories} id={id} label={label} products={products} key={index} />
))}
</Container>
);

14
src/pages/Home/reducer.js
View File

@ -52,7 +52,11 @@ export const initialState = {
label: '',
products: [],
dailyCalories: 0,
dailyFats: 0,
dailyProteins: 0,
dailyCarbs: 0,
barcode: '',
caloriesLeft: 0,
product: {},
date: '',
form: {
@ -85,6 +89,15 @@ 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.caloriesLeft = draft.dailyCalories - total;
draft.isLoading = false;
break;
@ -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;

10
src/pages/Home/saga.js
View File

@ -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: {

21
src/pages/Home/selectors.js
View File

@ -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,