streak start mobile mvp

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

@@ -15,6 +15,7 @@ import {
   selectComposeSuggestion,
   uploadCompose,
 } from 'soapbox/actions/compose.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
 import { useCustomEmojis } from 'soapbox/api/hooks/useCustomEmojis.ts';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
 import Button from 'soapbox/components/ui/button.tsx';
@@ -72,9 +73,10 @@ 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 }: IComposeForm<ID>) => {
+const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, extra, streak }: IComposeForm<ID>) => {
   const history = useHistory();
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -156,6 +158,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     dispatch(changeCompose(id, text));
     dispatch(submitCompose(id, { history }));
 
+    if (streak) {
+      dispatch(openModal('STREAK'));
+    }
+
     editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
   };
 

src/features/ui/components/modal-root.tsx

@@ -39,6 +39,7 @@ import {
   ReblogsModal,
   ReplyMentionsModal,
   ReportModal,
+  StreakModal,
   UnauthorizedModal,
   VideoModal,
   EditRuleModal,
@@ -92,6 +93,7 @@ const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
   'REBLOGS': ReblogsModal,
   'REPLY_MENTIONS': ReplyMentionsModal,
   'REPORT': ReportModal,
+  'STREAK': StreakModal,
   'UNAUTHORIZED': UnauthorizedModal,
   'VIDEO': VideoModal,
   'ZAPS': ZapsModal,

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

@@ -15,6 +15,7 @@ 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';
 
@@ -33,6 +34,7 @@ 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!;
 
@@ -40,6 +42,8 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
     dispatch(uploadCompose(composeId, files, intl));
   });
 
+  const userStreak = useAppSelector((state) => account?.ditto?.streak?.days ?? 0);
+
   const onClickClose = () => {
     if (checkComposeContent(compose)) {
       dispatch(openModal('CONFIRM', {
@@ -93,6 +97,7 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
         id={composeId}
         extra={<ComposeFormGroupToggle composeId={composeId} groupId={groupId} />}
         autoFocus
+        streak={userStreak}
       />
     </Modal>
   );

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+
+interface IStreakModal {
+  onClose: () => void;
+}
+
+const StreakModal: React.FC<IStreakModal> = ({ onClose }) => {
+
+  return (
+    <Modal title={<FormattedMessage id='streak_modal.title' defaultMessage="You've started a new streak!" />} onClose={onClose}>
+      <Text>
+        <FormattedMessage id='streak_modal.message' defaultMessage='Post every day to keep it going!' />
+      </Text>
+    </Modal>
+  );
+};
+
+export default StreakModal;

src/features/ui/util/async-components.ts

@@ -181,3 +181,4 @@ export const ZapsModal = lazy(() => import('soapbox/features/ui/components/modal
 export const ZapSplitModal = lazy(() => import('soapbox/features/ui/components/modals/zap-split/zap-split-modal.tsx'));
 export const CaptchaModal = lazy(() => import('soapbox/features/ui/components/modals/captcha-modal/captcha-modal.tsx'));
 export const NostrBunkerLogin = lazy(() => import('soapbox/features/nostr/nostr-bunker-login.tsx'));
+export const StreakModal = lazy(() => import('soapbox/features/ui/components/modals/streak-modal.tsx'));