127 lines
4.2 KiB
TypeScript
127 lines
4.2 KiB
TypeScript
import { TextField } from '@mui/material';
|
|
import { useForm, Controller } from 'react-hook-form';
|
|
import { Button } from '@mui/material';
|
|
import { useUserStore } from '../store';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import { isObjectNull } from '@/utils/is-null';
|
|
import { useLayoutStore } from '@/modules/layout/store';
|
|
import UploadOutlined from '@ant-design/icons/UploadOutlined';
|
|
import PandaPNG from '@/assets/panda.png';
|
|
import { FileUpload } from '../module/FileUpload';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export const Profile = () => {
|
|
const { t } = useTranslation();
|
|
const { control, handleSubmit, setValue, reset, formState, getValues } = useForm({
|
|
defaultValues: {
|
|
username: '',
|
|
avatar: '',
|
|
description: '',
|
|
},
|
|
});
|
|
const ref = useRef<any>(null);
|
|
const userStore = useUserStore(
|
|
useShallow((state) => {
|
|
return {
|
|
showEdit: state.showEdit,
|
|
setShowEdit: state.setShowEdit,
|
|
formData: state.formData,
|
|
updateData: state.updateData,
|
|
setFormData: state.setFormData,
|
|
updateSelf: state.updateSelf,
|
|
};
|
|
}),
|
|
);
|
|
const [avatar, setAvatar] = useState<string>('');
|
|
const layoutStore = useLayoutStore(
|
|
useShallow((state) => {
|
|
return {
|
|
me: state.me,
|
|
setMe: state.setMe,
|
|
};
|
|
}),
|
|
);
|
|
useEffect(() => {
|
|
const fromData = layoutStore.me;
|
|
if (isObjectNull(fromData)) {
|
|
reset({
|
|
username: '',
|
|
avatar: '',
|
|
description: '',
|
|
});
|
|
} else {
|
|
reset({
|
|
username: fromData.username,
|
|
avatar: fromData.avatar || '',
|
|
description: fromData.description || '',
|
|
});
|
|
}
|
|
setAvatar(fromData.avatar || '');
|
|
}, [layoutStore.me, setValue]);
|
|
const onChange = (path: string) => {
|
|
const url = path + '?t=' + new Date().getTime();
|
|
setAvatar(url);
|
|
setValue('avatar', url);
|
|
const values = getValues();
|
|
onFinish(values);
|
|
};
|
|
const onFinish = async (values) => {
|
|
const newMe = await userStore.updateSelf(values);
|
|
if (newMe) {
|
|
layoutStore.setMe(newMe);
|
|
}
|
|
};
|
|
return (
|
|
<div className='w-full h-full bg-amber-50 p-4 '>
|
|
<div className=' shadow-lg p-4 bg-white rounded-lg'>
|
|
<div className='text-2xl'>{t('Profile')}</div>
|
|
<div className='text-sm text-secondary'>{t('Edit your profile')}</div>
|
|
<div className='flex gap-4'>
|
|
<div className='w-[600px] p-4 border mt-2 '>
|
|
<div className='w-full my-4'>
|
|
{avatar && <img className='w-20 h-20 mx-auto rounded-full' src={avatar} alt='avatar' />}
|
|
{!avatar && <img className='w-20 h-20 mx-auto rounded-full' src={PandaPNG} alt='avatar' />}
|
|
</div>
|
|
<form onSubmit={handleSubmit(onFinish)} className='flex flex-col gap-4'>
|
|
<Controller
|
|
name='username'
|
|
control={control}
|
|
render={({ field }) => <TextField {...field} label={t('Name')} className='w-full border rounded-lg p-2' disabled />}
|
|
/>
|
|
<Controller
|
|
name='avatar'
|
|
control={control}
|
|
render={({ field }) => (
|
|
<TextField
|
|
{...field}
|
|
label={t('Avatar')}
|
|
slotProps={{
|
|
input: {
|
|
endAdornment: (
|
|
<div>
|
|
<UploadOutlined
|
|
onClick={() => {
|
|
ref.current?.open?.();
|
|
}}
|
|
/>
|
|
<FileUpload ref={ref} onChange={onChange} />
|
|
</div>
|
|
),
|
|
},
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
<Controller name='description' control={control} render={({ field }) => <TextField {...field} label={t('Description')} multiline rows={4} />} />
|
|
<Button className='' type='submit' variant='contained'>
|
|
{t('Save')}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|