diff options
Diffstat (limited to 'src/lib/auth/components/PersonalProfile.jsx')
| -rw-r--r-- | src/lib/auth/components/PersonalProfile.jsx | 104 |
1 files changed, 64 insertions, 40 deletions
diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx index b9fb3f5f..7ef3af2d 100644 --- a/src/lib/auth/components/PersonalProfile.jsx +++ b/src/lib/auth/components/PersonalProfile.jsx @@ -1,56 +1,61 @@ -import useAuth from '@/core/hooks/useAuth' -import { setAuth } from '@/core/utils/auth' -import addressApi from '@/lib/address/api/addressApi' -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { useForm } from 'react-hook-form' -import { toast } from 'react-hot-toast' -import editPersonalProfileApi from '../api/editPersonalProfileApi' +import useAuth from '@/core/hooks/useAuth'; +import { setAuth } from '@/core/utils/auth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import editPersonalProfileApi from '../api/editPersonalProfileApi'; const PersonalProfile = () => { - const auth = useAuth() - const [isOpen, setIsOpen] = useState(true) - const toggle = () => setIsOpen(!isOpen) + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(true); + const toggle = () => setIsOpen(!isOpen); const { register, setValue, handleSubmit } = useForm({ defaultValues: { email: '', name: '', mobile: '', - password: '' - } - }) + password: '', + }, + }); useEffect(() => { const loadProfile = async () => { - const dataProfile = await addressApi({ id: auth.partnerId }) - setValue('email', dataProfile?.email) - setValue('name', dataProfile?.name) - setValue('mobile', dataProfile?.mobile) - } - if (auth) loadProfile() - }, [auth, setValue]) + const dataProfile = await addressApi({ id: auth.partner_id }); + setValue('email', dataProfile?.email); + setValue('name', dataProfile?.name); + setValue('mobile', dataProfile?.mobile); + }; + if (auth) loadProfile(); + }, [auth, setValue]); const onSubmitHandler = async (values) => { - let data = values - if (!values.password) delete data.password - const isUpdated = await editPersonalProfileApi({ data }) + let data = values; + if (!values.password) delete data.password; + const isUpdated = await editPersonalProfileApi({ data }); if (isUpdated?.user) { - setAuth(isUpdated.user) - setValue('password', '') - toast.success('Berhasil mengubah profil', { duration: 1500 }) - return + setAuth(isUpdated.user); + setValue('password', ''); + toast.success('Berhasil mengubah profil', { duration: 1500 }); + return; } - toast.error('Terjadi kesalahan internal') - } + toast.error('Terjadi kesalahan internal'); + }; return ( <> - <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'> + <button + type='button' + onClick={toggle} + className='p-4 flex items-center text-left w-full' + > <div> <div className='font-semibold mb-2'>Informasi Akun</div> <div className='text-gray_r-11'> - Dibawah ini adalah data diri yang anda masukan, periksa kembali data diri anda + Dibawah ini adalah data diri yang anda masukan, periksa kembali data + diri anda </div> </div> <div className='ml-auto p-2 bg-gray_r-3 rounded'> @@ -60,19 +65,35 @@ const PersonalProfile = () => { </button> {isOpen && ( - <form className='p-4 border-t border-gray_r-6' onSubmit={handleSubmit(onSubmitHandler)}> + <form + className='p-4 border-t border-gray_r-6' + onSubmit={handleSubmit(onSubmitHandler)} + > <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'> <div> <label>Email</label> - <input {...register('email')} type='text' disabled className='form-input mt-3' /> + <input + {...register('email')} + type='text' + disabled + className='form-input mt-3' + /> </div> <div> <label>Nama Lengkap</label> - <input {...register('name')} type='text' className='form-input mt-3' /> + <input + {...register('name')} + type='text' + className='form-input mt-3' + /> </div> <div> <label>No. Handphone</label> - <input {...register('mobile')} type='tel' className='form-input mt-3' /> + <input + {...register('mobile')} + type='tel' + className='form-input mt-3' + /> </div> <div> <label>Kata Sandi</label> @@ -84,13 +105,16 @@ const PersonalProfile = () => { /> </div> </div> - <button type='submit' className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'> + <button + type='submit' + className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6' + > Simpan </button> </form> )} </> - ) -} + ); +}; -export default PersonalProfile +export default PersonalProfile; |
