Refactor WorkspaceMenu with less boiler plate for opening submenus

__tests__/src/components/WorkspaceMenu.test.js

@@ -19,51 +19,19 @@ describe('WorkspaceMenu', () => {
     expect(handleClose).toBeCalled();
   });
 
-  describe('handleWindowListClick', () => {
+  describe('handleMenuItemClick', () => {
     it('sets the anchor state', () => {
-      wrapper.instance().handleWindowListClick({ currentTarget: true });
+      wrapper.instance().handleMenuItemClick('windowList', { currentTarget: true });
 
       expect(wrapper.find('Connect(WithStyles(WindowList))').props().open).toBe(true);
     });
   });
 
-  describe('handleWindowListClose', () => {
+  describe('handleMenuItemClose', () => {
     it('resets the anchor state', () => {
-      wrapper.instance().handleWindowListClose();
+      wrapper.instance().handleMenuItemClose('windowList')();
 
       expect(wrapper.find('Connect(WithStyles(WindowList))').props().open).toBe(false);
     });
   });
-
-  describe('handleSettingsClick', () => {
-    it('sets the anchor state', () => {
-      wrapper.instance().handleSettingsClick({ currentTarget: true });
-
-      expect(wrapper.find('Connect(WithStyles(WorkspaceSettings))').props().open).toBe(true);
-    });
-  });
-
-  describe('handleSettingsClose', () => {
-    it('resets the anchor state', () => {
-      wrapper.instance().handleSettingsClose();
-
-      expect(wrapper.find('Connect(WithStyles(WorkspaceSettings))').props().open).toBe(false);
-    });
-  });
-
-  describe('handleExportClick', () => {
-    it('sets the anchor state', () => {
-      wrapper.instance().handleExportClick({ currentTarget: true });
-
-      expect(wrapper.find('Connect(WithStyles(WorkspaceExport))').props().open).toBe(true);
-    });
-  });
-
-  describe('handleExportClose', () => {
-    it('resets the anchor state', () => {
-      wrapper.instance().handleExportClose();
-
-      expect(wrapper.find('Connect(WithStyles(WorkspaceExport))').props().open).toBe(false);
-    });
-  });
 });

src/components/WorkspaceMenu.js

@@ -24,88 +24,53 @@ export class WorkspaceMenu extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      windowListAnchorEl: null,
-      settingsAnchorEl: null,
-      exportAnchorEl: null,
+      windowList: {},
+      settings: {},
+      exportWorkspace: {},
     };
-    this.handleWindowListClick = this.handleWindowListClick.bind(this);
-    this.handleWindowListClose = this.handleWindowListClose.bind(this);
-    this.handleSettingsClick = this.handleSettingsClick.bind(this);
-    this.handleSettingsClose = this.handleSettingsClose.bind(this);
-    this.handleExportClick = this.handleExportClick.bind(this);
-    this.handleExportClose = this.handleExportClose.bind(this);
+    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+    this.handleMenuItemClose = this.handleMenuItemClose.bind(this);
   }
 
   /**
    * @private
    */
-  handleWindowListClick(event) {
-    this.setState({
-      windowListAnchorEl: event.currentTarget,
-    });
-  }
-
-  /**
-   * @private
-   */
-  handleWindowListClose() {
-    this.setState({
-      windowListAnchorEl: null,
-    });
-  }
-
-  /**
-   * @private
-   */
-  handleSettingsClick(event) {
-    this.setState({
-      settingsAnchorEl: event.currentTarget,
-    });
-  }
-
-  /**
-   * @private
-   */
-  handleSettingsClose() {
-    this.setState({
-      settingsAnchorEl: null,
-    });
-  }
-
-  /**
-   * @private
-   */
-  handleExportClick(event) {
-    this.setState({
-      exportAnchorEl: event.currentTarget,
-    });
+  handleMenuItemClick(item, event) {
+    const obj = {};
+    obj[item] = {};
+    obj[item].open = true;
+    obj[item].anchorEl = event.currentTarget;
+    this.setState(obj);
   }
 
   /**
    * @private
    */
-  handleExportClose() {
-    this.setState({
-      exportAnchorEl: null,
-    });
+  handleMenuItemClose(item) {
+    return (event) => {
+      const obj = {};
+      obj[item] = {};
+      obj[item].open = false;
+      obj[item].anchorEl = null;
+      this.setState(obj);
+    };
   }
 
-
   /**
    * render
    * @return
    */
   render() {
     const { handleClose, anchorEl } = this.props;
-    const { windowListAnchorEl, settingsAnchorEl, exportAnchorEl } = this.state;
+    const { windowList, settings, exportWorkspace } = this.state;
 
     return (
       <>
         <Menu id="workspace-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
           <MenuItem
             aria-haspopup="true"
-            onClick={(e) => { this.handleWindowListClick(e); handleClose(e); }}
-            aria-owns={windowListAnchorEl ? 'window-list-menu' : undefined}
+            onClick={(e) => { this.handleMenuItemClick('windowList', e); handleClose(e); }}
+            aria-owns={windowList.anchorEl ? 'window-list-menu' : undefined}
           >
             <ListItemIcon>
               <ViewHeadlineIcon />
@@ -115,8 +80,8 @@ export class WorkspaceMenu extends Component {
           <Divider />
           <MenuItem
             aria-haspopup="true"
-            onClick={(e) => { this.handleSettingsClick(e); handleClose(e); }}
-            aria-owns={settingsAnchorEl ? 'workspace-settings' : undefined}
+            onClick={(e) => { this.handleMenuItemClick('settings', e); handleClose(e); }}
+            aria-owns={settings.AnchorEl ? 'workspace-settings' : undefined}
           >
             <ListItemIcon>
               <SettingsIcon />
@@ -125,8 +90,8 @@ export class WorkspaceMenu extends Component {
           </MenuItem>
           <MenuItem
             aria-haspopup="true"
-            onClick={(e) => { this.handleExportClick(e); handleClose(e); }}
-            aria-owns={exportAnchorEl ? 'workspace-export' : undefined}
+            onClick={(e) => { this.handleMenuItemClick('exportWorkspace', e); handleClose(e); }}
+            aria-owns={exportWorkspace.AnchorEl ? 'workspace-export' : undefined}
           >
             <ListItemIcon>
               <SaveAltIcon />
@@ -135,17 +100,17 @@ export class WorkspaceMenu extends Component {
           </MenuItem>
         </Menu>
         <ConnectedWindowList
-          anchorEl={windowListAnchorEl}
-          open={Boolean(windowListAnchorEl)}
-          handleClose={this.handleWindowListClose}
+          anchorEl={windowList.anchorEl}
+          open={Boolean(windowList.anchorEl)}
+          handleClose={this.handleMenuItemClose('windowList')}
         />
         <ConnectedWorkspaceSettings
-          open={Boolean(settingsAnchorEl)}
-          handleClose={this.handleSettingsClose}
+          open={Boolean(settings.open)}
+          handleClose={this.handleMenuItemClose('settings')}
         />
         <ConnectedWorkspaceExport
-          open={Boolean(exportAnchorEl)}
-          handleClose={this.handleExportClose}
+          open={Boolean(exportWorkspace.open)}
+          handleClose={this.handleMenuItemClose('exportWorkspace')}
         />
       </>
     );