From bb674e74416ddac14391c71368e1a4e4023ed94d Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Fri, 12 Jul 2024 19:01:39 +0200 Subject: [PATCH 1/4] disable submit button when there are no changes --- .../ProfilePage/ProfilePageComponents/ProfileContent.jsx | 2 +- .../ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx index 4e5f6631a..3fb2f9bb2 100644 --- a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx +++ b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx @@ -208,7 +208,7 @@ const ProfileContent = (props) => { - {props.formName !== 'Delete' && } + {props.formName !== 'Delete' && } {blocker.state === 'blocked' && ( diff --git a/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx b/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx index 30e63955a..ad01bd8fd 100644 --- a/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx +++ b/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx @@ -1,12 +1,14 @@ import css from './ProfileFormButton.module.css'; const ProfileFormButton = (props) => { + console.log('PROPS', props.formState); return (
From 84246bb1fdb9c5ef7b290623ff2f6a0bf0c51837 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Fri, 12 Jul 2024 19:03:37 +0200 Subject: [PATCH 2/4] define changes in fields function --- FrontEnd/src/utils/defineChanges.js | 43 +++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 FrontEnd/src/utils/defineChanges.js diff --git a/FrontEnd/src/utils/defineChanges.js b/FrontEnd/src/utils/defineChanges.js new file mode 100644 index 000000000..eff05e5ee --- /dev/null +++ b/FrontEnd/src/utils/defineChanges.js @@ -0,0 +1,43 @@ +const compareValues = (defaultValue, currentValue, type) => { + if (type === 'array') { + return JSON.stringify(defaultValue) === JSON.stringify(currentValue); + } else if (type === 'image') { + return defaultValue?.uuid === currentValue?.uuid; + } else if (type === 'phone') { + return defaultValue === currentValue.replace(/[^\d]/g, ''); + } else { + return defaultValue === currentValue; + } +}; + + +const defineChanges = (fields, profile, user) => { + const userChanges = {}; + const profileChanges = {}; + + Object.keys(fields).forEach(field => { + const { defaultValue, type, context } = fields[field]; + const currentValue = context === 'user' ? user?.[field] : profile?.[field]; + + if (context === 'user') { + if (!compareValues(defaultValue, currentValue, type)) { + userChanges[field] = currentValue; + } + } else { + if (!compareValues(defaultValue, currentValue, type)) { + if (type === 'image') { + profileChanges[field] = currentValue.uuid; + } else if (['regions', 'activities', 'categories'].includes(field)) { + profileChanges[field] = currentValue.map((obj) => obj.id); + } else if (field === 'phone') { + profileChanges[field] = currentValue.replace(/[^\d]/g, ''); + } else { + profileChanges[field] = currentValue; + } + }} + }); + + return { userChanges, profileChanges }; +}; + +export default defineChanges; \ No newline at end of file From 5c9501da3a61179a67c07ac9b5d7b3755feca2cd Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Fri, 12 Jul 2024 19:08:14 +0200 Subject: [PATCH 3/4] form components updated --- .../FormComponents/AdditionalInfo.jsx | 6 +++--- .../ProfilePage/FormComponents/ContactsInfo.jsx | 15 ++++----------- .../ProfilePage/FormComponents/GeneralInfo.jsx | 17 +++-------------- .../FormComponents/ProductServiceInfo.jsx | 9 +++------ .../ProfilePage/FormComponents/StartupInfo.jsx | 8 +++----- .../ProfilePage/FormComponents/UserInfo.jsx | 12 +++++------- 6 files changed, 21 insertions(+), 46 deletions(-) diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/AdditionalInfo.jsx b/FrontEnd/src/components/ProfilePage/FormComponents/AdditionalInfo.jsx index d0eb13f61..1cf340e46 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/AdditionalInfo.jsx +++ b/FrontEnd/src/components/ProfilePage/FormComponents/AdditionalInfo.jsx @@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'; import { useContext } from 'react'; import { DirtyFormContext } from '../../../context/DirtyFormContext'; import checkFormIsDirty from '../../../utils/checkFormIsDirty'; +import defineChanges from '../../../utils/defineChanges'; import { useAuth, useProfile } from '../../../hooks'; import HalfFormField from './FormFields/HalfFormField'; import Loader from '../../loader/Loader'; @@ -67,12 +68,11 @@ const AdditionalInfo = (props) => { 'Зміни не можуть бути збережені, перевірте правильність заповнення полів' ); } else { + const data = defineChanges(fields, profile, null); try { const response = await axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, - { - founded: profile.founded, - } + data.profileChanges ); const updatedProfileData = response.data; profileMutate(updatedProfileData); diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/ContactsInfo.jsx b/FrontEnd/src/components/ProfilePage/FormComponents/ContactsInfo.jsx index 7a37c41f7..94b6ecbaa 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/ContactsInfo.jsx +++ b/FrontEnd/src/components/ProfilePage/FormComponents/ContactsInfo.jsx @@ -5,6 +5,7 @@ import { useContext } from 'react'; import { DirtyFormContext } from '../../../context/DirtyFormContext'; import { useAuth, useProfile } from '../../../hooks'; import checkFormIsDirty from '../../../utils/checkFormIsDirty'; +import defineChanges from '../../../utils/defineChanges'; import FullField from './FormFields/FullField'; import HalfFormField from './FormFields/HalfFormField'; import Loader from '../../loader/Loader'; @@ -24,11 +25,6 @@ const formatPhoneNumber = (phoneNumber) => { return phoneNumber; }; - -const cleanPhoneNumber = (phoneNumber) => { - return phoneNumber.replace(/[^\d]/g, ''); -}; - const ContactsInfo = (props) => { const { user } = useAuth(); const { profile: mainProfile, mutate: profileMutate } = useProfile(); @@ -37,7 +33,7 @@ const ContactsInfo = (props) => { const { setFormIsDirty } = useContext(DirtyFormContext); const fields = { - phone: { defaultValue: mainProfile?.phone ?? null }, + phone: { defaultValue: mainProfile?.phone ?? null, type: 'phone'}, address: { defaultValue: mainProfile?.address ?? null }, }; @@ -100,14 +96,11 @@ const ContactsInfo = (props) => { 'Зміни не можуть бути збережені, перевірте правильність заповнення полів' ); } else { + const data = defineChanges(fields, profile, null); try { - const phone = cleanPhoneNumber(profile.phone); const response = await axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, - { - phone, - address: profile.address, - } + data.profileChanges ); const updatedProfileData = response.data; profileMutate(updatedProfileData); diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.jsx b/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.jsx index d31ae4df5..ad1b59387 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.jsx +++ b/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.jsx @@ -6,6 +6,7 @@ import { toast } from 'react-toastify'; import useSWR from 'swr'; import { useAuth, useProfile } from '../../../hooks'; import checkFormIsDirty from '../../../utils/checkFormIsDirty'; +import defineChanges from '../../../utils/defineChanges'; import css from './FormComponents.module.css'; import { DirtyFormContext } from '../../../context/DirtyFormContext'; @@ -390,23 +391,11 @@ const GeneralInfo = (props) => { 'Зміни не можуть бути збережені, перевірте правильність заповнення полів' ); } else { + const data = defineChanges(fields, profile, null); try { const response = await axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, - { - name: profile.name, - official_name: profile.official_name, - edrpou: profile.edrpou, - rnokpp: profile.rnokpp, - banner: profile.banner?.uuid, - logo: profile.logo?.uuid, - regions: profile.regions.map((obj) => obj.id), - common_info: profile.common_info, - is_startup: profile.is_startup, - is_registered: profile.is_registered, - activities: profile.activities.map((obj) => obj.id), - categories: profile.categories.map((obj) => obj.id), - } + data.profileChanges ); profileMutate(response.data); toast.success('Зміни успішно збережено'); diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/ProductServiceInfo.jsx b/FrontEnd/src/components/ProfilePage/FormComponents/ProductServiceInfo.jsx index a1d7324a4..edd42f171 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/ProductServiceInfo.jsx +++ b/FrontEnd/src/components/ProfilePage/FormComponents/ProductServiceInfo.jsx @@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'; import { useContext } from 'react'; import { DirtyFormContext } from '../../../context/DirtyFormContext'; import checkFormIsDirty from '../../../utils/checkFormIsDirty'; +import defineChanges from '../../../utils/defineChanges'; import { useAuth, useProfile } from '../../../hooks'; import TextField from './FormFields/TextField'; import Loader from '../../loader/Loader'; @@ -22,8 +23,6 @@ const ProductServiceInfo = (props) => { const [profile, setProfile] = useState(props.profile); const { setFormIsDirty } = useContext(DirtyFormContext); - // TODO: update default values as new fields added - const fields = { product_info: { defaultValue: mainProfile?.product_info ?? null }, service_info: { defaultValue: mainProfile?.service_info ?? null }, @@ -48,12 +47,10 @@ const ProductServiceInfo = (props) => { const handleSubmit = async (event) => { event.preventDefault(); try { + const data = defineChanges(fields, profile, null); const response = await axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, - { - product_info: profile.product_info, - service_info: profile.service_info, - } + data.profileChanges ); const updatedProfileData = response.data; profileMutate(updatedProfileData); diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/StartupInfo.jsx b/FrontEnd/src/components/ProfilePage/FormComponents/StartupInfo.jsx index efb1038f0..1a63e897e 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/StartupInfo.jsx +++ b/FrontEnd/src/components/ProfilePage/FormComponents/StartupInfo.jsx @@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'; import { useContext } from 'react'; import { DirtyFormContext } from '../../../context/DirtyFormContext'; import checkFormIsDirty from '../../../utils/checkFormIsDirty'; +import defineChanges from '../../../utils/defineChanges'; import { useAuth, useProfile } from '../../../hooks'; import TextField from './FormFields/TextField'; import Loader from '../../loader/Loader'; @@ -21,8 +22,6 @@ const StartupInfo = (props) => { const [profile, setProfile] = useState(props.profile); const { setFormIsDirty } = useContext(DirtyFormContext); - // TODO: update default values as new fields added - const fields = { startup_idea: { defaultValue: mainProfile?.startup_idea ?? null }, }; @@ -46,11 +45,10 @@ const StartupInfo = (props) => { const handleSubmit = async (event) => { event.preventDefault(); try { + const data = defineChanges(fields, profile, null); const response = await axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, - { - startup_idea: profile.startup_idea, - } + data.profileChanges ); const updatedProfileData = response.data; profileMutate(updatedProfileData); diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/UserInfo.jsx b/FrontEnd/src/components/ProfilePage/FormComponents/UserInfo.jsx index b77db7059..733780a4c 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/UserInfo.jsx +++ b/FrontEnd/src/components/ProfilePage/FormComponents/UserInfo.jsx @@ -5,6 +5,7 @@ import { useContext } from 'react'; import { DirtyFormContext } from '../../../context/DirtyFormContext'; import { useAuth, useProfile } from '../../../hooks'; import checkFormIsDirty from '../../../utils/checkFormIsDirty'; +import defineChanges from '../../../utils/defineChanges'; import HalfFormField from './FormFields/HalfFormField'; import Loader from '../../loader/Loader'; import css from './FormComponents.module.css'; @@ -156,20 +157,17 @@ const UserInfo = (props) => { 'Зміни не можуть бути збережені, перевірте правильність заповнення полів' ); } else { + const userData = defineChanges(fields, null, updateUser); + const profileData = defineChanges(fields, updateProfile, null); axios .all([ axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/auth/users/me/`, - { - surname: updateUser.surname, - name: updateUser.name, - } + userData.userChanges ), axios.patch( `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, - { - person_position: updateProfile.person_position, - } + profileData.profileChanges ), ]) .then( From 37dbe1c0d6937dbca64878f537de844770484bec Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Sat, 13 Jul 2024 12:35:31 +0200 Subject: [PATCH 4/4] console log removed --- .../ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx b/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx index ad01bd8fd..2f716b84b 100644 --- a/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx +++ b/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx @@ -1,7 +1,6 @@ import css from './ProfileFormButton.module.css'; const ProfileFormButton = (props) => { - console.log('PROPS', props.formState); return (