EditGroup: move AvatarPicker and HeaderPicker into their own components

app/soapbox/features/group/components/group-avatar-picker.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import Icon from 'soapbox/components/icon';
+import { Avatar, HStack } from 'soapbox/components/ui';
+
+interface IMediaInput {
+  src: string | undefined
+  accept: string
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  disabled: boolean
+}
+
+const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
+  return (
+    <label className='absolute bottom-0 left-1/2 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
+        ref={ref}
+        name='avatar'
+        type='file'
+        accept={accept}
+        onChange={onChange}
+        disabled={disabled}
+        className='hidden'
+      />
+    </label>
+  );
+});
+
+export default AvatarPicker;

app/soapbox/features/group/components/group-header-picker.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Icon from 'soapbox/components/icon';
+import { HStack, Text } from 'soapbox/components/ui';
+
+interface IMediaInput {
+  src: string | undefined
+  accept: string
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  disabled: boolean
+}
+
+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'
+    >
+      {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
+          ref={ref}
+          name='header'
+          type='file'
+          accept={accept}
+          onChange={onChange}
+          disabled={disabled}
+          className='hidden'
+        />
+      </HStack>
+    </label>
+  );
+});
+
+export default HeaderPicker;

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

@@ -1,100 +1,27 @@
-import clsx from 'clsx';
 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 { Button, Column, Form, FormActions, FormGroup, Input, Spinner, 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 AvatarPicker from './components/group-avatar-picker';
+import HeaderPicker from './components/group-header-picker';
+
 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 | undefined
-  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.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'
-    >
-      {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
-          ref={ref}
-          name='header'
-          type='file'
-          accept={accept}
-          onChange={onChange}
-          disabled={disabled}
-          className='hidden'
-        />
-      </HStack>
-    </label>
-  );
-});
-
-const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
-  return (
-    <label className='absolute bottom-0 left-1/2 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
-        ref={ref}
-        name='avatar'
-        type='file'
-        accept={accept}
-        onChange={onChange}
-        disabled={disabled}
-        className='hidden'
-      />
-    </label>
-  );
-});
-
 interface IEditGroup {
   params: {
     id: string