keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

fix: virtualize list of search result so input typing is fast

Browse Source
pull/2795/head
Audric Ackermann 2 years ago
parent dc3e8450e9
commit 43badfa134
9 changed files with 133 additions and 64 deletions
Show Stats Download Patch File Download Diff File

3
_locales/en/messages.json
Unescape Escape View File

@ -70,9 +70,10 @@
"show": "Show", "show": "Show",
"sessionMessenger": "Session", "sessionMessenger": "Session",
"noSearchResults": "No results found for \"$searchTerm$\"", "noSearchResults": "No results found for \"$searchTerm$\"",
"conversationsHeader": "Contacts and Groups", "conversationsHeader": "Contacts and Groups: $count$",
"contactsHeader": "Contacts", "contactsHeader": "Contacts",
"messagesHeader": "Conversations", "messagesHeader": "Conversations",
"searchMessagesHeader": "Messages: $count$",
"settingsHeader": "Settings", "settingsHeader": "Settings",
"typingAlt": "Typing animation for this conversation", "typingAlt": "Typing animation for this conversation",
"contactAvatarAlt": "Avatar for contact $name$", "contactAvatarAlt": "Avatar for contact $name$",

4
package.json
Unescape Escape View File

@ -75,6 +75,7 @@
"@emoji-mart/data": "^1.0.6", "@emoji-mart/data": "^1.0.6",
"@emoji-mart/react": "^1.0.1", "@emoji-mart/react": "^1.0.1",
"@reduxjs/toolkit": "1.8.5", "@reduxjs/toolkit": "1.8.5",
"@types/react-mentions": "^4.1.8",
"abort-controller": "3.0.0", "abort-controller": "3.0.0",
"auto-bind": "^4.0.0", "auto-bind": "^4.0.0",
"backbone": "1.3.3", "backbone": "1.3.3",
@ -122,7 +123,7 @@
"react-draggable": "^4.4.4", "react-draggable": "^4.4.4",
"react-h5-audio-player": "^3.2.0", "react-h5-audio-player": "^3.2.0",
"react-intersection-observer": "^8.30.3", "react-intersection-observer": "^8.30.3",
"react-mentions": "^4.2.0", "react-mentions": "^4.4.9",
"react-portal": "^4.2.0", "react-portal": "^4.2.0",
"react-qr-svg": "^2.2.1", "react-qr-svg": "^2.2.1",
"react-redux": "8.0.4", "react-redux": "8.0.4",
@ -169,7 +170,6 @@
"@types/rc-slider": "^8.6.5", "@types/rc-slider": "^8.6.5",
"@types/react": "^17.0.2", "@types/react": "^17.0.2",
"@types/react-dom": "^17.0.2", "@types/react-dom": "^17.0.2",
"@types/react-mentions": "^4.1.1",
"@types/react-mic": "^12.4.1", "@types/react-mic": "^12.4.1",
"@types/react-portal": "^4.0.2", "@types/react-portal": "^4.0.2",
"@types/react-redux": "^7.1.24", "@types/react-redux": "^7.1.24",

12
ts/components/leftpane/LeftPane.tsx
Unescape Escape View File

