bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

We do a little refactoring

Browse source
This commit is contained in:
Alex Gleason 2023-03-29 20:29:35 -05:00
parent f3727440ff
commit 9e60d90812
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 26 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/soapbox/features/group/edit-group.tsx
View file

@ -110,11 +110,11 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const avatarField = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) }); const avatar = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) });
const headerField = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) }); const header = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) });
const displayNameField = useTextField(group?.display_name); const displayName = useTextField(group?.display_name);
const noteField = useTextField(group?.note); const note = useTextField(group?.note);
const maxName = Number(instance.configuration.getIn(['groups', 'max_characters_name'])); const maxName = Number(instance.configuration.getIn(['groups', 'max_characters_name']));
const maxNote = Number(instance.configuration.getIn(['groups', 'max_characters_description'])); const maxNote = Number(instance.configuration.getIn(['groups', 'max_characters_description']));
@ -127,10 +127,10 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
setIsSubmitting(true); setIsSubmitting(true);
await updateGroup({ await updateGroup({
display_name: displayNameField.value, display_name: displayName.value,
note: noteField.value, note: note.value,
avatar: avatarField.file, avatar: avatar.file,
header: headerField.file, header: header.file,
}); });
setIsSubmitting(false); setIsSubmitting(false);
@ -144,8 +144,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
<Column label={intl.formatMessage(messages.heading)}> <Column label={intl.formatMessage(messages.heading)}>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<div className='relative mb-12 flex'> <div className='relative mb-12 flex'>
<HeaderPicker accept={attachmentTypes} disabled={isSubmitting} {...headerField} /> <HeaderPicker accept={attachmentTypes} disabled={isSubmitting} {...header} />
<AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatarField} /> <AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatar} />
</div> </div>
<FormGroup <FormGroup
labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />} labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
@ -153,8 +153,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
<Input <Input
type='text' type='text'
placeholder={intl.formatMessage(messages.groupNamePlaceholder)} placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
{...displayNameField}
maxLength={maxName} maxLength={maxName}
{...displayName}
/> />
</FormGroup> </FormGroup>
<FormGroup <FormGroup
@ -163,8 +163,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
<Textarea <Textarea
autoComplete='off' autoComplete='off'
placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)} placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
{...noteField}
maxLength={maxNote} maxLength={maxNote}
{...note}
/> />
</FormGroup> </FormGroup>

20
app/soapbox/hooks/forms/useImageField.ts
View file

@ -11,21 +11,19 @@ interface UseImageFieldOpts {
preview?: string preview?: string
} }
/** Handle image, and optionally resize it. */ /** Returns props for `<input type="file">`, and optionally resizes the file. */
function useImageField(opts: UseImageFieldOpts = {}) { function useImageField(opts: UseImageFieldOpts = {}) {
const [file, setFile] = useState<File>(); const [file, setFile] = useState<File>();
const src = usePreview(file) || opts.preview; const src = usePreview(file) || opts.preview;
const onChange: React.ChangeEventHandler<HTMLInputElement> = ({ target: { files } }) => { const onChange: React.ChangeEventHandler<HTMLInputElement> = async ({ target: { files } }) => {
const file = files?.item(0) || undefined; const file = files?.item(0);
if (file) { if (!file) return;
if (typeof opts.maxPixels === 'number') {
resizeImage(file, opts.maxPixels) if (typeof opts.maxPixels === 'number') {
.then((f) => setFile(f)) setFile(await resizeImage(file, opts.maxPixels));
.catch(console.error); } else {
} else { setFile(file);
setFile(file);
}
} }
}; };

6
app/soapbox/hooks/forms/useTextField.ts
View file

@ -1,5 +1,9 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
/**
* Returns props for `<input type="text">`.
* If `initialValue` changes from undefined to a string, it will set the value.
*/
function useTextField(initialValue: string | undefined) { function useTextField(initialValue: string | undefined) {
const [value, setValue] = useState(initialValue); const [value, setValue] = useState(initialValue);
const hasInitialValue = typeof initialValue === 'string'; const hasInitialValue = typeof initialValue === 'string';
@ -15,7 +19,7 @@ function useTextField(initialValue: string | undefined) {
}, [hasInitialValue]); }, [hasInitialValue]);
return { return {
value, value: value || '',
onChange, onChange,
}; };
} }