Merge pull request #691 from ita-social-projects/#690-EditProfileUpda…

…teFormSubmission #690 [Edit Profile] Update form submission
ita-social-projects · Jul 17, 2024 · ee7d0cc · ee7d0cc
2 parents 328a691 + a58c481
commit ee7d0cc
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 46 deletions.
diff --git 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
@@ -4,6 +4,7 @@ import { useState, useEffect, useContext } from 'react';
 import { DirtyFormContext } from '../../../context/DirtyFormContext';
 import { useAuth, useProfile } from '../../../hooks';
 import checkFormIsDirty from '../../../utils/checkFormIsDirty';
+import defineChanges from '../../../utils/defineChanges';
 import { formatPhoneNumber } from '../../../utils/formatPhoneNumber';
 import FullField from './FormFields/FullField';
 import HalfFormField from './FormFields/HalfFormField';
@@ -16,10 +17,6 @@ const LABELS = {
   address: 'Поштова адреса',
 };
 
-const cleanPhoneNumber = (phoneNumber) => {
-  return phoneNumber.replace(/[^\d]/g, '');
-};
-
 const ContactsInfo = (props) => {
   const { user } = useAuth();
   const { profile: mainProfile, mutate: profileMutate } = useProfile();
@@ -29,7 +26,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 },
   };
 
@@ -95,14 +92,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
@@ -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
@@ -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
@@ -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
@@ -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(

diff --git a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx
@@ -208,7 +208,7 @@ const ProfileContent = (props) => {
                 </DirtyFormContext.Provider>
             </div>
 
-            {props.formName !== 'Delete' && <ProfileFormButton formName={props.formName} />}
+            {props.formName !== 'Delete' && <ProfileFormButton formName={props.formName} formState={formIsDirty}/>}
 
             {blocker.state === 'blocked' &&
                 (

diff --git a/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx b/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx
@@ -7,6 +7,7 @@ const ProfileFormButton = (props) => {
         form={props.formName}
         className={css['sign-up__button']}
         type="submit"
+        disabled={props.formState === false}
       >
         Зберегти зміни
       </button>

diff --git a/FrontEnd/src/utils/defineChanges.js 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;