Merge pull request #134 from VasylievYurii/validateProfile

validate
VasylievYurii · Nov 19, 2023 · ce4117a · ce4117a
2 parents 345f911 + 1259008
commit ce4117a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/src/components/UserForm/InputUseForm/InputUseForm.jsx b/src/components/UserForm/InputUseForm/InputUseForm.jsx
@@ -8,8 +8,9 @@ import {
   WhInput,
 } from './InputUseForm.styled';
 import BirthdayCalendar from '../../BirthdayCalendar/BirthdayCalendar';
+import { ErrorMess } from '../UserForm.styled';
 
-const InputUseForm = ({ onDateChange }) => {
+const InputUseForm = ({ onDateChange, errors, touched }) => {
   return (
     <ContantUseForm>
       <TextInfo>Basic info</TextInfo>
@@ -19,6 +20,9 @@ const InputUseForm = ({ onDateChange }) => {
         </label>
         <label>
           <LoginEmailInput type="email" name="email" />
+          {errors.email && touched.email && (
+            <ErrorMess>{errors.email}</ErrorMess>
+          )}
         </label>
       </LoginEmail>
 
@@ -28,20 +32,29 @@ const InputUseForm = ({ onDateChange }) => {
             <TextInfo>Height</TextInfo>
             <label>
               <WhInput name="height" />
+              {errors.height && touched.height && (
+                <ErrorMess>{errors.height}</ErrorMess>
+              )}
             </label>
           </div>
 
           <div>
             <TextInfo>Current Weight</TextInfo>
             <label>
               <WhInput type="text" name="currentWeight" />
+              {errors.currentWeight && touched.currentWeight && (
+                <ErrorMess>{errors.currentWeight}</ErrorMess>
+              )}
             </label>
           </div>
         </HeighWeight>
         <HeighWeight>
           <label>
             <TextInfo>Desired Weight</TextInfo>
             <WhInput type="text" name="desiredWeight" />
+            {errors.desiredWeight && touched.desiredWeight && (
+              <ErrorMess>{errors.desiredWeight}</ErrorMess>
+            )}
           </label>
           <label>
             <TextInfo>Date of birth</TextInfo>

diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx
@@ -9,7 +9,7 @@ import {
 import userSchema from '../../schema/userProfileSchema';
 import RadioUseForm from './RadioUseForm/RadioUseForm';
 import InputUseForm from './InputUseForm/InputUseForm';
-import { ErrorMess, SubmitBtn } from './UserForm.styled';
+import { SubmitBtn } from './UserForm.styled';
 import format from 'date-fns/format';
 import BirthdayCalendar from '../BirthdayCalendar/BirthdayCalendar';
 
@@ -74,19 +74,11 @@ const UserForm = () => {
     >
       {({ errors, touched }) => (
         <Form autoComplete="off">
-          {errors.email && touched.email && (
-            <ErrorMess>{errors.email}</ErrorMess>
-          )}
-          {errors.height && touched.height && (
-            <ErrorMess>{errors.height}</ErrorMess>
-          )}
-          {errors.currentWeight && touched.currentWeight && (
-            <ErrorMess>{errors.currentWeight}</ErrorMess>
-          )}
-          {errors.desiredWeight && touched.desiredWeight && (
-            <ErrorMess>{errors.desiredWeight}</ErrorMess>
-          )}
-          <InputUseForm onDateChange={onDateChange} />
+          <InputUseForm
+            onDateChange={onDateChange}
+            errors={errors}
+            touched={touched}
+          />
           <RadioUseForm />
           <SubmitBtn type="submit">Save</SubmitBtn>
         </Form>

diff --git a/src/components/UserForm/UserForm.styled.js b/src/components/UserForm/UserForm.styled.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export const ErrorMess = styled.div`
   font-size: 10px;
   color: #e6533c;
+  margin-top: 4px;
 `;
 
 export const SubmitBtn = styled.button`