diff --git a/app/soapbox/actions/compose.ts b/app/soapbox/actions/compose.ts index 995f37c15..61303d15b 100644 --- a/app/soapbox/actions/compose.ts +++ b/app/soapbox/actions/compose.ts @@ -22,6 +22,7 @@ import { createStatus } from './statuses'; import type { AutoSuggestion } from 'soapbox/components/autosuggest-input'; import type { Emoji } from 'soapbox/features/emoji'; +import type { Group } from 'soapbox/schemas'; import type { AppDispatch, RootState } from 'soapbox/store'; import type { Account, APIEntity, Status, Tag } from 'soapbox/types/entities'; import type { History } from 'soapbox/types/history'; @@ -168,6 +169,14 @@ const cancelQuoteCompose = () => ({ id: 'compose-modal', }); +const groupComposeModal = (group: Group) => + (dispatch: AppDispatch, getState: () => RootState) => { + const composeId = `group:${group.id}`; + + dispatch(groupCompose(composeId, group.id)); + dispatch(openModal('COMPOSE', { composeId })); + }; + const resetCompose = (composeId = 'compose-modal') => ({ type: COMPOSE_RESET, id: composeId, @@ -829,6 +838,7 @@ export { uploadComposeFail, undoUploadCompose, groupCompose, + groupComposeModal, setGroupTimelineVisible, clearComposeSuggestions, fetchComposeSuggestions, diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx index dc414647b..e16e2713c 100644 --- a/app/soapbox/features/ui/components/compose-button.tsx +++ b/app/soapbox/features/ui/components/compose-button.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useLocation, useRouteMatch } from 'react-router-dom'; +import { groupComposeModal } from 'soapbox/actions/compose'; import { openModal } from 'soapbox/actions/modals'; import { Avatar, Button, HStack } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; @@ -39,7 +40,11 @@ const GroupComposeButton = () => { const match = useRouteMatch<{ groupSlug: string }>('/group/:groupSlug'); const { entity: group } = useGroupLookup(match?.params.groupSlug || ''); - const onOpenCompose = () => dispatch(openModal('COMPOSE')); + const onOpenCompose = () => { + if (group) { + dispatch(groupComposeModal(group)); + } + }; if (group) { return ( diff --git a/app/soapbox/features/ui/components/modals/compose-modal.tsx b/app/soapbox/features/ui/components/modals/compose-modal.tsx index 72a06fb7c..079bedc42 100644 --- a/app/soapbox/features/ui/components/modals/compose-modal.tsx +++ b/app/soapbox/features/ui/components/modals/compose-modal.tsx @@ -18,14 +18,13 @@ const messages = defineMessages({ interface IComposeModal { onClose: (type?: string) => void + composeId?: string } -const ComposeModal: React.FC = ({ onClose }) => { +const ComposeModal: React.FC = ({ onClose, composeId = 'compose-modal' }) => { const intl = useIntl(); const dispatch = useAppDispatch(); const node = useRef(null); - - const composeId = 'compose-modal'; const compose = useCompose(composeId); const { id: statusId, privacy, in_reply_to: inReplyTo, quote } = compose!; @@ -79,7 +78,7 @@ const ComposeModal: React.FC = ({ onClose }) => { 'ring-2 ring-offset-2 ring-primary-600': isDraggedOver, })} > - + ); };