Merge pull request #92 from MargoMarm/profilePage

fix submit
MargoMarm · Sep 27, 2023 · 4c29e87 · 4c29e87
2 parents 89e0e6f + 661b6e0
commit 4c29e87
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 23 deletions.
diff --git a/src/components/AuthForm/AuthForm.jsx b/src/components/AuthForm/AuthForm.jsx
@@ -68,11 +68,14 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
       onSubmit={onSubmit}
       validationSchema={authSchema}
     >
-      <FormContainer>
+      {({ handleBlur, touched, errors }) => (
+
+        <FormContainer>
+          ({console.log(errors)})
         <InputContainer>
           {nameIsShown && (
             <InputWrapper>
-              <TextInput id="name" type="text" placeholder="Name" name="name" />
+              <TextInput id="name" type="text" placeholder="name" name="name" onBlur={handleBlur} data-touch={touched.name && !errors.name} />
               <Warning>
                 <ErrorMessage name="name">
                   {msg => (
@@ -93,6 +96,8 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
               type="email"
               placeholder="Email"
               name="email"
+              onBlur={handleBlur} 
+              data-touch={touched.email && !errors.email}
             />
             <Warning>
               <ErrorMessage name="email">
@@ -113,6 +118,8 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
               type={typePasswordInput}
               placeholder="Password"
               name="password"
+              onBlur={handleBlur} 
+              data-touch={touched.password && !errors.password}
             />
             <ButtonIconForInput
               type="button"
@@ -144,6 +151,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
         </InputContainer>
         <BtnSubmit title={btnTitle} fontSize="20px" />
       </FormContainer>
+      )}
     </Formik>
   );
 }

diff --git a/src/components/AuthForm/AuthForm.styled.jsx b/src/components/AuthForm/AuthForm.styled.jsx
@@ -57,6 +57,10 @@ export const TextInput = styled(Field)`
   &:focus-visible {
     border: 1px solid ${colors.orange};
   }
+
+  &[data-touch=true]{
+    border-color: ${colors.textSuccess};
+  }
 `;
 
 export const Warning = styled.div`

diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx
@@ -68,7 +68,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
         Formik.resetForm();
       }}
     >
-      {({ handleChange, values, setFieldValue, errors, touched }) => {
+      {({ handleChange, values, setFieldValue, errors, touched, handleBlur }) => {
         return (
           <Form>
             <Swiper
@@ -92,6 +92,8 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
                       name="height"
                       placeholder="Height"
                       autoComplete="off"
+                      onBlur={handleBlur}
+                      data-touch={touched.height && !errors.height}
                     />
                     {errors.height && touched.height && (
                       <ErrorMessage padding={true}>
@@ -106,6 +108,8 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
                       name="currentWeight"
                       placeholder="Current Weight"
                       autoComplete="off"
+                      onBlur={handleBlur}
+                      data-touch={touched.currentWeight && !errors.currentWeight}
                     />
                     {errors.currentWeight && touched.currentWeight && (
                       <ErrorMessage padding={true}>
@@ -120,6 +124,8 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
                       name="desiredWeight"
                       placeholder="Desired Weight"
                       autoComplete="off"
+                      onBlur={handleBlur}
+                      data-touch={touched.desiredWeight && !errors.desiredWeight}
                     />
                     {errors.desiredWeight && touched.desiredWeight && (
                       <ErrorMessage padding={true}>

diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx
@@ -41,6 +41,10 @@ export const FormikField = styled(Field)`
 
   transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 
+  &[data-touch=true]{
+    border-color: ${colors.textSuccess};
+  }
+
   &::placeholder {
     color: ${colors.textWhite06};
   }

diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx
@@ -20,12 +20,14 @@ import { selectUser } from "../../redux/auth/selectors";
 import { useFormik } from "formik";
 import { sub } from 'date-fns';
 import validationSchema from "./validationSchema";
+import {isTheSameForm} from "../../utils"
+import { useMemo } from "react";
 
 
 const maxDate = sub(new Date(), { years: 18 });
 const minDate = sub(new Date(), { years: 70 });
 
-export default function UserForm({submit}) {
+export default function UserForm({submit, avatar}) {
   const {
     name,
     email,
@@ -58,6 +60,7 @@ export default function UserForm({submit}) {
     onSubmit: submit,
   });
 
+  let disBtn = useMemo(() => isTheSameForm(initialValues, formik.values) && !avatar, [formik.values, avatar]);
   return (
     <Form onSubmit={formik.handleSubmit} autoComplete="off">
       <InputGroup>
@@ -68,7 +71,9 @@ export default function UserForm({submit}) {
             name="name"
             value={formik.values.name}
             onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
             aria-invalid={formik.errors.name}
+            data-touch={formik.touched.name && !formik.errors.name}
           />
 
            { formik.errors.name &&
@@ -97,7 +102,9 @@ export default function UserForm({submit}) {
               name="height"
               value={formik.values.height}
               onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
               aria-invalid={formik.errors.height}
+              data-touch={formik.touched.height && !formik.errors.height}
             />
 
             { formik.errors.height &&
@@ -114,7 +121,9 @@ export default function UserForm({submit}) {
               name="currentWeight"
               value={formik.values.currentWeight}
               onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
               aria-invalid={formik.errors.currentWeight}
+              data-touch={formik.touched.currentWeight && !formik.errors.currentWeight}
             />
 
              { formik.errors.currentWeight &&
@@ -133,7 +142,9 @@ export default function UserForm({submit}) {
               name="desiredWeight"
               value={formik.values.desiredWeight}
               onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
               aria-invalid={formik.errors.desiredWeight}
+              data-touch={formik.touched.desiredWeight && !formik.errors.desiredWeight}
             />
 
              { formik.errors.desiredWeight &&
@@ -292,11 +303,12 @@ export default function UserForm({submit}) {
         }
       </CheckboxList>
 
-      <Button type="submit">Save</Button>
+      <Button type="submit" disabled={disBtn}>Save</Button>
     </Form>
   );
 }
 
 UserForm.propTypes = {
   submit: PropTypes.func.isRequired,
+  avatar: PropTypes.oneOfType([PropTypes.object, PropTypes.instanceOf(null)]),
 }
diff --git a/src/components/UserForm/UserForm.styled.jsx b/src/components/UserForm/UserForm.styled.jsx
@@ -34,7 +34,7 @@ export const Label = styled.label`
   display: block;
   max-width: 345px;
   width: 100%;
-  margin-bottom: 14px;
+  margin-bottom: 21px;
   font-size: 12px;
   line-height: 1.5;
   color: ${colors.textWhite05};
@@ -60,6 +60,10 @@ export const Input = styled.input`
   border-radius: 12px;
   transition: border-color 0.3s;
 
+  &[data-touch] {
+    border-color: ${colors.textSuccess};
+  }
+
   &[aria-invalid] {
     border-color: ${colors.textError}!important;
     color: ${colors.textError}!important;
@@ -69,8 +73,8 @@ export const Input = styled.input`
     color: ${colors.textWhite06};
   }
 
-  &:hover,
-  &:focus {
+  &:hover:not([disabled]),
+  &:focus:not([disabled]){
     border-color: ${colors.orange};
     outline: none;
   }
@@ -115,16 +119,20 @@ export const Button = styled.button`
 
   min-width: 115px;
   padding: 12px;
-  color: ${colors.textWhite06};
+  color: ${colors.white};
   background-color: ${colors.orange};
   border-radius: 12px;
   transition:
     color 0.3s,
     background-color 0.3s;
 
-  &:hover,
-  &:focus {
-    color: ${colors.textWhite08};
+  &:hover:not([disabled]),
+  &:focus:not([disabled]) {
     background-color: ${colors.orangeSecondary};
   }
+
+  &:disabled {
+    color: ${colors.textWhite06};
+    cursor: default;
+  }
 `;
diff --git a/src/components/UserForm/validationSchema.js b/src/components/UserForm/validationSchema.js
@@ -2,9 +2,9 @@ import * as yup from 'yup';
 
 export default yup.object({
   name: yup.string().required(),
-  height: yup.number().min(150).required(),
-  currentWeight: yup.number().min(35).required(),
-  desiredWeight: yup.number().min(35).required(),
+  height: yup.number().min(150).max(250).required(),
+  currentWeight: yup.number().min(35).max(200).required(),
+  desiredWeight: yup.number().min(35).max(200).required(),
   birthday: yup.date().required(),
   blood: yup.string().oneOf(['1', '2', '3', '4']).required(),
   sex: yup.string().oneOf(['male', 'female']).required(),

diff --git a/src/pages/Profile/Profile.jsx b/src/pages/Profile/Profile.jsx
@@ -6,22 +6,19 @@ import { BlockWrapper, FormWrap, Container } from "./Profile.styled";
 import { useDispatch } from "react-redux";
 import { updateUserData } from "../../redux/auth/operation";
 
-const mgUserPage = {
-  top: { tab: 72, mob: 40 },
-  bt: { desk: 32, tab: 64, mob: 40 },
-};
 export default function Profile() {
-  const [avatarFile, setAvatarFile] = useState();
+  const [avatarFile, setAvatarFile] = useState(null);
   const dispatch = useDispatch()
-  
+
   const handleSubmit = (data) => {
     const formData = new FormData();
     Object.entries(data).forEach(value => {
       formData.append(value[0], value[1])
     });
-    avatarFile && formData.append('avatar', avatarFile, avatarFile.name)
+    avatarFile && formData.append('avatar', avatarFile, avatarFile.name);
 
     dispatch(updateUserData(formData));
+    setAvatarFile(null);
   }
 
   return (
@@ -32,7 +29,7 @@ export default function Profile() {
         <UserCard setAvatar={setAvatarFile} />
 
         <FormWrap>
-          <UserForm submit={handleSubmit} />
+          <UserForm submit={handleSubmit} avatar={avatarFile}/>
         </FormWrap>
       </BlockWrapper>
     </Container>

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -5,3 +5,4 @@ export { default as svgUser } from './svgUser';
 export { default as pageContentToRender } from './pageContentToRender';
 export { default as mg } from './titleMargins';
 export { default as handleLogout } from './handleLogout';
+export { default as isTheSameForm } from './isTheSameForm';
diff --git a/src/utils/isTheSameForm.js b/src/utils/isTheSameForm.js
@@ -0,0 +1,9 @@
+export default function isTheSameForm(iv, fv) {
+  const arr = Object.keys(iv);
+  let bool = true;
+  arr.forEach(item => {
+    if (iv[item] != fv[item]) bool = false;
+  });
+
+  return bool;
+}