Groups: scaffold the confirmation step

app/soapbox/actions/groups.ts

@@ -148,6 +148,8 @@ const createGroup = (params: Record<string, any>, shouldReset?: boolean) =>
         if (shouldReset) {
           dispatch(resetGroupEditor());
         }
+
+        return data;
       }).catch(err => dispatch(createGroupFail(err)));
   };
 
@@ -868,9 +870,9 @@ const submitGroupEditor = (shouldReset?: boolean) => (dispatch: AppDispatch, get
   if (header) params.header = header;
 
   if (groupId === null) {
-    dispatch(createGroup(params, shouldReset));
+    return dispatch(createGroup(params, shouldReset));
   } else {
-    dispatch(updateGroup(groupId, params, shouldReset));
+    return dispatch(updateGroup(groupId, params, shouldReset));
   }
 };
 

app/soapbox/components/ui/stack/stack.tsx

@@ -11,6 +11,7 @@ const spaces = {
   4: 'space-y-4',
   5: 'space-y-5',
   6: 'space-y-6',
+  9: 'space-y-9',
   10: 'space-y-10',
 };
 

app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { resetGroupEditor, submitGroupEditor } from 'soapbox/actions/groups';
+import { submitGroupEditor } from 'soapbox/actions/groups';
 import { Modal, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
@@ -37,6 +37,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
   const dispatch = useAppDispatch();
 
   const id = useAppSelector((state) => state.group_editor.groupId);
+  const [group, setGroup] = useState<any | null>(null);
 
   const isSubmitting = useAppSelector((state) => state.group_editor.isSubmitting);
 
@@ -47,7 +48,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
   };
 
   const handleSubmit = () => {
-    dispatch(submitGroupEditor(true));
+    return dispatch(submitGroupEditor(true));
   };
 
   const confirmationText = useMemo(() => {
@@ -67,8 +68,12 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
         setCurrentStep(Steps.TWO);
         break;
       case Steps.TWO:
-        handleSubmit();
+        handleSubmit()
+          .then((group) => {
             setCurrentStep(Steps.THREE);
+            setGroup(group);
+          })
+          .catch(() => {});
         break;
       case Steps.THREE:
         handleClose();
@@ -92,7 +97,8 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
       onClose={handleClose}
     >
       <Stack space={2}>
-        <StepToRender />
+        {/* @ts-ignore */}
+        <StepToRender group={group} />
       </Stack>
     </Modal>
   );

app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx

@@ -1,162 +1,42 @@
-import clsx from 'clsx';
+import React from 'react';
-import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import {
+import { Avatar, Divider, Stack, Text } from 'soapbox/components/ui';
-  changeGroupEditorTitle,
-  changeGroupEditorDescription,
-  changeGroupEditorMedia,
-} from 'soapbox/actions/groups';
-import Icon from 'soapbox/components/icon';
-import { Avatar, 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 IConfirmationStep {
-
+  group: any
-interface IMediaInput {
-  src: string | null
-  accept: string
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  disabled: boolean
 }
 
-const messages = defineMessages({
+const ConfirmationStep: React.FC<IConfirmationStep> = ({ 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 (
+    <Stack space={9}>
+      <Stack space={3}>
+        <Stack>
           <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='' />}
+            {group.header && <img className='h-full w-full object-cover' src={group.header} 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 }) => {
+          <label className='mx-auto -mt-10 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
-  return (
+            {group.avatar && <Avatar src={group.avatar} size={80} />}
-    <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>
-  );
+        </Stack>
-};
 
-const ConfirmationStep = () => {
+        <Stack>
-  const intl = useIntl();
+          <Text size='2xl' weight='bold' align='center'>{group.display_name}</Text>
-  const dispatch = useAppDispatch();
+          <Text size='md' className='mx-auto max-w-sm'>{group.note}</Text>
-  const instance = useInstance();
+        </Stack>
+      </Stack>
 
-  const groupId = useAppSelector((state) => state.group_editor.groupId);
+      <Divider />
-  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 (
-    <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>
       <div>
-        <Text size='2xl'>You're all set!</Text>
+        <Text size='3xl' weight='bold' align='center'>
+          <FormattedMessage id='manage_group.confirmation.title' defaultMessage='You’re all set!' />
+        </Text>
       </div>
-    </Form>
+    </Stack>
   );
 };