#1 Refactor communication with menu.

That is inspired a bit by MDC. Aim is that menu and application now
more separated adn communicate now through a adapter.

Also:
* Preparation for router
* Optimize SW pre cache plugin
* Add webp for icons.

config/webpack.config.prod.js

@@ -313,6 +313,13 @@ module.exports = {
       // Ignores URLs starting from /__ (useful for Firebase):
       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
       navigateFallbackWhitelist: [/^(?!\/__).*/],
+      staticFileGlobs: [
+        'public/css/**.*',
+        'public/lib/**.*',
+        'public/Template/**.*',
+      ],
+      stripPrefix: 'src/static/', // stripPrefixMulti is also supported
+      mergeStaticsConfig: true, // if you don't set this to true, you won't see any webpack-emitted assets in your serviceworker config
       // Don't precache sourcemaps (they're large) and build asset manifest:
       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
     }),

package.json

@@ -28,6 +28,7 @@
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.1.0",
     "extract-text-webpack-plugin": "3.0.0",
+    "fbjs": "^0.8.16",
     "file-loader": "0.11.2",
     "fs-extra": "3.0.1",
     "gh-pages": "^1.0.0",

public/Template/Application.html.tpl

@@ -5,20 +5,25 @@
                 <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                     <a
                             class="material-icons mdc-toolbar__icon--menu"
-                            onClick={this.onMenuButtonClick.bind(this)}
+                            onClick={this.onMainButtonClick.bind(this)}
                     >menu</a>
                     <span class="mdc-toolbar__title catalog-title">Time Tracker</span>
                 </section>
             </div>
         </header>
         <this.components.MainMenu
                 class="mdc-temporary-drawer"
-                open={this.state.menuOpen}
-                onClose={this.onMenuClose.bind(this)}
+                adapter={this.menuAdapter}
+                page={this.state.history.page}
+                onMenu={this.onMenuChange.bind(this)}
         />
 
         <main>
-            <h1 class="mdc-typography--display1">Hello World!</h1>
+            <br />
+            <div style={{textAlign:"right"}}>
+            Page: {this.state.history.page}<br />
+            Component: {this.state.currentComponent}
+            </div>
         </main>
     </div>
 </div>

public/Template/Menu/Main.html.tpl

@@ -1,14 +1,14 @@
-<MDC.Drawer class="mdc-temporary-drawer" open={this.props.open} onClose={this.onClose.bind(this)}>
+<MDC.Drawer class="mdc-temporary-drawer" open={this.state.open} onClose={this.closeMenu.bind(this)}>
     <aside class={this.props.className}>
         <nav class={this.props.className + "__drawer"}>
             <div class={this.props.className + "__toolbar-spacer"}></div>
             <div class="mdc-list-group">
                 <nav class="mdc-list">
-                    <a class={this.props.className + "--selected mdc-list-item"}>
-                        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
-                    </a>
-                    <a class="mdc-list-item">
-                        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
+                    <a
+                            ref="settingsMenu"
+                            class={(this.props.page == 'settings' ? this.props.className + "--selected mdc-list--theme-dark" : "") + " mdc-list-item"}
+                    >
+                        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">settings applications</i> Anwendungseinstellungen
                     </a>
                 </nav>
             </div>

public/index.html

@@ -16,33 +16,33 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="%PUBLIC_URL%/css/material-components-web.min.css">
     <script src="%PUBLIC_URL%/lib/babel.min.js"></script>
-    <script src="%PUBLIC_URL%/lib/material-components-web.min.js"></script>
+    <!--script src="%PUBLIC_URL%/lib/material-components-web.min.js"></script-->
     <style>
         html {
             height: 100%;
         }
         body {
             padding: 0;
             margin: 0;
-            height: 100%;
+            height: 100vh;
         }
         .height100p {
-            height: 100%;
+            height: 100vh;
         }
         .page-wrapper {
             display: flex;
             flex-direction: row;
             padding: 0;
             margin: 0;
             box-sizing: border-box;
-            height: 100%;
+            height: 100vh;
             width: 100%;
         }
         .content {
             display: inline-flex;
             flex-direction: column;
             flex-grow: 1;
-            height: 100%;
+            height: 100vh;
             box-sizing: border-box;
         }
 

public/manifest.json

