Add redux for meals page
This commit is contained in:
parent
8160437379
commit
c11dd4a8af
@ -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} />
|
||||
))
|
||||
}
|
||||
|
@ -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 }) => ({
|
||||
|
@ -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';
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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:
|
||||
|
@ -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 }));
|
||||
|
Loading…
Reference in New Issue
Block a user