From 42369cb8f27c28a88049a714f0aded6b9434d07e Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 19 Oct 2020 10:33:40 +1100 Subject: [PATCH] add redux action to change section of UI --- js/views/inbox_view.js | 3 +++ ts/components/LeftPane.tsx | 19 ++++++---------- ts/state/actions.ts | 2 ++ ts/state/ducks/section.tsx | 37 +++++++++++++++++++++++++++++++ ts/state/reducer.ts | 5 ++++- ts/state/smart/LeftPane.tsx | 1 + ts/styleguide/LeftPaneContext.tsx | 26 ---------------------- ts/styleguide/StyleGuideUtil.ts | 1 - 8 files changed, 54 insertions(+), 40 deletions(-) create mode 100644 ts/state/ducks/section.tsx delete mode 100644 ts/styleguide/LeftPaneContext.tsx diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 86585736d..83beb99dc 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -165,6 +165,9 @@ isSecondaryDevice: !!window.storage.get('isSecondaryDevice'), i18n: window.i18n, }, + section: { + focusedSection: 1, + }, }; this.store = Signal.State.createStore(initialState); diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 8bd250516..c7e175f04 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -12,6 +12,7 @@ import { ConversationType } from '../state/ducks/conversations'; import { LeftPaneContactSection } from './session/LeftPaneContactSection'; import { LeftPaneSettingSection } from './session/LeftPaneSettingSection'; import { SessionIconType } from './session/icon'; +import { FOCUS_SECTION } from '../state/ducks/section'; // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5 export type RowRendererParamsType = { @@ -23,10 +24,6 @@ export type RowRendererParamsType = { style: Object; }; -interface State { - selectedSection: SectionType; -} - interface Props { conversations: Array; contacts: Array; @@ -35,6 +32,8 @@ interface Props { searchResults?: SearchResultsProps; searchTerm: string; isSecondaryDevice: boolean; + focusedSection: SectionType; + focusSection: (section: SectionType) => void; openConversationInternal: (id: string, messageId?: string) => void; updateSearchTerm: (searchTerm: string) => void; @@ -42,11 +41,7 @@ interface Props { clearSearch: () => void; } -export class LeftPane extends React.Component { - public state = { - selectedSection: SectionType.Message, - }; - +export class LeftPane extends React.Component { public constructor(props: any) { super(props); this.handleSectionSelected = this.handleSectionSelected.bind(this); @@ -76,14 +71,14 @@ export class LeftPane extends React.Component { public handleSectionSelected(section: SectionType) { this.props.clearSearch(); - this.setState({ selectedSection: section }); + this.props.focusSection(section); } public render(): JSX.Element { return (
{ } private renderSection(): JSX.Element | undefined { - switch (this.state.selectedSection) { + switch (this.props.focusedSection) { case SectionType.Message: return this.renderMessageSection(); case SectionType.Contact: diff --git a/ts/state/actions.ts b/ts/state/actions.ts index ee562e3a2..48141fb96 100644 --- a/ts/state/actions.ts +++ b/ts/state/actions.ts @@ -3,11 +3,13 @@ import { bindActionCreators, Dispatch } from 'redux'; import { actions as search } from './ducks/search'; import { actions as conversations } from './ducks/conversations'; import { actions as user } from './ducks/user'; +import { actions as sections } from './ducks/section'; const actions = { ...search, ...conversations, ...user, + ...sections, }; export function mapDispatchToProps(dispatch: Dispatch): Object { diff --git a/ts/state/ducks/section.tsx b/ts/state/ducks/section.tsx new file mode 100644 index 000000000..6dd0fd911 --- /dev/null +++ b/ts/state/ducks/section.tsx @@ -0,0 +1,37 @@ +import { SectionType } from '../../components/session/ActionsPanel'; + +export const FOCUS_SECTION = 'FOCUS_SECTION'; + +const focusSection = (section: SectionType) => { + return { + type: FOCUS_SECTION, + payload: section, + }; +}; + +export const actions = { + focusSection, +}; + +const initialState = { focusedSection: SectionType.Message }; +export type SectionStateType = { + focusedSection: SectionType; +}; + +export const reducer = ( + state: any = initialState, + { + type, + payload, + }: { + type: string; + payload: SectionType; + } +): SectionStateType => { + switch (type) { + case FOCUS_SECTION: + return { focusedSection: payload }; + default: + return state; + } +}; diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index d6c9573b6..20ee67dd6 100644 --- a/ts/state/reducer.ts +++ b/ts/state/reducer.ts @@ -7,14 +7,16 @@ import { } from './ducks/conversations'; import { reducer as user, UserStateType } from './ducks/user'; import { reducer as theme, ThemeStateType } from './ducks/theme'; +import { reducer as section, SectionStateType } from './ducks/section'; // import { reducer as messages } from './ducks/messages'; export type StateType = { search: SearchStateType; messages: any; - conversations: ConversationsStateType; user: UserStateType; + conversations: ConversationsStateType; theme: ThemeStateType; + section: SectionStateType; }; export const reducers = { @@ -25,6 +27,7 @@ export const reducers = { conversations, user, theme, + section, }; // Making this work would require that our reducer signature supported AnyAction, not diff --git a/ts/state/smart/LeftPane.tsx b/ts/state/smart/LeftPane.tsx index d08e90d35..c2deed5dd 100644 --- a/ts/state/smart/LeftPane.tsx +++ b/ts/state/smart/LeftPane.tsx @@ -32,6 +32,7 @@ const mapStateToProps = (state: StateType) => { i18n: getIntl(state), unreadMessageCount: leftPaneList.unreadCount, theme: state.theme, + focusedSection: state.section.focusedSection, }; }; diff --git a/ts/styleguide/LeftPaneContext.tsx b/ts/styleguide/LeftPaneContext.tsx deleted file mode 100644 index db054e72a..000000000 --- a/ts/styleguide/LeftPaneContext.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; - -interface Props { - /** - * Corresponds to the theme setting in the app, and the class added to the root element. - */ - theme: 'light-theme' | 'dark-theme'; - style: any; -} - -/** - * Provides the parent elements necessary to allow the main Signal Desktop stylesheet to - * apply (with no changes) to messages in the Style Guide. - */ -export class LeftPaneContext extends React.Component { - public render() { - const { style, theme } = this.props; - - return ( -
-
{this.props.children}
-
- ); - } -} diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 49faa0a42..99bd2db4b 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -6,7 +6,6 @@ import classNames from 'classnames'; import { default as _ } from 'lodash'; export { ConversationContext } from './ConversationContext'; -export { LeftPaneContext } from './LeftPaneContext'; export { _, classNames };