dsc

src/pages/profile/Profile.tsx

@@ -7,10 +7,13 @@ import Input from '../../components/Input'
 import DatePickerComponent from '../../components/DatePicker'
 import Select from '../../components/Select'
 import Textarea from '../../components/Textarea'
+import { useGetProfile } from './hooks/useProfileData'
+import Username from './components/Username'
 
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
+    const getProfile = useGetProfile()
 
     return (
         <div className='mt-4 '>
@@ -56,23 +59,13 @@ const Profile: FC = () => {
                         </div>
                     </div>
                     <div className='flex-1 '>
-                        <div className='flex items-end xl:gap-6 gap-3'>
-                            <Input
-                                label={t('profile.username')}
-                                value={'mehrdad'}
-                                readOnly
-                            />
-                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
-                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
-                                <div>
-                                    {t('edit')}
-                                </div>
-                            </div>
-                        </div>
+                        <Username
+                            username={getProfile.data?.data?.user?.userName}
+                        />
                         <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                             <Input
                                 label={t('email')}
-                                value={'info@example.com'}
+                                value={getProfile.data?.data?.user?.email}
                                 readOnly
                             />
                             <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
@@ -85,7 +78,7 @@ const Profile: FC = () => {
                         <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                             <Input
                                 label={t('profile.phone_call')}
-                                value={'۰۹۱۲۹۲۸۳۳۹۵'}
+                                value={getProfile.data?.data?.user?.phone}
                                 readOnly
                             />
                             <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>

src/pages/profile/components/Username.tsx

@@ -0,0 +1,132 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { useCheckUserName, useUpdateProfile } from '../hooks/useProfileData'
+import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    username: string | null,
+}
+const Username: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [username, setUsername] = useState<string>(props.username ? props.username : '')
+    const [canSave, setCanSave] = useState<boolean>(false)
+    const [canEdit, setCanEdit] = useState<boolean>(false)
+    const [status, setStatus] = useState<'success' | 'error' | ''>('')
+    const checkUsername = useCheckUserName()
+    const updateProfile = useUpdateProfile()
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value
+        setCanSave(false)
+        if (value.indexOf(' ') === -1) {
+            if (value.length <= 3) {
+                setUsername(value)
+                return
+            }
+            setStatus('')
+            const params: CheckUserNameType = {
+                value: e.target.value,
+                type: 'userName'
+            }
+            setUsername(e.target.value)
+            checkUsername.mutate(params, {
+                onSuccess() {
+                    setStatus('success')
+                    setCanSave(true)
+                },
+                onError() {
+                    setStatus('error')
+                }
+            })
+        }
+    }
+
+    const handleSave = () => {
+        const params: UpdateProfileType = {
+            userName: username
+        }
+
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast.success(t('profile.username_save_success'))
+                setCanEdit(false)
+                setCanSave(false)
+                setStatus('')
+            },
+            onError(error: ErrorType) {
+                toast.error(error.response?.data?.error?.message?.[0])
+            },
+        })
+    }
+
+    useEffect(() => {
+        if (username !== props.username) {
+            setUsername(props.username ? props.username : '')
+        }
+    }, [props.username])
+
+
+    return (
+        <>
+            <div className='flex items-end xl:gap-6 gap-3'>
+                <div className='relative w-full'>
+                    <Input
+                        label={t('profile.username')}
+                        value={username}
+                        readOnly={!canEdit}
+                        onChange={handleChange}
+                        minLength={3}
+                        maxLength={20}
+                    />
+
+                    {
+                        checkUsername.isPending &&
+                        <div className='absolute left-4 top-8'>
+                            <div className='loader'></div>
+                        </div>
+                    }
+                </div>
+                <div className='flex relative  gap-1 text-[#0047FF] text-xs items-center'>
+                    {
+                        !canEdit ?
+                            <div onClick={() => setCanEdit(true)} className='flex gap-1 cursor-pointer relative -top-3'>
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                            :
+                            <Button
+                                label={t('save')}
+                                onClick={handleSave}
+                                className='px-4'
+                                disabled={!canSave}
+                                isLoading={updateProfile.isPending}
+                            />
+                    }
+
+                </div>
+            </div>
+            {
+                status === 'success' ?
+                    <div className='text-xs text-green-500 mt-2'>
+                        {t('profile.username_available')}
+                    </div>
+                    :
+                    status === 'error' ?
+                        <div className='text-xs text-red-500 mt-2'>
+                            {t('profile.username_not_available')}
+                        </div>
+                        : null
+            }
+        </>
+    )
+}
+
+export default Username

src/pages/profile/hooks/useProfileData.tsx

@@ -0,0 +1,22 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import * as api from '../service/ProfileService'
+import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes';
+
+export const useGetProfile = () => {
+    return useQuery({
+        queryKey: ["profile"],
+        queryFn: () => api.getProfile(),
+    });
+};
+
+export const useCheckUserName = () => {
+    return useMutation({
+        mutationFn: (variables: CheckUserNameType) => api.checkUserName(variables),
+    });
+};
+
+export const useUpdateProfile = () => {
+    return useMutation({
+        mutationFn: (variables: UpdateProfileType) => api.updateProfile(variables),
+    });
+};

src/pages/profile/service/ProfileService.ts

@@ -0,0 +1,17 @@
+import axios from "../../../config/axios";
+import { CheckUserNameType, UpdateProfileType } from "../types/ProfileTypes";
+
+export const getProfile = async () => {
+  const { data } = await axios.get(`/users/me`);
+  return data;
+};
+
+export const checkUserName = async (params: CheckUserNameType) => {
+  const { data } = await axios.post(`/users/check-validity`, params);
+  return data;
+};
+
+export const updateProfile = async (params: UpdateProfileType) => {
+  const { data } = await axios.patch(`/users/update-profile`, params);
+  return data;
+};

src/pages/profile/types/ProfileTypes.ts

@@ -0,0 +1,11 @@
+export type CheckUserNameType = {
+  type: "userName";
+  value: string;
+};
+
+export type UpdateProfileType = {
+  firstName?: string;
+  lastName?: string;
+  birthDate?: string;
+  userName?: string;
+};