From bfd40fa3733bfbf6cf9889c4529fa5aa95242b4b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 14:51:29 -0500
Subject: [PATCH 1/9] Boilerplate Edit Group page by copying code from the
 modal

---
 app/soapbox/features/group/edit-group.tsx     | 185 ++++++++++++++++++
 app/soapbox/features/group/manage-group.tsx   |   7 +-
 app/soapbox/features/ui/index.tsx             |   2 +
 .../features/ui/util/async-components.ts      |   4 +
 4 files changed, 193 insertions(+), 5 deletions(-)
 create mode 100644 app/soapbox/features/group/edit-group.tsx

diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
new file mode 100644
index 000000000..1b6f62fc4
--- /dev/null
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -0,0 +1,185 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+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 { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
+import resizeImage from 'soapbox/utils/resize-image';
+
+import type { List as ImmutableList } from 'immutable';
+
+interface IMediaInput {
+  src: string | null
+  accept: string
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  disabled: boolean
+}
+
+const messages = defineMessages({
+  heading: { id: 'navigation_bar.edit_group', defaultMessage: 'Edit Group' },
+  groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
+  groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
+});
+
+const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
+  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'
+    >
+      {src && <img className='h-full w-full object-cover' src={src} alt='' />}
+      <HStack
+        className={clsx('absolute top-0 h-full w-full transition-opacity', {
+          'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
+        })}
+        space={1.5}
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Icon
+          src={require('@tabler/icons/photo-plus.svg')}
+          className='h-4.5 w-4.5'
+        />
+
+        <Text size='md' theme='primary' weight='semibold'>
+          <FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
+        </Text>
+
+        <input
+          name='header'
+          type='file'
+          accept={accept}
+          onChange={onChange}
+          disabled={disabled}
+          className='hidden'
+        />
+      </HStack>
+    </label>
+  );
+};
+
+const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
+  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} />}
+      <HStack
+        alignItems='center'
+        justifyContent='center'
+
+        className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
+          'opacity-0 hover:opacity-90 bg-primary-500': src,
+        })}
+      >
+        <Icon
+          src={require('@tabler/icons/camera-plus.svg')}
+          className='h-5 w-5 text-white'
+        />
+      </HStack>
+      <span className='sr-only'>Upload avatar</span>
+      <input
+        name='avatar'
+        type='file'
+        accept={accept}
+        onChange={onChange}
+        disabled={disabled}
+        className='hidden'
+      />
+    </label>
+  );
+};
+
+const EditGroup = () => {
+  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 [avatarSrc, setAvatarSrc] = useState<string | null>(null);
+  const [headerSrc, setHeaderSrc] = useState<string | null>(null);
+
+  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));
+  };
+
+  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);
+    });
+  }, [groupId]);
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Form>
+        <div className='relative mb-12 flex'>
+          <HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
+          <AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
+        </div>
+        <FormGroup
+          labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
+        >
+          <Input
+            type='text'
+            placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
+            value={name}
+            onChange={onChangeName}
+            maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
+          />
+        </FormGroup>
+        <FormGroup
+          labelText={<FormattedMessage id='manage_group.fields.description_label' defaultMessage='Description' />}
+        >
+          <Textarea
+            autoComplete='off'
+            placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
+            value={description}
+            onChange={onChangeDescription}
+            maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_description']))}
+          />
+        </FormGroup>
+      </Form>
+    </Column>
+  );
+};
+
+export default EditGroup;
diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx
index 1eb94f379..012f762f5 100644
--- a/app/soapbox/features/group/manage-group.tsx
+++ b/app/soapbox/features/group/manage-group.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { editGroup } from 'soapbox/actions/groups';
 import { openModal } from 'soapbox/actions/modals';
 import List, { ListItem } from 'soapbox/components/list';
 import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui';
@@ -58,9 +57,6 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
     return (<ColumnForbidden />);
   }
 
-  const onEditGroup = () =>
-    dispatch(editGroup(group));
-
   const onDeleteGroup = () =>
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/trash.svg'),
@@ -77,6 +73,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
       },
     }));
 
+  const navigateToEdit = () => history.push(`/groups/${id}/manage/edit`);
   const navigateToPending = () => history.push(`/groups/${id}/manage/requests`);
   const navigateToBlocks = () => history.push(`/groups/${id}/manage/blocks`);
 
