move settingsleftpane to hooks

ts/components/SessionMainPanel.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { DefaultTheme } from 'styled-components';
 import { SmartSessionConversation } from '../state/smart/SessionConversation';
 import {
   SessionSettingCategory,
@@ -9,34 +8,19 @@ import {
 
 const FilteredSettingsView = SmartSettingsView as any;
 
-interface Props {
+type Props = {
   focusedSettingsSection?: SessionSettingCategory;
-}
+};
 
-export class SessionMainPanel extends React.Component<Props> {
-  public constructor(props: Props) {
-    super(props);
-  }
-
-  public render() {
-    const isSettingsView = this.props.focusedSettingsSection !== undefined;
-
-    return isSettingsView
-      ? this.renderSettings()
-      : this.renderSessionConversation();
-  }
-
-  private renderSettings() {
-    const category = this.props.focusedSettingsSection;
-
-    return <FilteredSettingsView category={category} />;
-  }
+export const SessionMainPanel = (props: Props) => {
+  const isSettingsView = props.focusedSettingsSection !== undefined;
 
-  private renderSessionConversation() {
-    return (
-      <div className="session-conversation">
-        <SmartSessionConversation />
-      </div>
-    );
+  if (isSettingsView) {
+    return <FilteredSettingsView category={props.focusedSettingsSection} />;
   }
-}
+  return (
+    <div className="session-conversation">
+      <SmartSessionConversation />
+    </div>
+  );
+};

ts/components/session/LeftPaneSettingSection.tsx

@@ -12,205 +12,158 @@ import {
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { SessionSearchInput } from './SessionSearchInput';
 import { SessionSettingCategory } from './settings/SessionSettings';
-import { DefaultTheme } from 'styled-components';
+import { DefaultTheme, useTheme } from 'styled-components';
 import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 import { deleteAccount } from '../../util/accountManager';
+import { useDispatch, useSelector } from 'react-redux';
+import { showSettingsSection } from '../../state/ducks/section';
+import { getFocusedSettingsSection } from '../../state/selectors/section';
 
-interface Props {
+type Props = {
   settingsCategory: SessionSettingCategory;
   showSettingsSection: (category: SessionSettingCategory) => void;
   theme: DefaultTheme;
-}
-
-export interface State {
-  searchQuery: string;
-}
-
-export class LeftPaneSettingSection extends React.Component<Props, State> {
-  public constructor(props: any) {
-    super(props);
-
-    this.state = {
-      searchQuery: '',
-    };
-
-    this.onDeleteAccount = this.onDeleteAccount.bind(this);
-  }
-
-  public render(): JSX.Element {
-    return (
-      <div className="left-pane-setting-section">
-        {this.renderHeader()}
-        {this.renderSettings()}
+};
+
+const getCategories = () => {
+  return [
+    {
+      id: SessionSettingCategory.Appearance,
+      title: window.i18n('appearanceSettingsTitle'),
+      hidden: false,
+    },
+    {
+      id: SessionSettingCategory.Privacy,
+      title: window.i18n('privacySettingsTitle'),
+      hidden: false,
+    },
+    {
+      id: SessionSettingCategory.Blocked,
+      title: window.i18n('blockedSettingsTitle'),
+      hidden: false,
+    },
+    {
+      id: SessionSettingCategory.Permissions,
+      title: window.i18n('permissionSettingsTitle'),
+      hidden: true,
+    },
+    {
+      id: SessionSettingCategory.Notifications,
+      title: window.i18n('notificationsSettingsTitle'),
+      hidden: false,
+    },
+  ];
+};
+
+const LeftPaneSettingsCategoryRow = (props: { item: any }) => {
+  const { item } = props;
+
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const focusedSettingsSection = useSelector(getFocusedSettingsSection);
+
+  return (
+    <div
+      key={item.id}
+      className={classNames(
+        'left-pane-setting-category-list-item',
+        item.id === focusedSettingsSection ? 'active' : ''
+      )}
+      role="link"
+      onClick={() => {
+        dispatch(showSettingsSection(item.id));
+      }}
+    >
+      <div>
+        <strong>{item.title}</strong>
       </div>
-    );
-  }
 
-  public renderHeader(): JSX.Element | undefined {
-    return (
-      <LeftPaneSectionHeader
-        label={window.i18n('settingsHeader')}
-        theme={this.props.theme}
-      />
-    );
-  }
-
-  public renderRow(item: any): JSX.Element {
-    const { settingsCategory } = this.props;
-    return (
-      <div
-        key={item.id}
-        className={classNames(
-          'left-pane-setting-category-list-item',
-          item.id === settingsCategory ? 'active' : ''
+      <div>
+        {item.id === focusedSettingsSection && (
+          <SessionIcon
+            iconSize={SessionIconSize.Medium}
+            iconType={SessionIconType.Chevron}
+            iconRotation={270}
+            theme={theme}
+          />
         )}
-        role="link"
-        onClick={() => {
-          this.props.showSettingsSection(item.id);
-        }}
-      >
-        <div>
-          <strong>{item.title}</strong>
-        </div>
-
-        <div>
-          {item.id === settingsCategory && (
-            <SessionIcon
-              iconSize={SessionIconSize.Medium}
-              iconType={SessionIconType.Chevron}
-              iconRotation={270}
-              theme={this.props.theme}
-            />
-          )}
-        </div>
       </div>
-    );
-  }
-
-  public renderCategories(): JSX.Element {
-    const categories = this.getCategories().filter(item => !item.hidden);
-
-    return (
-      <div className="module-left-pane__list" key={0}>
-        <div className="left-pane-setting-category-list">
-          {categories.map(item => this.renderRow(item))}
-        </div>
+    </div>
+  );
+};
+
+const LeftPaneSettingsCategories = () => {
+  const categories = getCategories();
+
+  return (
+    <div className="module-left-pane__list" key={0}>
+      <div className="left-pane-setting-category-list">
+        {categories
+          .filter(m => !m.hidden)
+          .map(item => {
+            return <LeftPaneSettingsCategoryRow key={item.id} item={item} />;
+          })}
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-  public renderSearch() {
-    return (
-      <div className="left-pane-setting-content">
-        <div className="left-pane-setting-input-group">
-          <SessionSearchInput
-            searchString={this.state.searchQuery}
-            onChange={() => null}
-            placeholder=""
-            theme={this.props.theme}
-          />
-          <div className="left-pane-setting-input-button">
-            <SessionButton
-              buttonType={SessionButtonType.Square}
-              buttonColor={SessionButtonColor.Green}
-              theme={this.props.theme}
-            >
-              <SessionIcon
-                iconType={SessionIconType.Caret}
-                iconSize={SessionIconSize.Huge}
-                theme={this.props.theme}
-              />
-            </SessionButton>
-          </div>
-        </div>
-      </div>
-    );
-  }
+const onDeleteAccount = () => {
+  const title = window.i18n('clearAllData');
 
-  public renderSettings(): JSX.Element {
-    const showSearch = false;
+  const message = window.i18n('unpairDeviceWarning');
 
-    return (
-      <div className="left-pane-setting-content">
-        {showSearch && this.renderSearch()}
-        {this.renderCategories()}
-        {this.renderBottomButtons()}
-      </div>
-    );
-  }
+  let messageSub = '';
 
-  public renderBottomButtons(): JSX.Element | undefined {
-    const dangerButtonText = window.i18n('clearAllData');
-    const showRecoveryPhrase = window.i18n('showRecoveryPhrase');
-
-    return (
-      <div className="left-pane-setting-bottom-buttons">
-        <SessionButton
-          text={dangerButtonText}
-          buttonType={SessionButtonType.SquareOutline}
-          buttonColor={SessionButtonColor.Danger}
-          onClick={this.onDeleteAccount}
-        />
-
-        <SessionButton
-          text={showRecoveryPhrase}
-          buttonType={SessionButtonType.SquareOutline}
-          buttonColor={SessionButtonColor.White}
-          onClick={() => window.Whisper.events.trigger('showSeedDialog')}
-        />
-      </div>
-    );
+  const identityKey = window.textsecure.storage.get('identityKey');
+  if (identityKey && identityKey.ed25519KeyPair === undefined) {
+    messageSub =
+      "We've updated the way Session IDs are generated, so you will not be able to restore your current Session ID.";
   }
 
-  public onDeleteAccount() {
-    const title = window.i18n('clearAllData');
-
-    const message = window.i18n('unpairDeviceWarning');
-
-    let messageSub = '';
-
-    const identityKey = window.textsecure.storage.get('identityKey');
-    if (identityKey && identityKey.ed25519KeyPair === undefined) {
-      messageSub =
-        "We've updated the way Session IDs are generated, so you will not be able to restore your current Session ID.";
-    }
+  window.confirmationDialog({
+    title,
+    message,
+    messageSub,
+    resolve: deleteAccount,
+    okTheme: 'danger',
+  });
+};
+
+const LeftPaneBottomButtons = () => {
+  const dangerButtonText = window.i18n('clearAllData');
+  const showRecoveryPhrase = window.i18n('showRecoveryPhrase');
+
+  return (
+    <div className="left-pane-setting-bottom-buttons">
+      <SessionButton
+        text={dangerButtonText}
+        buttonType={SessionButtonType.SquareOutline}
+        buttonColor={SessionButtonColor.Danger}
+        onClick={onDeleteAccount}
+      />
 
-    window.confirmationDialog({
-      title,
-      message,
-      messageSub,
-      resolve: deleteAccount,
-      okTheme: 'danger',
-    });
-  }
+      <SessionButton
+        text={showRecoveryPhrase}
+        buttonType={SessionButtonType.SquareOutline}
+        buttonColor={SessionButtonColor.White}
+        onClick={() => window.Whisper.events.trigger('showSeedDialog')}
+      />
+    </div>
+  );
+};
 
-  public getCategories() {
-    return [
-      {
-        id: SessionSettingCategory.Appearance,
-        title: window.i18n('appearanceSettingsTitle'),
-        hidden: false,
-      },
-      {
-        id: SessionSettingCategory.Privacy,
-        title: window.i18n('privacySettingsTitle'),
-        hidden: false,
-      },
-      {
-        id: SessionSettingCategory.Blocked,
-        title: window.i18n('blockedSettingsTitle'),
-        hidden: false,
-      },
-      {
-        id: SessionSettingCategory.Permissions,
-        title: window.i18n('permissionSettingsTitle'),
-        hidden: true,
-      },
-      {
-        id: SessionSettingCategory.Notifications,
-        title: window.i18n('notificationsSettingsTitle'),
-        hidden: false,
-      },
-    ];
-  }
-}
+export const LeftPaneSettingSection = (props: Props) => {
+  return (
+    <div className="left-pane-setting-section">
+      <LeftPaneSectionHeader
+        label={window.i18n('settingsHeader')}
+        theme={props.theme}
+      />
+      <div className="left-pane-setting-content">
+        <LeftPaneSettingsCategories />
+        <LeftPaneBottomButtons />
+      </div>
+    </div>
+  );
+};

ts/state/ducks/section.tsx

@@ -14,7 +14,9 @@ type FocusSettingsSectionActionType = {
   payload: SessionSettingCategory;
 };
 
-function showLeftPaneSection(section: SectionType): FocusSectionActionType {
+export function showLeftPaneSection(
+  section: SectionType
+): FocusSectionActionType {
   return {
     type: FOCUS_SECTION,
     payload: section,
@@ -25,7 +27,7 @@ type SectionActionTypes =
   | FocusSectionActionType
   | FocusSettingsSectionActionType;
 
-function showSettingsSection(
+export function showSettingsSection(
   category: SessionSettingCategory
 ): FocusSettingsSectionActionType {
   return {