From d3b1fa03fc5175ba7e079c874f040c843c1d3112 Mon Sep 17 00:00:00 2001 From: = <=> Date: Sun, 24 Jan 2021 21:23:52 +0100 Subject: [PATCH] Fixes --- src/components/EditProductDialog/index.js | 71 ------------------- src/components/MealCard/index.js | 1 + src/components/ProductCard/index.js | 13 ++-- .../BarcodeScanner/{Barcode.js => Scanner.js} | 13 ++-- src/containers/BarcodeScanner/index.js | 17 ++++- src/pages/AddDish/index.js | 1 - src/pages/Home/actions.js | 32 +++++++-- src/pages/Home/constants.js | 4 ++ src/pages/Home/reducer.js | 53 ++++++-------- src/pages/Home/saga.js | 8 +-- 10 files changed, 88 insertions(+), 125 deletions(-) delete mode 100644 src/components/EditProductDialog/index.js rename src/containers/BarcodeScanner/{Barcode.js => Scanner.js} (97%) diff --git a/src/components/EditProductDialog/index.js b/src/components/EditProductDialog/index.js deleted file mode 100644 index d06b200..0000000 --- a/src/components/EditProductDialog/index.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useState } from 'react'; -import {Dialog, DialogTitle, Tooltip, DialogContent, Grid, Typography, TextField, DialogContentText, DialogActions, IconButton, Button} from "@material-ui/core"; -import InputField from "components/InputField"; -import {Edit as EditIcon, VerifiedUserTwoTone as VerifiedUserIcon, EcoTwoTone as EcoIcon} from "@material-ui/icons"; - -const ProductLabel = ({ label, eco, verified }) => { - return ( - - - {label} - {verified && ( - - - - )} - {eco && ( - - - - )} - - - ) -} - -const EditProductDialog = () => { - const [isDialogOpen, setIsDialogOpen] = useState(false) - - const handleOpenDialog = () => { - setIsDialogOpen(true) - } - - const handleCloseDialog = () => { - setIsDialogOpen(false) - } - - return ( - - - - - - - - - To subscribe to this website, please enter your email address here. We will send updates - occasionally. - - - - - - - - - - ); -} - -export default EditProductDialog; diff --git a/src/components/MealCard/index.js b/src/components/MealCard/index.js index 77b19dd..b5d2dcc 100644 --- a/src/components/MealCard/index.js +++ b/src/components/MealCard/index.js @@ -41,6 +41,7 @@ const MealCard = ({ id, label, products }) => { {products.map(({ _id, product, quantity, unit }) => ( { +const ProductCard = ({ mealId, id, product, quantity, unit }) => { + const dispatch = useDispatch() const { label, calories, eco, verified } = product @@ -20,6 +22,10 @@ const ProductCard = ({ id, product, quantity, unit }) => { return (calories / 100) * quantity } + const removeProductFormMeal = () => { + dispatch(removeProductFromMealAction({ mealId, id })) + } + return ( { secondary={`calories: ${calculateCalories()}`} /> - - alert('remove')}> + diff --git a/src/containers/BarcodeScanner/Barcode.js b/src/containers/BarcodeScanner/Scanner.js similarity index 97% rename from src/containers/BarcodeScanner/Barcode.js rename to src/containers/BarcodeScanner/Scanner.js index 631b168..8df284b 100644 --- a/src/containers/BarcodeScanner/Barcode.js +++ b/src/containers/BarcodeScanner/Scanner.js @@ -1,10 +1,10 @@ import React, {useEffect, useState} from 'react'; import {Paper, IconButton} from "@material-ui/core"; import { Close as CloseIcon } from '@material-ui/icons' +import PropTypes from 'prop-types' import useStyles from "./styles"; -const Barcode = ({ isScannerOpen, handleClose }) => { - const [decodecBarcode, setDecodedBarcode] = useState(''); +const Scanner = ({ handleClose, setBarcode }) => { const classes = useStyles() const onClose = () => { @@ -268,7 +268,7 @@ const Barcode = ({ isScannerOpen, handleClose }) => { // output if(quality < config.quality) { const barcode = checkDigit + result.join('') - setDecodedBarcode(barcode) + setBarcode(barcode) onClose() } @@ -319,4 +319,9 @@ const Barcode = ({ isScannerOpen, handleClose }) => { ); } -export default Barcode; +Scanner.propTypes ={ + handleClose: PropTypes.func.isRequired, + setBarcode: PropTypes.func.isRequired, +} + +export default Scanner; diff --git a/src/containers/BarcodeScanner/index.js b/src/containers/BarcodeScanner/index.js index 3088c35..8511d17 100644 --- a/src/containers/BarcodeScanner/index.js +++ b/src/containers/BarcodeScanner/index.js @@ -1,10 +1,14 @@ -import React, {useState} from 'react'; +import React, {useState, useEffect} from 'react'; import {IconButton} from "@material-ui/core"; import {CropFree as CropFreeIcon} from '@material-ui/icons' -import Barcode from './Barcode' +import Scanner from './Scanner' +import { useDispatch } from 'react-redux' +import {searchProductByBarcodeAction} from 'pages/Home/actions' const BarcodeScanner = () => { const [isScannerOpen, setIsScannerOpen] = useState(false) + const [barcode, setBarcode] = useState('') + const dispatch = useDispatch() const handleOpen = () => { setIsScannerOpen(true) @@ -13,13 +17,20 @@ const BarcodeScanner = () => { const handleClose = () => { setIsScannerOpen(false) } + + useEffect(() => { + if (barcode) { + dispatch(searchProductByBarcodeAction({ barcode })) + } + }, [barcode]) + return ( {isScannerOpen ? ( - + ) : null} ); diff --git a/src/pages/AddDish/index.js b/src/pages/AddDish/index.js index 629e299..48c2117 100644 --- a/src/pages/AddDish/index.js +++ b/src/pages/AddDish/index.js @@ -1,7 +1,6 @@ import React from 'react'; import {Paper, InputBase, FormLabel, ListItemSecondaryAction, ListItem, ListItemText, List, FormControl, FormGroup, FormControlLabel, Divider, Checkbox, Grid, Typography, FilledInput , DialogContentText, DialogActions, IconButton, Button} from "@material-ui/core"; import { CropFree as CropFreeIcon, Search as SearchIcon } from '@material-ui/icons' -import EditProductDialog from 'components/EditProductDialog' import useStyles from './styles' function generate(element) { diff --git a/src/pages/Home/actions.js b/src/pages/Home/actions.js index 13a69d7..03add5a 100644 --- a/src/pages/Home/actions.js +++ b/src/pages/Home/actions.js @@ -17,6 +17,9 @@ import { SEARCH_PRODUCT_BY_BARCODE_ERROR, SEARCH_PRODUCT_BY_LABEL_SUCCESS, SEARCH_PRODUCT_BY_LABEL_ERROR, + REMOVE_PRODUCT_FROM_MEAL_REQUEST, + REMOVE_PRODUCT_FROM_MEAL_SUCCESS, + REMOVE_PRODUCT_FROM_MEAL_ERROR, SET_SELECTED_MEAL, } from './constants'; @@ -61,9 +64,10 @@ export const getMealsAction = ({ date }) => ({ date, }) -export const getMealsSuccessAction = ({ meals }) => ({ +export const getMealsSuccessAction = ({ meals, dailyCalories }) => ({ type: GET_MEALS_SUCCESS, - meals + meals, + dailyCalories, }) export const getMealsErrorAction = ({ error }) => ({ @@ -92,12 +96,10 @@ export const createMealAction = ({ label, products, date }) => ({ date, }) -export const createMealSuccessAction = ({ id, label, products, date }) => ({ +export const createMealSuccessAction = ({ meal, dailyCalories }) => ({ type: CREATE_MEAL_SUCCESS, - id, - label, - products, - date, + meal, + dailyCalories, }) export const createMealErrorAction = ({error}) => ({ @@ -120,3 +122,19 @@ export const addProductsToMealErrorAction = ({error}) => ({ type: ADD_PRODUCTS_TO_MEAL_ERROR, error, }) + +export const removeProductFromMealAction = ({ mealId, id }) => ({ + type: REMOVE_PRODUCT_FROM_MEAL_REQUEST, + mealId, + id +}) + +export const removeProductFromMealSuccessAction = ({ meal }) => ({ + type: REMOVE_PRODUCT_FROM_MEAL_SUCCESS, + meal, +}) + +export const removeProductFromMealErrorAction = ({error}) => ({ + type: REMOVE_PRODUCT_FROM_MEAL_ERROR, + error, +}) diff --git a/src/pages/Home/constants.js b/src/pages/Home/constants.js index 15389b2..badd9ac 100644 --- a/src/pages/Home/constants.js +++ b/src/pages/Home/constants.js @@ -14,6 +14,10 @@ export const ADD_PRODUCTS_TO_MEAL_REQUEST = 'app/HomePage/ADD_PRODUCTS_TO_MEAL_R export const ADD_PRODUCTS_TO_MEAL_SUCCESS = 'app/HomePage/ADD_PRODUCTS_TO_MEAL_SUCCESS'; export const ADD_PRODUCTS_TO_MEAL_ERROR = 'app/HomePage/ADD_PRODUCTS_TO_MEAL_ERROR'; +export const REMOVE_PRODUCT_FROM_MEAL_REQUEST = 'app/HomePage/REMOVE_PRODUCT_FROM_MEAL_REQUEST' +export const REMOVE_PRODUCT_FROM_MEAL_SUCCESS = 'app/HomePage/REMOVE_PRODUCT_FROM_MEAL_SUCCESS'; +export const REMOVE_PRODUCT_FROM_MEAL_ERROR = 'app/HomePage/REMOVE_PRODUCT_FROM_MEAL_ERROR'; + export const SEARCH_PRODUCT_BY_LABEL_REQUEST = 'app/HomePage/SEARCH_PRODUCT_BY_LABEL_REQUEST' export const SEARCH_PRODUCT_BY_LABEL_SUCCESS = 'app/HomePage/SEARCH_PRODUCT_BY_LABEL_SUCCESS'; export const SEARCH_PRODUCT_BY_LABEL_ERROR = 'app/HomePage/SEARCH_PRODUCT_BY_LABEL_ERROR'; diff --git a/src/pages/Home/reducer.js b/src/pages/Home/reducer.js index 800f187..ecede67 100644 --- a/src/pages/Home/reducer.js +++ b/src/pages/Home/reducer.js @@ -25,37 +25,22 @@ import { const defaultMeals = [ { id: null, - label: 'Breakfast', + label: 'breakfast', products: [], }, { id: null, - label: 'Snack I', + label: 'lunch', products: [], }, { id: null, - label: 'Lunch', + label: 'dinner', products: [], }, { id: null, - label: 'Snack II', - products: [], - }, - { - id: null, - label: 'Dinner', - products: [], - }, - { - id: null, - label: 'Snack III', - products: [], - }, - { - id: null, - label: 'Supper', + label: 'supper', products: [], }, ] @@ -66,6 +51,7 @@ export const initialState = { error: {}, label: '', products: [], + dailyCalories: 0, barcode: '', product: {}, date: '', @@ -93,10 +79,12 @@ const homePageReducer = produce((draft, action) => { break; case GET_MEALS_SUCCESS: - draft.meals = - action.meals.length > 0 - ? action.meals - : defaultMeals; + const labels = action.meals.map(({ label }) => label) + draft.meals = defaultMeals + .filter((candidate) => !labels.includes(candidate.label)) + .concat(action.meals) + .sort(({ label: aLabel}, { label: bLabel }) => aLabel.localeCompare(bLabel)) + draft.dailyCalories = action.dailyCalories; draft.isLoading = false; break; @@ -132,18 +120,21 @@ const homePageReducer = produce((draft, action) => { break; case ADD_PRODUCTS_TO_MEAL_SUCCESS: - console.log(ADD_PRODUCTS_TO_MEAL_SUCCESS, 'ADD_PRODUCTS_TO_MEAL_SUCCESS') - - const restMeals = draft.meals.filter(({ id }) => id === action.meal.id) - - draft.meals = [...restMeals, action.meal] + draft.meals = defaultMeals + .filter((candidate) => !(candidate.label === action.meal.label)) + .concat(action.meal) + .sort( + ({ label: aLabel}, { label: bLabel }) => aLabel.localeCompare(bLabel)) draft.isLoading = false; break; case CREATE_MEAL_SUCCESS: - const { id, label, products, date } = action - - draft.meals.push({ id, label, products, date }); + draft.meals = defaultMeals + .filter((candidate) => !(candidate.label === action.meal.label)) + .concat(action.meal) + .sort( + ({ label: aLabel}, { label: bLabel }) => aLabel.localeCompare(bLabel)) + draft.dailyCalories = action.dailyCalories; draft.isLoading = false; break; diff --git a/src/pages/Home/saga.js b/src/pages/Home/saga.js index a583dd3..9c0ab76 100644 --- a/src/pages/Home/saga.js +++ b/src/pages/Home/saga.js @@ -20,8 +20,8 @@ export function* getMeals() { }; try { - const meals = yield call(request, requestURL, requestParameters); - yield put(getMealsSuccessAction({ meals })); + const {meals, dailyCalories} = yield call(request, requestURL, requestParameters); + yield put(getMealsSuccessAction({ meals, dailyCalories })); } catch (error) { yield put(getMealsErrorAction({ error: error.message })); } @@ -68,8 +68,8 @@ export function* createMeal() { }; try { - const meal = yield call(request, requestURL, requestParameters); - yield put(createMealSuccessAction(meal)); + const {meal, dailyCalories} = yield call(request, requestURL, requestParameters); + yield put(createMealSuccessAction({meal, dailyCalories})); yield put(push(routes.dashboard.path)); } catch (error) { yield put(createMealErrorAction({error: error.message}));