Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

refactor(console): use image uploader for avatar field (#3500)

Browse source
This commit is contained in:
Xiao Yijun 2023-03-19 14:05:35 +08:00 committed by GitHub
parent 43ed97a014
commit 2dbf6e26be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
View file

@ -1,6 +1,6 @@
import type { AdminConsoleKey } from '@logto/phrases'; import type { AdminConsoleKey } from '@logto/phrases';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useForm } from 'react-hook-form'; import { Controller, useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast'; import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ReactModal from 'react-modal'; import ReactModal from 'react-modal';
@ -8,9 +8,11 @@ import ReactModal from 'react-modal';
import Button from '@/components/Button'; import Button from '@/components/Button';
import ModalLayout from '@/components/ModalLayout'; import ModalLayout from '@/components/ModalLayout';
import TextInput from '@/components/TextInput'; import TextInput from '@/components/TextInput';
import { ImageUploaderField } from '@/components/Uploader';
import { adminTenantEndpoint, meApi } from '@/consts'; import { adminTenantEndpoint, meApi } from '@/consts';
import { useStaticApi } from '@/hooks/use-api'; import { useStaticApi } from '@/hooks/use-api';
import { useConfirmModal } from '@/hooks/use-confirm-modal'; import { useConfirmModal } from '@/hooks/use-confirm-modal';
import useUserAssetsService from '@/hooks/use-user-assets-service';
import * as modalStyles from '@/scss/modal.module.scss'; import * as modalStyles from '@/scss/modal.module.scss';
import { handleError } from '../../utils'; import { handleError } from '../../utils';
@ -42,8 +44,10 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
handleSubmit, handleSubmit,
setValue, setValue,
reset, reset,
control,
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
} = useForm<FormFields>({ reValidateMode: 'onBlur' }); } = useForm<FormFields>({ reValidateMode: 'onBlur' });
const { isReady: isUserAssetsServiceReady } = useUserAssetsService();
useEffect(() => { useEffect(() => {
clearErrors(); clearErrors();
@ -121,7 +125,15 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
} }
onClose={onClose} onClose={onClose}
> >
<div> {field === 'avatar' && isUserAssetsServiceReady ? (
<Controller
name="avatar"
control={control}
render={({ field: { onChange, value, name } }) => (
<ImageUploaderField name={name} value={value} onChange={onChange} />
)}
/>
) : (
<TextInput <TextInput
{...register(field, { {...register(field, {
validate: (value) => validate: (value) =>
@ -139,7 +151,7 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
} }
}} }}
/> />
</div> )}
</ModalLayout> </ModalLayout>
</ReactModal> </ReactModal>
); );