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> {
+export const SessionMainPanel = (props: Props) => {
-  public constructor(props: Props) {
+  const isSettingsView = props.focusedSettingsSection !== undefined;
-    super(props);
-  }
-
-  public render() {
-    const isSettingsView = this.props.focusedSettingsSection !== undefined;
 
-    return isSettingsView
+  if (isSettingsView) {
-      ? this.renderSettings()
+    return <FilteredSettingsView category={props.focusedSettingsSection} />;
-      : this.renderSessionConversation();
   }
-
-  private renderSettings() {
-    const category = this.props.focusedSettingsSection;
-
-    return <FilteredSettingsView category={category} />;
-  }
-
-  private renderSessionConversation() {
   return (
     <div className="session-conversation">
       <SmartSessionConversation />
     </div>
   );
-  }
+};
-}

ts/components/session/LeftPaneSettingSection.tsx

@@ -12,61 +12,66 @@ 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 {
+const getCategories = () => {
-  searchQuery: string;
+  return [
-}
+    {
-
+      id: SessionSettingCategory.Appearance,
-export class LeftPaneSettingSection extends React.Component<Props, State> {
+      title: window.i18n('appearanceSettingsTitle'),
-  public constructor(props: any) {
+      hidden: false,
-    super(props);
+    },
-
+    {
-    this.state = {
+      id: SessionSettingCategory.Privacy,
-      searchQuery: '',
+      title: window.i18n('privacySettingsTitle'),
-    };
+      hidden: false,
-
+    },
-    this.onDeleteAccount = this.onDeleteAccount.bind(this);
+    {
-  }
+      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,
+    },
+  ];
+};
 
-  public render(): JSX.Element {
+const LeftPaneSettingsCategoryRow = (props: { item: any }) => {
-    return (
+  const { item } = props;
-      <div className="left-pane-setting-section">
-        {this.renderHeader()}
-        {this.renderSettings()}
-      </div>
-    );
-  }
 
-  public renderHeader(): JSX.Element | undefined {
+  const dispatch = useDispatch();
-    return (
+  const theme = useTheme();
-      <LeftPaneSectionHeader
+  const focusedSettingsSection = useSelector(getFocusedSettingsSection);
-        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' : ''
+        item.id === focusedSettingsSection ? 'active' : ''
       )}
       role="link"
       onClick={() => {
-          this.props.showSettingsSection(item.id);
+        dispatch(showSettingsSection(item.id));
       }}
     >
       <div>
@@ -74,72 +79,58 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
       </div>
 
       <div>
-          {item.id === settingsCategory && (
+        {item.id === focusedSettingsSection && (
           <SessionIcon
             iconSize={SessionIconSize.Medium}
             iconType={SessionIconType.Chevron}
             iconRotation={270}
-              theme={this.props.theme}
+            theme={theme}
           />
         )}
       </div>
     </div>
   );
-  }
+};
 
-  public renderCategories(): JSX.Element {
+const LeftPaneSettingsCategories = () => {
-    const categories = this.getCategories().filter(item => !item.hidden);
+  const categories = getCategories();
 
   return (
     <div className="module-left-pane__list" key={0}>
       <div className="left-pane-setting-category-list">
-          {categories.map(item => this.renderRow(item))}
+        {categories
+          .filter(m => !m.hidden)
+          .map(item => {
+            return <LeftPaneSettingsCategoryRow key={item.id} item={item} />;
+          })}
       </div>
     </div>
   );
-  }
+};
 
-  public renderSearch() {
+const onDeleteAccount = () => {
-    return (
+  const title = window.i18n('clearAllData');
-      <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>
-    );
-  }
 
-  public renderSettings(): JSX.Element {
+  const message = window.i18n('unpairDeviceWarning');
-    const showSearch = false;
 
-    return (
+  let messageSub = '';
-      <div className="left-pane-setting-content">
+
-        {showSearch && this.renderSearch()}
+  const identityKey = window.textsecure.storage.get('identityKey');
-        {this.renderCategories()}
+  if (identityKey && identityKey.ed25519KeyPair === undefined) {
-        {this.renderBottomButtons()}
+    messageSub =
-      </div>
+      "We've updated the way Session IDs are generated, so you will not be able to restore your current Session ID.";
-    );
   }
 
-  public renderBottomButtons(): JSX.Element | undefined {
+  window.confirmationDialog({
+    title,
+    message,
+    messageSub,
+    resolve: deleteAccount,
+    okTheme: 'danger',
+  });
+};
+
+const LeftPaneBottomButtons = () => {
   const dangerButtonText = window.i18n('clearAllData');
   const showRecoveryPhrase = window.i18n('showRecoveryPhrase');
 
@@ -149,7 +140,7 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
         text={dangerButtonText}
         buttonType={SessionButtonType.SquareOutline}
         buttonColor={SessionButtonColor.Danger}
-          onClick={this.onDeleteAccount}
+        onClick={onDeleteAccount}
       />
 
       <SessionButton
@@ -160,57 +151,19 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
       />
     </div>
   );
-  }
+};
-
-  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({
+export const LeftPaneSettingSection = (props: Props) => {
-      title,
+  return (
-      message,
+    <div className="left-pane-setting-section">
-      messageSub,
+      <LeftPaneSectionHeader
-      resolve: deleteAccount,
+        label={window.i18n('settingsHeader')}
-      okTheme: 'danger',
+        theme={props.theme}
-    });
+      />
-  }
+      <div className="left-pane-setting-content">
-
+        <LeftPaneSettingsCategories />
-  public getCategories() {
+        <LeftPaneBottomButtons />
-    return [
+      </div>
-      {
+    </div>
-        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,
-      },
-    ];
-  }
-}

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 {