stories: sending/failed states in stories list

Co-authored-by: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2022-10-14 14:27:24 -07:00 committed by GitHub
parent 5878894bd3
commit b99437578c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 113 additions and 8 deletions

View File

@ -5451,6 +5451,14 @@
"message": "No recent stories to show right now",
"description": "Description for when there are no stories to show"
},
"Stories__list--sending": {
"message": "Sending...",
"description": "Pending text for story being sent in list view"
},
"Stories__list--send_failed": {
"message": "Send failed",
"description": "Error text for story failed to send in list view"
},
"Stories__placeholder--text": {
"message": "Click to view a story",
"description": "Placeholder label for the story view"

View File

@ -60,11 +60,30 @@
color: $color-gray-05;
}
&--timestamp {
&--timestamp,
&--sending,
&--send_failed {
@include font-body-2;
color: $color-gray-25;
}
&--send_failed {
display: flex;
align-items: center;
&::before {
content: '';
display: flex;
flex-shrink: 0;
height: 12px;
width: 12px;
margin-right: 8px;
@include color-svg(
'../images/icons/v2/error-outline-12.svg',
$color-accent-red
);
}
}
&--replies {
&--others {
@include color-svg(

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

View File

@ -51,6 +51,8 @@ const STATUS_NUMBERS: Record<SendStatus, number> = {
export const maxStatus = (a: SendStatus, b: SendStatus): SendStatus =>
STATUS_NUMBERS[a] > STATUS_NUMBERS[b] ? a : b;
export const isPending = (status: SendStatus): boolean =>
status === SendStatus.Pending;
export const isViewed = (status: SendStatus): boolean =>
status === SendStatus.Viewed;
export const isRead = (status: SendStatus): boolean =>