Allow paging through My Stories

ts/components/conversation/ContactModal.tsx

@@ -11,6 +11,8 @@ import type {
 import type { BadgeType } from '../../badges/types';
 import type { HasStories } from '../../types/Stories';
 import type { LocalizerType, ThemeType } from '../../types/Util';
+import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
+import { StoryViewModeType } from '../../types/Stories';
 import * as log from '../../logging/log';
 import { About } from './About';
 import { Avatar } from '../Avatar';
@@ -42,7 +44,7 @@ type PropsActionType = {
   toggleAdmin: (conversationId: string, contactId: string) => void;
   toggleSafetyNumberModal: (conversationId: string) => unknown;
   updateConversationModelSharedGroups: (conversationId: string) => void;
-  viewUserStories: (cid: string) => unknown;
+  viewUserStories: ViewUserStoriesActionCreatorType;
 };
 
 export type PropsType = PropsDataType & PropsActionType;
@@ -179,7 +181,10 @@ export const ContactModal = ({
               name={contact.name}
               onClick={() => {
                 if (conversation && hasStories) {
-                  viewUserStories(conversation.id);
+                  viewUserStories({
+                    conversationId: conversation.id,
+                    storyViewMode: StoryViewModeType.User,
+                  });
                 } else {
                   setView(ContactModalView.ShowingAvatar);
                 }

ts/components/conversation/ConversationHeader.tsx

@@ -21,6 +21,8 @@ import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
 import type { BadgeType } from '../../badges/types';
 import type { HasStories } from '../../types/Stories';
+import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
+import { StoryViewModeType } from '../../types/Stories';
 import { getMuteOptions } from '../../util/getMuteOptions';
 import * as expirationTimer from '../../util/expirationTimer';
 import { missingCaseError } from '../../util/missingCaseError';
@@ -90,7 +92,7 @@ export type PropsActionsType = {
   onArchive: () => void;
   onMarkUnread: () => void;
   onMoveToInbox: () => void;
-  viewUserStories: (cid: string) => unknown;
+  viewUserStories: ViewUserStoriesActionCreatorType;
 };
 
 export type PropsHousekeepingType = {
@@ -232,7 +234,10 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
           onClick={
             hasStories
               ? () => {
-                  viewUserStories(id);
+                  viewUserStories({
+                    conversationId: id,
+                    storyViewMode: StoryViewModeType.User,
+                  });
                 }
               : undefined
           }

ts/components/conversation/ConversationHero.tsx

@@ -10,6 +10,8 @@ import { GroupDescription } from './GroupDescription';
 import { SharedGroupNames } from '../SharedGroupNames';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { HasStories } from '../../types/Stories';
+import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
+import { StoryViewModeType } from '../../types/Stories';
 import { ConfirmationDialog } from '../ConfirmationDialog';
 import { Button, ButtonSize, ButtonVariant } from '../Button';
 import { shouldBlurAvatar } from '../../util/shouldBlurAvatar';
@@ -30,7 +32,7 @@ export type Props = {
   unblurredAvatarPath?: string;
   updateSharedGroups: () => unknown;
   theme: ThemeType;
-  viewUserStories: (cid: string) => unknown;
+  viewUserStories: ViewUserStoriesActionCreatorType;
 } & Omit<AvatarProps, 'onClick' | 'size' | 'noteToSelf'>;
 
 const renderMembershipRow = ({
@@ -146,7 +148,10 @@ export const ConversationHero = ({
     avatarOnClick = unblurAvatar;
   } else if (hasStories) {
     avatarOnClick = () => {
-      viewUserStories(id);
+      viewUserStories({
+        conversationId: id,
+        storyViewMode: StoryViewModeType.User,
+      });
     };
   }
 

ts/components/conversation/Message.tsx

@@ -1556,6 +1556,9 @@ export class Message extends React.PureComponent<Props, State> {
           isViewOnce={false}
           moduleClassName="StoryReplyQuote"
           onClick={() => {
+            if (!storyReplyContext.storyId) {
+              return;
+            }
             viewStory({
               storyId: storyReplyContext.storyId,
               storyViewMode: StoryViewModeType.Single,