@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
import styled from 'styled-components'; import styled from 'styled-components';
import { SectionType } from '../../state/ducks/section'; import { SectionType } from '../../state/ducks/section';
import { getLeftPaneConversationIds } from '../../state/selectors/conversations'; import { getLeftPaneConversationIds } from '../../state/selectors/conversations';
import { getSearchResultsIdsOnly, isSearching } from '../../state/selectors/search'; import { getHasSearchResults } from '../../state/selectors/search';
import { getFocusedSection, getOverlayMode } from '../../state/selectors/section'; import { getFocusedSection, getOverlayMode } from '../../state/selectors/section';
import { SessionTheme } from '../../themes/SessionTheme'; import { SessionTheme } from '../../themes/SessionTheme';
import { SessionToastContainer } from '../SessionToastContainer'; import { SessionToastContainer } from '../SessionToastContainer';
@ -22,18 +22,14 @@ const StyledLeftPane = styled.div`
`; `;
const InnerLeftPaneMessageSection = () => { const InnerLeftPaneMessageSection = () => {
const showSearch = useSelector(isSearching); const hasSearchResults = useSelector(getHasSearchResults);
const searchResults = useSelector(getSearchResultsIdsOnly);
const conversationIds = useSelector(getLeftPaneConversationIds); const conversationIds = useSelector(getLeftPaneConversationIds);
const overlayMode = useSelector(getOverlayMode); const overlayMode = useSelector(getOverlayMode);
return ( return (
// tslint:disable-next-line: use-simple-attributes
<LeftPaneMessageSection <LeftPaneMessageSection
conversationIds={showSearch ? undefined : conversationIds || []} hasSearchResults={hasSearchResults}
searchResults={showSearch ? searchResults : undefined} conversationIds={conversationIds}
overlayMode={overlayMode} overlayMode={overlayMode}
/> />
); );

10
ts/components/leftpane/LeftPaneMessageSection.tsx
Unescape Escape View File

@ -1,7 +1,7 @@
import autoBind from 'auto-bind'; import autoBind from 'auto-bind';
import React from 'react'; import React from 'react';
import { AutoSizer, List, ListRowProps } from 'react-virtualized'; import { AutoSizer, List, ListRowProps } from 'react-virtualized';
import { SearchResults, SearchResultsProps } from '../search/SearchResults'; import { SearchResults } from '../search/SearchResults';
import { LeftPaneSectionHeader } from './LeftPaneSectionHeader'; import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
import { MessageRequestsBanner } from './MessageRequestsBanner'; import { MessageRequestsBanner } from './MessageRequestsBanner';
@ -21,7 +21,7 @@ import { assertUnreachable } from '../../types/sqlSharedTypes';
export interface Props { export interface Props {
conversationIds?: Array<string>; conversationIds?: Array<string>;
searchResults?: SearchResultsProps; hasSearchResults: boolean;
overlayMode: OverlayMode | undefined; overlayMode: OverlayMode | undefined;
} }
@ -88,10 +88,10 @@ export class LeftPaneMessageSection extends React.Component<Props> {
}; };
public renderList(): JSX.Element { public renderList(): JSX.Element {
const { conversationIds, searchResults } = this.props; const { conversationIds, hasSearchResults } = this.props;
if (searchResults) { if (hasSearchResults) {
return <SearchResults {...searchResults} />; return <SearchResults />;
} }
if (!conversationIds) { if (!conversationIds) {

8
ts/components/search/MessageSearchResults.tsx
Unescape Escape View File

@ -6,7 +6,7 @@ import { ContactName } from '../conversation/ContactName';
import { Avatar, AvatarSize } from '../avatar/Avatar'; import { Avatar, AvatarSize } from '../avatar/Avatar';
import { Timestamp } from '../conversation/Timestamp'; import { Timestamp } from '../conversation/Timestamp';
import { MessageBodyHighlight } from '../basic/MessageBodyHighlight'; import { MessageBodyHighlight } from '../basic/MessageBodyHighlight';
import styled from 'styled-components'; import styled, { CSSProperties } from 'styled-components';
import { MessageAttributes } from '../../models/messageType'; import { MessageAttributes } from '../../models/messageType';
import { useConversationUsername, useIsPrivate } from '../../hooks/useParamSelector'; import { useConversationUsername, useIsPrivate } from '../../hooks/useParamSelector';
import { UserUtils } from '../../session/utils'; import { UserUtils } from '../../session/utils';
@ -172,7 +172,9 @@ const StyledTimestampContaimer = styled.div`
color: var(--conversation-tab-text-color); color: var(--conversation-tab-text-color);
`; `;
export const MessageSearchResult = (props: MessageResultProps) => { type MessageSearchResultProps = MessageResultProps & { style: CSSProperties };
export const MessageSearchResult = (props: MessageSearchResultProps) => {
const { const {
id, id,
conversationId, conversationId,
@ -183,6 +185,7 @@ export const MessageSearchResult = (props: MessageResultProps) => {
serverTimestamp, serverTimestamp,
timestamp, timestamp,
direction, direction,
style,
} = props; } = props;
/** destination is only used for search results (showing the `from:` and `to`) /** destination is only used for search results (showing the `from:` and `to`)
@ -210,6 +213,7 @@ export const MessageSearchResult = (props: MessageResultProps) => {
return ( return (
<StyledSearchResults <StyledSearchResults
key={`div-msg-searchresult-${id}`} key={`div-msg-searchresult-${id}`}
style={style}
role="button" role="button"
onClick={() => { onClick={() => {
void openConversationToSpecificMessage({ void openConversationToSpecificMessage({

94
ts/components/search/SearchResults.tsx
Unescape Escape View File

@ -1,13 +1,16 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled, { CSSProperties } from 'styled-components';
import { ConversationListItem } from '../leftpane/conversation-list-item/ConversationListItem'; import { ConversationListItem } from '../leftpane/conversation-list-item/ConversationListItem';
import { MessageResultProps, MessageSearchResult } from './MessageSearchResults'; import { MessageSearchResult } from './MessageSearchResults';
import { AutoSizer, List } from 'react-virtualized';
export type SearchResultsProps = { import { useSelector } from 'react-redux';
contactsAndGroupsIds: Array<string>; import {
messages: Array<MessageResultProps>; SearchResultsMergedListItem,
searchTerm: string; getHasSearchResults,
}; getSearchResultsList,
getSearchTerm,
} from '../../state/selectors/search';
import { isString } from 'lodash';
const StyledSeparatorSection = styled.div` const StyledSeparatorSection = styled.div`
height: 36px; height: 36px;
@ -35,37 +38,58 @@ const NoResults = styled.div`
text-align: center; text-align: center;
`; `;
export const SearchResults = (props: SearchResultsProps) => { const SectionHeader = ({ title, style }: { title: string; style: CSSProperties }) => {
const { contactsAndGroupsIds, messages, searchTerm } = props; return <StyledSeparatorSection style={style}>{title}</StyledSeparatorSection>;
};
const haveContactsAndGroup = Boolean(contactsAndGroupsIds?.length); function isContact(item: SearchResultsMergedListItem): item is { contactConvoId: string } {
const haveMessages = Boolean(messages?.length); return (item as any).contactConvoId !== undefined;
const noResults = !haveContactsAndGroup && !haveMessages; }
const VirtualizedList = () => {
const searchResultList = useSelector(getSearchResultsList);
return ( return (
<SearchResultsContainer> <AutoSizer>
{noResults ? <NoResults>{window.i18n('noSearchResults', [searchTerm])}</NoResults> : null} {({ height, width }) => (
{haveContactsAndGroup ? ( <List
<> height={height}
<StyledSeparatorSection>{window.i18n('conversationsHeader')}</StyledSeparatorSection> rowCount={searchResultList.length}
{contactsAndGroupsIds.map(conversationId => ( rowHeight={rowPos => {
<ConversationListItem return isString(searchResultList[rowPos.index]) ? 36 : 64;
conversationId={conversationId} }}
key={`search-result-convo-${conversationId}`} rowRenderer={({ index, key, style }) => {
/> const row = searchResultList[index];
))} if (!row) {
</> return null;
) : null} }
if (isString(row)) {
return <SectionHeader title={row} style={style} key={key} />;
}
if (isContact(row)) {
return (
<ConversationListItem conversationId={row.contactConvoId} style={style} key={key} />
);
}
return <MessageSearchResult style={style} key={key} {...row} />;
}}
width={width}
autoHeight={false}
/>
)}
</AutoSizer>
);
};
export const SearchResults = () => {
const searchTerm = useSelector(getSearchTerm);
const hasSearchResults = useSelector(getHasSearchResults);
{haveMessages && ( return (
<> <SearchResultsContainer>
<StyledSeparatorSection> {!hasSearchResults ? (
{`${window.i18n('messagesHeader')}: ${messages.length}`} <NoResults>{window.i18n('noSearchResults', [searchTerm])}</NoResults>
</StyledSeparatorSection> ) : (
{messages.map(message => ( <VirtualizedList />
<MessageSearchResult key={`search-result-message-${message.id}`} {...message} />
))}
</>
)} )}
</SearchResultsContainer> </SearchResultsContainer>
); );

33
ts/state/selectors/search.ts
Unescape Escape View File

@ -1,11 +1,12 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { compact } from 'lodash'; import { compact, isEmpty } from 'lodash';
import { StateType } from '../reducer'; import { StateType } from '../reducer';
import { ConversationLookupType } from '../ducks/conversations'; import { ConversationLookupType } from '../ducks/conversations';
import { SearchStateType } from '../ducks/search'; import { SearchStateType } from '../ducks/search';
import { getConversationLookup } from './conversations'; import { getConversationLookup } from './conversations';
import { MessageResultProps } from '../../components/search/MessageSearchResults';
export const getSearch = (state: StateType): SearchStateType => state.search; export const getSearch = (state: StateType): SearchStateType => state.search;
@ -41,6 +42,10 @@ const getSearchResults = createSelector(
} }
); );
export const getSearchTerm = createSelector([getSearchResults], searchResult => {
return searchResult.searchTerm;
});
export const getSearchResultsIdsOnly = createSelector([getSearchResults], searchState => { export const getSearchResultsIdsOnly = createSelector([getSearchResults], searchState => {
return { return {
...searchState, ...searchState,
@ -48,6 +53,32 @@ export const getSearchResultsIdsOnly = createSelector([getSearchResults], search
}; };
}); });
export const getHasSearchResults = createSelector([getSearchResults], searchState => {
return !isEmpty(searchState.contactsAndGroups) || !isEmpty(searchState.messages);
});
export const getSearchResultsContactOnly = createSelector([getSearchResults], searchState => { export const getSearchResultsContactOnly = createSelector([getSearchResults], searchState => {
return searchState.contactsAndGroups.filter(m => m.isPrivate).map(m => m.id); return searchState.contactsAndGroups.filter(m => m.isPrivate).map(m => m.id);
}); });
/**
*
* When type is string, we render a sectionHeader.
* When type just has a conversationId field, we render a ConversationListItem.
* When type is MessageResultProps we render a MessageSearchResult
*/
export type SearchResultsMergedListItem = string | { contactConvoId: string } | MessageResultProps;
export const getSearchResultsList = createSelector([getSearchResults], searchState => {
const { contactsAndGroups, messages } = searchState;
const builtList: Array<SearchResultsMergedListItem> = [];
if (contactsAndGroups.length) {
builtList.push(window.i18n('conversationsHeader', [`${contactsAndGroups.length}`]));
builtList.push(...contactsAndGroups.map(m => ({ contactConvoId: m.id })));
}
if (messages.length) {
builtList.push(window.i18n('searchMessagesHeader', [`${messages.length}`]));
builtList.push(...messages);
}
return builtList;
});

1
ts/types/LocalizerKeys.ts
Unescape Escape View File

@ -73,6 +73,7 @@ export type LocalizerKeys =
| 'conversationsHeader' | 'conversationsHeader'
| 'contactsHeader' | 'contactsHeader'
| 'messagesHeader' | 'messagesHeader'
| 'searchMessagesHeader'
| 'settingsHeader' | 'settingsHeader'
| 'typingAlt' | 'typingAlt'
| 'contactAvatarAlt' | 'contactAvatarAlt'

32
yarn.lock
Unescape Escape View File

@ -411,13 +411,20 @@
dependencies: dependencies:
regenerator-runtime "^0.13.2" regenerator-runtime "^0.13.2"
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.19.0" version "7.19.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA== integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
dependencies: dependencies:
regenerator-runtime "^0.13.4" regenerator-runtime "^0.13.4"
"@babel/runtime@^7.3.4":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
dependencies:
regenerator-runtime "^0.13.11"
"@babel/template@^7.18.6": "@babel/template@^7.18.6":
version "7.18.6" version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
@ -1192,10 +1199,10 @@
dependencies: dependencies:
"@types/react" "^17" "@types/react" "^17"
"@types/react-mentions@^4.1.1": "@types/react-mentions@^4.1.8":
version "4.1.6" version "4.1.8"
resolved "https://registry.yarnpkg.com/@types/react-mentions/-/react-mentions-4.1.6.tgz#0ecdb61785c22edbf9c7d6718505d4814ad3a65c" resolved "https://registry.yarnpkg.com/@types/react-mentions/-/react-mentions-4.1.8.tgz#4bebe54c5c74181d8eedf1e613a208d03b4a8d7e"
integrity sha512-f4/BdnjlMxT47q+WqlcYYwFABbBMVQrDoFFeMeljtFC5nnR9/x8TOFmN18BJKgNuWMgivy9uE5EKtsjlay751w== integrity sha512-Go86ozdnh0FTNbiGiDPAcNqYqtab9iGzLOgZPYUKrnhI4539jGzfJtP6rFHcXgi9Koe58yhkeyKYib6Ucul/sQ==
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
@ -6551,10 +6558,10 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-mentions@^4.2.0: react-mentions@^4.4.9:
version "4.3.2" version "4.4.9"
resolved "https://registry.yarnpkg.com/react-mentions/-/react-mentions-4.3.2.tgz#93a2a674648f31d2b40e8c90d30b94c377cbb582" resolved "https://registry.yarnpkg.com/react-mentions/-/react-mentions-4.4.9.tgz#5f68c7978c107518646c5c34c47515c30259e23a"
integrity sha512-NV8ixuE5W9zuvBNWLpPlO+f4QYEkR+p6mR3Jfpfcbytrqqn2nbVb27YXE/M4qSP8N8C+ktgeMUV4jVhm86gt1A== integrity sha512-CUDt8GOVbAmo3o+a8l1UxcJ/gJMdFdqeiJM3U5+krcNoUwyKv7Zcy67WfFZQJfChpJ8LTiD0FtCSRoyEzC6Ysw==
dependencies: dependencies:
"@babel/runtime" "7.4.5" "@babel/runtime" "7.4.5"
invariant "^2.2.4" invariant "^2.2.4"
@ -6759,7 +6766,12 @@ regenerator-runtime@^0.11.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4: regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2:
version "0.13.11"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
regenerator-runtime@^0.13.4:
version "0.13.9" version "0.13.9"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==

Write Preview
Loading…
Cancel
Save