@@ -90,7 +87,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
             </CardHeader>
 
             <List>
-              <ListItem label={intl.formatMessage(messages.editGroup)} onClick={onEditGroup}>
+              <ListItem label={intl.formatMessage(messages.editGroup)} onClick={navigateToEdit}>
                 <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
               </ListItem>
             </List>
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 0e8875c09..4fd8d9394 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -127,6 +127,7 @@ import {
   GroupBlockedMembers,
   GroupMembershipRequests,
   Announcements,
+  EditGroup,
 } from './util/async-components';
 import { WrappedRoute } from './util/react-router-helpers';
 
@@ -297,6 +298,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.groups && <WrappedRoute path='/groups/:id' exact page={GroupPage} component={GroupTimeline} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/members' exact page={GroupPage} component={GroupMembers} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage' exact page={DefaultPage} component={ManageGroup} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:id/manage/edit' exact page={DefaultPage} component={EditGroup} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage/blocks' exact page={DefaultPage} component={GroupBlockedMembers} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage/requests' exact page={DefaultPage} component={GroupMembershipRequests} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:groupId/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 78f81cc20..017776792 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -578,6 +578,10 @@ export function ManageGroup() {
   return import(/* webpackChunkName: "features/groups" */'../../group/manage-group');
 }
 
+export function EditGroup() {
+  return import(/* webpackChunkName: "features/groups" */'../../group/edit-group');
+}
+
 export function GroupBlockedMembers() {
   return import(/* webpackChunkName: "features/groups" */'../../group/group-blocked-members');
 }

From eb6c82a867da1c98a2f4f43a74bc96e65a5ab905 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 19:18:20 -0500
Subject: [PATCH 2/9] Make EditGroup page work, pretty much

---
 .eslintrc.cjs                                 |   1 +
 app/soapbox/features/group/edit-group.tsx     | 135 +++++++++---------
 .../hooks/api/groups/useUpdateGroup.ts        |  33 +++++
 app/soapbox/hooks/api/index.ts                |   1 +
 package.json                                  |   2 +
 yarn.lock                                     |  10 ++
 6 files changed, 118 insertions(+), 64 deletions(-)
 create mode 100644 app/soapbox/hooks/api/groups/useUpdateGroup.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 953c7e252..786d52d13 100644
--- a/.eslintrc.cjs
+++ b/.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
diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index 1b6f62fc4..001a8b1ab 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/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 { 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;
diff --git a/app/soapbox/hooks/api/groups/useUpdateGroup.ts b/app/soapbox/hooks/api/groups/useUpdateGroup.ts
new file mode 100644
index 000000000..bb3a37dc2
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/app/soapbox/hooks/api/index.ts b/app/soapbox/hooks/api/index.ts
index b70314633..67b2634b9 100644
--- a/app/soapbox/hooks/api/index.ts
+++ b/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';
\ No newline at end of file
diff --git a/package.json b/package.json
index 079f2173f..1b543c8d5 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 12eb37b1c..be180c783 100644
--- a/yarn.lock
+++ b/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"

From eb055339d8e380c58df40df913f1ebefc08bb7ae Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 19:54:35 -0500
Subject: [PATCH 3/9] react-hook-form SUX

---
 app/soapbox/features/group/edit-group.tsx | 112 +++++++++++++++-------
 package.json                              |   2 -
 yarn.lock                                 |  10 --
 3 files changed, 79 insertions(+), 45 deletions(-)

diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index 001a8b1ab..c2a38397b 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -1,10 +1,9 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
-import { useForm } from 'react-hook-form';
+import React, { useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
-import { Avatar, Button, Column, Form, FormActions, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
+import { Avatar, Button, Column, Form, FormActions, FormGroup, HStack, Input, Spinner, 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';
@@ -96,13 +95,6 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
   );
 });
 
-interface EditGroupForm {
-  display_name: string
-  note: string
-  avatar?: FileList
-  header?: FileList
-}
-
 interface IEditGroup {
   params: {
     id: string
@@ -113,44 +105,47 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
   const intl = useIntl();
   const instance = useInstance();
 
-  const { group } = useGroup(groupId);
+  const { group, isLoading } = useGroup(groupId);
   const { updateGroup } = useUpdateGroup(groupId);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const avatarField = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) });