@@ -3,9 +3,9 @@
   "name": "Codefrog Time Tracker",
   "icons": [
     {
-      "src": "favicon-196x196.png",
+      "src": "favicon-196x196.webp",
       "sizes": "196x196",
-      "type": "image/png"
+      "type": "image/webp"
     },
     {
       "src": "favicon-512x512.png",

src/Application/Application.js

@@ -1,5 +1,7 @@
+import React from 'react';
 import Component from '../Shared/LiveJSX';
 import Menu from '../Menu';
+import Router from './Router';
 
 /**
  * Root Application.
@@ -31,23 +33,67 @@ class Application extends Component {
     this.state = Object.assign(
       this.state,
       {
-        menuOpen: false
+        currentComponent: <div/>,
+        history:          {
+          page: 'none'
+        }
       }
     );
+
+    this.menuAdapter = {
+      registerMenuToggleHandler:   this.registerMenuToggleHandler.bind(this),
+      deregisterMenuToggleHandler: this.deregisterMenuToggleHandler.bind(this)
+    };
+
+    this.registeredButtonHandler = [];
+  }
+
+  onMainButtonClick() {
+    this.registeredButtonHandler.forEach(handler => handler());
   }
 
   /**
    * Set state to menu is closed.
    */
-  onMenuClose() {
-    this.setState({menuOpen: false});
+  onMenuChange(menu) {
+    // TODO: router stuff here?
+    this.setState({history: {page: menu}});
   }
 
   /**
-   * Toggle open state.
+   * Register handle for the main button click.
+   *
+   * @param {[[Function]]} handler
    */
-  onMenuButtonClick() {
-    this.setState({menuOpen: !this.state.menuOpen});
+  registerMenuToggleHandler(handler) {
+    this.registeredButtonHandler.push(handler);
+  }
+
+  /**
+   * Remove handler for main button click.
+   *
+   * @param {[[Function]]} handler
+   */
+  deregisterMenuToggleHandler(handler) {
+    const index = this.registeredButtonHandler.indexOf(handler);
+    if (index === -1) {
+      return;
+    }
+    this.registeredButtonHandler.splice(index, 1);
+  }
+
+  /**
+   * Adding singleton components to application.
+   *
+   * @returns {XML}
+   */
+  render() {
+    return (
+      <div>
+        <Router/>
+        {super.render()}
+      </div>
+    );
   }
 }
 

src/Application/Application.test.js

@@ -16,7 +16,6 @@ describe('Application', function testApplication() {
     Babel.transform.mockClear();
   });
 
-
   /**
    * Test if correct layout loaded.
    */
@@ -45,15 +44,24 @@ describe('Application', function testApplication() {
     );
     Babel.transform.mockReturnValue(
       {
-        code: 'React.createElement(\'button\', { onClick: this.onMenuButtonClick.bind(this) })'
+        code: 'React.createElement(\'button\', { onClick: this.onMainButtonClick.bind(this) })'
       }
     );
 
-    const wrapper = shallow(<Application/>);
+    const wrapper     = shallow(<Application/>);
+    const instance    = wrapper.instance();
+    const buttonClick = jest.fn();
+
+    instance.menuAdapter.registerMenuToggleHandler(buttonClick);
     bound({data: 'TEMPLATE'});
     wrapper.update();
+
     wrapper.find('button').simulate('click');
-    wrapper.instance().onMenuClose();
+    expect(buttonClick).toHaveBeenCalled();
     expect(success).toBe(true);
+
+    instance.onMenuChange('newMenu');
+    instance.menuAdapter.deregisterMenuToggleHandler(buttonClick);
+    instance.menuAdapter.deregisterMenuToggleHandler(buttonClick); // check that double remove don't break
   });
 });

src/Application/Router/Router.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/**
+ * The History API connection.
+ */
+class Router extends React.Component
+{
+  render() {
+    return null;
+  }
+}
+
+export default Router;

src/Application/Router/index.js

@@ -0,0 +1,6 @@
+import Router from './Router';
+
+export default Object.assign(
+  Router,
+  {}
+);

src/Menu/Main/Main.js

@@ -1,5 +1,6 @@
 import Component from '../../Shared/LiveJSX';
 import PropTypes from 'prop-types';
+import emptyFunction from 'fbjs/lib/emptyFunction';
 
 /**
  * The Main menu.
@@ -23,30 +24,94 @@ class MainMenu extends Component
   static get propTypes() {
     return {
       className: PropTypes.string.isRequired,
-      onOpen:    PropTypes.func,
-      onClose:   PropTypes.func,
-      open:      PropTypes.bool
+      adapter:   PropTypes.object,
+      onMenu:    PropTypes.func
     };
   }
 
   /**
-   * Proxy open event, if bound.
-   * @param event
+   * Default adapter to interact with outer world.
+   *
+   * @returns {Object}
    */
-  onOpen(event) {
-    if (this.props.onOpen) {
-      this.props.onOpen(event);
-    }
+  static get defaultAdapter() {
+    return {
+      registerMenuToggleHandler:   emptyFunction,
+      deregisterMenuToggleHandler: emptyFunction
+    };
+  }
+
+  /**
+   * Constructor.
+   *
+   * @param {Object} props
+   * @param {Object} context
+   * @param {Object} updater
+   */
+  constructor(props, context, updater) {
+    super(props, context, updater);
+
+    Object.assign(
+      this.state,
+      {
+        open: false
+      }
+    );
+
+    /**
+     * @type {MainMenu.defaultAdapter}
+     */
+    this.adapter = Object.assign(
+      MainMenu.defaultAdapter,
+      props.adapter
+    );
+
+    this.boundToggleMenu        = this.toggleMenu.bind(this);
+    this.boundMenuSettingsClick = this.onMenuClick.bind(this, 'settings');
+  }
+
+  /**
+   * Menu state toggle.
+   */
+  toggleMenu() {
+    this.setState({open: !this.state.open});
   }
 
   /**
-   * Proxy close event, if bound.
-   * @param event
+   * Close menu.
    */
-  onClose(event) {
-    if (this.props.onClose) {
-      this.props.onClose(event);
+  closeMenu() {
+    this.setState({open: false});
+  }
+
+  /**
+   * Menu click proxy.
+   *
+   * @param {string} menu
+   */
+  onMenuClick(menu) {
+    if (this.props.onMenu) {
+      this.props.onMenu(menu);
     }
+    this.closeMenu();
+  }
+
+  /**
+   * Connect low level events and adapter interactions.
+   *
+   * *Notice:* MDC Drawer caches the event, so take them from low level.
+   */
+  onTemplateMounted(domNode) {
+    this.refs.settingsMenu.addEventListener('click', this.boundMenuSettingsClick);
+    this.adapter.registerMenuToggleHandler(this.boundToggleMenu);
+  }
+
+  /**
+   * Release interaction connections.
+   */
+  componentWillUnmount() {
+    this.refs.settingsMenu.removeEventListener('click', this.boundMenuSettingsClick);
+    this.adapter.deregisterMenuToggleHandler(this.boundToggleMenu);
   }
 }