Convert user-dropdown to functional

Author: Fynardo

frontend/src/components/ibutsu-header.js

@@ -39,7 +39,8 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
 
-import { FileUpload, UserDropdown } from '../components';
+import { FileUpload } from '../components';
+import UserDropdown from './user-dropdown';
 import { VERSION } from '../constants';
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';

frontend/src/components/index.js

@@ -15,6 +15,5 @@ export { ResultView } from './result';
 export { RunSummary } from './runsummary';
 export { TabTitle } from './tabs';
 export { TableEmptyState, TableErrorState } from './tablestates';
-export { UserDropdown } from './user-dropdown';
 export { View } from './view';
 export { EditWidgetModal } from './edit-widget-modal';

frontend/src/components/user-dropdown.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -13,86 +13,87 @@ import { Link } from 'react-router-dom';
 import { AuthService } from '../services/auth';
 import { IbutsuContext } from '../services/context';
 
-export class UserDropdown extends React.Component {
-  static contextType = IbutsuContext;
-  static propTypes = {
-    eventEmitter: PropTypes.object
-  }
+const UserDropdown = (props) => {
+  const context = useContext(IbutsuContext);
+  // TODO:
+  // static propTypes = {
+    // eventEmitter: PropTypes.object
+  // }
 
-  constructor(props) {
-    super(props);
-    this.eventEmitter = props.eventEmitter;
-    this.state = {
-      displayName: 'User',
-      isDropdownOpen: false,
-      isSuperAdmin: false
-    };
-    this.eventEmitter.on('updateUserName', (userName) => {
-      this.updateUserName(userName);
-    });
-  }
+  // const eventEmitter = props.eventEmitter;
+
+  const [displayName, setDisplayName] = useState('User');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isSuperAdmin, setIsSuperAdmin] = useState(false);
 
-  updateUserName(userName) {
+
+  // TODO:
+  // this.eventEmitter.on('updateUserName', (userName) => {
+    // this.updateUserName(userName);
+  // })
+
+  function updateUserName(userName) {
     // Update the user in the browser
     const sessionUser = AuthService.getUser();
     sessionUser.name = userName;
     AuthService.setUser(sessionUser);
-    this.setState({displayName: userName});
+    setDisplayName(userName);
   }
 
-  onDropdownToggle = () => {
-    this.setState({isDropdownOpen: !this.state.isDropdownOpen});
-  };
+  function onDropdownToggle() {
+    setIsDropdownOpen(!isDropdownOpen);
+  }
 
-  onDropdownSelect = () => {
-    this.setState({isDropdownOpen: false});
-  };
+  function onDropdownSelect() {
+    setIsDropdownOpen(false);
+  }
 
-  logout = () => {
-    const { setPrimaryObject } = this.context;
-    setPrimaryObject();
+  function logout() {
+    const { primaryObject } = context;
     AuthService.logout();
     window.location = '/';
   }
 
-  componentDidMount() {
-    AuthService.isSuperAdmin().then(isSuperAdmin => this.setState({isSuperAdmin}));
-    this.setState({
-      displayName: AuthService.getUser() && (AuthService.getUser().name || AuthService.getUser().email)
-    });
-  }
+  useEffect(() => {
+    AuthService.isSuperAdmin().then(isSuperAdmin => setIsSuperAdmin(isSuperAdmin));
+    setDisplayName(AuthService.getUser() && (AuthService.getUser().name || AuthService.getUser().email));
+  });
 
-  render() {
-    return (
-      <Dropdown
-        isOpen={this.state.isDropdownOpen}
-        onSelect={this.onDropdownSelect}
-        onOpenChange={() => this.setState({isDropdownOpen: false})}
-        toggle={toggleRef => (
-          <MenuToggle
-            ref={toggleRef}
-            onClick={this.onDropdownToggle}
-            isExpanded={this.state.isDropdownOpen}
-            icon={<UserIcon />}
-          >
-            {this.state.displayName}
-          </MenuToggle>
-        )}
-      >
-        <DropdownList>
-          <DropdownItem key="profile">
-            <Link to="/profile/user" className="pf-v5-c-menu__list-item">Profile</Link>
-          </DropdownItem>
-          {!!this.state.isSuperAdmin &&
-            <DropdownItem key="admin">
-              <Link to="/admin/home" className="pf-v5-c-menu__list-item">Administration</Link>
-            </DropdownItem>
-          }
-          <DropdownItem key="logout" onClick={this.logout}>
-            Logout
+  return (
+    <Dropdown
+      isOpen={isDropdownOpen}
+      onSelect={onDropdownSelect}
+      onOpenChange={() => setIsDropdownOpen(false)}
+      toggle={toggleRef => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onDropdownToggle}
+          isExpanded={isDropdownOpen}
+          icon={<UserIcon />}
+        >
+          {displayName}
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem key="profile">
+          <Link to="/profile/user" className="pf-v5-c-menu__list-item">Profile</Link>
+        </DropdownItem>
+        {!!isSuperAdmin &&
+          <DropdownItem key="admin">
+            <Link to="/admin/home" className="pf-v5-c-menu__list-item">Administration</Link>
           </DropdownItem>
-        </DropdownList>
-      </Dropdown>
-    );
-  }
+        }
+        <DropdownItem key="logout" onClick={logout}>
+          Logout
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
 }
+
+UserDropdown.propTypes = {
+  // eventEmitter: PropTypes.object
+};
+
+export default UserDropdown;