preferences menu item

package.json

@@ -16,6 +16,7 @@
     "dist": "npm run build && npm run package"
   },
   "repository": "https://github.com/kremalicious/ocean-balance.git",
+  "homepage": "https://github.com/kremalicious/ocean-balance",
   "author": "Matthias Kretschmann",
   "license": "MIT",
   "dependencies": {

src/app/App.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Router, Location } from '@reach/router'
+import { Router, Location, navigate } from '@reach/router'
-import { webFrame } from 'electron'
+import { webFrame, ipcRenderer } from 'electron'
 import posed, { PoseGroup } from 'react-pose'
 import Titlebar from './components/Titlebar'
 import Home from './screens/Home'
@@ -35,6 +35,12 @@ PosedRouter.propTypes = {
 }
 
 export default class App extends PureComponent {
+  componentDidMount() {
+    ipcRenderer.on('goTo', (evt, route) => {
+      navigate(route)
+    })
+  }
+
   render() {
     return (
       <>

src/main.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const { app, BrowserWindow, systemPreferences } = require('electron')
 const { touchBarWrapper } = require('react-touchbar-electron')
+const buildMenu = require('./menu')
 
 let mainWindow
 
@@ -106,11 +107,13 @@ const createWindow = async () => {
   switchTheme()
 
   // Load menubar menu items
-  require('./menu.js')
+  buildMenu(mainWindow)
 
   touchBarWrapper(mainWindow)
 }
 
+module.exports = { mainWindow }
+
 app.on('ready', () => {
   createWindow()
 

src/menu.js

@@ -1,155 +1,183 @@
 const { app, Menu } = require('electron')
 const { openUrl } = require('./app/util/openUrl')
+const { homepage } = require('../package.json')
 
-const template = [
+const buildMenu = mainWindow => {
-  {
+  const template = [
-    label: 'Edit',
+    {
-    submenu: [
+      label: 'Edit',
-      {
+      submenu: [
-        role: 'undo'
+        {
-      },
+          role: 'undo'
-      {
+        },
-        role: 'redo'
+        {
-      },
+          role: 'redo'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          role: 'cut'
+        },
+        {
+          role: 'copy'
+        },
+        {
+          role: 'paste'
+        },
+        {
+          role: 'pasteandmatchstyle'
+        },
+        {
+          role: 'delete'
+        },
+        {
+          role: 'selectall'
+        }
+      ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          role: 'reload'
+        },
+        {
+          role: 'forcereload'
+        },
+        {
+          role: 'toggledevtools'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          role: 'togglefullscreen'
+        }
+      ]
+    },
+    {
+      role: 'window',
+      submenu: [
+        {
+          role: 'minimize'
+        },
+        {
+          role: 'close'
+        }
+      ]
+    },
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Learn More',
+          click() {
+            openUrl(homepage)
+          }
+        }
+      ]
+    }
+  ]
+
+  if (process.platform === 'darwin') {
+    template.unshift({
+      label: app.getName(),
+      submenu: [
+        {
+          role: 'about'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Preferences...',
+          accelerator: 'CmdOrCtrl+,',
+          click() {
+            mainWindow.webContents.send('goTo', '/preferences')
+          }
+        },
+        {
+          type: 'separator'
+        },
+        {
+          role: 'services',
+          submenu: []
+        },
+        {
+          type: 'separator'
+        },
+        {
+          role: 'hide'
+        },
+        {
+          role: 'hideothers'
+        },
+        {
+          role: 'unhide'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          role: 'quit'
+        }
+      ]
+    })
+
+    // Edit menu
+    template[1].submenu.push(
       {
         type: 'separator'
       },
       {
-        role: 'cut'
+        label: 'Speech',
-      },
+        submenu: [
-      {
+          {
-        role: 'copy'
+            role: 'startspeaking'
-      },
+          },
-      {
+          {
-        role: 'paste'
+            role: 'stopspeaking'
-      },
+          }
-      {
+        ]
-        role: 'pasteandmatchstyle'
-      },
-      {
-        role: 'delete'
-      },
-      {
-        role: 'selectall'
       }
-    ]
+    )
-  },
+
-  {
+    // Window menu
-    label: 'View',
+    template[3].submenu = [
-    submenu: [
-      {
-        role: 'reload'
-      },
-      {
-        role: 'forcereload'
-      },
-      {
-        role: 'toggledevtools'
-      },
-      {
-        type: 'separator'
-      },
-      {
-        role: 'togglefullscreen'
-      }
-    ]
-  },
-  {
-    role: 'window',
-    submenu: [
       {
         role: 'minimize'
       },
       {
-        role: 'close'
+        role: 'zoom'
-      }
+      },
-    ]
-  },
-  {
-    role: 'help',
-    submenu: [
       {
-        label: 'Learn More',
+        role: 'close'
-        click() {
+      },
-          openUrl('https://electron.atom.io')
+      {
-        }
+        type: 'separator'
+      },
+      {
+        role: 'front'
       }
     ]
   }
-]
 
-if (process.platform === 'darwin') {
+  if (process.platform !== 'darwin') {
-  template.unshift({
+    template[0].submenu.push(
-    label: app.getName(),
+      { type: 'separator' },
-    submenu: [
       {
-        role: 'about'
+        label: 'Preferences...',
-      },
+        accelerator: 'CmdOrCtrl+,',
-      {
+        click() {
-        type: 'separator'
+          mainWindow.webContents.send('goTo', '/preferences')
-      },
-      {
-        role: 'services',
-        submenu: []
-      },
-      {
-        type: 'separator'
-      },
-      {
-        role: 'hide'
-      },
-      {
-        role: 'hideothers'
-      },
-      {
-        role: 'unhide'
-      },
-      {
-        type: 'separator'
-      },
-      {
-        role: 'quit'
-      }
-    ]
-  })
-
-  // Edit menu
-  template[1].submenu.push(
-    {
-      type: 'separator'
-    },
-    {
-      label: 'Speech',
-      submenu: [
-        {
-          role: 'startspeaking'
-        },
-        {
-          role: 'stopspeaking'
         }
-      ]
+      }
-    }
+    )
-  )
+  }
 
-  // Window menu
+  const menu = Menu.buildFromTemplate(template)
-  template[3].submenu = [
+  Menu.setApplicationMenu(menu)
-    {
-      role: 'close'
-    },
-    {
-      role: 'minimize'
-    },
-    {
-      role: 'zoom'
-    },
-    {
-      type: 'separator'
-    },
-    {
-      role: 'front'
-    }
-  ]
 }
 
-const menu = Menu.buildFromTemplate(template)
+module.exports = buildMenu
-Menu.setApplicationMenu(menu)