Add redux for meals page

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

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

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';

src/pages/Home/index.js

@@ -1,22 +1,39 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { Grid, IconButton, Accordion, Container, List, AccordionSummary, Typography, AccordionDetails } from '@material-ui/core';
+import { Container } from '@material-ui/core';
-import {Add as AddIcon} from '@material-ui/icons';
+import {useDispatch, useSelector} from "react-redux";
-import MacronutrientsChart from 'components/MacronutrientsChart'
+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 >
+   <Container>
-     <Meal label="Breakfast" />
+     {meals.map(({ id, products, label }) => (
-     <Meal label="Snack I" />
+      <MealCard label={label} products={products} key={id} />
-     <Meal label="Lunch" />
+     ))}
-     <Meal label="Snack II" />
-     <Meal label="Dinner" />
-     <Meal label="Snack III" />
-     <Meal label="Supper" />
    </Container>
   );
 };

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:

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 }));