Split search actions between discussions and messages

This commit is contained in:
Ken Powers 2019-09-04 10:46:28 -04:00 committed by GitHub
parent 1ab844674a
commit 1d3fe4bbf3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 213 additions and 93 deletions

View file

@ -8,6 +8,7 @@ import {
import { Intl } from './Intl';
import { Emojify } from './conversation/Emojify';
import { Spinner } from './Spinner';
import {
ConversationListItem,
PropsData as ConversationListItemPropsType,
@ -17,11 +18,13 @@ import { StartNewConversation } from './StartNewConversation';
import { LocalizerType } from '../types/Util';
export type PropsDataType = {
discussionsLoading: boolean;
items: Array<SearchResultRowType>;
messagesLoading: boolean;
noResults: boolean;
regionCode: string;
searchTerm: string;
searchConversationName?: string;
searchTerm: string;
};
type StartNewConversationType = {
@ -52,6 +55,10 @@ type MessageType = {
type: 'message';
data: string;
};
type SpinnerType = {
type: 'spinner';
data: undefined;
};
export type SearchResultRowType =
| StartNewConversationType
@ -60,7 +67,8 @@ export type SearchResultRowType =
| MessagesHeaderType
| ConversationType
| ContactsType
| MessageType;
| MessageType
| SpinnerType;
type PropsHousekeepingType = {
i18n: LocalizerType;
@ -89,7 +97,7 @@ export class SearchResults extends React.Component<PropsType> {
public mostRecentWidth = 0;
public mostRecentHeight = 0;
public cellSizeCache = new CellMeasurerCache({
defaultHeight: 36,
defaultHeight: 80,
fixedWidth: true,
});
public listRef = React.createRef<any>();
@ -160,6 +168,12 @@ export class SearchResults extends React.Component<PropsType> {
const { data } = row;
return renderMessageSearchResult(data);
} else if (row.type === 'spinner') {
return (
<div className="module-search-results__spinner-container">
<Spinner size="24px" svgSize="small" />
</div>
);
} else {
throw new Error(
'SearchResults.renderRowContents: Encountered unknown row type'
@ -194,14 +208,24 @@ export class SearchResults extends React.Component<PropsType> {
};
public componentDidUpdate(prevProps: PropsType) {
const { items } = this.props;
const {
items,
searchTerm,
discussionsLoading,
messagesLoading,
} = this.props;
if (
if (searchTerm !== prevProps.searchTerm) {
this.resizeAll();
} else if (
discussionsLoading !== prevProps.discussionsLoading ||
messagesLoading !== prevProps.messagesLoading
) {
this.resizeAll();
} else if (
items &&
items.length > 0 &&
prevProps.items &&
prevProps.items.length > 0 &&
items !== prevProps.items
prevProps.items.length !== items.length
) {
this.resizeAll();
}
@ -270,7 +294,7 @@ export class SearchResults extends React.Component<PropsType> {
}
return (
<div className="module-search-results" key={searchTerm}>
<div className="module-search-results">
<AutoSizer>
{({ height, width }) => {
this.mostRecentWidth = width;