Boilerplate Edit Group page by copying code from the modal

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;

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>

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} />}

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');
 }