From d06880883aa2c19bdd61ae747e2b37ece53b9886 Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Tue, 26 Sep 2023 18:09:38 +0300 Subject: [PATCH 1/5] fix submit --- src/pages/Profile/Profile.jsx | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/pages/Profile/Profile.jsx b/src/pages/Profile/Profile.jsx index 29f09c00..2f0935e4 100644 --- a/src/pages/Profile/Profile.jsx +++ b/src/pages/Profile/Profile.jsx @@ -4,24 +4,47 @@ import UserCard from "../../components/UserCard"; import UserForm from "../../components/UserForm"; import { BlockWrapper, FormWrap, Container } from "./Profile.styled"; import { useDispatch } from "react-redux"; +import { useSelector } from "react-redux"; +import { selectUser } from "../../redux/auth/selectors"; 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 dispatch = useDispatch() + const { + name, + bodyParameters: { + height, + currentWeight, + desiredWeight, + birthday, + blood, + sex, + levelActivity, + } + } = useSelector(selectUser); const handleSubmit = (data) => { + if (data.name == name + && data.height == height + && data.currentWeight == currentWeight + && data.desiredWeight == desiredWeight + && data.birthday == birthday + && data.blood == blood + && data.sex == sex + && data.levelActivity == levelActivity + && !avatarFile) { + return + } + 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 ( From c34e0edba51f13d01714c73f5dc3f843bbaad050 Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Tue, 26 Sep 2023 23:57:17 +0300 Subject: [PATCH 2/5] fix button, input and space --- src/components/UserForm/UserForm.jsx | 9 ++++-- src/components/UserForm/UserForm.styled.jsx | 18 +++++++----- src/components/UserForm/validationSchema.js | 6 ++-- src/pages/Profile/Profile.jsx | 32 ++------------------- src/utils/index.js | 1 + src/utils/isTheSameForm.js | 9 ++++++ 6 files changed, 34 insertions(+), 41 deletions(-) create mode 100644 src/utils/isTheSameForm.js diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx index 81c60503..da4fd607 100644 --- 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,8 @@ export default function UserForm({submit}) { onSubmit: submit, }); + let disBtn = useMemo(() => isTheSameForm(initialValues, formik.values) && !avatar, [formik.values, avatar]); + return (
@@ -292,11 +296,12 @@ export default function UserForm({submit}) { } - + ); } 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 index 4bc61508..96002020 100644 --- 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}; @@ -69,8 +69,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 +115,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 index f0d79a2f..3ae273cf 100644 --- 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 index 2f0935e4..4e00282d 100644 --- a/src/pages/Profile/Profile.jsx +++ b/src/pages/Profile/Profile.jsx @@ -4,39 +4,13 @@ import UserCard from "../../components/UserCard"; import UserForm from "../../components/UserForm"; import { BlockWrapper, FormWrap, Container } from "./Profile.styled"; import { useDispatch } from "react-redux"; -import { useSelector } from "react-redux"; -import { selectUser } from "../../redux/auth/selectors"; import { updateUserData } from "../../redux/auth/operation"; export default function Profile() { - const [avatarFile, setAvatarFile] = useState(); + const [avatarFile, setAvatarFile] = useState(null); const dispatch = useDispatch() - const { - name, - bodyParameters: { - height, - currentWeight, - desiredWeight, - birthday, - blood, - sex, - levelActivity, - } - } = useSelector(selectUser); - - const handleSubmit = (data) => { - if (data.name == name - && data.height == height - && data.currentWeight == currentWeight - && data.desiredWeight == desiredWeight - && data.birthday == birthday - && data.blood == blood - && data.sex == sex - && data.levelActivity == levelActivity - && !avatarFile) { - return - } + const handleSubmit = (data) => { const formData = new FormData(); Object.entries(data).forEach(value => { formData.append(value[0], value[1]) @@ -55,7 +29,7 @@ export default function Profile() { - + diff --git a/src/utils/index.js b/src/utils/index.js index 147719b1..39b6aaae 100644 --- 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 new file mode 100644 index 00000000..19c2a358 --- /dev/null +++ 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; +} From 588c895bde4ae5bdd815a9cd373c5d6f2fe50507 Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Wed, 27 Sep 2023 16:29:27 +0300 Subject: [PATCH 3/5] added green border --- src/components/UserForm/UserForm.jsx | 9 ++++++++- src/components/UserForm/UserForm.styled.jsx | 4 ++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx index da4fd607..418abd49 100644 --- a/src/components/UserForm/UserForm.jsx +++ b/src/components/UserForm/UserForm.jsx @@ -61,7 +61,6 @@ export default function UserForm({submit, avatar}) { }); let disBtn = useMemo(() => isTheSameForm(initialValues, formik.values) && !avatar, [formik.values, avatar]); - return (
@@ -72,7 +71,9 @@ export default function UserForm({submit, avatar}) { 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 && @@ -101,7 +102,9 @@ export default function UserForm({submit, avatar}) { 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 && @@ -118,7 +121,9 @@ export default function UserForm({submit, avatar}) { 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 && @@ -137,7 +142,9 @@ export default function UserForm({submit, avatar}) { 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 && diff --git a/src/components/UserForm/UserForm.styled.jsx b/src/components/UserForm/UserForm.styled.jsx index 96002020..cc6bd6c9 100644 --- a/src/components/UserForm/UserForm.styled.jsx +++ b/src/components/UserForm/UserForm.styled.jsx @@ -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; From d461ff8061e28c8cfd04689d302cd24de487fb06 Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Wed, 27 Sep 2023 18:45:57 +0300 Subject: [PATCH 4/5] qq --- src/components/AuthForm/AuthForm.jsx | 12 ++++++++++-- src/components/AuthForm/AuthForm.styled.jsx | 4 ++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/AuthForm/AuthForm.jsx b/src/components/AuthForm/AuthForm.jsx index 162a45d1..0a833e7c 100644 --- 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} > - + {({ handleBlur, touched, errors }) => ( + + + ({console.log(errors)}) {nameIsShown && ( - + {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} /> @@ -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} /> + )} ); } diff --git a/src/components/AuthForm/AuthForm.styled.jsx b/src/components/AuthForm/AuthForm.styled.jsx index 57941a21..559a09b4 100644 --- a/src/components/AuthForm/AuthForm.styled.jsx +++ b/src/components/AuthForm/AuthForm.styled.jsx @@ -51,6 +51,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` From 83ef6b8952e33983160fd59477d4315708e78493 Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Wed, 27 Sep 2023 19:05:16 +0300 Subject: [PATCH 5/5] fixed other forms --- src/components/ParamsForm/ParamsForm.jsx | 8 +++++++- src/components/ParamsForm/ParamsForm.styled.jsx | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 35bcad3c..c3447cde 100644 --- 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 ( { name="height" placeholder="Height" autoComplete="off" + onBlur={handleBlur} + data-touch={touched.height && !errors.height} /> {errors.height && touched.height && ( @@ -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 && ( @@ -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 && ( diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 1d938826..8956665b 100644 --- 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}; }