signal-desktop/ts/state/selectors/stories.ts

424 lines
11 KiB
TypeScript
Raw Normal View History

2022-03-04 21:14:52 +00:00
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { createSelector } from 'reselect';
import { pick } from 'lodash';
2022-04-15 00:08:46 +00:00
import type { GetConversationByIdType } from './conversations';
2022-04-28 22:06:28 +00:00
import type { ConversationType } from '../ducks/conversations';
2022-07-01 00:52:03 +00:00
import type { MessageReactionType } from '../../model-types.d';
2022-03-04 21:14:52 +00:00
import type {
ConversationStoryType,
2022-07-01 00:52:03 +00:00
MyStoryType,
ReplyStateType,
StorySendStateType,
2022-03-04 21:14:52 +00:00
StoryViewType,
2022-07-01 00:52:03 +00:00
} from '../../types/Stories';
2022-03-04 21:14:52 +00:00
import type { StateType } from '../reducer';
2022-07-06 19:06:20 +00:00
import type {
SelectedStoryDataType,
StoryDataType,
StoriesStateType,
} from '../ducks/stories';
2022-07-22 00:44:35 +00:00
import { HasStories, MY_STORIES_ID } from '../../types/Stories';
2022-03-04 21:14:52 +00:00
import { ReadStatus } from '../../messages/MessageReadStatus';
2022-07-01 00:52:03 +00:00
import { SendStatus } from '../../messages/MessageSendState';
2022-04-15 00:08:46 +00:00
import { canReply } from './message';
import {
getContactNameColorSelector,
getConversationSelector,
getMe,
} from './conversations';
2022-07-01 00:52:03 +00:00
import { getDistributionListSelector } from './storyDistributionLists';
2022-07-22 00:44:35 +00:00
import { getStoriesEnabled } from './items';
2022-03-04 21:14:52 +00:00
export const getStoriesState = (state: StateType): StoriesStateType =>
state.stories;
export const shouldShowStoriesView = createSelector(
getStoriesState,
({ openedAtTimestamp }): boolean => Boolean(openedAtTimestamp)
2022-03-04 21:14:52 +00:00
);
export const hasSelectedStoryData = createSelector(
getStoriesState,
({ selectedStoryData }): boolean => Boolean(selectedStoryData)
);
2022-07-06 19:06:20 +00:00
export const getSelectedStoryData = createSelector(
getStoriesState,
({ selectedStoryData }): SelectedStoryDataType | undefined =>
selectedStoryData
);
function getReactionUniqueId(reaction: MessageReactionType): string {
return `${reaction.fromId}:${reaction.targetAuthorUuid}:${reaction.timestamp}`;
2022-04-08 15:40:15 +00:00
}
function sortByRecencyAndUnread(
2022-07-06 19:06:20 +00:00
storyA: ConversationStoryType,
storyB: ConversationStoryType
2022-04-08 15:40:15 +00:00
): number {
2022-07-06 19:06:20 +00:00
if (storyA.storyView.isUnread && storyB.storyView.isUnread) {
return storyA.storyView.timestamp > storyB.storyView.timestamp ? -1 : 1;
2022-04-08 15:40:15 +00:00
}
2022-07-06 19:06:20 +00:00
if (storyB.storyView.isUnread) {
2022-04-08 15:40:15 +00:00
return 1;
}
2022-07-06 19:06:20 +00:00
if (storyA.storyView.isUnread) {
2022-04-08 15:40:15 +00:00
return -1;
}
2022-07-06 19:06:20 +00:00
return storyA.storyView.timestamp > storyB.storyView.timestamp ? -1 : 1;
2022-04-28 22:06:28 +00:00
}
function getAvatarData(
conversation: ConversationType
): Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'badges'
2022-04-28 22:06:28 +00:00
| 'color'
| 'isMe'
| 'id'
2022-04-28 22:06:28 +00:00
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
> {
return pick(conversation, [
'acceptedMessageRequest',
'avatarPath',
'badges',
2022-04-28 22:06:28 +00:00
'color',
'isMe',
'id',
2022-04-28 22:06:28 +00:00
'name',
'profileName',
'sharedGroupNames',
'title',
]);
}
2022-07-06 19:06:20 +00:00
export function getStoryView(
2022-04-15 00:08:46 +00:00
conversationSelector: GetConversationByIdType,
2022-07-06 19:06:20 +00:00
story: StoryDataType
2022-07-01 00:52:03 +00:00
): StoryViewType {
2022-04-15 00:08:46 +00:00
const sender = pick(conversationSelector(story.sourceUuid || story.source), [
'acceptedMessageRequest',
'avatarPath',
2022-07-25 18:55:44 +00:00
'badges',
2022-04-15 00:08:46 +00:00
'color',
'firstName',
'hideStory',
'id',
'isMe',
'name',
'profileName',
'sharedGroupNames',
'title',
]);
2022-07-01 00:52:03 +00:00
const { attachment, timestamp } = pick(story, ['attachment', 'timestamp']);
2022-07-07 21:59:08 +00:00
const { sendStateByConversationId } = story;
let sendState: Array<StorySendStateType> | undefined;
let views: number | undefined;
if (sendStateByConversationId) {
const innerSendState: Array<StorySendStateType> = [];
let innerViews = 0;
Object.keys(sendStateByConversationId).forEach(recipientId => {
const recipient = conversationSelector(recipientId);
const recipientSendState = sendStateByConversationId[recipient.id];
if (recipientSendState.status === SendStatus.Viewed) {
innerViews += 1;
}
innerSendState.push({
...recipientSendState,
2022-07-25 18:55:44 +00:00
recipient,
2022-07-07 21:59:08 +00:00
});
});
sendState = innerSendState;
views = innerViews;
}
2022-07-01 00:52:03 +00:00
return {
attachment,
2022-07-06 19:06:20 +00:00
canReply: canReply(story, undefined, conversationSelector),
isHidden: Boolean(sender.hideStory),
2022-07-01 00:52:03 +00:00
isUnread: story.readStatus === ReadStatus.Unread,
messageId: story.messageId,
sender,
2022-07-07 21:59:08 +00:00
sendState,
2022-07-01 00:52:03 +00:00
timestamp,
2022-07-07 21:59:08 +00:00
views,
2022-07-01 00:52:03 +00:00
};
}
2022-07-06 19:06:20 +00:00
export function getConversationStory(
2022-07-01 00:52:03 +00:00
conversationSelector: GetConversationByIdType,
2022-07-06 19:06:20 +00:00
story: StoryDataType
2022-07-01 00:52:03 +00:00
): ConversationStoryType {
const sender = pick(conversationSelector(story.sourceUuid || story.source), [
'hideStory',
'id',
]);
2022-04-15 00:08:46 +00:00
const conversation = pick(conversationSelector(story.conversationId), [
'acceptedMessageRequest',
'avatarPath',
'color',
'id',
'name',
'profileName',
'sharedGroupNames',
'title',
]);
2022-07-06 19:06:20 +00:00
const storyView = getStoryView(conversationSelector, story);
2022-04-15 00:08:46 +00:00
return {
conversationId: conversation.id,
group: conversation.id !== sender.id ? conversation : undefined,
isHidden: Boolean(sender.hideStory),
2022-07-06 19:06:20 +00:00
storyView,
2022-04-15 00:08:46 +00:00
};
}
export const getStoryReplies = createSelector(
getConversationSelector,
getContactNameColorSelector,
getMe,
getStoriesState,
(
conversationSelector,
contactNameColorSelector,
me,
2022-04-28 22:06:28 +00:00
{ stories, replyState }: Readonly<StoriesStateType>
2022-04-15 00:08:46 +00:00
): ReplyStateType | undefined => {
if (!replyState) {
return;
}
2022-04-28 22:06:28 +00:00
const foundStory = stories.find(
story => story.messageId === replyState.messageId
);
const reactions = foundStory
? (foundStory.reactions || []).map(reaction => {
const conversation = conversationSelector(reaction.fromId);
return {
author: getAvatarData(conversation),
2022-04-28 22:06:28 +00:00
contactNameColor: contactNameColorSelector(
foundStory.conversationId,
conversation.id
),
conversationId: reaction.fromId,
2022-04-28 22:06:28 +00:00
id: getReactionUniqueId(reaction),
reactionEmoji: reaction.emoji,
timestamp: reaction.timestamp,
};
})
: [];
const replies = replyState.replies.map(reply => {
const conversation =
reply.type === 'outgoing'
? me
: conversationSelector(reply.sourceUuid || reply.source);
return {
author: getAvatarData(conversation),
2022-04-28 22:06:28 +00:00
...pick(reply, ['body', 'deletedForEveryone', 'id', 'timestamp']),
contactNameColor: contactNameColorSelector(
reply.conversationId,
conversation.id
),
conversationId: conversation.id,
readStatus: reply.readStatus,
2022-04-28 22:06:28 +00:00
};
});
const combined = [...replies, ...reactions].sort((a, b) =>
a.timestamp > b.timestamp ? 1 : -1
);
2022-04-15 00:08:46 +00:00
return {
messageId: replyState.messageId,
2022-04-28 22:06:28 +00:00
replies: combined,
2022-04-15 00:08:46 +00:00
};
}
);
2022-03-04 21:14:52 +00:00
export const getStories = createSelector(
getConversationSelector,
2022-07-01 00:52:03 +00:00
getDistributionListSelector,
2022-03-04 21:14:52 +00:00
getStoriesState,
2022-03-29 01:10:08 +00:00
shouldShowStoriesView,
2022-03-04 21:14:52 +00:00
(
conversationSelector,
2022-07-01 00:52:03 +00:00
distributionListSelector,
2022-03-29 01:10:08 +00:00
{ stories }: Readonly<StoriesStateType>,
isShowingStoriesView
2022-03-04 21:14:52 +00:00
): {
hiddenStories: Array<ConversationStoryType>;
2022-07-01 00:52:03 +00:00
myStories: Array<MyStoryType>;
2022-03-04 21:14:52 +00:00
stories: Array<ConversationStoryType>;
} => {
2022-03-29 01:10:08 +00:00
if (!isShowingStoriesView) {
return {
hiddenStories: [],
2022-07-01 00:52:03 +00:00
myStories: [],
2022-03-29 01:10:08 +00:00
stories: [],
};
}
2022-03-04 21:14:52 +00:00
const hiddenStoriesById = new Map<string, ConversationStoryType>();
2022-07-01 00:52:03 +00:00
const myStoriesById = new Map<string, MyStoryType>();
const storiesById = new Map<string, ConversationStoryType>();
2022-03-04 21:14:52 +00:00
stories.forEach(story => {
2022-07-01 00:52:03 +00:00
if (story.deletedForEveryone) {
return;
}
2022-08-05 01:13:26 +00:00
const conversationStory = getConversationStory(
conversationSelector,
story
);
if (story.sendStateByConversationId) {
let sentId = story.conversationId;
let sentName = conversationStory.group?.title;
if (story.storyDistributionListId) {
const list =
story.storyDistributionListId === MY_STORIES_ID
? { id: MY_STORIES_ID, name: MY_STORIES_ID }
: distributionListSelector(
story.storyDistributionListId.toLowerCase()
);
if (!list) {
return;
}
sentId = list.id;
sentName = list.name;
}
if (!sentName) {
2022-07-01 00:52:03 +00:00
return;
}
2022-07-06 19:06:20 +00:00
const storyView = getStoryView(conversationSelector, story);
2022-07-01 00:52:03 +00:00
2022-08-05 01:13:26 +00:00
const existingMyStory = myStoriesById.get(sentId) || { stories: [] };
2022-07-01 00:52:03 +00:00
2022-08-05 01:13:26 +00:00
myStoriesById.set(sentId, {
id: sentId,
name: sentName,
2022-07-07 21:59:08 +00:00
stories: [...existingMyStory.stories, storyView],
2022-07-01 00:52:03 +00:00
});
return;
}
2022-03-04 21:14:52 +00:00
let storiesMap: Map<string, ConversationStoryType>;
2022-07-01 00:52:03 +00:00
2022-04-15 00:08:46 +00:00
if (conversationStory.isHidden) {
2022-03-04 21:14:52 +00:00
storiesMap = hiddenStoriesById;
} else {
storiesMap = storiesById;
}
2022-04-15 00:08:46 +00:00
const existingConversationStory = storiesMap.get(
conversationStory.conversationId
2022-07-06 19:06:20 +00:00
);
2022-03-04 21:14:52 +00:00
2022-04-15 00:08:46 +00:00
storiesMap.set(conversationStory.conversationId, {
...existingConversationStory,
2022-03-04 21:14:52 +00:00
...conversationStory,
2022-07-06 19:06:20 +00:00
storyView: conversationStory.storyView,
2022-03-04 21:14:52 +00:00
});
});
return {
2022-07-06 19:06:20 +00:00
hiddenStories: Array.from(hiddenStoriesById.values()),
myStories: Array.from(myStoriesById.values()),
2022-04-08 15:40:15 +00:00
stories: Array.from(storiesById.values()).sort(sortByRecencyAndUnread),
2022-03-04 21:14:52 +00:00
};
}
);
2022-07-20 23:06:15 +00:00
2022-07-22 01:38:27 +00:00
export const getUnreadStorySenderCount = createSelector(
2022-07-20 23:06:15 +00:00
getStoriesState,
({ stories }): number => {
2022-07-22 01:38:27 +00:00
return new Set(
stories
.filter(
story =>
story.readStatus === ReadStatus.Unread && !story.deletedForEveryone
)
2022-07-22 01:38:27 +00:00
.map(story => story.conversationId)
).size;
2022-07-20 23:06:15 +00:00
}
);
2022-07-22 00:44:35 +00:00
export const getHasStoriesSelector = createSelector(
getStoriesEnabled,
getStoriesState,
(isEnabled, { stories }) =>
(conversationId?: string): HasStories | undefined => {
if (!isEnabled || !conversationId) {
return;
}
const conversationStories = stories.filter(
story => story.conversationId === conversationId
);
if (!conversationStories.length) {
return;
}
return conversationStories.some(
story =>
story.readStatus === ReadStatus.Unread && !story.deletedForEveryone
2022-07-22 00:44:35 +00:00
)
? HasStories.Unread
: HasStories.Read;
}
);
export const getStoryByIdSelector = createSelector(
getStoriesState,
({ stories }) =>
(
conversationSelector: GetConversationByIdType,
messageId: string
):
| { conversationStory: ConversationStoryType; storyView: StoryViewType }
| undefined => {
const story = stories.find(item => item.messageId === messageId);
if (!story) {
return;
}
return {
conversationStory: getConversationStory(conversationSelector, story),
storyView: getStoryView(conversationSelector, story),
};
}
);