ComposeModal: allow passing a composeId

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,

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 (

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<IComposeModal> = ({ onClose }) => {
+const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-modal' }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const node = useRef<HTMLDivElement>(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<IComposeModal> = ({ onClose }) => {
         'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
       })}
     >
-      <ComposeForm id='compose-modal' />
+      <ComposeForm id={composeId} />
     </Modal>
   );
 };