Merge branch 'edit-group-page' into 'develop'

Edit group page

See merge request soapbox-pub/soapbox!2389

.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/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>
   );

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,

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

@@ -0,0 +1,184 @@
+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 { 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 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 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
+        ref={ref}
+        name='avatar'
+        type='file'
+        accept={accept}
+        onChange={onChange}
+        disabled={disabled}
+        className='hidden'
+      />
+    </label>
+  );
+});
+
+interface IEditGroup {
+  params: {
+    id: string
+  }
+}
+
+const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
+  const intl = useIntl();
+  const instance = useInstance();
+
+  const { group, isLoading } = useGroup(groupId);
+  const { updateGroup } = useUpdateGroup(groupId);
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const avatar = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) });
+  const header = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) });
+
+  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']));
+
+  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 handleSubmit() {
+    setIsSubmitting(true);
+
+    await updateGroup({
+      display_name: displayName.value,
+      note: note.value,
+      avatar: avatar.file,
+      header: header.file,
+    });
+
+    setIsSubmitting(false);
+  }
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Form onSubmit={handleSubmit}>
+        <div className='relative mb-12 flex'>
+          <HeaderPicker accept={attachmentTypes} disabled={isSubmitting} {...header} />
+          <AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatar} />
+        </div>
+        <FormGroup
+          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'
+            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
+          labelText={<FormattedMessage id='manage_group.fields.description_label' defaultMessage='Description' />}
+        >
+          <Textarea
+            autoComplete='off'
+            placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
+            maxLength={maxNote}
+            {...note}
+          />
+        </FormGroup>
+
+        <FormActions>
+          <Button theme='primary' type='submit' disabled={isSubmitting} block>
+            <FormattedMessage id='edit_profile.save' defaultMessage='Save' />
+          </Button>
+        </FormActions>
+      </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');
 }

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

@@ -11,3 +11,4 @@ export { useGroupValidation } from './groups/useGroupValidation';
 export { useJoinGroup } from './groups/useJoinGroup';
 export { useLeaveGroup } from './groups/useLeaveGroup';
 export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
+export { useUpdateGroup } from './groups/useUpdateGroup';

app/soapbox/hooks/forms/index.ts

@@ -0,0 +1,3 @@
+export { useImageField } from './useImageField';
+export { useTextField } from './useTextField';
+export { usePreview } from './usePreview';

app/soapbox/hooks/forms/useImageField.ts

@@ -0,0 +1,38 @@
+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
+}
+
+/** 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> = 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);
+    }
+  };
+
+  return {
+    src,
+    file,
+    onChange,
+  };
+}
+
+export { useImageField };
+export type { UseImageFieldOpts };

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

app/soapbox/hooks/forms/useTextField.ts

@@ -0,0 +1,27 @@
+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';
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
+    setValue(e.target.value);
+  };
+
+  useEffect(() => {
+    if (hasInitialValue) {
+      setValue(initialValue);
+    }
+  }, [hasInitialValue]);
+
+  return {
+    value: value || '',
+    onChange,
+  };
+}
+
+export { useTextField };

app/soapbox/locales/en.json

@@ -943,10 +943,12 @@
   "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_help": "This cannot be changed after the group is created.",
   "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",