address profile and space logout

package-lock.json

@@ -23,6 +23,7 @@
         "react-i18next": "^15.2.0",
         "react-infinite-scroll-component": "^6.1.0",
         "react-loading": "^2.0.3",
+        "react-loading-skeleton": "^3.5.0",
         "react-multi-date-picker": "^4.5.2",
         "react-otp-input": "^3.1.1",
         "react-router-dom": "^7.1.0",
@@ -4420,6 +4421,15 @@
         "react": ">=0.14.0"
       }
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",
+      "integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-multi-date-picker": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/react-multi-date-picker/-/react-multi-date-picker-4.5.2.tgz",

package.json

@@ -25,6 +25,7 @@
     "react-i18next": "^15.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-loading": "^2.0.3",
+    "react-loading-skeleton": "^3.5.0",
     "react-multi-date-picker": "^4.5.2",
     "react-otp-input": "^3.1.1",
     "react-router-dom": "^7.1.0",

src/pages/profile/Profile.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AvatarImage from '../../assets/images/avatar_image.png'
 import Button from '../../components/Button'
@@ -15,15 +15,61 @@ import { useSingleUpload } from '../ticket/hooks/useTicketData'
 import { ErrorType } from '../../helpers/types'
 import { UpdateProfileType } from './types/ProfileTypes'
 import PageLoading from '../../components/PageLoading'
+import { useGetCities, useGetProvines } from '../financial/hooks/useFinancialData'
+import { ProvinesItemType } from '../financial/types/FinancialTypes'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
 
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
     const singleUpload = useSingleUpload()
     const [file, setFile] = useState<File>()
+    const [provinesId, setProvinesId] = useState<string>('')
+    const getProvines = useGetProvines()
+    const getCities = useGetCities(provinesId)
     const getProfile = useGetProfile()
     const updateProfile = useUpdateProfile()
 
+    const formik = useFormik<UpdateProfileType>({
+        initialValues: {
+            cityId: '',
+            userAddress: '',
+            postalCode: '',
+        },
+        validationSchema: Yup.object({
+            cityId: Yup.string().required(t('errors.required')),
+            userAddress: Yup.string().required(t('errors.required')),
+            postalCode: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: (values) => {
+            updateProfile.mutate(values, {
+                onSuccess: () => {
+                    toast.success(t('success'))
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    useEffect(() => {
+
+        if (getProfile.data) {
+            formik.setValues({
+                cityId: getProfile.data.data.user.city?.id || '',
+                userAddress: getProfile.data.data.user.userAddress || '',
+                postalCode: getProfile.data.data.user.postalCode || '',
+            })
+            if (getProfile.data.data.user.city) {
+                setProvinesId(getProfile.data.data.user.city.province?.id)
+            }
+        }
+
+    }, [getProfile.data])
+
+
     const onDrop = useCallback((acceptedFiles: File[]) => {
 
         if (acceptedFiles.length > 0) {
@@ -65,7 +111,7 @@ const Profile: FC = () => {
             </div>
 
             {
-                getProfile.isPending ?
+                getProfile.isPending || getProvines.isPending ?
                     <PageLoading />
                     :
                     <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
@@ -181,38 +227,47 @@ const Profile: FC = () => {
                                 <div className='rowTwoInput'>
                                     <Select
                                         label={t('profile.province')}
-                                        items={[
+                                        items={getProvines.data?.data?.provinces.map((item: ProvinesItemType) => ({ label: item.name, value: item.id }))}
-                                            {
+                                        onChange={(e) => setProvinesId(e.target.value)}
-                                                label: 'تهران',
-                                                value: 'tehran'
-                                            }
-                                        ]}
                                         className='bg-white border'
+                                        placeholder={t('select')}
+                                        value={provinesId}
                                     />
                                     <Select
                                         label={t('profile.city')}
-                                        items={[
+                                        items={getCities.data?.data?.cities ? getCities.data?.data?.cities.map((item: ProvinesItemType) => ({ label: item.name, value: item.id })) : []}
-                                            {
+                                        placeholder={t('select')}
-                                                label: 'تهران',
+                                        {...formik.getFieldProps('cityId')}
-                                                value: 'tehran'
+                                        error_text={formik.touched.cityId && formik.errors.cityId ? formik.errors.cityId : ''}
-                                            }
-                                        ]}
                                     />
                                 </div>
 
                                 <div className='xl:mt-7 mt-4'>
                                     <Input
                                         label={t('profile.postal_code')}
-                                        value={'۱۲۳۴۵۶۷۸'}
+                                        {...formik.getFieldProps('postalCode')}
+                                        error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
+                                        value={formik.values.postalCode}
                                     />
                                 </div>
                                 <div className='xl:mt-7 mt-4'>
                                     <Textarea
                                         label={t('profile.address')}
-                                        value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
+                                        defaultValue={formik.values.userAddress}
+                                        {...formik.getFieldProps('userAddress')}
+                                        error_text={formik.touched.userAddress && formik.errors.userAddress ? formik.errors.userAddress : ''}
                                     />
                                 </div>
                             </div>
+
+                            <div className='flex justify-end'>
+                                <Button
+                                    label={t('save')}
+                                    className='w-fit px-10'
+                                    onClick={() => formik.handleSubmit()}
+                                    isLoading={updateProfile.isPending}
+                                />
+                            </div>
                         </div>
 
                         <div className='h-20 xl:hidden'></div>

src/pages/profile/types/ProfileTypes.ts

@@ -9,4 +9,7 @@ export type UpdateProfileType = {
   birthDate?: string;
   userName?: string;
   profilePic?: string;
+  cityId?: string;
+  postalCode?: string;
+  userAddress?: string;
 };

src/shared/Header.tsx

@@ -129,7 +129,7 @@ const Header: FC = () => {
                                     />
                                 </div>
 
-                                <div className='px-6'>
+                                <div className='px-6 -mt-[2px]'>
                                     <SideBarItem
                                         icon={<Logout color={'black'} size={20} />}
                                         title={t('sidebar.logout')}