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 {
+type Props = {
-  expanded: boolean;
-}
-
-interface Props {
   label: string;
   onClick?: any;
   expanded?: boolean;
@@ -24,33 +20,20 @@ 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);
+export const SessionDropdown = (props: Props) => {
-  }
+  const { label, options } = props;
-
+  const [expanded, setExpanded] = useState(!!props.expanded);
-  public render() {
-    const { label, options } = this.props;
-    const { expanded } = this.state;
   const chevronOrientation = expanded ? 180 : 0;
 
   return (
     <div className="session-dropdown">
       <div
         className="session-dropdown__label"
-          onClick={this.toggleDropdown}
+        onClick={() => {
+          setExpanded(!expanded);
+        }}
         role="button"
       >
         {label}
@@ -72,7 +55,8 @@ export class SessionDropdown extends React.Component<Props, State> {
                 type={item.type}
                 active={item.active}
                 onClick={() => {
-                    this.handleItemClick(item.onClick);
+                  setExpanded(false);
+                  item.onClick();
                 }}
               />
             );
@@ -81,15 +65,4 @@ export class SessionDropdown extends React.Component<Props, State> {
       )}
     </div>
   );
-  }
+};
-
-  public toggleDropdown() {
-    this.setState({
-      expanded: !this.state.expanded,
-    });
-  }
-
-  public handleItemClick(itemOnClickFn: any) {
-    this.setState({ expanded: false }, itemOnClickFn());
-  }
-}

ts/components/session/SessionDropdownItem.tsx

@@ -8,39 +8,33 @@ 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) {
+export const SessionDropdownItem = (props: Props) => {
-    super(props);
+  const clickHandler = (e: any) => {
-    this.clickHandler = this.clickHandler.bind(this);
+    if (props.onClick) {
+      e.stopPropagation();
+      props.onClick();
     }
+  };
 
-  public render() {
+  const { content, type, icon, active } = props;
-    const { content, type, icon, active } = this.props;
 
   return (
     <div
       className={classNames(
         'session-dropdown__item',
         active ? 'active' : '',
-          type || ''
+        type || SessionDropDownItemType.Default
       )}
       role="button"
-        onClick={this.clickHandler}
+      onClick={clickHandler}
     >
       {icon ? (
         <SessionIcon iconType={icon} iconSize={SessionIconSize.Small} />
@@ -50,12 +44,4 @@ export class SessionDropdownItem extends React.PureComponent<Props> {
       <div className="item-content">{content}</div>
     </div>
   );
-  }
+};
-
-  private clickHandler(e: any) {
-    if (this.props.onClick) {
-      e.stopPropagation();
-      this.props.onClick();
-    }
-  }
-}