signal-desktop/ts/state/smart/Timeline.tsx

125 lines
3.6 KiB
TypeScript
Raw Normal View History

2020-10-30 20:34:04 +00:00
// Copyright 2019-2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { pick } from 'lodash';
import React from 'react';
import { connect } from 'react-redux';
import { mapDispatchToProps } from '../actions';
import { Timeline } from '../../components/conversation/Timeline';
import { RenderEmojiPickerProps } from '../../components/conversation/ReactionPicker';
import { StateType } from '../reducer';
import { getIntl } from '../selectors/user';
import {
getConversationMessagesSelector,
getConversationSelector,
2019-11-07 21:36:16 +00:00
getSelectedMessage,
} from '../selectors/conversations';
import { SmartTimelineItem } from './TimelineItem';
import { SmartTypingBubble } from './TypingBubble';
import { SmartLastSeenIndicator } from './LastSeenIndicator';
2020-05-27 21:37:06 +00:00
import { SmartHeroRow } from './HeroRow';
import { SmartTimelineLoadingRow } from './TimelineLoadingRow';
import { SmartEmojiPicker } from './EmojiPicker';
// Workaround: A react component's required properties are filtering up through connect()
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
/* eslint-disable @typescript-eslint/no-explicit-any */
const FilteredSmartTimelineItem = SmartTimelineItem as any;
const FilteredSmartTypingBubble = SmartTypingBubble as any;
const FilteredSmartLastSeenIndicator = SmartLastSeenIndicator as any;
2020-05-27 21:37:06 +00:00
const FilteredSmartHeroRow = SmartHeroRow as any;
const FilteredSmartTimelineLoadingRow = SmartTimelineLoadingRow as any;
/* eslint-enable @typescript-eslint/no-explicit-any */
type ExternalProps = {
id: string;
// Note: most action creators are not wired into redux; for now they
// are provided by ConversationView in setupTimeline().
};
2019-11-07 21:36:16 +00:00
function renderItem(
messageId: string,
conversationId: string,
actionProps: Record<string, unknown>
2019-11-07 21:36:16 +00:00
): JSX.Element {
return (
<FilteredSmartTimelineItem
{...actionProps}
conversationId={conversationId}
id={messageId}
renderEmojiPicker={renderEmojiPicker}
/>
);
}
function renderEmojiPicker({
ref,
onPickEmoji,
onClose,
style,
}: RenderEmojiPickerProps): JSX.Element {
return (
<SmartEmojiPicker
ref={ref}
onPickEmoji={onPickEmoji}
onClose={onClose}
style={style}
2019-11-07 21:36:16 +00:00
/>
);
}
function renderLastSeenIndicator(id: string): JSX.Element {
return <FilteredSmartLastSeenIndicator id={id} />;
}
2020-08-07 00:50:54 +00:00
function renderHeroRow(
id: string,
onHeightChange: () => unknown,
updateSharedGroups: () => unknown
): JSX.Element {
return (
<FilteredSmartHeroRow
id={id}
onHeightChange={onHeightChange}
updateSharedGroups={updateSharedGroups}
/>
);
2020-05-27 21:37:06 +00:00
}
function renderLoadingRow(id: string): JSX.Element {
return <FilteredSmartTimelineLoadingRow id={id} />;
}
function renderTypingBubble(id: string): JSX.Element {
return <FilteredSmartTypingBubble id={id} />;
}
const mapStateToProps = (state: StateType, props: ExternalProps) => {
const { id, ...actions } = props;
const conversation = getConversationSelector(state)(id);
const conversationMessages = getConversationMessagesSelector(state)(id);
2019-11-07 21:36:16 +00:00
const selectedMessage = getSelectedMessage(state);
return {
id,
...pick(conversation, [
'unreadCount',
'typingContact',
'isGroupV1AndDisabled',
]),
...conversationMessages,
2019-11-07 21:36:16 +00:00
selectedMessageId: selectedMessage ? selectedMessage.id : undefined,
i18n: getIntl(state),
renderItem,
renderLastSeenIndicator,
2020-05-27 21:37:06 +00:00
renderHeroRow,
renderLoadingRow,
renderTypingBubble,
...actions,
};
};
const smart = connect(mapStateToProps, mapDispatchToProps);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const SmartTimeline = smart(Timeline as any);