From d564728117b154b192fb1f6e34a0ac73491eaab5 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 23 May 2023 09:39:37 -0400
Subject: [PATCH] Add Group context to reply modal

---
 .../compose/components/compose-form.tsx       |  3 ++
 .../components/reply-group-indicator.tsx      | 42 +++++++++++++++++++
 app/soapbox/locales/en.json                   |  1 +
 3 files changed, 46 insertions(+)
 create mode 100644 app/soapbox/features/compose/components/reply-group-indicator.tsx

diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index 92364b7b0..ceea75951 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -31,6 +31,7 @@ import MarkdownButton from './markdown-button';
 import PollButton from './poll-button';
 import PollForm from './polls/poll-form';
 import PrivacyDropdown from './privacy-dropdown';
+import ReplyGroupIndicator from './reply-group-indicator';
 import ReplyMentions from './reply-mentions';
 import ScheduleButton from './schedule-button';
 import SpoilerButton from './spoiler-button';
@@ -295,6 +296,8 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
       <WarningContainer composeId={id} />
 
+      {!shouldCondense && !event && !group && groupId && <ReplyGroupIndicator composeId={id} />}
+
       {!shouldCondense && !event && !group && <ReplyIndicatorContainer composeId={id} />}
 
       {!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}
diff --git a/app/soapbox/features/compose/components/reply-group-indicator.tsx b/app/soapbox/features/compose/components/reply-group-indicator.tsx
new file mode 100644
index 000000000..bc808dc5a
--- /dev/null
+++ b/app/soapbox/features/compose/components/reply-group-indicator.tsx
@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Link from 'soapbox/components/link';
+import { Text } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { Group } from 'soapbox/schemas';
+import { makeGetStatus } from 'soapbox/selectors';
+
+interface IReplyGroupIndicator {
+  composeId: string
+}
+
+const ReplyGroupIndicator = (props: IReplyGroupIndicator) => {
+  const { composeId } = props;
+
+  const getStatus = useCallback(makeGetStatus(), []);
+
+  const status = useAppSelector((state) => getStatus(state, { id: state.compose.get(composeId)?.in_reply_to! }));
+  const group = status?.group as Group;
+
+  if (!group) {
+    return null;
+  }
+
+  return (
+    <Text theme='muted' size='sm'>
+      <FormattedMessage
+        id='compose.reply_group_indicator.message'
+        defaultMessage='Posting to {groupLink}'
+        values={{
+          groupLink: <Link
+            to={`/group/${group.slug}`}
+            dangerouslySetInnerHTML={{ __html: group.display_name_html }}
+          />,
+        }}
+      />
+    </Text>
+  );
+};
+
+export default ReplyGroupIndicator;
\ No newline at end of file
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index f110df907..4a9b1e934 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -388,6 +388,7 @@
   "compose.character_counter.title": "Used {chars} out of {maxChars} {maxChars, plural, one {character} other {characters}}",
   "compose.edit_success": "Your post was edited",
   "compose.invalid_schedule": "You must schedule a post at least 5 minutes out.",
+  "compose.reply_group_indicator.message": "Posting to {groupLink}",
   "compose.submit_success": "Your post was sent!",
   "compose_event.create": "Create",
   "compose_event.edit_success": "Your event was edited",