chore: make SessionSettingsView a functional component

ts/components/settings/SessionSettings.tsx

@@ -1,8 +1,9 @@
-import autoBind from 'auto-bind';
 import { shell } from 'electron';
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
+import { useDispatch } from 'react-redux';
+import useMount from 'react-use/lib/useMount';
 import { SettingsHeader } from './SessionSettingsHeader';
 
 import { SessionIconButton } from '../icon';
@@ -151,59 +152,48 @@ const StyledSettingsList = styled.div`
   flex-direction: column;
 `;
 
-export class SessionSettingsView extends React.Component<
+export const SessionSettingsView = (props: SettingsViewProps) => {
-  SettingsViewProps,
+  const { category } = props;
-  { hasPassword: boolean }
+  const dispatch = useDispatch();
-> {
-  public settingsViewRef: React.RefObject<HTMLDivElement>;
-
-  public constructor(props: any) {
-    super(props);
-
-    this.settingsViewRef = React.createRef();
-    autoBind(this);
-    this.state = { hasPassword: true };
 
+  const [hasPassword, setHasPassword] = useState(true);
+  useMount(() => {
+    let isMounted = true;
     // eslint-disable-next-line more/no-then
     void Data.getPasswordHash().then(hash => {
-      this.setState({
+      if (isMounted) {
-        hasPassword: !!hash,
+        setHasPassword(!!hash);
+      }
     });
+    return () => {
+      isMounted = false;
+    };
   });
+
+  function onPasswordUpdated(action: string) {
+    if (action === 'set' || action === 'change') {
+      setHasPassword(true);
+      dispatch(showLeftPaneSection(SectionType.Message));
     }
 
-  public render() {
+    if (action === 'remove') {
-    const { category } = this.props;
+      setHasPassword(false);
+    }
+  }
 
   return (
     <div className="session-settings">
       <SettingsHeader category={category} />
       <StyledSettingsView>
-          <StyledSettingsList ref={this.settingsViewRef}>
+        <StyledSettingsList>
           <SettingInCategory
             category={category}
-              onPasswordUpdated={this.onPasswordUpdated}
+            onPasswordUpdated={onPasswordUpdated}
-              hasPassword={this.state.hasPassword}
+            hasPassword={hasPassword}
           />
         </StyledSettingsList>
         <SessionInfo />
       </StyledSettingsView>
     </div>
   );
-  }
+};
-
-  public onPasswordUpdated(action: string) {
-    if (action === 'set' || action === 'change') {
-      this.setState({
-        hasPassword: true,
-      });
-      window.inboxStore?.dispatch(showLeftPaneSection(SectionType.Message));
-    }
-
-    if (action === 'remove') {
-      this.setState({
-        hasPassword: false,
-      });
-    }
-  }
-}