Make EditGroup page work, pretty much

.eslintrc.cjs

@@ -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

app/soapbox/features/group/edit-group.tsx

@@ -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 { 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 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 { 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(
     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 }) => {
+  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 (
     <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} />
+          <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>
         <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}
+            {...register('display_name', { maxLength: maxName })}
-            onChange={onChangeName}
-            maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
           />
         </FormGroup>
         <FormGroup
@@ -172,14 +167,26 @@ const EditGroup = () => {
           <Textarea
             autoComplete='off'
             placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
-            value={description}
+            {...register('note', { maxLength: maxNote })}
-            onChange={onChangeDescription}
-            maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_description']))}
           />
         </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;

app/soapbox/hooks/api/groups/useUpdateGroup.ts

@@ -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 };

app/soapbox/hooks/api/index.ts

@@ -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';

package.json

@@ -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",

yarn.lock

@@ -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"