stories: sending/failed states in stories list

This commit is contained in:
Jamie Kyle
2022-10-14 14:04:26 -07:00
committed by GitHub
parent bfe9cf9f38
commit 538a809395
5 changed files with 113 additions and 8 deletions

View File

@@ -13,6 +13,7 @@ import { MyStoriesButton } from './MyStoriesButton';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { getFakeStoryView } from '../test-both/helpers/getFakeStory';
import { setupI18n } from '../util/setupI18n';
import { SendStatus } from '../messages/MessageSendState';
const i18n = setupI18n('en', enMessages);
@@ -81,3 +82,35 @@ ManyStories.story = {
name: 'Many Stories',
};
ManyStories.play = interactionTest;
export const SendingStory = Template.bind({});
SendingStory.story = {
name: 'Sending Story',
};
SendingStory.args = {
newestStory: {
...getFakeStoryView(),
sendState: [
{
status: SendStatus.Pending,
recipient: getDefaultConversation(),
},
],
},
};
export const FailedSendStory = Template.bind({});
FailedSendStory.story = {
name: 'Failed Send Story',
};
FailedSendStory.args = {
newestStory: {
...getFakeStoryView(),
sendState: [
{
status: SendStatus.Failed,
recipient: getDefaultConversation(),
},
],
},
};

View File

@@ -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')}