avatar url

src/pages/auth/components/CompleteProfileForm.tsx

@@ -1,10 +1,13 @@
-import { type FC } from 'react'
+import { useState, type FC } from 'react'
 import Input from '@/components/Input'
+import UploadBox from '@/components/UploadBox'
+import PresignedImage from '@/components/PresignedImage'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import Button from '@/components/Button'
 import Error from '@/components/Error'
 import { useGetMe, useUpdateProfile } from '@/pages/user/hooks/useUserData'
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploader'
 import { toast } from '@/shared/toast'
 import { extractErrorMessage } from '@/config/func'
 import { Paths } from '@/config/Paths'
@@ -14,12 +17,34 @@ import type { UpdateProfileType } from '@/pages/user/types/Types'
 const CompleteProfileForm: FC = () => {
     const { data: user } = useGetMe()
     const updateProfile = useUpdateProfile()
+    const { mutate: upload, isPending: isUploading } = useSingleUpload()
+    const [file, setFile] = useState<File>()
+
+    const handleSave = (values: UpdateProfileType) => {
+        updateProfile.mutate(
+            {
+                firstName: values.firstName.trim(),
+                lastName: values.lastName.trim(),
+                ...(values.avatarUrl ? { avatarUrl: values.avatarUrl } : {}),
+            },
+            {
+                onSuccess() {
+                    toast('اطلاعات شما با موفقیت ثبت شد', 'success')
+                    appNavigate(Paths.home, { replace: true })
+                },
+                onError(error) {
+                    toast(extractErrorMessage(error), 'error')
+                },
+            },
+        )
+    }
 
     const formik = useFormik<UpdateProfileType>({
         enableReinitialize: true,
         initialValues: {
             firstName: user?.firstName ?? '',
             lastName: user?.lastName ?? '',
+            avatarUrl: user?.avatarUrl ?? undefined,
         },
         validationSchema: Yup.object({
             firstName: Yup.string()
@@ -30,21 +55,21 @@ const CompleteProfileForm: FC = () => {
                 .required('نام خانوادگی اجباری است.'),
         }),
         onSubmit(values) {
-            updateProfile.mutate(
-                {
-                    firstName: values.firstName.trim(),
-                    lastName: values.lastName.trim(),
-                },
-                {
-                    onSuccess() {
-                        toast('اطلاعات شما با موفقیت ثبت شد', 'success')
-                        appNavigate(Paths.home, { replace: true })
+            if (file) {
+                upload(file, {
+                    onSuccess(data) {
+                        handleSave({
+                            ...values,
+                            avatarUrl: data?.data?.key,
+                        })
                     },
                     onError(error) {
                         toast(extractErrorMessage(error), 'error')
                     },
-                },
-            )
+                })
+            } else {
+                handleSave(values)
+            }
         },
     })
 
@@ -60,6 +85,19 @@ const CompleteProfileForm: FC = () => {
             </div>
 
             <div className='mt-16 flex flex-col gap-6'>
+                {formik.values.avatarUrl && !file && (
+                    <PresignedImage
+                        src={formik.values.avatarUrl}
+                        className='w-20 h-20 rounded-full object-cover'
+                        alt='آواتار'
+                    />
+                )}
+
+                <UploadBox
+                    label='آواتار (اختیاری)'
+                    onChange={(files) => setFile(files[0])}
+                />
+
                 <div>
                     <Input
                         label='نام'
@@ -94,7 +132,7 @@ const CompleteProfileForm: FC = () => {
                 label='ثبت و ادامه'
                 className='mt-8'
                 onClick={() => formik.handleSubmit()}
-                isLoading={updateProfile.isPending}
+                isLoading={updateProfile.isPending || isUploading}
             />
         </div>
     )