Update profile function

rsconcept/frontend/src/hooks/useUserProfile.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { type ErrorInfo } from '../components/BackendError'
-import { getProfile } from '../utils/backendAPI'
-import { type IUserProfile } from '../utils/models'
+import { DataCallback, getProfile, patchProfile } from '../utils/backendAPI'
+import { type IUserProfile,IUserUpdateData } from '../utils/models'
 
 export function useUserProfile() {
   const [user, setUser] = useState<IUserProfile | undefined>(undefined);
@@ -21,10 +21,22 @@ export function useUserProfile() {
       });
     }, [setUser]
   )
+  const updateUser = useCallback(
+    (data: IUserUpdateData, callback?: DataCallback<IUserProfile>) => {
+      setError(undefined);
+      patchProfile({
+        data: data,
+        showError: true,
+        setLoading: setLoading,
+        onError: error => { setError(error); },
+        onSuccess: newData => { setUser(newData); if (callback) callback(newData) }
+      });
+    }, [setUser]
+  )
 
   useEffect(() => {
     fetchUser();
   }, [fetchUser])
 
-  return { user, fetchUser, error, loading };
+  return { user, fetchUser, updateUser, error, loading };
 }

rsconcept/frontend/src/pages/UserProfilePage/UserProfile.tsx

@@ -1,15 +1,51 @@
+import { useLayoutEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+
+import TextInput from '../../components/Common/TextInput';
 import { useUserProfile } from '../../hooks/useUserProfile';
+import { IUserUpdateData } from '../../utils/models';
+
 
 export function UserProfile() {
-  const { user } = useUserProfile();
-  console.log(user)
+  const { updateUser, user} = useUserProfile();
+  
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [first_name, setFirstName] = useState('');
+  const [last_name, setLastName] = useState('');
+
+  useLayoutEffect(() => {
+    if (user) {
+      setUsername(user.username);
+      setEmail(user.email);
+      setFirstName(user.first_name);
+      setLastName(user.last_name);
+    }
+  }, [user]);
+  
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data: IUserUpdateData = {
+      username: username,
+      email: email,
+      first_name: first_name,
+      last_name: last_name,
+    };
+    updateUser(data, () => toast.success('Изменения сохранены'));
+  };
+
+  // console.log(user)
   return (
+    <form onSubmit={handleSubmit} className='flex-grow max-w-xl px-4 py-2 border min-w-fit'>
     <div className='flex flex-col items-center justify-center px-2 py-2 border'>
-        <p>Логин: {user?.username ?? 'Логин'}</p>
-        <p>Имя: {user?.first_name ?? 'Имя'}</p>
-        <p>Фамилия: {user?.last_name ?? 'Фамилия'}</p>
-        <p>Электронная почта: {user?.email ?? ''}</p>
-        <button className='px-2 py-1 bg-green-500 border' onClick={() => { console.log('123') } } >Сохранить</button>
+        <TextInput id='username' label="Логин:" value={username} onChange={event => { setUsername(event.target.value); }}/>
+        <TextInput id='first_name' label="Имя:" value={first_name} onChange={event => { setFirstName(event.target.value); }}/>
+        <TextInput id='last_name' label="Фамилия:" value={last_name} onChange={event => { setLastName(event.target.value); }}/>
+        <TextInput id='email' label="Электронная почта:" value={email} onChange={event => { setEmail(event.target.value); }}/>
+        <div className='flex items-center justify-between my-4'>
+          <button className='px-2 py-1 bg-green-500 border' type='submit'>Сохранить</button>
         </div>
-  );
-}
+         
+    </div>
+    </form>    
+  )}

rsconcept/frontend/src/utils/backendAPI.ts

@@ -12,7 +12,7 @@ import {
 IRSExpression,
 IRSFormCreateData, IRSFormData,
   IRSFormMeta, IRSFormUpdateData, IRSFormUploadData, IUserInfo,
-  IUserLoginData, IUserProfile, IUserSignupData} from './models'
+  IUserLoginData, IUserProfile, IUserSignupData, IUserUpdateData} from './models'
 
 // ================ Data transfer types ================
 export type DataCallback<ResponseData = undefined> = (data: ResponseData) => void;
@@ -87,6 +87,14 @@ export function getProfile(request: FrontPull<IUserProfile>) {
   });
 }
 
+export function patchProfile(request: FrontExchange<IUserUpdateData, IUserProfile>) {
+  AxiosPatch({
+    title: 'Current user profile',
+    endpoint: `${config.url.AUTH}profile`,
+    request: request
+  });
+}
+
 export function getActiveUsers(request: FrontPull<IUserInfo[]>) {
   AxiosGet({
     title: 'Active users list',

rsconcept/frontend/src/utils/models.ts

@@ -22,6 +22,7 @@ export interface IUserSignupData extends Omit<IUser, 'is_staff' | 'id'> {
   password2: string
 }
 export interface IUserProfile extends Omit<IUser, 'is_staff'> {}
+export interface IUserUpdateData extends Omit<IUser, 'is_staff' | 'id'> {}
 export interface IUserInfo extends Omit<IUserProfile, 'email'> {}
 
 // ======== RS Parsing ============