Merge branch 'streak-modal-compose-box' into 'main'

Fix streak modal not appearing on compose form

Closes #1820

See merge request soapbox-pub/soapbox!3348

src/features/compose/components/compose-form.tsx

@@ -29,6 +29,7 @@ import { useCompose } from 'soapbox/hooks/useCompose.ts';
 import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
 
 import QuotedStatusContainer from '../containers/quoted-status-container.tsx';
@@ -73,10 +74,12 @@ interface IComposeForm<ID extends string> {
   event?: string;
   group?: string;
   extra?: React.ReactNode;
-  streak?: number;
 }
 
-const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, extra, streak }: IComposeForm<ID>) => {
+const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, extra }: IComposeForm<ID>) => {
+  const { account } = useOwnAccount();
+  const userStreak = account?.ditto.streak.days;
+
   const history = useHistory();
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -158,7 +161,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     dispatch(changeCompose(id, text));
     dispatch(submitCompose(id, { history }));
 
-    if (streak === 0 && features.streak) {
+    if (userStreak === 0 && features.streak) {
       dispatch(openModal('STREAK'));
     }
 

src/features/ui/components/modals/compose-modal.tsx

@@ -15,7 +15,6 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useCompose } from 'soapbox/hooks/useCompose.ts';
 import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
-import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import ComposeForm from '../../../compose/components/compose-form.tsx';
 
@@ -34,7 +33,6 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
   const dispatch = useAppDispatch();
   const node = useRef<HTMLDivElement>(null);
   const compose = useCompose(composeId);
-  const { account } = useOwnAccount();
 
   const { id: statusId, privacy, in_reply_to: inReplyTo, quote, group_id: groupId } = compose!;
 
@@ -42,8 +40,6 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
     dispatch(uploadCompose(composeId, files, intl));
   });
 
-  const userStreak = account?.ditto.streak.days;
-
   const onClickClose = () => {
     if (checkComposeContent(compose)) {
       dispatch(openModal('CONFIRM', {
@@ -97,7 +93,6 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
         id={composeId}
         extra={<ComposeFormGroupToggle composeId={composeId} groupId={groupId} />}
         autoFocus
-        streak={userStreak}
       />
     </Modal>
   );