Make EditGroup page work, pretty much

develop^2
Alex Gleason 2023-03-29 19:18:20 -05:00
rodzic bfd40fa373
commit eb6c82a867
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
6 zmienionych plików z 118 dodań i 64 usunięć

Wyświetl plik

@ -56,6 +56,7 @@ module.exports = {
},
polyfills: [
'es:all', // core-js
'fetch', // not polyfilled, but ignore it
'IntersectionObserver', // npm:intersection-observer
'Promise', // core-js
'ResizeObserver', // npm:resize-observer-polyfill

Wyświetl plik

@ -1,22 +1,22 @@
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import React, { useMemo } from 'react';
import { useForm } from 'react-hook-form';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import {
changeGroupEditorTitle,
changeGroupEditorDescription,
changeGroupEditorMedia,
} from 'soapbox/actions/groups';
import Icon from 'soapbox/components/icon';
import { Avatar, Column, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
import { Avatar, Button, Column, Form, FormActions, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
import { useAppSelector, useInstance } from 'soapbox/hooks';
import { useGroup, useUpdateGroup } from 'soapbox/hooks/api';
import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
import resizeImage from 'soapbox/utils/resize-image';
import type { List as ImmutableList } from 'immutable';
const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
const nonDefaultHeader = (url: string | undefined) => url && isDefaultHeader(url) ? undefined : url;
interface IMediaInput {
src: string | null
src: string | undefined
accept: string
onChange: React.ChangeEventHandler<HTMLInputElement>
disabled: boolean
@ -28,7 +28,7 @@ const messages = defineMessages({
groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
});
const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return (
<label
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
@ -52,6 +52,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
</Text>
<input
ref={ref}
name='header'
type='file'
accept={accept}
@ -62,9 +63,9 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
</HStack>
</label>
);
};
});
const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return (
<label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{src && <Avatar src={src} size={80} />}
@ -83,6 +84,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
</HStack>
<span className='sr-only'>Upload avatar</span>
<input
ref={ref}
name='avatar'
type='file'
accept={accept}
@ -92,68 +94,63 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
/>
</label>
);
};
});
const EditGroup = () => {
interface EditGroupForm {
display_name: string
note: string
avatar?: FileList
header?: FileList
}
interface IEditGroup {
params: {
id: string
}
}
const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const instance = useInstance();
const groupId = useAppSelector((state) => state.group_editor.groupId);
const isUploading = useAppSelector((state) => state.group_editor.isUploading);
const name = useAppSelector((state) => state.group_editor.displayName);
const description = useAppSelector((state) => state.group_editor.note);
const { group } = useGroup(groupId);
const { updateGroup } = useUpdateGroup(groupId);
const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
const [headerSrc, setHeaderSrc] = useState<string | null>(null);
const maxName = Number(instance.configuration.getIn(['groups', 'max_characters_name']));
const maxNote = Number(instance.configuration.getIn(['groups', 'max_characters_description']));
const { register, handleSubmit, formState: { isSubmitting }, watch } = useForm<EditGroupForm>({
values: group ? {
display_name: group.display_name,
note: group.note,
} : undefined,
});
const avatarSrc = usePreview(watch('avatar')?.item(0)) || nonDefaultAvatar(group?.avatar);
const headerSrc = usePreview(watch('header')?.item(0)) || nonDefaultHeader(group?.header);
const attachmentTypes = useAppSelector(
state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>,
)?.filter(type => type.startsWith('image/')).toArray().join(',');
const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
dispatch(changeGroupEditorTitle(target.value));
};
async function onSubmit(data: EditGroupForm) {
const avatar = data.avatar?.item(0);
const header = data.header?.item(0);
const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
dispatch(changeGroupEditorDescription(target.value));
};
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = e => {
const rawFile = e.target.files?.item(0);
if (!rawFile) return;
if (e.target.name === 'avatar') {
resizeImage(rawFile, 400 * 400).then(file => {
dispatch(changeGroupEditorMedia('avatar', file));
setAvatarSrc(URL.createObjectURL(file));
}).catch(console.error);
} else {
resizeImage(rawFile, 1920 * 1080).then(file => {
dispatch(changeGroupEditorMedia('header', file));
setHeaderSrc(URL.createObjectURL(file));
}).catch(console.error);
}
};
useEffect(() => {
if (!groupId) return;
dispatch((_, getState) => {
const group = getState().groups.items.get(groupId);
if (!group) return;
if (group.avatar && !isDefaultAvatar(group.avatar)) setAvatarSrc(group.avatar);
if (group.header && !isDefaultHeader(group.header)) setHeaderSrc(group.header);
await updateGroup({
display_name: data.display_name,
note: data.note,
avatar: avatar ? await resizeImage(avatar, 400 * 400) : undefined,
header: header ? await resizeImage(header, 1920 * 1080) : undefined,
});
}, [groupId]);
}
return (
<Column label={intl.formatMessage(messages.heading)}>
<Form>
<Form onSubmit={handleSubmit(onSubmit)}>
<div className='relative mb-12 flex'>
<HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
<AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
<HeaderPicker src={headerSrc} accept={attachmentTypes} disabled={isSubmitting} {...register('header')} />
<AvatarPicker src={avatarSrc} accept={attachmentTypes} disabled={isSubmitting} {...register('avatar')} />
</div>
<FormGroup
labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
@ -161,9 +158,7 @@ const EditGroup = () => {
<Input
type='text'
placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
value={name}
onChange={onChangeName}
maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
{...register('display_name', { maxLength: maxName })}
/>
</FormGroup>
<FormGroup
@ -172,14 +167,26 @@ const EditGroup = () => {
<Textarea
autoComplete='off'
placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
value={description}
onChange={onChangeDescription}
maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_description']))}
{...register('note', { maxLength: maxNote })}
/>
</FormGroup>
<FormActions>
<Button theme='primary' type='submit' disabled={isSubmitting} block>
<FormattedMessage id='edit_profile.save' defaultMessage='Save' />
</Button>
</FormActions>
</Form>
</Column>
);
};
function usePreview(file: File | null | undefined): string | undefined {
return useMemo(() => {
if (file) {
return URL.createObjectURL(file);
}
}, [file]);
}
export default EditGroup;

Wyświetl plik

@ -0,0 +1,33 @@
import { Entities } from 'soapbox/entity-store/entities';
import { useCreateEntity } from 'soapbox/entity-store/hooks';
import { useApi } from 'soapbox/hooks/useApi';
import { groupSchema } from 'soapbox/schemas';
interface UpdateGroupParams {
display_name?: string
note?: string
avatar?: File
header?: File
group_visibility?: string
discoverable?: boolean
tags?: string[]
}
function useUpdateGroup(groupId: string) {
const api = useApi();
const { createEntity, ...rest } = useCreateEntity([Entities.GROUPS], (params: UpdateGroupParams) => {
return api.put(`/api/v1/groups/${groupId}`, params, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
}, { schema: groupSchema });
return {
updateGroup: createEntity,
...rest,
};
}
export { useUpdateGroup };

Wyświetl plik

@ -10,3 +10,4 @@ export { useGroupSearch } from './groups/useGroupSearch';
export { useJoinGroup } from './groups/useJoinGroup';
export { useLeaveGroup } from './groups/useLeaveGroup';
export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
export { useUpdateGroup } from './groups/useUpdateGroup';

Wyświetl plik

@ -52,6 +52,7 @@
"@fontsource/inter": "^4.5.1",
"@fontsource/roboto-mono": "^4.5.8",
"@gamestdio/websocket": "^0.3.2",
"@hookform/resolvers": "^3.0.0",
"@jest/globals": "^29.0.0",
"@lcdp/offline-plugin": "^5.1.0",
"@metamask/providers": "^10.0.0",
@ -147,6 +148,7 @@
"react-datepicker": "^4.8.0",
"react-dom": "^18.0.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.43.8",
"react-hot-toast": "^2.4.0",
"react-hotkeys": "^1.1.4",
"react-immutable-pure-component": "^2.2.2",

Wyświetl plik

@ -1959,6 +1959,11 @@
qs "^6.10.1"
xcase "^2.0.1"
"@hookform/resolvers@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.0.0.tgz#bb9346f1550a472a980af5b08e549366c788ff76"
integrity sha512-SQPefakODpyq25b/phHXDKCdRrEfPcCXV7B4nAa139wE1DxufYbbNAjeo0T04ZXBokRxZ+wD8iA1kkVMa3QwjQ==
"@humanwhocodes/config-array@^0.11.8":
version "0.11.8"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@ -14545,6 +14550,11 @@ react-helmet@^6.1.0:
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-hook-form@^7.43.8:
version "7.43.8"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.8.tgz#189fe4fb31e15c280b529cc3041249ed12108d75"
integrity sha512-BQm+Ge5KjTk1EchDBRhdP8Pkb7MArO2jFF+UWYr3rtvh6197khi22uloLqlWeuY02ItlCzPunPsFt1/q9wQKnw==
react-hot-toast@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.0.tgz#b91e7a4c1b6e3068fc599d3d83b4fb48668ae51d"