+  const headerField = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) });
+
+  const displayNameField = useTextField(group?.display_name);
+  const noteField = useTextField(group?.note);
+
   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(',');
 
-  async function onSubmit(data: EditGroupForm) {
-    const avatar = data.avatar?.item(0);
-    const header = data.header?.item(0);
+  async function handleSubmit() {
+    setIsSubmitting(true);
 
     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,
+      display_name: displayNameField.value,
+      note: noteField.value,
+      avatar: avatarField.file,
+      header: headerField.file,
     });
+
+    setIsSubmitting(false);
+  }
+
+  if (isLoading) {
+    return <Spinner />;
   }
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form onSubmit={handleSubmit}>
         <div className='relative mb-12 flex'>
-          <HeaderPicker src={headerSrc} accept={attachmentTypes} disabled={isSubmitting} {...register('header')} />
-          <AvatarPicker src={avatarSrc} accept={attachmentTypes} disabled={isSubmitting} {...register('avatar')} />
+          <HeaderPicker accept={attachmentTypes} disabled={isSubmitting} {...headerField} />
+          <AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatarField} />
         </div>
         <FormGroup
           labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
@@ -158,7 +153,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
           <Input
             type='text'
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
-            {...register('display_name', { maxLength: maxName })}
+            {...displayNameField}
+            maxLength={maxName}
           />
         </FormGroup>
         <FormGroup
@@ -167,7 +163,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
           <Textarea
             autoComplete='off'
             placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
-            {...register('note', { maxLength: maxNote })}
+            {...noteField}
+            maxLength={maxNote}
           />
         </FormGroup>
 
@@ -189,4 +186,53 @@ function usePreview(file: File | null | undefined): string | undefined {
   }, [file]);
 }
 
+function useTextField(initialValue: string | undefined) {
+  const [value, setValue] = useState(initialValue);
+  const hasInitialValue = typeof initialValue === 'string';
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
+    setValue(e.target.value);
+  };
+
+  useEffect(() => {
+    if (hasInitialValue) {
+      setValue(initialValue);
+    }
+  }, [hasInitialValue]);
+
+  return {
+    value,
+    onChange,
+  };
+}
+
+interface UseImageFieldOpts {
+  maxPixels?: number
+  preview?: string
+}
+
+function useImageField(opts: UseImageFieldOpts = {}) {
+  const [file, setFile] = useState<File>();
+  const src = usePreview(file) || opts.preview;
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = ({ target: { files } }) => {
+    const file = files?.item(0) || undefined;
+    if (file) {
+      if (typeof opts.maxPixels === 'number') {
+        resizeImage(file, opts.maxPixels)
+          .then((f) => setFile(f))
+          .catch(console.error);
+      } else {
+        setFile(file);
+      }
+    }
+  };
+
+  return {
+    src,
+    file,
+    onChange,
+  };
+}
+
 export default EditGroup;
diff --git a/package.json b/package.json
index 1b543c8d5..079f2173f 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,6 @@
     "@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",
@@ -148,7 +147,6 @@
     "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",
diff --git a/yarn.lock b/yarn.lock
index be180c783..12eb37b1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1959,11 +1959,6 @@
     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"
@@ -14550,11 +14545,6 @@ 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"

From f3727440ff7d25fbd17883bcf667b14487555927 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 20:14:41 -0500
Subject: [PATCH 4/9] Move form hooks into their own files

---
 app/soapbox/features/group/edit-group.tsx | 61 +----------------------
 app/soapbox/hooks/forms/index.ts          |  3 ++
 app/soapbox/hooks/forms/useImageField.ts  | 40 +++++++++++++++
 app/soapbox/hooks/forms/usePreview.ts     | 12 +++++
 app/soapbox/hooks/forms/useTextField.ts   | 23 +++++++++
 5 files changed, 80 insertions(+), 59 deletions(-)
 create mode 100644 app/soapbox/hooks/forms/index.ts
 create mode 100644 app/soapbox/hooks/forms/useImageField.ts
 create mode 100644 app/soapbox/hooks/forms/usePreview.ts
 create mode 100644 app/soapbox/hooks/forms/useTextField.ts

diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index c2a38397b..da2a01666 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
 import { Avatar, Button, Column, Form, FormActions, FormGroup, HStack, Input, Spinner, Text, Textarea } from 'soapbox/components/ui';
 import { useAppSelector, useInstance } from 'soapbox/hooks';
 import { useGroup, useUpdateGroup } from 'soapbox/hooks/api';
+import { useImageField, useTextField } from 'soapbox/hooks/forms';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
-import resizeImage from 'soapbox/utils/resize-image';
 
 import type { List as ImmutableList } from 'immutable';
 
@@ -178,61 +178,4 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
   );
 };
 
-function usePreview(file: File | null | undefined): string | undefined {
-  return useMemo(() => {
-    if (file) {
-      return URL.createObjectURL(file);
-    }
-  }, [file]);
-}
-
-function useTextField(initialValue: string | undefined) {
-  const [value, setValue] = useState(initialValue);
-  const hasInitialValue = typeof initialValue === 'string';
-
-  const onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
-    setValue(e.target.value);
-  };
-
-  useEffect(() => {
-    if (hasInitialValue) {
-      setValue(initialValue);
-    }
-  }, [hasInitialValue]);
-
-  return {
-    value,
-    onChange,
-  };
-}
-
-interface UseImageFieldOpts {
-  maxPixels?: number
-  preview?: string
-}
-
-function useImageField(opts: UseImageFieldOpts = {}) {
-  const [file, setFile] = useState<File>();
-  const src = usePreview(file) || opts.preview;
-
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = ({ target: { files } }) => {
-    const file = files?.item(0) || undefined;
-    if (file) {
-      if (typeof opts.maxPixels === 'number') {
-        resizeImage(file, opts.maxPixels)
-          .then((f) => setFile(f))
-          .catch(console.error);
-      } else {
-        setFile(file);
-      }
-    }
-  };
-
-  return {
-    src,
-    file,
-    onChange,
-  };
-}
-
 export default EditGroup;
diff --git a/app/soapbox/hooks/forms/index.ts b/app/soapbox/hooks/forms/index.ts
new file mode 100644
index 000000000..7e2c9e7e1
--- /dev/null
+++ b/app/soapbox/hooks/forms/index.ts
@@ -0,0 +1,3 @@
+export { useImageField } from './useImageField';
+export { useTextField } from './useTextField';
+export { usePreview } from './usePreview';
\ No newline at end of file
diff --git a/app/soapbox/hooks/forms/useImageField.ts b/app/soapbox/hooks/forms/useImageField.ts
new file mode 100644
index 000000000..d719653f1
--- /dev/null
+++ b/app/soapbox/hooks/forms/useImageField.ts
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import resizeImage from 'soapbox/utils/resize-image';
+
+import { usePreview } from './usePreview';
+
+interface UseImageFieldOpts {
+  /** Resize the image to the max dimensions, if defined. */
+  maxPixels?: number
+  /** Fallback URL before a file is uploaded. */
+  preview?: string
+}
+
+/** Handle image, and optionally resize it. */
+function useImageField(opts: UseImageFieldOpts = {}) {
+  const [file, setFile] = useState<File>();
+  const src = usePreview(file) || opts.preview;
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = ({ target: { files } }) => {
+    const file = files?.item(0) || undefined;
+    if (file) {
+      if (typeof opts.maxPixels === 'number') {
+        resizeImage(file, opts.maxPixels)
+          .then((f) => setFile(f))
+          .catch(console.error);
+      } else {
+        setFile(file);
+      }
+    }
+  };
+
+  return {
+    src,
+    file,
+    onChange,
+  };
+}
+
+export { useImageField };
+export type { UseImageFieldOpts };
\ No newline at end of file
diff --git a/app/soapbox/hooks/forms/usePreview.ts b/app/soapbox/hooks/forms/usePreview.ts
new file mode 100644
index 000000000..272ea696e
--- /dev/null
+++ b/app/soapbox/hooks/forms/usePreview.ts
@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+
+/** Return a preview URL for a file. */
+function usePreview(file: File | null | undefined): string | undefined {
+  return useMemo(() => {
+    if (file) {
+      return URL.createObjectURL(file);
+    }
+  }, [file]);
+}
+
+export { usePreview };
\ No newline at end of file
diff --git a/app/soapbox/hooks/forms/useTextField.ts b/app/soapbox/hooks/forms/useTextField.ts
new file mode 100644
index 000000000..7354f58c7
--- /dev/null
+++ b/app/soapbox/hooks/forms/useTextField.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+function useTextField(initialValue: string | undefined) {
+  const [value, setValue] = useState(initialValue);
+  const hasInitialValue = typeof initialValue === 'string';
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
+    setValue(e.target.value);
+  };
+
+  useEffect(() => {
+    if (hasInitialValue) {
+      setValue(initialValue);
+    }
+  }, [hasInitialValue]);
+
+  return {
+    value,
+    onChange,
+  };
+}
+
+export { useTextField };
\ No newline at end of file

