add redux action to change section of UI

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);

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<ConversationListItemPropsType>;
   contacts: Array<ConversationType>;
@@ -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<Props, State> {
-  public state = {
-    selectedSection: SectionType.Message,
-  };
-
+export class LeftPane extends React.Component<Props> {
   public constructor(props: any) {
     super(props);
     this.handleSectionSelected = this.handleSectionSelected.bind(this);
@@ -76,14 +71,14 @@ export class LeftPane extends React.Component<Props, State> {
 
   public handleSectionSelected(section: SectionType) {
     this.props.clearSearch();
-    this.setState({ selectedSection: section });
+    this.props.focusSection(section);
   }
 
   public render(): JSX.Element {
     return (
       <div className="module-left-pane-session">
         <ActionsPanel
-          selectedSection={this.state.selectedSection}
+          selectedSection={this.props.focusedSection}
           onSectionSelected={this.handleSectionSelected}
           conversations={this.props.conversations}
           unreadMessageCount={this.props.unreadMessageCount}
@@ -94,7 +89,7 @@ export class LeftPane extends React.Component<Props, State> {
   }
 
   private renderSection(): JSX.Element | undefined {
-    switch (this.state.selectedSection) {
+    switch (this.props.focusedSection) {
       case SectionType.Message:
         return this.renderMessageSection();
       case SectionType.Contact:

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 {

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;
+  }
+};

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

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,
   };
 };
 

ts/styleguide/LeftPaneContext.tsx

@@ -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<Props> {
-  public render() {
-    const { style, theme } = this.props;
-
-    return (
-      <div style={style} className={classNames(theme || 'light-theme')}>
-        <div className="gutter">{this.props.children}</div>
-      </div>
-    );
-  }
-}

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 };