From ee4a0b9b1e749b46048ec71f48a15b88f2e6bd89 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 8 Jul 2021 16:12:58 +1000 Subject: [PATCH] cleanedup redux action openConversationExternal --- ts/components/ConversationListItem.tsx | 4 +- ts/components/LeftPane.tsx | 52 ++------- ts/components/SearchResults.tsx | 110 ++++++++---------- .../session/LeftPaneContactSection.tsx | 104 ++++++++--------- .../session/LeftPaneMessageSection.tsx | 54 +++------ .../session/LeftPaneSectionHeader.tsx | 9 +- .../session/LeftPaneSettingSection.tsx | 2 +- .../session/SessionClosableOverlay.tsx | 7 +- ts/components/session/SessionSearchInput.tsx | 7 +- ts/components/session/UserSearchDropdown.tsx | 2 - .../conversation/SessionCompositionBox.tsx | 4 +- .../conversation/SessionConversation.tsx | 54 +++++---- .../conversation/SessionMessagesList.tsx | 10 +- ts/data/data.ts | 6 +- ts/hooks/useMembersAvatar.tsx | 4 +- ts/models/conversation.ts | 2 +- ts/state/ducks/conversations.ts | 15 ++- ts/state/ducks/search.ts | 4 +- ts/state/selectors/conversations.ts | 35 ++++-- 19 files changed, 206 insertions(+), 279 deletions(-) diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 22c0190cd..049b9fbef 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -16,15 +16,15 @@ import { OutgoingMessageStatus } from './conversation/message/OutgoingMessageSta import { useTheme } from 'styled-components'; import { PubKey } from '../session/types'; import { - ConversationType, LastMessageType, openConversationExternal, + ReduxConversationType, } from '../state/ducks/conversations'; import _ from 'underscore'; import { useMembersAvatars } from '../hooks/useMembersAvatar'; import { useDispatch } from 'react-redux'; -export interface ConversationListItemProps extends ConversationType {} +export interface ConversationListItemProps extends ReduxConversationType {} type PropsHousekeeping = { style?: Object; diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index da5a16129..d8711173f 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -1,9 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; import { ActionsPanel, SectionType } from './session/ActionsPanel'; import { LeftPaneMessageSection } from './session/LeftPaneMessageSection'; -import { openConversationExternal } from '../state/ducks/conversations'; import { LeftPaneContactSection } from './session/LeftPaneContactSection'; import { LeftPaneSettingSection } from './session/LeftPaneSettingSection'; import { SessionTheme } from '../state/ducks/SessionTheme'; @@ -13,6 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { getLeftPaneLists } from '../state/selectors/conversations'; import { getQuery, getSearchResults, isSearching } from '../state/selectors/search'; import { clearSearch, search, updateSearchTerm } from '../state/ducks/search'; +import { useTheme } from 'styled-components'; import { getTheme } from '../state/selectors/theme'; // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5 @@ -30,57 +30,29 @@ type Props = { }; const InnerLeftPaneMessageSection = (props: { isExpired: boolean }) => { - const dispatch = useDispatch(); - const showSearch = useSelector(isSearching); const searchTerm = useSelector(getQuery); const searchResults = showSearch ? useSelector(getSearchResults) : undefined; const lists = showSearch ? undefined : useSelector(getLeftPaneLists); - const theme = useSelector(getTheme); // tslint:disable: use-simple-attributes return ( <> {props.isExpired && } - dispatch(openConversationExternal(id, messageId)) - } conversations={lists?.conversations || []} contacts={lists?.contacts || []} searchResults={searchResults} searchTerm={searchTerm} - updateSearchTerm={query => dispatch(updateSearchTerm(query))} - search={(query, options) => dispatch(search(query, options))} - clearSearch={() => dispatch(clearSearch())} /> ); }; const InnerLeftPaneContactSection = () => { - const dispatch = useDispatch(); - const theme = useSelector(getTheme); - const showSearch = useSelector(isSearching); - - const lists = showSearch ? undefined : useSelector(getLeftPaneLists); - - const directContacts = lists?.contacts || []; - - return ( - <> - - dispatch(openConversationExternal(id, messageId)) - } - directContacts={directContacts} - theme={theme} - /> - - ); + return ; }; const LeftPaneSection = (props: { isExpired: boolean }) => { @@ -96,23 +68,21 @@ const LeftPaneSection = (props: { isExpired: boolean }) => { if (focusedSection === SectionType.Settings) { return ; } - return <>; + return null; }; export const LeftPane = (props: Props) => { const theme = useSelector(getTheme); return ( - <> - -
- + +
+ -
- -
+
+
- - +
+ ); }; diff --git a/ts/components/SearchResults.tsx b/ts/components/SearchResults.tsx index 078c4260e..d0f2e8e9f 100644 --- a/ts/components/SearchResults.tsx +++ b/ts/components/SearchResults.tsx @@ -14,70 +14,58 @@ export type SearchResultsProps = { searchTerm: string; }; -type PropsHousekeeping = { - openConversationExternal: (id: string, messageId?: string) => void; +const ContactsItem = (props: { header: string; items: Array }) => { + return ( +
+
{props.header}
+ {props.items.map(contact => ( + + ))} +
+ ); }; -type Props = SearchResultsProps & PropsHousekeeping; +export const SearchResults = (props: SearchResultsProps) => { + const { conversations, contacts, hideMessagesHeader, messages, searchTerm } = props; -export class SearchResults extends React.Component { - public render() { - const { - conversations, - contacts, - hideMessagesHeader, - messages, - openConversationExternal, - searchTerm, - } = this.props; + const haveConversations = conversations && conversations.length; + const haveContacts = contacts && contacts.length; + const haveMessages = messages && messages.length; + const noResults = !haveConversations && !haveContacts && !haveMessages; - const haveConversations = conversations && conversations.length; - const haveContacts = contacts && contacts.length; - const haveMessages = messages && messages.length; - const noResults = !haveConversations && !haveContacts && !haveMessages; - - return ( -
- {noResults ? ( -
- {window.i18n('noSearchResults', [searchTerm])} -
- ) : null} - {haveConversations ? ( -
-
- {window.i18n('conversationsHeader')} -
- {conversations.map(conversation => ( - - ))} + return ( +
+ {noResults ? ( +
+ {window.i18n('noSearchResults', [searchTerm])} +
+ ) : null} + {haveConversations ? ( +
+
+ {window.i18n('conversationsHeader')}
- ) : null} - {haveContacts ? this.renderContacts(window.i18n('contactsHeader'), contacts) : null} + {conversations.map(conversation => ( + + ))} +
+ ) : null} + {haveContacts ? ( + + ) : null} - {haveMessages ? ( -
- {hideMessagesHeader ? null : ( -
- {window.i18n('messagesHeader')} -
- )} - {messages.map(message => ( - - ))} -
- ) : null} -
- ); - } - private renderContacts(header: string, items: Array) { - return ( -
-
{header}
- {items.map(contact => ( - - ))} -
- ); - } -} + {haveMessages ? ( +
+ {hideMessagesHeader ? null : ( +
+ {window.i18n('messagesHeader')} +
+ )} + {messages.map(message => ( + + ))} +
+ ) : null} +
+ ); +}; diff --git a/ts/components/session/LeftPaneContactSection.tsx b/ts/components/session/LeftPaneContactSection.tsx index 225aa63a4..e51af81fd 100644 --- a/ts/components/session/LeftPaneContactSection.tsx +++ b/ts/components/session/LeftPaneContactSection.tsx @@ -3,70 +3,58 @@ import React from 'react'; import { MemoConversationListItemWithDetails } from '../ConversationListItem'; import { RowRendererParamsType } from '../LeftPane'; import { AutoSizer, List } from 'react-virtualized'; -import { ConversationType as ReduxConversationType } from '../../state/ducks/conversations'; -import { DefaultTheme } from 'styled-components'; import { LeftPaneSectionHeader } from './LeftPaneSectionHeader'; -import autoBind from 'auto-bind'; +import { useSelector } from 'react-redux'; +import { getDirectContacts, getLeftPaneLists } from '../../state/selectors/conversations'; +import { isSearching } from '../../state/selectors/search'; -export interface Props { - directContacts: Array; - theme: DefaultTheme; - openConversationExternal: (id: string, messageId?: string) => void; -} +const renderRow = ({ index, key, style }: RowRendererParamsType): JSX.Element | undefined => { + const showSearch = useSelector(isSearching); -export class LeftPaneContactSection extends React.Component { - public constructor(props: Props) { - super(props); - autoBind(this); - } - - public renderHeader(): JSX.Element | undefined { - return ; - } + const lists = showSearch ? undefined : useSelector(getLeftPaneLists); - public render(): JSX.Element { - return ( -
- {this.renderHeader()} - {this.renderContacts()} -
- ); - } + const directContacts = lists?.contacts || []; + const item = directContacts[index]; - public renderRow = ({ index, key, style }: RowRendererParamsType): JSX.Element | undefined => { - const { directContacts } = this.props; - const item = directContacts[index]; + return ; +}; - return ; - }; +const ContactListItemSection = () => { + const directContacts = useSelector(getDirectContacts); - private renderContacts() { - return
{this.renderList()}
; + if (!directContacts) { + return null; } - - private renderList() { - const { directContacts } = this.props; - const length = Number(directContacts.length); - - const list = ( -
- - {({ height, width }) => ( - - )} - + const length = Number(directContacts.length); + + return ( +
+ + {({ height, width }) => ( + + )} + +
+ ); +}; + +export const LeftPaneContactSection = () => { + debugger; + return ( +
+ +
+
- ); - - return [list]; - } -} +
+ ); +}; diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index 6d86f13a7..32d919442 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -7,7 +7,7 @@ import { ConversationListItemProps, MemoConversationListItemWithDetails, } from '../ConversationListItem'; -import { ConversationType as ReduxConversationType } from '../../state/ducks/conversations'; +import { openConversationExternal, ReduxConversationType } from '../../state/ducks/conversations'; import { SearchResults, SearchResultsProps } from '../SearchResults'; import { SessionSearchInput } from './SessionSearchInput'; import { debounce } from 'lodash'; @@ -29,8 +29,7 @@ import { joinOpenGroupV2WithUIEvents } from '../../opengroup/opengroupV2/JoinOpe import autoBind from 'auto-bind'; import { onsNameRegex } from '../../session/snode_api/SNodeAPI'; import { SNodeAPI } from '../../session/snode_api'; - -import { createClosedGroup } from '../../receiver/closedGroups'; +import { clearSearch, search, updateSearchTerm } from '../../state/ducks/search'; export interface Props { searchTerm: string; @@ -38,12 +37,6 @@ export interface Props { contacts: Array; conversations?: Array; searchResults?: SearchResultsProps; - - updateSearchTerm: (searchTerm: string) => void; - search: (query: string, options: SearchOptions) => void; - openConversationExternal: (id: string, messageId?: string) => void; - clearSearch: () => void; - theme: DefaultTheme; } export enum SessionComposeToType { @@ -81,7 +74,7 @@ export class LeftPaneMessageSection extends React.Component { } public renderRow = ({ index, key, style }: RowRendererParamsType): JSX.Element => { - const { conversations, openConversationExternal } = this.props; + const { conversations } = this.props; if (!conversations) { throw new Error('renderRow: Tried to render without conversations'); @@ -89,21 +82,15 @@ export class LeftPaneMessageSection extends React.Component { const conversation = conversations[index]; - return ; + return ; }; public renderList(): JSX.Element | Array { - const { conversations, openConversationExternal, searchResults } = this.props; + const { conversations, searchResults } = this.props; const contacts = searchResults?.contacts || []; if (searchResults) { - return ( - - ); + return ; } if (!conversations) { @@ -147,7 +134,6 @@ export class LeftPaneMessageSection extends React.Component { return ( @@ -172,7 +158,6 @@ export class LeftPaneMessageSection extends React.Component { searchString={this.props.searchTerm} onChange={this.updateSearch} placeholder={window.i18n('searchFor...')} - theme={this.props.theme} /> {this.renderList()} {this.renderBottomButtons()} @@ -181,10 +166,8 @@ export class LeftPaneMessageSection extends React.Component { } public updateSearch(searchTerm: string) { - const { updateSearchTerm, clearSearch } = this.props; - if (!searchTerm) { - clearSearch(); + window.inboxStore?.dispatch(clearSearch()); return; } @@ -192,9 +175,7 @@ export class LeftPaneMessageSection extends React.Component { // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search this.setState({ valuePasted: '' }); - if (updateSearchTerm) { - updateSearchTerm(searchTerm); - } + window.inboxStore?.dispatch(updateSearchTerm(searchTerm)); if (searchTerm.length < 2) { return; @@ -209,19 +190,17 @@ export class LeftPaneMessageSection extends React.Component { } public clearSearch() { - this.props.clearSearch(); + window.inboxStore?.dispatch(clearSearch()); } public search() { - const { search } = this.props; const { searchTerm } = this.props; - - if (search) { + window.inboxStore?.dispatch( search(searchTerm, { noteToSelf: window.i18n('noteToSelf').toLowerCase(), ourNumber: UserUtils.getOurPubKeyStrFromCache(), - }); - } + }) + ); } private renderClosableOverlay(overlay: SessionComposeToType) { @@ -239,7 +218,6 @@ export class LeftPaneMessageSection extends React.Component { searchTerm={searchTerm} updateSearch={this.updateSearch} showSpinner={loading} - theme={this.props.theme} /> ); @@ -257,7 +235,6 @@ export class LeftPaneMessageSection extends React.Component { searchTerm={searchTerm} updateSearch={this.updateSearch} showSpinner={loading} - theme={this.props.theme} /> ); @@ -273,7 +250,6 @@ export class LeftPaneMessageSection extends React.Component { searchResults={searchResults} showSpinner={loading} updateSearch={this.updateSearch} - theme={this.props.theme} /> ); @@ -332,8 +308,6 @@ export class LeftPaneMessageSection extends React.Component { } private async handleMessageButtonClick() { - const { openConversationExternal } = this.props; - if (!this.state.valuePasted && !this.props.searchTerm) { ToastUtils.pushToastError('invalidPubKey', window.i18n('invalidNumberError')); // or ons name return; @@ -349,7 +323,7 @@ export class LeftPaneMessageSection extends React.Component { pubkeyorOns, ConversationTypeEnum.PRIVATE ); - openConversationExternal(pubkeyorOns); + window.inboxStore?.dispatch(openConversationExternal(pubkeyorOns)); this.handleToggleOverlay(undefined); } else { // this might be an ONS, validate the regex first @@ -369,7 +343,7 @@ export class LeftPaneMessageSection extends React.Component { resolvedSessionID, ConversationTypeEnum.PRIVATE ); - openConversationExternal(resolvedSessionID); + window.inboxStore?.dispatch(openConversationExternal(resolvedSessionID)); this.handleToggleOverlay(undefined); } catch (e) { window?.log?.warn('failed to resolve ons name', pubkeyorOns, e); diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index 4c3a59c04..b72d95285 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/ts/components/session/LeftPaneSectionHeader.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; -import { DefaultTheme } from 'styled-components'; +import { DefaultTheme, useTheme } from 'styled-components'; import { SessionButton } from './SessionButton'; const Tab = ({ @@ -36,22 +36,23 @@ type Props = { label?: string; buttonIcon?: SessionIconType; buttonClicked?: any; - theme: DefaultTheme; }; export const LeftPaneSectionHeader = (props: Props) => { const { label, buttonIcon, buttonClicked } = props; + const theme = useTheme(); + return (
{label && } {buttonIcon && ( - + )} diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx index 107fe1fb3..d391ffa7c 100644 --- a/ts/components/session/LeftPaneSettingSection.tsx +++ b/ts/components/session/LeftPaneSettingSection.tsx @@ -154,7 +154,7 @@ export const LeftPaneSettingSection = () => { const theme = useSelector(getTheme); return (
- +
diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx index 382e9ec18..c1bae19c0 100644 --- a/ts/components/session/SessionClosableOverlay.tsx +++ b/ts/components/session/SessionClosableOverlay.tsx @@ -4,7 +4,7 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; import { SessionIdEditable } from './SessionIdEditable'; import { UserSearchDropdown } from './UserSearchDropdown'; import { ContactType, SessionMemberListItem } from './SessionMemberListItem'; -import { ConversationType } from '../../state/ducks/conversations'; +import { ReduxConversationType } from '../../state/ducks/conversations'; import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton'; import { SessionSpinner } from './SessionSpinner'; import { DefaultTheme } from 'styled-components'; @@ -23,12 +23,11 @@ interface Props { onChangeSessionID: any; onCloseClick: any; onButtonClick: any; - contacts?: Array; + contacts?: Array; searchTerm?: string; searchResults?: any; updateSearch?: any; showSpinner?: boolean; - theme: DefaultTheme; } interface State { @@ -159,7 +158,6 @@ export class SessionClosableOverlay extends React.Component { iconSize={SessionIconSize.Small} iconType={SessionIconType.Exit} onClick={onCloseClick} - theme={this.props.theme} />
@@ -226,7 +224,6 @@ export class SessionClosableOverlay extends React.Component { updateSearch={updateSearch} placeholder={window.i18n('searchFor...')} searchResults={searchResults} - theme={this.props.theme} /> )} diff --git a/ts/components/session/SessionSearchInput.tsx b/ts/components/session/SessionSearchInput.tsx index ab79b5e3a..44a9bf58c 100644 --- a/ts/components/session/SessionSearchInput.tsx +++ b/ts/components/session/SessionSearchInput.tsx @@ -8,7 +8,6 @@ interface Props { onChange: any; handleNavigation?: any; placeholder: string; - theme: DefaultTheme; } export class SessionSearchInput extends React.Component { @@ -32,11 +31,7 @@ export class SessionSearchInput extends React.Component { }); }} > - + this.props.onChange(e.target.value)} diff --git a/ts/components/session/UserSearchDropdown.tsx b/ts/components/session/UserSearchDropdown.tsx index c6b3949db..695307bec 100644 --- a/ts/components/session/UserSearchDropdown.tsx +++ b/ts/components/session/UserSearchDropdown.tsx @@ -11,7 +11,6 @@ export interface Props { placeholder: string; searchResults?: SearchResultsProps; updateSearch: (searchTerm: string) => void; - theme: DefaultTheme; } interface State { @@ -68,7 +67,6 @@ export class UserSearchDropdown extends React.Component { onChange={this.updateSearchBound} placeholder={placeholder} handleNavigation={this.handleNavigation} - theme={this.props.theme} /> {searchResults && ( ; @@ -70,10 +71,9 @@ export interface LightBoxOptions { interface Props { ourNumber: string; selectedConversationKey: string; - selectedConversation?: ConversationType; + selectedConversation?: ReduxConversationType; theme: DefaultTheme; messagesProps: Array; - actions: any; } export class SessionConversation extends React.Component { @@ -199,7 +199,7 @@ export class SessionConversation extends React.Component { } = this.state; const selectionMode = !!selectedMessages.length; - const { selectedConversation, selectedConversationKey, messagesProps, actions } = this.props; + const { selectedConversation, selectedConversationKey, messagesProps } = this.props; if (!selectedConversation || !messagesProps) { // return an empty message view @@ -227,9 +227,6 @@ export class SessionConversation extends React.Component { }; const showMessageDetails = !!messageDetailShowProps; - const isPublic = selectedConversation.isPublic || false; - - const isPrivate = selectedConversation.type === ConversationTypeEnum.PRIVATE; return (
{this.renderHeader()}
@@ -257,8 +254,8 @@ export class SessionConversation extends React.Component { isBlocked={selectedConversation.isBlocked} left={selectedConversation.left} isKickedFromGroup={selectedConversation.isKickedFromGroup} - isPrivate={isPrivate} - isPublic={isPublic} + isPrivate={selectedConversation.isPrivate} + isPublic={selectedConversation.isPublic} selectedConversationKey={selectedConversationKey} selectedConversation={selectedConversation} sendMessage={sendMessageFn} @@ -307,10 +304,12 @@ export class SessionConversation extends React.Component { Constants.CONVERSATION.DEFAULT_MESSAGE_FETCH_COUNT, unreadCount ); - this.props.actions.fetchMessagesForConversation({ - conversationKey: selectedConversationKey, - count: messagesToFetch, - }); + window.inboxStore?.dispatch( + fetchMessagesForConversation({ + conversationKey: selectedConversationKey, + count: messagesToFetch, + }) + ); } public getHeaderProps(): ConversationHeaderNonReduxProps { @@ -337,6 +336,9 @@ export class SessionConversation extends React.Component { const { selectedConversation, selectedConversationKey, ourNumber, messagesProps } = this.props; const { quotedMessageTimestamp, selectedMessages } = this.state; + if (!selectedConversation) { + throw new Error(); + } return { selectedMessages, ourPrimary: ourNumber, @@ -344,7 +346,7 @@ export class SessionConversation extends React.Component { messagesProps, resetSelection: this.resetSelection, quotedMessageTimestamp, - conversation: selectedConversation as ConversationType, + conversation: selectedConversation, selectMessage: this.selectMessage, deleteMessage: this.deleteMessage, replyToMessage: this.replyToMessage, @@ -490,18 +492,19 @@ export class SessionConversation extends React.Component { if (askUserForConfirmation) { const onClickClose = () => { - this.props.actions.updateConfirmModal(null); + window.inboxStore?.dispatch(updateConfirmModal(null)); }; - this.props.actions.updateConfirmModal({ - title, - message: warningMessage, - okText, - okTheme: SessionButtonColor.Danger, - onClickOk: doDelete, - onClickClose, - closeAfterClick: true, - }); + window.inboxStore?.dispatch( + updateConfirmModal({ + title, + message: warningMessage, + okText, + okTheme: SessionButtonColor.Danger, + onClickOk: doDelete, + onClickClose, + }) + ); } else { void doDelete(); } @@ -988,3 +991,6 @@ export class SessionConversation extends React.Component { window.inboxStore?.dispatch(updateMentionsMembers(allMembers)); } } +function fetchMessagesForConversation(arg0: { conversationKey: string; count: number }): any { + throw new Error('Function not implemented.'); +} diff --git a/ts/components/session/conversation/SessionMessagesList.tsx b/ts/components/session/conversation/SessionMessagesList.tsx index f7b7f12f2..0a01f0a2d 100644 --- a/ts/components/session/conversation/SessionMessagesList.tsx +++ b/ts/components/session/conversation/SessionMessagesList.tsx @@ -10,11 +10,7 @@ import { contextMenu } from 'react-contexify'; import { AttachmentType } from '../../../types/Attachment'; import { GroupNotification } from '../../conversation/GroupNotification'; import { GroupInvitation } from '../../conversation/GroupInvitation'; -import { - ConversationType, - MessageModelProps, - SortedMessageModelProps, -} from '../../../state/ducks/conversations'; +import { ReduxConversationType, SortedMessageModelProps } from '../../../state/ducks/conversations'; import { SessionLastSeenIndicator } from './SessionLastSeenIndicator'; import { ToastUtils } from '../../../session/utils'; import { TypingBubble } from '../../conversation/TypingBubble'; @@ -36,7 +32,7 @@ interface Props { selectedMessages: Array; conversationKey: string; messagesProps: Array; - conversation: ConversationType; + conversation: ReduxConversationType; ourPrimary: string; messageContainerRef: React.RefObject; selectMessage: (messageId: string) => void; @@ -129,7 +125,7 @@ export class SessionMessagesList extends React.Component { } public render() { - const { conversationKey, conversation, messagesProps } = this.props; + const { conversationKey, conversation } = this.props; const { showScrollButton } = this.state; let displayedName = null; diff --git a/ts/data/data.ts b/ts/data/data.ts index 270e76875..4c6ac4875 100644 --- a/ts/data/data.ts +++ b/ts/data/data.ts @@ -11,7 +11,7 @@ import { HexKeyPair } from '../receiver/keypairs'; import { getSodium } from '../session/crypto'; import { PubKey } from '../session/types'; import { fromArrayBufferToBase64, fromBase64ToArrayBuffer } from '../session/utils/String'; -import { ConversationType } from '../state/ducks/conversations'; +import { ReduxConversationType } from '../state/ducks/conversations'; import { channels } from './channels'; import { channelsToMake as channelstoMakeOpenGroupV2 } from './opengroups'; @@ -511,7 +511,7 @@ export async function removeAllClosedGroupEncryptionKeyPairs( } // Conversation -export async function saveConversation(data: ConversationType): Promise { +export async function saveConversation(data: ReduxConversationType): Promise { const cleaned = _.omit(data, 'isOnline'); await channels.saveConversation(cleaned); } @@ -524,7 +524,7 @@ export async function getConversationById(id: string): Promise { +export async function updateConversation(data: ReduxConversationType): Promise { await channels.updateConversation(data); } diff --git a/ts/hooks/useMembersAvatar.tsx b/ts/hooks/useMembersAvatar.tsx index 47ed402ba..df1fb22ec 100644 --- a/ts/hooks/useMembersAvatar.tsx +++ b/ts/hooks/useMembersAvatar.tsx @@ -2,9 +2,9 @@ import _ from 'lodash'; import { useEffect, useState } from 'react'; import { getConversationController } from '../session/conversations'; import { UserUtils } from '../session/utils'; -import { ConversationType } from '../state/ducks/conversations'; +import { ReduxConversationType } from '../state/ducks/conversations'; -export function useMembersAvatars(conversation: ConversationType | undefined) { +export function useMembersAvatars(conversation: ReduxConversationType | undefined) { const [membersAvatars, setMembersAvatars] = useState< | Array<{ avatarPath: string | undefined; diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts index c71505222..252aff14e 100644 --- a/ts/models/conversation.ts +++ b/ts/models/conversation.ts @@ -24,9 +24,9 @@ import { import { fromArrayBufferToBase64, fromBase64ToArrayBuffer } from '../session/utils/String'; import { actions as conversationActions, - ConversationType as ReduxConversationType, LastMessageStatusType, MessageModelProps, + ReduxConversationType, } from '../state/ducks/conversations'; import { ExpirationTimerUpdateMessage } from '../session/messages/outgoing/controlMessage/ExpirationTimerUpdateMessage'; import { TypingMessage } from '../session/messages/outgoing/controlMessage/TypingMessage'; diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 245305e19..679420629 100644 --- a/ts/state/ducks/conversations.ts +++ b/ts/state/ducks/conversations.ts @@ -168,7 +168,7 @@ export type LastMessageType = { text: string | null; }; -export interface ConversationType { +export interface ReduxConversationType { id: string; name?: string; profileName?: string; @@ -202,7 +202,7 @@ export interface ConversationType { } export type ConversationLookupType = { - [key: string]: ConversationType; + [key: string]: ReduxConversationType; }; export type ConversationsStateType = { @@ -322,14 +322,14 @@ type ConversationAddedActionType = { type: 'CONVERSATION_ADDED'; payload: { id: string; - data: ConversationType; + data: ReduxConversationType; }; }; type ConversationChangedActionType = { type: 'CONVERSATION_CHANGED'; payload: { id: string; - data: ConversationType; + data: ReduxConversationType; }; }; type ConversationRemovedActionType = { @@ -425,7 +425,7 @@ export const actions = { openConversationExternal, }; -function conversationAdded(id: string, data: ConversationType): ConversationAddedActionType { +function conversationAdded(id: string, data: ReduxConversationType): ConversationAddedActionType { return { type: 'CONVERSATION_ADDED', payload: { @@ -434,7 +434,10 @@ function conversationAdded(id: string, data: ConversationType): ConversationAdde }, }; } -function conversationChanged(id: string, data: ConversationType): ConversationChangedActionType { +function conversationChanged( + id: string, + data: ReduxConversationType +): ConversationChangedActionType { return { type: 'CONVERSATION_CHANGED', payload: { diff --git a/ts/state/ducks/search.ts b/ts/state/ducks/search.ts index 46a602b00..463142266 100644 --- a/ts/state/ducks/search.ts +++ b/ts/state/ducks/search.ts @@ -6,9 +6,9 @@ import { searchConversations, searchMessages } from '../../../ts/data/data'; import { makeLookup } from '../../util/makeLookup'; import { - ConversationType, MessageExpiredActionType, PropsForSearchResults, + ReduxConversationType, RemoveAllConversationsActionType, SelectedConversationChangedActionType, } from './conversations'; @@ -242,7 +242,7 @@ async function queryConversationsAndContacts(providedQuery: string, options: Sea const { ourNumber, noteToSelf } = options; const query = providedQuery.replace(/[+-.()]*/g, ''); - const searchResults: Array = await searchConversations(query); + const searchResults: Array = await searchConversations(query); // Split into two groups - active conversations and items just from address book let conversations: Array = []; diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index df2d03557..c45a9fdbf 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -4,8 +4,7 @@ import { StateType } from '../reducer'; import { ConversationLookupType, ConversationsStateType, - ConversationType, - MessageModelProps, + ReduxConversationType, SortedMessageModelProps, } from '../ducks/conversations'; @@ -36,7 +35,7 @@ export const getSelectedConversationKey = createSelector( export const getSelectedConversation = createSelector( getConversations, - (state: ConversationsStateType): ConversationType | undefined => { + (state: ConversationsStateType): ReduxConversationType | undefined => { return state.selectedConversation ? state.conversationLookup[state.selectedConversation] : undefined; @@ -45,7 +44,7 @@ export const getSelectedConversation = createSelector( export const getOurPrimaryConversation = createSelector( getConversations, - (state: ConversationsStateType): ConversationType => + (state: ConversationsStateType): ReduxConversationType => state.conversationLookup[window.storage.get('primaryDevicePubKey')] ); @@ -54,7 +53,10 @@ export const getMessagesOfSelectedConversation = createSelector( (state: ConversationsStateType): Array => state.messages ); -function getConversationTitle(conversation: ConversationType, testingi18n?: LocalizerType): string { +function getConversationTitle( + conversation: ReduxConversationType, + testingi18n?: LocalizerType +): string { if (conversation.name) { return conversation.name; } @@ -68,7 +70,7 @@ function getConversationTitle(conversation: ConversationType, testingi18n?: Loca const collator = new Intl.Collator(); export const _getConversationComparator = (testingi18n?: LocalizerType) => { - return (left: ConversationType, right: ConversationType): number => { + return (left: ReduxConversationType, right: ReduxConversationType): number => { const leftActiveAt = left.activeAt; const rightActiveAt = right.activeAt; if (leftActiveAt && !rightActiveAt) { @@ -91,18 +93,18 @@ export const getConversationComparator = createSelector(getIntl, _getConversatio // export only because we use it in some of our tests export const _getLeftPaneLists = ( lookup: ConversationLookupType, - comparator: (left: ConversationType, right: ConversationType) => number, + comparator: (left: ReduxConversationType, right: ReduxConversationType) => number, selectedConversation?: string ): { - conversations: Array; - contacts: Array; + conversations: Array; + contacts: Array; unreadCount: number; } => { const values = Object.values(lookup); const sorted = values.sort(comparator); - const conversations: Array = []; - const directConversations: Array = []; + const conversations: Array = []; + const directConversations: Array = []; let index = 0; @@ -172,11 +174,20 @@ export const getLeftPaneLists = createSelector( export const getMe = createSelector( [getConversationLookup, getOurNumber], - (lookup: ConversationLookupType, ourNumber: string): ConversationType => { + (lookup: ConversationLookupType, ourNumber: string): ReduxConversationType => { return lookup[ourNumber]; } ); +export const getDirectContacts = createSelector( + getLeftPaneLists, + (state: { + conversations: Array; + contacts: Array; + unreadCount: number; + }) => state.contacts +); + export const getUnreadMessageCount = createSelector(getLeftPaneLists, (state): number => { return state.unreadCount; });