diff --git a/app/soapbox/actions/groups.ts b/app/soapbox/actions/groups.ts index 08039166fd..630c7a8767 100644 --- a/app/soapbox/actions/groups.ts +++ b/app/soapbox/actions/groups.ts @@ -148,6 +148,8 @@ const createGroup = (params: Record, 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)); } }; diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx index 4795f11d3f..dceaf92143 100644 --- a/app/soapbox/components/ui/stack/stack.tsx +++ b/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', }; diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx index 22fe726b0e..2863060c55 100644 --- a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx +++ b/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 = ({ onClose }) => { const dispatch = useAppDispatch(); const id = useAppSelector((state) => state.group_editor.groupId); + const [group, setGroup] = useState(null); const isSubmitting = useAppSelector((state) => state.group_editor.isSubmitting); @@ -47,7 +48,7 @@ const ManageGroupModal: React.FC = ({ onClose }) => { }; const handleSubmit = () => { - dispatch(submitGroupEditor(true)); + return dispatch(submitGroupEditor(true)); }; const confirmationText = useMemo(() => { @@ -67,8 +68,12 @@ const ManageGroupModal: React.FC = ({ onClose }) => { setCurrentStep(Steps.TWO); break; case Steps.TWO: - handleSubmit(); - setCurrentStep(Steps.THREE); + handleSubmit() + .then((group) => { + setCurrentStep(Steps.THREE); + setGroup(group); + }) + .catch(() => {}); break; case Steps.THREE: handleClose(); @@ -92,7 +97,8 @@ const ManageGroupModal: React.FC = ({ onClose }) => { onClose={handleClose} > - + {/* @ts-ignore */} + ); diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx index f0fa85cf91..7321734cfc 100644 --- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx +++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx @@ -1,162 +1,42 @@ -import clsx from 'clsx'; -import React, { useEffect, useState } from 'react'; -import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import React from 'react'; +import { FormattedMessage } from 'react-intl'; -import { - 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 { Avatar, Divider, Stack, Text } from 'soapbox/components/ui'; -import type { List as ImmutableList } from 'immutable'; - -interface IMediaInput { - src: string | null - accept: string - onChange: React.ChangeEventHandler - disabled: boolean +interface IConfirmationStep { + group: any } -const messages = defineMessages({ - groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' }, - groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' }, -}); - -const HeaderPicker: React.FC = ({ src, onChange, accept, disabled }) => { +const ConfirmationStep: React.FC = ({ group }) => { return ( - - ); -}; + + {group.display_name} + {group.note} + + -const AvatarPicker: React.FC = ({ src, onChange, accept, disabled }) => { - return ( - - ); -}; - -const ConfirmationStep = () => { - 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(null); - const [headerSrc, setHeaderSrc] = useState(null); - - const attachmentTypes = useAppSelector( - state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList, - )?.filter(type => type.startsWith('image/')).toArray().join(','); - - const onChangeName: React.ChangeEventHandler = ({ target }) => { - dispatch(changeGroupEditorTitle(target.value)); - }; - - const onChangeDescription: React.ChangeEventHandler = ({ target }) => { - dispatch(changeGroupEditorDescription(target.value)); - }; - - const handleFileChange: React.ChangeEventHandler = 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 ( -
-
- - -
- You're all set! + + +
-
+ ); };