|
|
|
|
@ -3,17 +3,29 @@ import React from 'react';
|
|
|
|
|
import { ActionsPanel, SectionType } from './session/ActionsPanel';
|
|
|
|
|
import { LeftPaneMessageSection } from './session/LeftPaneMessageSection';
|
|
|
|
|
|
|
|
|
|
import { ConversationListItemProps } from './ConversationListItem';
|
|
|
|
|
import { SearchResultsProps } from './SearchResults';
|
|
|
|
|
import { SearchOptions } from '../types/Search';
|
|
|
|
|
import { ConversationType } from '../state/ducks/conversations';
|
|
|
|
|
import { openConversationExternal } from '../state/ducks/conversations';
|
|
|
|
|
import { LeftPaneContactSection } from './session/LeftPaneContactSection';
|
|
|
|
|
import { LeftPaneSettingSection } from './session/LeftPaneSettingSection';
|
|
|
|
|
import { SessionTheme } from '../state/ducks/SessionTheme';
|
|
|
|
|
import { DefaultTheme } from 'styled-components';
|
|
|
|
|
import { SessionSettingCategory } from './session/settings/SessionSettings';
|
|
|
|
|
import { SessionOffline } from './session/network/SessionOffline';
|
|
|
|
|
import { SessionExpiredWarning } from './session/network/SessionExpiredWarning';
|
|
|
|
|
import { getFocusedSection } from '../state/selectors/section';
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
import {
|
|
|
|
|
getLeftPaneLists,
|
|
|
|
|
getOurPrimaryConversation,
|
|
|
|
|
getUnreadMessageCount,
|
|
|
|
|
} from '../state/selectors/conversations';
|
|
|
|
|
import {
|
|
|
|
|
getQuery,
|
|
|
|
|
getSearchResults,
|
|
|
|
|
isSearching,
|
|
|
|
|
} from '../state/selectors/search';
|
|
|
|
|
import { clearSearch, search, updateSearchTerm } from '../state/ducks/search';
|
|
|
|
|
import { showLeftPaneSection } from '../state/ducks/section';
|
|
|
|
|
import { getOurNumber } from '../state/selectors/user';
|
|
|
|
|
import { getTheme } from '../state/selectors/theme';
|
|
|
|
|
import { applyTheme, ThemeStateType } from '../state/ducks/theme';
|
|
|
|
|
|
|
|
|
|
// from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5
|
|
|
|
|
export type RowRendererParamsType = {
|
|
|
|
|
@ -25,132 +37,115 @@ export type RowRendererParamsType = {
|
|
|
|
|
style: Object;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
ourPrimaryConversation: ConversationType;
|
|
|
|
|
conversations: Array<ConversationListItemProps>;
|
|
|
|
|
contacts: Array<ConversationType>;
|
|
|
|
|
|
|
|
|
|
unreadMessageCount: number;
|
|
|
|
|
searchResults?: SearchResultsProps;
|
|
|
|
|
searchTerm: string;
|
|
|
|
|
|
|
|
|
|
focusedSection: SectionType;
|
|
|
|
|
focusedSettingsSection?: SessionSettingCategory;
|
|
|
|
|
showLeftPaneSection: (section: SectionType) => void;
|
|
|
|
|
showSettingsSection: (section: SessionSettingCategory) => void;
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
isExpired: boolean;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
openConversationExternal: (id: string, messageId?: string) => void;
|
|
|
|
|
updateSearchTerm: (searchTerm: string) => void;
|
|
|
|
|
search: (query: string, options: SearchOptions) => void;
|
|
|
|
|
clearSearch: () => void;
|
|
|
|
|
|
|
|
|
|
theme: DefaultTheme;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export class LeftPane extends React.Component<Props> {
|
|
|
|
|
public constructor(props: any) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.handleSectionSelected = this.handleSectionSelected.bind(this);
|
|
|
|
|
}
|
|
|
|
|
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 (
|
|
|
|
|
<>
|
|
|
|
|
<SessionOffline />
|
|
|
|
|
{props.isExpired && <SessionExpiredWarning />}
|
|
|
|
|
<LeftPaneMessageSection
|
|
|
|
|
theme={theme}
|
|
|
|
|
openConversationExternal={(id, messageId) =>
|
|
|
|
|
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())}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
public handleSectionSelected(section: SectionType) {
|
|
|
|
|
this.props.clearSearch();
|
|
|
|
|
this.props.showLeftPaneSection(section);
|
|
|
|
|
}
|
|
|
|
|
const InnerLeftPaneContactSection = () => {
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
const theme = useSelector(getTheme);
|
|
|
|
|
const showSearch = useSelector(isSearching);
|
|
|
|
|
|
|
|
|
|
const lists = showSearch ? undefined : useSelector(getLeftPaneLists);
|
|
|
|
|
|
|
|
|
|
const directContacts = lists?.contacts || [];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<SessionOffline />
|
|
|
|
|
<LeftPaneContactSection
|
|
|
|
|
openConversationExternal={(id, messageId) =>
|
|
|
|
|
dispatch(openConversationExternal(id, messageId))
|
|
|
|
|
}
|
|
|
|
|
directContacts={directContacts}
|
|
|
|
|
theme={theme}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
public render(): JSX.Element {
|
|
|
|
|
return (
|
|
|
|
|
<SessionTheme theme={this.props.theme}>
|
|
|
|
|
<div className="module-left-pane-session">
|
|
|
|
|
<ActionsPanel
|
|
|
|
|
{...this.props}
|
|
|
|
|
selectedSection={this.props.focusedSection}
|
|
|
|
|
onSectionSelected={this.handleSectionSelected}
|
|
|
|
|
/>
|
|
|
|
|
<div className="module-left-pane">{this.renderSection()}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</SessionTheme>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
const LeftPaneSettingsSection = () => {
|
|
|
|
|
return <LeftPaneSettingSection />;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
private renderSection(): JSX.Element | undefined {
|
|
|
|
|
switch (this.props.focusedSection) {
|
|
|
|
|
case SectionType.Message:
|
|
|
|
|
return this.renderMessageSection();
|
|
|
|
|
case SectionType.Contact:
|
|
|
|
|
return this.renderContactSection();
|
|
|
|
|
case SectionType.Settings:
|
|
|
|
|
return this.renderSettingSection();
|
|
|
|
|
default:
|
|
|
|
|
return undefined;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const LeftPaneSection = (props: { isExpired: boolean }) => {
|
|
|
|
|
const focusedSection = useSelector(getFocusedSection);
|
|
|
|
|
|
|
|
|
|
private renderMessageSection() {
|
|
|
|
|
const {
|
|
|
|
|
openConversationExternal,
|
|
|
|
|
conversations,
|
|
|
|
|
contacts,
|
|
|
|
|
searchResults,
|
|
|
|
|
searchTerm,
|
|
|
|
|
updateSearchTerm,
|
|
|
|
|
search,
|
|
|
|
|
clearSearch,
|
|
|
|
|
isExpired,
|
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<SessionOffline theme={this.props.theme} />
|
|
|
|
|
{isExpired && <SessionExpiredWarning theme={this.props.theme} />}
|
|
|
|
|
<LeftPaneMessageSection
|
|
|
|
|
theme={this.props.theme}
|
|
|
|
|
contacts={contacts}
|
|
|
|
|
openConversationExternal={openConversationExternal}
|
|
|
|
|
conversations={conversations}
|
|
|
|
|
searchResults={searchResults}
|
|
|
|
|
searchTerm={searchTerm}
|
|
|
|
|
updateSearchTerm={updateSearchTerm}
|
|
|
|
|
search={search}
|
|
|
|
|
clearSearch={clearSearch}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
if (focusedSection === SectionType.Message) {
|
|
|
|
|
return <InnerLeftPaneMessageSection isExpired={props.isExpired} />;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderContactSection() {
|
|
|
|
|
const { openConversationExternal } = this.props;
|
|
|
|
|
|
|
|
|
|
const directContacts = this.getDirectContactsOnly();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<SessionOffline theme={this.props.theme} />
|
|
|
|
|
<LeftPaneContactSection
|
|
|
|
|
{...this.props}
|
|
|
|
|
openConversationExternal={openConversationExternal}
|
|
|
|
|
directContacts={directContacts}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
if (focusedSection === SectionType.Contact) {
|
|
|
|
|
return <InnerLeftPaneContactSection />;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private getDirectContactsOnly() {
|
|
|
|
|
return this.props.contacts.filter(f => f.type === 'direct');
|
|
|
|
|
if (focusedSection === SectionType.Settings) {
|
|
|
|
|
return <LeftPaneSettingsSection />;
|
|
|
|
|
}
|
|
|
|
|
return <></>;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
private renderSettingSection() {
|
|
|
|
|
const settingsCategory =
|
|
|
|
|
this.props.focusedSettingsSection || SessionSettingCategory.Appearance;
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<LeftPaneSettingSection
|
|
|
|
|
{...this.props}
|
|
|
|
|
settingsCategory={settingsCategory}
|
|
|
|
|
export const LeftPane = (props: Props) => {
|
|
|
|
|
const theme = useSelector(getTheme);
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
const focusedSection = useSelector(getFocusedSection);
|
|
|
|
|
const unreadMessageCount = useSelector(getUnreadMessageCount);
|
|
|
|
|
const ourPrimaryConversation = useSelector(getOurPrimaryConversation);
|
|
|
|
|
const ourNumber = useSelector(getOurNumber);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<SessionTheme theme={theme}>
|
|
|
|
|
<div className="module-left-pane-session">
|
|
|
|
|
<ActionsPanel
|
|
|
|
|
selectedSection={focusedSection}
|
|
|
|
|
onSectionSelected={(section: SectionType) => {
|
|
|
|
|
dispatch(clearSearch());
|
|
|
|
|
dispatch(showLeftPaneSection(section));
|
|
|
|
|
}}
|
|
|
|
|
unreadMessageCount={unreadMessageCount}
|
|
|
|
|
ourPrimaryConversation={ourPrimaryConversation}
|
|
|
|
|
ourNumber={ourNumber}
|
|
|
|
|
theme={theme}
|
|
|
|
|
applyTheme={(newTheme: ThemeStateType) =>
|
|
|
|
|
dispatch(applyTheme(newTheme))
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
<div className="module-left-pane">
|
|
|
|
|
<LeftPaneSection isExpired={props.isExpired} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</SessionTheme>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
Audric Ackermann
4 years ago