From 9e60d90812869784d3603cb16cbddbae86b1064d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 20:29:35 -0500
Subject: [PATCH 5/9] We do a little refactoring

---
 app/soapbox/features/group/edit-group.tsx | 24 +++++++++++------------
 app/soapbox/hooks/forms/useImageField.ts  | 20 +++++++++----------
 app/soapbox/hooks/forms/useTextField.ts   |  6 +++++-
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index da2a01666..88535725d 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -110,11 +110,11 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const avatarField = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) });
-  const headerField = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) });
+  const avatar = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) });
+  const header = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) });
 
-  const displayNameField = useTextField(group?.display_name);
-  const noteField = useTextField(group?.note);
+  const displayName = useTextField(group?.display_name);
+  const note = useTextField(group?.note);
 
   const maxName = Number(instance.configuration.getIn(['groups', 'max_characters_name']));
   const maxNote = Number(instance.configuration.getIn(['groups', 'max_characters_description']));
@@ -127,10 +127,10 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
     setIsSubmitting(true);
 
     await updateGroup({
-      display_name: displayNameField.value,
-      note: noteField.value,
-      avatar: avatarField.file,
-      header: headerField.file,
+      display_name: displayName.value,
+      note: note.value,
+      avatar: avatar.file,
+      header: header.file,
     });
 
     setIsSubmitting(false);
@@ -144,8 +144,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
     <Column label={intl.formatMessage(messages.heading)}>
       <Form onSubmit={handleSubmit}>
         <div className='relative mb-12 flex'>
-          <HeaderPicker accept={attachmentTypes} disabled={isSubmitting} {...headerField} />
-          <AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatarField} />
+          <HeaderPicker accept={attachmentTypes} disabled={isSubmitting} {...header} />
+          <AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatar} />
         </div>
         <FormGroup
           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
             type='text'
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
-            {...displayNameField}
             maxLength={maxName}
+            {...displayName}
           />
         </FormGroup>
         <FormGroup
@@ -163,8 +163,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
           <Textarea
             autoComplete='off'
             placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
-            {...noteField}
             maxLength={maxNote}
+            {...note}
           />
         </FormGroup>
 
diff --git a/app/soapbox/hooks/forms/useImageField.ts b/app/soapbox/hooks/forms/useImageField.ts
index d719653f1..7afe31f87 100644
--- a/app/soapbox/hooks/forms/useImageField.ts
+++ b/app/soapbox/hooks/forms/useImageField.ts
@@ -11,21 +11,19 @@ interface UseImageFieldOpts {
   preview?: string
 }
 
