make session dropdown use hooks

js/modules/signal.js

@@ -63,9 +63,6 @@ const {
   SessionConfirm,
 } = require('../../ts/components/session/SessionConfirm');
 
-const {
-  SessionDropdown,
-} = require('../../ts/components/session/SessionDropdown');
 const {
   SessionRegistrationView,
 } = require('../../ts/components/session/SessionRegistrationView');
@@ -267,7 +264,6 @@ exports.setup = (options = {}) => {
     SessionSeedModal,
     SessionPasswordModal,
     SessionPasswordPrompt,
-    SessionDropdown,
     MediaGallery,
     Message,
     MessageBody,

ts/components/session/SessionDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
 import {
@@ -8,11 +8,7 @@ import {
 
 // THIS IS DROPDOWN ACCORDIAN STYLE OPTIONS SELECTOR ELEMENT, NOT A CONTEXTMENU
 
-interface State {
-  expanded: boolean;
-}
-
-interface Props {
+type Props = {
   label: string;
   onClick?: any;
   expanded?: boolean;
@@ -24,72 +20,49 @@ interface Props {
     active?: boolean;
     onClick?: any;
   }>;
-}
-
-export class SessionDropdown extends React.Component<Props, State> {
-  public static defaultProps = {
-    expanded: false,
-  };
-
-  constructor(props: any) {
-    super(props);
-
-    this.state = {
-      expanded: !!this.props.expanded,
-    };
-
-    this.toggleDropdown = this.toggleDropdown.bind(this);
-  }
+};
 
-  public render() {
-    const { label, options } = this.props;
-    const { expanded } = this.state;
-    const chevronOrientation = expanded ? 180 : 0;
+export const SessionDropdown = (props: Props) => {
+  const { label, options } = props;
+  const [expanded, setExpanded] = useState(!!props.expanded);
+  const chevronOrientation = expanded ? 180 : 0;
 
-    return (
-      <div className="session-dropdown">
-        <div
-          className="session-dropdown__label"
-          onClick={this.toggleDropdown}
-          role="button"
-        >
-          {label}
-          <SessionIcon
-            iconType={SessionIconType.Chevron}
-            iconSize={SessionIconSize.Small}
-            iconRotation={chevronOrientation}
-          />
-        </div>
-
-        {expanded && (
-          <div className="session-dropdown__list-container">
-            {options.map((item: any) => {
-              return (
-                <SessionDropdownItem
-                  key={item.content}
-                  content={item.content}
-                  icon={item.icon}
-                  type={item.type}
-                  active={item.active}
-                  onClick={() => {
-                    this.handleItemClick(item.onClick);
-                  }}
-                />
-              );
-            })}
-          </div>
-        )}
+  return (
+    <div className="session-dropdown">
+      <div
+        className="session-dropdown__label"
+        onClick={() => {
+          setExpanded(!expanded);
+        }}
+        role="button"
+      >
+        {label}
+        <SessionIcon
+          iconType={SessionIconType.Chevron}
+          iconSize={SessionIconSize.Small}
+          iconRotation={chevronOrientation}
+        />
       </div>
-    );
-  }
 
-  public toggleDropdown() {
-    this.setState({
-      expanded: !this.state.expanded,
-    });
-  }
-
-  public handleItemClick(itemOnClickFn: any) {
-    this.setState({ expanded: false }, itemOnClickFn());
-  }
-}
+      {expanded && (
+        <div className="session-dropdown__list-container">
+          {options.map((item: any) => {
+            return (
+              <SessionDropdownItem
+                key={item.content}
+                content={item.content}
+                icon={item.icon}
+                type={item.type}
+                active={item.active}
+                onClick={() => {
+                  setExpanded(false);
+                  item.onClick();
+                }}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

ts/components/session/SessionDropdownItem.tsx

@@ -8,54 +8,40 @@ export enum SessionDropDownItemType {
   Danger = 'danger',
 }
 
-interface Props {
+type Props = {
   content: string;
   type: SessionDropDownItemType;
   icon: SessionIconType | null;
   active: boolean;
   onClick: any;
-}
-
-export class SessionDropdownItem extends React.PureComponent<Props> {
-  public static defaultProps = {
-    type: SessionDropDownItemType.Default,
-    icon: null,
-    active: false,
-    onClick: () => null,
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.clickHandler = this.clickHandler.bind(this);
-  }
-
-  public render() {
-    const { content, type, icon, active } = this.props;
+};
 
-    return (
-      <div
-        className={classNames(
-          'session-dropdown__item',
-          active ? 'active' : '',
-          type || ''
-        )}
-        role="button"
-        onClick={this.clickHandler}
-      >
-        {icon ? (
-          <SessionIcon iconType={icon} iconSize={SessionIconSize.Small} />
-        ) : (
-          ''
-        )}
-        <div className="item-content">{content}</div>
-      </div>
-    );
-  }
-
-  private clickHandler(e: any) {
-    if (this.props.onClick) {
+export const SessionDropdownItem = (props: Props) => {
+  const clickHandler = (e: any) => {
+    if (props.onClick) {
       e.stopPropagation();
-      this.props.onClick();
+      props.onClick();
     }
-  }
-}
+  };
+
+  const { content, type, icon, active } = props;
+
+  return (
+    <div
+      className={classNames(
+        'session-dropdown__item',
+        active ? 'active' : '',
+        type || SessionDropDownItemType.Default
+      )}
+      role="button"
+      onClick={clickHandler}
+    >
+      {icon ? (
+        <SessionIcon iconType={icon} iconSize={SessionIconSize.Small} />
+      ) : (
+        ''
+      )}
+      <div className="item-content">{content}</div>
+    </div>
+  );
+};