Fixes going to oldest unread story when viewing

ts/components/StoryViewer.stories.tsx

@@ -39,7 +39,6 @@ function getDefaultProps(): PropsType {
     preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
     queueStoryDownload: action('queueStoryDownload'),
     renderEmojiPicker: () => <div />,
-    selectedStoryIndex: 0,
     stories: [
       {
         attachment: fakeAttachment({
@@ -109,24 +108,6 @@ story.add('Multi story', () => {
   );
 });
 
-story.add('So many stories (start on story 4)', () => {
-  const sender = getDefaultConversation();
-  return (
-    <StoryViewer
-      {...getDefaultProps()}
-      selectedStoryIndex={5}
-      stories={Array(20).fill({
-        attachment: fakeAttachment({
-          url: '/fixtures/snow.jpg',
-        }),
-        messageId: '123',
-        sender,
-        timestamp: Date.now(),
-      })}
-    />
-  );
-});
-
 story.add('Caption', () => (
   <StoryViewer
     {...getDefaultProps()}

ts/components/StoryViewer.tsx

@@ -2,7 +2,13 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import FocusTrap from 'focus-trap-react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useSpring, animated, to } from '@react-spring/web';
 import type { BodyRangeType, LocalizerType } from '../types/Util';
 import type { ConversationType } from '../state/ducks/conversations';
@@ -62,7 +68,6 @@ export type PropsType = {
   recentEmojis?: Array<string>;
   renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
   replyState?: ReplyStateType;
-  selectedStoryIndex: number;
   skinTone?: number;
   stories: Array<StoryViewType>;
   views?: Array<string>;
@@ -94,13 +99,11 @@ export const StoryViewer = ({
   recentEmojis,
   renderEmojiPicker,
   replyState,
-  selectedStoryIndex,
   skinTone,
   stories,
   views,
 }: PropsType): JSX.Element => {
-  const [currentStoryIndex, setCurrentStoryIndex] =
+  const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
-    useState(selectedStoryIndex);
   const [storyDuration, setStoryDuration] = useState<number | undefined>();
   const [isShowingContextMenu, setIsShowingContextMenu] = useState(false);
   const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
@@ -155,12 +158,22 @@ export const StoryViewer = ({
     setHasExpandedCaption(false);
   }, [messageId]);
 
-  // In case we want to change the story we're viewing from 0 -> N
+  // These exist to change currentStoryIndex to the oldest unread story a user
+  // has, or set to 0 whenever conversationId changes.
+  // We use a ref so that we only depend on conversationId changing, since
+  // the stories Array will change once we mark as story as viewed.
+  const storiesRef = useRef(stories);
+
   useEffect(() => {
-    if (selectedStoryIndex) {
+    const unreadStoryIndex = storiesRef.current.findIndex(
-      setCurrentStoryIndex(selectedStoryIndex);
+      story => story.isUnread
-    }
+    );
-  }, [selectedStoryIndex]);
+    setCurrentStoryIndex(unreadStoryIndex < 0 ? 0 : unreadStoryIndex);
+  }, [conversationId]);
+
+  useEffect(() => {
+    storiesRef.current = stories;
+  }, [stories]);
 
   // Either we show the next story in the current user's stories or we ask
   // for the next user's stories.

ts/state/smart/StoryViewer.tsx

@@ -55,8 +55,6 @@ export function SmartStoryViewer({
   >(getStoriesSelector);
 
   const { group, stories } = getStoriesByConversationId(conversationId);
-  const unreadStoryIndex = stories.findIndex(story => story.isUnread);
-  const selectedStoryIndex = unreadStoryIndex > 0 ? unreadStoryIndex : 0;
 
   const recentEmojis = useRecentEmojis();
   const skinTone = useSelector<StateType, number>(getEmojiSkinTone);
@@ -96,7 +94,6 @@ export function SmartStoryViewer({
       recentEmojis={recentEmojis}
       renderEmojiPicker={renderEmojiPicker}
       replyState={replyState}
-      selectedStoryIndex={selectedStoryIndex}
       stories={stories}
       skinTone={skinTone}
       {...storiesActions}

ts/util/lint/exceptions.json

@@ -7706,6 +7706,13 @@
     "reasonCategory": "usageTrusted",
     "updated": "2022-04-29T23:54:21.656Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/StoryViewer.tsx",
+    "line": "  const storiesRef = useRef(stories);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-04-30T00:44:47.213Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/StoryViewsNRepliesModal.tsx",