-/** Handle image, and optionally resize it. */
+/** Returns props for `<input type="file">`, and optionally resizes the file. */
 function useImageField(opts: UseImageFieldOpts = {}) {
   const [file, setFile] = useState<File>();
   const src = usePreview(file) || opts.preview;
 
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = ({ target: { files } }) => {
-    const file = files?.item(0) || undefined;
-    if (file) {
-      if (typeof opts.maxPixels === 'number') {
-        resizeImage(file, opts.maxPixels)
-          .then((f) => setFile(f))
-          .catch(console.error);
-      } else {
-        setFile(file);
-      }
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = async ({ target: { files } }) => {
+    const file = files?.item(0);
+    if (!file) return;
+
+    if (typeof opts.maxPixels === 'number') {
+      setFile(await resizeImage(file, opts.maxPixels));
+    } else {
+      setFile(file);
     }
   };
 
diff --git a/app/soapbox/hooks/forms/useTextField.ts b/app/soapbox/hooks/forms/useTextField.ts
index 7354f58c7..a8043611d 100644
--- a/app/soapbox/hooks/forms/useTextField.ts
+++ b/app/soapbox/hooks/forms/useTextField.ts
@@ -1,5 +1,9 @@
 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) {
   const [value, setValue] = useState(initialValue);
   const hasInitialValue = typeof initialValue === 'string';
@@ -15,7 +19,7 @@ function useTextField(initialValue: string | undefined) {
   }, [hasInitialValue]);
 
   return {
-    value,
+    value: value || '',
     onChange,
   };
 }

From 79a33d0f1d3a1745a592e42167a607e2b80969a5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 20:37:22 -0500
Subject: [PATCH 6/9] Input: improve disabled style

---
 app/soapbox/components/ui/input/input.tsx | 4 +++-
 app/soapbox/features/group/edit-group.tsx | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 2de6eb566..bb3f9957d 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -84,8 +84,10 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           type={revealed ? 'text' : type}
           ref={ref}
           className={clsx('text-base placeholder:text-gray-600 dark:placeholder:text-gray-600', {
-            'text-gray-900 dark:text-gray-100 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+            'block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
               ['normal', 'search'].includes(theme),
+            'text-gray-900 dark:text-gray-100': !props.disabled,
+            'text-gray-600': props.disabled,
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
             'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
             'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append,
diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index 88535725d..81ebc5398 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -155,6 +155,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
             maxLength={maxName}
             {...displayName}
+            append={<Icon className='h-5 w-5 text-gray-600' src={require('@tabler/icons/lock.svg')} />}
+            disabled
           />
         </FormGroup>
         <FormGroup

From ddf433a5c96be4c40e6517bb0d06297edce4dfe6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 20:42:57 -0500
Subject: [PATCH 7/9] FormGroup: move hintText above input

---
 app/soapbox/components/ui/form-group/form-group.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index e3c897a6f..7efb60ade 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -86,6 +86,12 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
       )}
 
       <div className='mt-1 dark:text-white'>
+        {hintText && (
+          <p data-testid='form-group-hint' className='mb-0.5 text-xs text-gray-700 dark:text-gray-600'>
+            {hintText}
+          </p>
+        )}
+
         {firstChild}
         {inputChildren.filter((_, i) => i !== 0)}
 
@@ -97,12 +103,6 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
             {errors.join(', ')}
           </p>
         )}
-
-        {hintText && (
-          <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-700 dark:text-gray-600'>
-            {hintText}
-          </p>
-        )}
       </div>
     </div>
   );

From e47b9300f03814bf4f253d69758b32a51f3be2fa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 20:45:40 -0500
Subject: [PATCH 8/9] EditGroup: add "cannot change" hint

---
 app/soapbox/features/group/edit-group.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index 81ebc5398..354901fe4 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -148,7 +148,8 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
           <AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatar} />
         </div>
         <FormGroup
-          labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
+          labelText={<FormattedMessage id='manage_group.fields.name_label_optional' defaultMessage='Group name' />}
+          hintText={<FormattedMessage id='manage_group.fields.cannot_change_hint' defaultMessage='This cannot be changed after the group is created.' />}
         >
           <Input
             type='text'

From 453420796b827fdbceade4ff75a2a7bd20e69139 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 20:49:04 -0500
Subject: [PATCH 9/9] yarn i18n

---
 app/soapbox/locales/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index c37af2b27..eb29f45ec 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -940,9 +940,11 @@
   "manage_group.done": "Done",
   "manage_group.edit_group": "Edit group",
   "manage_group.edit_success": "The group was edited",
+  "manage_group.fields.cannot_change_hint": "This cannot be changed after the group is created.",
   "manage_group.fields.description_label": "Description",
   "manage_group.fields.description_placeholder": "Description",
   "manage_group.fields.name_label": "Group name (required)",
+  "manage_group.fields.name_label_optional": "Group name",
   "manage_group.fields.name_placeholder": "Group Name",
   "manage_group.get_started": "Let’s get started!",
   "manage_group.next": "Next",