Current user menu uses createMenu

Final installation of porting all menus to `createMenu`, the current
user “menu”. One change is that `createMenu` needs to pass the props to
`<Label>` which seems entirely reasonable.

Author: Mat Brown

src/components/TopBar/CurrentUser.jsx

@@ -1,44 +1,15 @@
-import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {t} from 'i18next';
 import CurrentUserMenu from './CurrentUserMenu';
 
 export default function CurrentUser({
-  isOpen,
   user,
-  onClick,
-  onClose,
   onLogOut,
   onStartLogIn,
 }) {
   if (user.authenticated) {
-    const name = user.displayName;
-
-    return (
-      <div
-        className={classnames(
-          'top-bar__menu-button',
-          'top-bar__current-user',
-          {'top-bar__menu-button_active': isOpen},
-        )}
-        onClick={onClick}
-      >
-        <img
-          className="top-bar__avatar"
-          src={user.avatarUrl}
-        />
-        <span className="top-bar__username">{name}</span>
-        <span className="top-bar__drop-down-button u__icon">
-          &#xf0d7;
-        </span>
-        <CurrentUserMenu
-          isOpen={isOpen}
-          onClose={onClose}
-          onLogOut={onLogOut}
-        />
-      </div>
-    );
+    return <CurrentUserMenu user={user} onLogOut={onLogOut} />;
   }
   return (
     <div className="top-bar__current-user">
@@ -53,12 +24,9 @@ export default function CurrentUser({
 }
 
 CurrentUser.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.boolean,
   }).isRequired,
-  onClick: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
   onLogOut: PropTypes.func.isRequired,
   onStartLogIn: PropTypes.func.isRequired,
 };

src/components/TopBar/CurrentUserButton.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function CurrentUserButton({user: {avatarUrl, displayName}}) {
+  return (
+    <div className="top-bar__current-user">
+      <img
+        className="top-bar__avatar"
+        src={avatarUrl}
+      />
+      <span className="top-bar__username">{displayName}</span>
+      <span className="top-bar__drop-down-button u__icon">
+        &#xf0d7;
+      </span>
+    </div>
+  );
+}
+
+CurrentUserButton.propTypes = {
+  user: PropTypes.shape({
+    avatarUrl: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+  }).isRequired,
+};

src/components/TopBar/CurrentUserMenu.jsx

@@ -1,22 +1,24 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {t} from 'i18next';
+import createMenu, {MenuItem} from './createMenu';
+import CurrentUserButton from './CurrentUserButton';
 
-export default function CurrentUserMenu({isOpen, onLogOut}) {
-  if (!isOpen) {
-    return null;
-  }
+const CurrentUserMenu = createMenu({
+  name: 'currentUser',
 
-  return (
-    <div className="top-bar__menu">
-      <div className="top-bar__menu-item" onClick={onLogOut}>
+  // eslint-disable-next-line react/prop-types
+  renderItems({onLogOut}) {
+    return (
+      <MenuItem onClick={onLogOut}>
         {t('top-bar.session.log-out-prompt')}
-      </div>
-    </div>
-  );
-}
+      </MenuItem>
+    );
+  },
+})(CurrentUserButton);
 
 CurrentUserMenu.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
   onLogOut: PropTypes.func.isRequired,
 };
+
+export default CurrentUserMenu;

src/components/TopBar/createMenu.jsx

@@ -84,7 +84,7 @@ export default function createMenu({
           )}
           onClick={onToggle}
         >
-          <Label />
+          <Label {...props} />
           {menu}
         </div>
       );