stories: sending/failed states in stories list

ts/components/MyStoriesButton.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import type { ShowToastActionCreatorType } from '../state/ducks/toast';
-import type { StoryViewType } from '../types/Stories';
+import type { StorySendStateType, StoryViewType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
 import { HasStories } from '../types/Stories';
 import { StoryImage } from './StoryImage';
@@ -14,6 +14,7 @@ import { getAvatarColor } from '../types/Colors';
 import { MessageTimestamp } from './conversation/MessageTimestamp';
 
 import { StoriesAddStoryButton } from './StoriesAddStoryButton';
+import { isFailed, isPending } from '../messages/MessageSendState';
 
 export type PropsType = {
   hasMultiple: boolean;
@@ -26,6 +27,32 @@ export type PropsType = {
   showToast: ShowToastActionCreatorType;
 };
 
+enum ResolvedSendStatus {
+  Failed,
+  Sending,
+  Sent,
+}
+
+function resolveSendStatus(
+  sendStates: Array<StorySendStateType>
+): ResolvedSendStatus {
+  let anyPending = false;
+  for (const sendState of sendStates) {
+    if (isFailed(sendState.status)) {
+      // Immediately return if any send failed
+      return ResolvedSendStatus.Failed;
+    }
+    if (isPending(sendState.status)) {
+      // Don't return yet in case we have a failure
+      anyPending = true;
+    }
+  }
+  if (anyPending) {
+    return ResolvedSendStatus.Sending;
+  }
+  return ResolvedSendStatus.Sent;
+}
+
 export const MyStoriesButton = ({
   hasMultiple,
   i18n,
@@ -87,6 +114,10 @@ export const MyStoriesButton = ({
     );
   }
 
+  const newStoryResolvedSendStatus = resolveSendStatus(
+    newestStory.sendState ?? []
+  );
+
   return (
     <div className="StoryListItem__button">
       <div className="MyStories__avatar-container">
@@ -133,12 +164,24 @@ export const MyStoriesButton = ({
           <div className="StoryListItem__info--title StoryListItem__chevron">
             {i18n('Stories__mine')}
           </div>
-          <MessageTimestamp
-            i18n={i18n}
-            isRelativeTime
-            module="StoryListItem__info--timestamp"
-            timestamp={newestStory.timestamp}
-          />
+          {newStoryResolvedSendStatus === ResolvedSendStatus.Sending && (
+            <span className="StoryListItem__info--sending">
+              {i18n('Stories__list--sending')}
+            </span>
+          )}
+          {newStoryResolvedSendStatus === ResolvedSendStatus.Failed && (
+            <span className="StoryListItem__info--send_failed">
+              {i18n('Stories__list--send_failed')}
+            </span>
+          )}
+          {newStoryResolvedSendStatus === ResolvedSendStatus.Sent && (
+            <MessageTimestamp
+              i18n={i18n}
+              isRelativeTime
+              module="StoryListItem__info--timestamp"
+              timestamp={newestStory.timestamp}
+            />
+          )}
         </div>
         <div
           aria-label={i18n('StoryListItem__label')}