No need for connected user preferences when header can contain info

src/components/Header/Header.js

@@ -1,16 +1,18 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Link, withRouter } from 'react-router-dom';
-import { Dropdown } from 'react-viewerbase';
 import './Header.css';
+
+import { Link, withRouter } from 'react-router-dom';
+import React, { Component } from 'react';
+
+import { Dropdown } from 'react-viewerbase';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
-import ConnectedUserPreferencesModal from '../../connectedComponents/ConnectedUserPreferencesModal.js';
+import PropTypes from 'prop-types';
+import { UserPreferencesModal } from 'react-viewerbase';
+import { hotkeysManager } from './../../App.js';
 
 class Header extends Component {
   static propTypes = {
     home: PropTypes.bool.isRequired,
     location: PropTypes.object.isRequired,
-    openUserPreferencesModal: PropTypes.func,
     children: PropTypes.node,
   };
 
@@ -19,12 +21,25 @@ class Header extends Component {
     children: OHIFLogo(),
   };
 
+  // onSave: data => {
+  //   const contextName = window.store.getState().commandContext.context;
+  //   const preferences = cloneDeep(window.store.getState().preferences);
+  //   preferences[contextName] = data;
+  //   dispatch(setUserPreferences(preferences));
+  //   dispatch(setUserPreferencesModalOpen(false));
+  //   OHIF.hotkeysUtil.setHotkeys(data.hotKeysData);
+  // },
+  // onResetToDefaults: () => {
+  //   dispatch(setUserPreferences());
+  //   dispatch(setUserPreferencesModalOpen(false));
+  //   OHIF.hotkeysUtil.setHotkeys();
+  // },
+
   constructor(props) {
     super(props);
+    this.state = { isUserPreferencesOpen: false };
 
-    this.state = {
-      userPreferencesOpen: false,
-    };
+    const onClick = this.toggleUserPreferences.bind(this);
 
     this.options = [
       {
@@ -32,7 +47,7 @@ class Header extends Component {
         icon: {
           name: 'user',
         },
-        onClick: this.props.openUserPreferencesModal,
+        onClick: onClick,
       },
       {
         title: 'About',
@@ -42,6 +57,24 @@ class Header extends Component {
         link: 'http://ohif.org',
       },
     ];
+
+    this.hotKeysData = hotkeysManager.hotkeyDefinitions;
+  }
+
+  toggleUserPreferences() {
+    const isOpen = this.state.isUserPreferencesOpen;
+
+    this.setState({
+      isUserPreferencesOpen: !isOpen,
+    });
+  }
+
+  onUserPreferencesSave({ windowLevelData, hotKeysData }) {
+    console.log(windowLevelData);
+    console.log(hotKeysData);
+
+    // TODO: Update hotkeysManager
+    // TODO: reset `this.hotKeysData`
   }
 
   render() {
@@ -75,7 +108,14 @@ class Header extends Component {
         <div className="header-menu">
           <span className="research-use">INVESTIGATIONAL USE ONLY</span>
           <Dropdown title="Options" list={this.options} align="right" />
-          <ConnectedUserPreferencesModal />
+          <UserPreferencesModal
+            isOpen={this.state.isUserPreferencesOpen}
+            onCancel={this.toggleUserPreferences.bind(this)}
+            onSave={this.toggleUserPreferences.bind(this)}
+            onResetToDefaults={this.toggleUserPreferences.bind(this)}
+            windowLevelData={{}}
+            hotKeysData={this.hotKeysData}
+          />
         </div>
       </div>
     );