diff --git a/src/components/MealCard/index.js b/src/components/MealCard/index.js index 424d35e..03210c6 100644 --- a/src/components/MealCard/index.js +++ b/src/components/MealCard/index.js @@ -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 }) => { + {JSON.stringify(products)} {label} @@ -49,7 +52,7 @@ const MealCard = ({ label }) => { { - calcMealMacronutrients(MEALS_LIST).map(({ unit, value, label }, index) => ( + calcMealMacronutrients(products).map(({ unit, value, label }, index) => ( )) } diff --git a/src/pages/Home/actions.js b/src/pages/Home/actions.js index 83a9bf1..e55b2d7 100644 --- a/src/pages/Home/actions.js +++ b/src/pages/Home/actions.js @@ -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 }) => ({ diff --git a/src/pages/Home/constants.js b/src/pages/Home/constants.js index fe5959a..8d370b8 100644 --- a/src/pages/Home/constants.js +++ b/src/pages/Home/constants.js @@ -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'; diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js index 32897b1..82b1a95 100644 --- a/src/pages/Home/index.js +++ b/src/pages/Home/index.js @@ -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 ( - - - - - - - - + + {meals.map(({ id, products, label }) => ( + + ))} ); }; diff --git a/src/pages/Home/reducer.js b/src/pages/Home/reducer.js index 6371deb..6275752 100644 --- a/src/pages/Home/reducer.js +++ b/src/pages/Home/reducer.js @@ -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: diff --git a/src/pages/Home/saga.js b/src/pages/Home/saga.js index 2fe0a36..bddf80e 100644 --- a/src/pages/Home/saga.js +++ b/src/pages/Home/saga.js @@ -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 }));