Merge pull request #140 from VasylievYurii/Fix/styles-product-modal

Fix validation style
VasylievYurii · Nov 20, 2023 · 8e9ddd8 · 8e9ddd8
2 parents 6d33482 + e5c70c4
commit 8e9ddd8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/src/components/AddProductForm/AddProductForm.jsx b/src/components/AddProductForm/AddProductForm.jsx
@@ -54,9 +54,9 @@ const AddProductForm = ({ id, title, calories, onClick, onClickSuccess }) => {
     // product_id: Yup.string().required(),
     // date: Yup.string().required(),
     weight: Yup.number()
-      .max(700, 'Weight should be no more than 700 grams')
-      .required()
-      .positive(),
+      .max(700, 'Weight should not exceed 700 grams')
+      .required('Weight is required')
+      .positive('Weight must be above zero'),
     // calories: Yup.number().required(),
   });
 
@@ -94,7 +94,7 @@ const AddProductForm = ({ id, title, calories, onClick, onClickSuccess }) => {
         validationSchema={schema}
         onSubmit={handleSubmit}
       >
-        {({ values, setFieldValue }) => (
+        {({ values, errors, touched, setFieldValue }) => (
           <Form autoComplete="off">
             <Container>
               <InputsContainer>
@@ -122,10 +122,13 @@ const AddProductForm = ({ id, title, calories, onClick, onClickSuccess }) => {
                         }
                       }}
                       value={values.weight}
+                      border={
+                        errors.weight && touched.weight && '1px solid #D80027'
+                      }
                     />
                     <FieldLabel>grams</FieldLabel>
-                    <ErrorMessageStyled name="weight" component="p" />
                   </WeightInputLabel>
+                  <ErrorMessageStyled name="weight" component="p" />
                 </div>
               </InputsContainer>
 

diff --git a/src/components/AddProductForm/AddProductForm.styled.js b/src/components/AddProductForm/AddProductForm.styled.js
@@ -61,18 +61,23 @@ export const WeightInputLabel = styled.label`
 `;
 
 export const WeightInput = styled(InputEl)`
+border: ${props => props.border || '1px solid var(--color-main-one)'};
   @media screen and (min-width: 768px) {
     width: 155px;
   }
 `;
 
+
+
 export const FieldLabel = styled.span`
   position: absolute;
   top: 50%;
   right: 14px;
   color: rgba(239, 237, 232, 0.4);
   transform: translate(0, -50%);
   /* color:; */
+  display: flex;
+  align-items: center;
 `;
 
 export const Calories = styled.p`
@@ -144,4 +149,9 @@ color: var(--color-wrong-one);
 margin-top: 4px;
 line-height: 1.5;
 letter-spacing: 0.12px;
-`
+@media screen and (min-width: 768px) {
+width: 155px;
+}
+
+`
+
diff --git a/src/redux/meals/mealsSlice.js b/src/redux/meals/mealsSlice.js
@@ -5,19 +5,19 @@ const mealInitialState = {
     isLoading: false,
     error: null,
     meals: [],
-    isMealAdd: false,
+    isMealAdd: null,
 };
 
 const onPending = (state) => {
     state.isLoading = true;
     state.error = null;
-    state.isMealAdd = false;
+    // state.isMealAdd = false;
 };
 
 const onRejected = (state, { payload }) => {
     state.isLoading = false;
     state.error = payload;
-    state.isMealAdd = null;
+    // state.isMealAdd = false;
 };
 
 const arrOfActs = [getDiaryMealsThunk, delDiaryMealsThunk, postDiaryMealsThunk];