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: [ polyfills: [
'es:all', // core-js 'es:all', // core-js
'fetch', // not polyfilled, but ignore it
'IntersectionObserver', // npm:intersection-observer 'IntersectionObserver', // npm:intersection-observer
'Promise', // core-js 'Promise', // core-js
'ResizeObserver', // npm:resize-observer-polyfill 'ResizeObserver', // npm:resize-observer-polyfill

Wyświetl plik

@ -1,22 +1,22 @@
import clsx from 'clsx'; 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 { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import {
changeGroupEditorTitle,
changeGroupEditorDescription,
changeGroupEditorMedia,
} from 'soapbox/actions/groups';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { Avatar, Column, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui'; import { Avatar, Button, Column, Form, FormActions, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks'; import { useAppSelector, useInstance } from 'soapbox/hooks';
import { useGroup, useUpdateGroup } from 'soapbox/hooks/api';
import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts'; import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
import resizeImage from 'soapbox/utils/resize-image'; import resizeImage from 'soapbox/utils/resize-image';
import type { List as ImmutableList } from 'immutable'; 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 { interface IMediaInput {
src: string | null src: string | undefined
accept: string accept: string
onChange: React.ChangeEventHandler<HTMLInputElement> onChange: React.ChangeEventHandler<HTMLInputElement>
disabled: boolean disabled: boolean
@ -28,7 +28,7 @@ const messages = defineMessages({
groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' }, 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 ( return (
<label <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' 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> </Text>
<input <input
ref={ref}
name='header' name='header'
type='file' type='file'
accept={accept} accept={accept}
@ -62,9 +63,9 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
</HStack> </HStack>
</label> </label>
); );
}; });
const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => { const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return ( 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'> <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} />} {src && <Avatar src={src} size={80} />}
@ -83,6 +84,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
</HStack> </HStack>
<span className='sr-only'>Upload avatar</span> <span className='sr-only'>Upload avatar</span>
<input <input
ref={ref}
name='avatar' name='avatar'
type='file' type='file'
accept={accept} accept={accept}
@ -92,68 +94,63 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
/> />
</label> </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 intl = useIntl();
const dispatch = useAppDispatch();
const instance = useInstance(); const instance = useInstance();
const groupId = useAppSelector((state) => state.group_editor.groupId); const { group } = useGroup(groupId);
const isUploading = useAppSelector((state) => state.group_editor.isUploading); const { updateGroup } = useUpdateGroup(groupId);
const name = useAppSelector((state) => state.group_editor.displayName);
const description = useAppSelector((state) => state.group_editor.note);
const [avatarSrc, setAvatarSrc] = useState<string | null>(null); const maxName = Number(instance.configuration.getIn(['groups', 'max_characters_name']));
const [headerSrc, setHeaderSrc] = useState<string | null>(null); 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( const attachmentTypes = useAppSelector(
state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>, state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>,
)?.filter(type => type.startsWith('image/')).toArray().join(','); )?.filter(type => type.startsWith('image/')).toArray().join(',');
const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => { async function onSubmit(data: EditGroupForm) {
dispatch(changeGroupEditorTitle(target.value)); const avatar = data.avatar?.item(0);
}; const header = data.header?.item(0);
const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => { await updateGroup({
dispatch(changeGroupEditorDescription(target.value)); display_name: data.display_name,
}; note: data.note,
avatar: avatar ? await resizeImage(avatar, 400 * 400) : undefined,
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = e => { header: header ? await resizeImage(header, 1920 * 1080) : undefined,
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);
}); });
}, [groupId]); }
return ( return (
<Column label={intl.formatMessage(messages.heading)}> <Column label={intl.formatMessage(messages.heading)}>
<Form> <Form onSubmit={handleSubmit(onSubmit)}>
<div className='relative mb-12 flex'> <div className='relative mb-12 flex'>
<HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} /> <HeaderPicker src={headerSrc} accept={attachmentTypes} disabled={isSubmitting} {...register('header')} />
<AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} /> <AvatarPicker src={avatarSrc} accept={attachmentTypes} disabled={isSubmitting} {...register('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)' />}
@ -161,9 +158,7 @@ const EditGroup = () => {
<Input <Input
type='text' type='text'
placeholder={intl.formatMessage(messages.groupNamePlaceholder)} placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
value={name} {...register('display_name', { maxLength: maxName })}
onChange={onChangeName}
maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
/> />
</FormGroup> </FormGroup>
<FormGroup <FormGroup
@ -172,14 +167,26 @@ const EditGroup = () => {
<Textarea <Textarea
autoComplete='off' autoComplete='off'
placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)} placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
value={description} {...register('note', { maxLength: maxNote })}
onChange={onChangeDescription}
maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_description']))}
/> />
</FormGroup> </FormGroup>
<FormActions>
<Button theme='primary' type='submit' disabled={isSubmitting} block>
<FormattedMessage id='edit_profile.save' defaultMessage='Save' />
</Button>
</FormActions>
</Form> </Form>
</Column> </Column>
); );
}; };
function usePreview(file: File | null | undefined): string | undefined {
return useMemo(() => {
if (file) {
return URL.createObjectURL(file);
}
}, [file]);
}
export default EditGroup; 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 { useJoinGroup } from './groups/useJoinGroup';
export { useLeaveGroup } from './groups/useLeaveGroup'; export { useLeaveGroup } from './groups/useLeaveGroup';
export { usePromoteGroupMember } from './groups/usePromoteGroupMember'; export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
export { useUpdateGroup } from './groups/useUpdateGroup';

Wyświetl plik

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

Wyświetl plik

@ -1959,6 +1959,11 @@
qs "^6.10.1" qs "^6.10.1"
xcase "^2.0.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": "@humanwhocodes/config-array@^0.11.8":
version "0.11.8" version "0.11.8"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9" 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-fast-compare "^3.1.1"
react-side-effect "^2.1.0" 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: react-hot-toast@^2.4.0:
version "2.4.0" version "2.4.0"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.0.tgz#b91e7a4c1b6e3068fc599d3d83b4fb48668ae51d" resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.0.tgz#b91e7a4c1b6e3068fc599d3d83b4fb48668ae51d"