diff --git a/src/components/AddProductForm/AddProductForm.jsx b/src/components/AddProductForm/AddProductForm.jsx index e4de7e0..57d9a37 100644 --- a/src/components/AddProductForm/AddProductForm.jsx +++ b/src/components/AddProductForm/AddProductForm.jsx @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from 'react'; -import { Formik, Form, ErrorMessage } from 'formik'; +import { useState } from 'react'; +import { Formik, Form } from 'formik'; import * as Yup from 'yup'; import { format } from 'date-fns'; import { @@ -15,9 +15,10 @@ import { WeightInput, FieldLabel, WeightInputLabel, + ErrorMessageStyled, // WeightInputLabel, } from './AddProductForm.styled'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { postDiaryMealsThunk } from '../../redux/meals/mealsOperations'; import { ToastContainer } from 'react-toastify'; @@ -46,14 +47,17 @@ const AddProductForm = ({ id, title, calories, onClick, onClickSuccess }) => { product_id: id, date: format(new Date(), 'yyyy-MM-dd'), weight: '', - calories: 0, + // calories: 0, }; const schema = Yup.object().shape({ - product_id: Yup.string().required(), - date: Yup.string().required(), - weight: Yup.number().required().positive(), - calories: Yup.number().required(), + // product_id: Yup.string().required(), + // date: Yup.string().required(), + weight: Yup.number() + .max(700, 'Weight should be no more than 700 grams') + .required() + .positive(), + // calories: Yup.number().required(), }); const calculateCalories = (amount) => { @@ -106,9 +110,9 @@ const AddProductForm = ({ id, title, calories, onClick, onClickSuccess }) => {
- + handleWeightChange(e, setFieldValue)} onKeyPress={(e) => { @@ -120,7 +124,7 @@ const AddProductForm = ({ id, title, calories, onClick, onClickSuccess }) => { value={values.weight} /> grams - +
diff --git a/src/components/AddProductForm/AddProductForm.styled.js b/src/components/AddProductForm/AddProductForm.styled.js index f5e3dd0..bb8e89d 100644 --- a/src/components/AddProductForm/AddProductForm.styled.js +++ b/src/components/AddProductForm/AddProductForm.styled.js @@ -1,5 +1,6 @@ import { Field } from 'formik'; import styled from 'styled-components'; +import { ErrorMessage } from 'formik'; export const Container = styled.div` padding: 38px 22px; @@ -137,3 +138,10 @@ export const PFOutlinedBtn = styled(PFButton)` width: 142px; } `; + +export const ErrorMessageStyled = styled(ErrorMessage)` +color: var(--color-wrong-one); +margin-top: 4px; +line-height: 1.5; +letter-spacing: 0.12px; +` \ No newline at end of file