dsc

src/components/Select.tsx

@@ -43,7 +43,10 @@ const Select: FC<Props> = (props: Props) => {
                 }
 
             </select>
-            <ArrowDown2 size={16} color='black' className='absolute z-0 top-3 left-2' />
+            <ArrowDown2 size={16} color='black' className={clx(
+                'absolute z-0 top-3 left-2',
+                props.label && 'top-9'
+            )} />
             {
                 props.error_text && props.error_text !== '' ?
                     <div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'>

src/index.css

@@ -131,3 +131,54 @@ tbody tr {
   direction: rtl;
   font-family: "irancell" !important;
 }
+
+/* loader */
+.loader {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+.loader::before,
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 2px solid #0047ff;
+  animation: prixClipFix 2s linear infinite;
+}
+.loader::after {
+  border-color: #000;
+  animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
+  inset: 6px;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}

src/langs/fa.json

@@ -282,7 +282,11 @@
     "address_live": "آدرس محل سکونت خود را با دقت وارد کنید",
     "province": "استان",
     "city": "شهر",
-    "postal_code": "کد پستی"
+    "postal_code": "کد پستی",
+    "username_available": "نام کاربری موجود",
+    "username_not_available": "نام کاربری موجود نیست",
+    "username_save_success": "نام کاربری با موفقیت ذخیره شد"
   },
-  "email": "ایمیل"
+  "email": "ایمیل",
+  "save": "ذخیره"
 }

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'>
+                        <Username
-                            <Input
+                            username={getProfile.data?.data?.user?.userName}
-                                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>
                         <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;
+};

src/shared/Header.tsx

@@ -7,11 +7,13 @@ import { Link } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 import Notifications from '../pages/notification/Notification'
 import { useSharedStore } from './store/sharedStore'
+import { useGetProfile } from '../pages/profile/hooks/useProfileData'
 
 const Header: FC = () => {
 
     const { t } = useTranslation('global')
     const { setOpenSidebar, openSidebar } = useSharedStore()
+    const { data } = useGetProfile()
 
     return (
         <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
@@ -32,6 +34,8 @@ const Header: FC = () => {
                     <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                 </Link>
                 <Notifications />
+                {
+                    data &&
                     <div className='flex gap-2 items-center'>
                         <div className='size-6 rounded-full bg-description overflow-hidden'>
                             <Link to={Pages.profile}>
@@ -39,10 +43,13 @@ const Header: FC = () => {
                             </Link>
                         </div>
                         <div className='xl:flex hidden gap-1 items-center'>
-                        <div className='text-xs'>مهرداد مظفری</div>
+                            <div className='text-xs'>
+                                {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+                            </div>
                             <ArrowDown2 size={14} color='#8C90A3' />
                         </div>
                     </div>
+                }
             </div>
         </div>
     )