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

Add redux for meals page

Browse Source
This commit is contained in:
= 2021-01-02 22:41:09 +01:00
parent 8160437379
commit c11dd4a8af
6 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,9 @@ import {MACRONUTRIENTS, MEALS_LIST} from "utils/mock";
import MacronutrientsChart from "components/MacronutrientsChart";
import Dish from "components/ProductCard";
const MealCard = ({ label }) => {
const MealCard = ({ label, products }) => {
console.log(products[0])
const calcMealMacronutrients = (dishes) => {
const mealMacronutrients = dishes
@ -34,6 +36,7 @@ const MealCard = ({ label }) => {
<Accordion>
<AccordionSummary>
<Grid container>
{JSON.stringify(products)}
<Grid container alignItems="center" justify="space-between">
<Typography variant="h5">
{label}
@ -49,7 +52,7 @@ const MealCard = ({ label }) => {
</Grid>
<Grid container alignItems="center">
{
calcMealMacronutrients(MEALS_LIST).map(({ unit, value, label }, index) => (
calcMealMacronutrients(products).map(({ unit, value, label }, index) => (
<MacronutrientsChart current={value} unit={unit} max={5000} label={label} key={index} />
))
}

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

@ -13,8 +13,9 @@ import {
ADD_PRODUCTS_TO_MEAL_ERROR,
} from './constants';
export const getMealsAction = () => ({
export const getMealsAction = ({ date }) => ({
type: GET_MEALS_REQUEST,
date,
})
export const getMealsSuccessAction = ({ meals }) => ({

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

@ -1,15 +1,15 @@
export const GET_MEALS_REQUEST = 'app/HomePage/GET_MEALS_REQUEST'
export const GET_MEALS_SUCCESS = 'app/HomePage/GET_MEALS_SUCCESS';
export const GET_MEALS_ERROR = 'app/LoginPage/GET_MEALS_ERROR';
export const GET_MEALS_ERROR = 'app/HomePage/GET_MEALS_ERROR';
export const CREATE_MEAL_REQUEST = 'app/HomePage/CREATE_MEAL_REQUEST'
export const CREATE_MEAL_SUCCESS = 'app/HomePage/CREATE_MEAL_SUCCESS';
export const CREATE_MEAL_ERROR = 'app/LoginPage/CREATE_MEAL_ERROR';
export const CREATE_MEAL_ERROR = 'app/HomePage/CREATE_MEAL_ERROR';
export const UPDATE_MEAL_REQUEST = 'app/HomePage/UPDATE_MEAL_REQUEST'
export const UPDATE_MEAL_SUCCESS = 'app/HomePage/UPDATE_MEAL_SUCCESS';
export const UPDATE_MEAL_ERROR = 'app/LoginPage/UPDATE_MEAL_ERROR';
export const UPDATE_MEAL_ERROR = 'app/HomePage/UPDATE_MEAL_ERROR';
export const ADD_PRODUCTS_TO_MEAL_REQUEST = 'app/HomePage/ADD_PRODUCTS_TO_MEAL_REQUEST'
export const ADD_PRODUCTS_TO_MEAL_SUCCESS = 'app/HomePage/ADD_PRODUCTS_TO_MEAL_SUCCESS';
export const ADD_PRODUCTS_TO_MEAL_ERROR = 'app/LoginPage/ADD_PRODUCTS_TO_MEAL_ERROR';
export const ADD_PRODUCTS_TO_MEAL_ERROR = 'app/HomePage/ADD_PRODUCTS_TO_MEAL_ERROR';

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

@ -1,22 +1,39 @@
import React from 'react';
import { Grid, IconButton, Accordion, Container, List, AccordionSummary, Typography, AccordionDetails } from '@material-ui/core';
import {Add as AddIcon} from '@material-ui/icons';
import MacronutrientsChart from 'components/MacronutrientsChart'
import React, { useEffect } from 'react';
import { Container } from '@material-ui/core';
import {useDispatch, useSelector} from "react-redux";
import {useInjectSaga, useInjectReducer} from "redux-injectors";
import {format} from "date-fns";
import { TABS, MEALS_LIST, MACRONUTRIENTS } from 'utils/mock'
import saga from "./saga";
import reducer from "./reducer";
import {makeSelectMeals} from "./selectors";
import { getMealsAction } from './actions'
import MealCard from "components/MealCard";
import { createStructuredSelector } from 'reselect'
import Meal from "components/MealCard";
const TODAY = format(new Date(), "yyyy-MM-dd")
const stateSelector = createStructuredSelector({
meals: makeSelectMeals()
})
const key = 'homePage'
const HomePage = () => {
useInjectSaga({ key, saga });
useInjectReducer({key, reducer });
const { meals } = useSelector(stateSelector);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getMealsAction({ date: '2020-12-29' }))
}, []);
return (
<Container >
<Meal label="Breakfast" />
<Meal label="Snack I" />
<Meal label="Lunch" />
<Meal label="Snack II" />
<Meal label="Dinner" />
<Meal label="Snack III" />
<Meal label="Supper" />
<Container>
{meals.map(({ id, products, label }) => (
<MealCard label={label} products={products} key={id} />
))}
</Container>
);
};

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

@ -20,7 +20,7 @@ export const initialState = {
error: {},
label: '',
products: [],
date: format(new Date(), "yyyy-MM-dd"),
date: '',
mealId: '',
meals: [
{
@ -61,6 +61,11 @@ const homePageReducer = produce((draft, action) => {
draft.isLoading = false;
break;
case GET_MEALS_REQUEST:
draft.date = action.date;
draft.isLoading = true;
break;
case UPDATE_MEAL_SUCCESS:
console.log(UPDATE_MEAL_SUCCESS, 'UPDATE_MEAL_SUCCESS')
draft.isLoading = false;
@ -80,7 +85,6 @@ const homePageReducer = produce((draft, action) => {
draft.isLoading = false;
break;
case GET_MEALS_REQUEST:
case CREATE_MEAL_REQUEST:
case UPDATE_MEAL_REQUEST:
case ADD_PRODUCTS_TO_MEAL_REQUEST:

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

@ -11,8 +11,9 @@ import {push} from "connected-react-router";
export function* getMeals() {
const { access } = yield select(makeSelectTokens());
const date = yield select(makeSelectDate());
const requestURL = api.meals;
const requestURL = `${api.meals}?date=${date}`;
const requestParameters = {
method: 'GET',
@ -22,7 +23,7 @@ export function* getMeals() {
};
try {
const { meals } = yield call(request, requestURL, requestParameters);
const meals = yield call(request, requestURL, requestParameters);
yield put(getMealsSuccessAction({ meals }));
} catch (error) {
yield put(getMealsErrorAction({ error: error.message }));