Merge pull request #59 from codecentric/task-refactor-update-handling

refactor update handling

Author: Matthias Rütten

README.md

@@ -49,6 +49,9 @@ This will start the application with hot-reload so you can instantly start devel
 yarn start
 ```
 
+### Logs
+You will find the application logs in the following folder: `~/Library/Logs/merge-request-notifier/`
+
 ### New Releases
 #### Create a new Release and Publish it
 ```bash

dev-app-update.yml

@@ -0,0 +1,4 @@
+owner: codecentric
+repo: merge-request-notifier
+provider: github
+updaterCacheDirName: merge-request-notifier-updater

package.json

@@ -1,6 +1,6 @@
 {
   "name": "merge-request-notifier",
-  "version": "0.9.1",
+  "version": "1.0.0",
   "description": "This app shows your merge requests grouped by projects and WIP status. It is accessible from the system tray.",
   "main": "./dist/main.js",
   "homepage": "https://github.com/codecentric/merge-request-notifier",

src/main/main.ts

@@ -12,8 +12,6 @@ let win: BrowserWindow | null
 const WINDOW_WIDTH = 380
 const WINDOW_HEIGHT = 460
 
-let TEST_MODE = false
-
 const installExtensions = async () => {
     const installer = require('electron-devtools-installer')
     const forceDownload = !!process.env.UPGRADE_EXTENSIONS
@@ -58,13 +56,14 @@ const setup = async () => {
     log.debug('Starting the app')
 
     try {
+        autoUpdater.autoDownload = false
+
         if (process.env.NODE_ENV !== 'production') {
+            // __dirname is the "dist" folder
+            autoUpdater.updateConfigPath = path.join(__dirname, '../dev-app-update.yml')
             await installExtensions()
         }
 
-        const updateInfo = await autoUpdater.checkForUpdatesAndNotify()
-        log.info(`Latest result for the update check: ${JSON.stringify(updateInfo)}`)
-
         createTray()
         createWindow()
         createMenu()
@@ -122,17 +121,15 @@ const createMenu = () => {
                       },
                   },
                   {
-                      label: 'Toggle Test Mode',
+                      label: 'Toggle Test Data',
                       click: () => {
-                          if (win) {
-                              if (TEST_MODE) {
-                                  win.loadURL('http://localhost:2003')
-                              } else {
-                                  win.loadURL('http://localhost:2003?test')
-                              }
-
-                              TEST_MODE = !TEST_MODE
-                          }
+                          toggleQueryParam('test-data')
+                      },
+                  },
+                  {
+                      label: 'Toggle Fake update',
+                      click: () => {
+                          toggleQueryParam('fake-update')
                       },
                   },
               ]
@@ -169,6 +166,20 @@ const createMenu = () => {
     Menu.setApplicationMenu(menu)
 }
 
+const toggleQueryParam = (parameter: string) => {
+    if (win) {
+        const currentUrl = new URL(win.webContents.getURL())
+
+        if (currentUrl.searchParams.has(parameter)) {
+            currentUrl.searchParams.delete(parameter)
+        } else {
+            currentUrl.searchParams.set(parameter, '1')
+        }
+
+        win.loadURL(currentUrl.href)
+    }
+}
+
 const createWindow = () => {
     win = new BrowserWindow({
         width: WINDOW_WIDTH,
@@ -202,9 +213,7 @@ const createWindow = () => {
     })
 
     win.on('blur', () => {
-        if (!TEST_MODE) {
-            hideWindow()
-        }
+        hideWindow()
     })
 }
 
@@ -240,6 +249,18 @@ ipcMain.on('update-open-merge-requests', (_: any, openMergeRequests: number) =>
     }
 })
 
+ipcMain.on('download-and-install-update', () => {
+    autoUpdater.once('update-downloaded', () => {
+        autoUpdater.quitAndInstall()
+    })
+
+    autoUpdater.downloadUpdate()
+})
+
+ipcMain.handle('check-for-updates', async () => {
+    return autoUpdater.checkForUpdates().catch(error => log.error('error while checking for updates', error))
+})
+
 ipcMain.on('close-application', () => {
     app.quit()
 })

src/renderer/app.scss

@@ -11,3 +11,11 @@ button {
     all: unset;
     cursor: pointer;
 }
+
+.release-notes {
+    p,
+    ul {
+        margin-top: 0;
+        margin-bottom: 8px;
+    }
+}

src/renderer/components/Application.tsx

@@ -1,34 +1,36 @@
 import { hot } from 'react-hot-loader/root'
 import * as React from 'react'
-import { BrowserRouter, Route } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
 import { ThemeProvider } from 'emotion-theming'
 
 import { Header } from './layout/Header'
 import { Footer } from './layout/Footer'
 import { theme } from './theme'
 import { ConfigProvider } from '../hooks/config'
-import { BackendProvider } from '../hooks/backend'
+import { BackendProvider } from '../hooks/merge-requests/backend'
+import { UpdaterProvider } from '../hooks/updater'
 import { Content } from './Content'
 import { Wrapper } from './layout/Wrapper'
 import { Main } from './layout/Main'
 import { NotificationsEmiter } from './NotificationsEmiter'
-import { Switch } from '@material-ui/core'
 
 const Application: React.FunctionComponent = () => (
     <ConfigProvider>
         <BackendProvider>
-            <NotificationsEmiter />
-            <ThemeProvider theme={theme}>
-                <BrowserRouter>
-                    <Wrapper>
-                        <Header />
-                        <Main>
-                            <Content />
-                        </Main>
-                        <Footer />
-                    </Wrapper>
-                </BrowserRouter>
-            </ThemeProvider>
+            <UpdaterProvider>
+                <NotificationsEmiter />
+                <ThemeProvider theme={theme}>
+                    <BrowserRouter>
+                        <Wrapper>
+                            <Header />
+                            <Main>
+                                <Content />
+                            </Main>
+                            <Footer />
+                        </Wrapper>
+                    </BrowserRouter>
+                </ThemeProvider>
+            </UpdaterProvider>
         </BackendProvider>
     </ConfigProvider>
 )

src/renderer/components/Content.tsx

@@ -6,9 +6,13 @@ import { useConfig } from '../hooks/config'
 import { MergeRequestsPage } from './merge-requests/MergeRequestsPage'
 import { SettingsPage } from './settings/SettingsPage'
 import { AboutUsPage } from './about-us/AboutUsPage'
+import { UpdateInfoPage } from './update/UpdateInfoPage'
+import { useUpdater } from '../hooks/updater'
+import { NewUpdateAlert } from './update/NewUpdateAlert'
 
 export const Content: React.FunctionComponent = () => {
     const { config } = useConfig()
+    const { updateInfo } = useUpdater()
 
     return (
         <Box>
@@ -19,8 +23,12 @@ export const Content: React.FunctionComponent = () => {
                 <Route path='/about-us'>
                     <AboutUsPage />
                 </Route>
+                <Route path='/update'>
+                    <UpdateInfoPage />
+                </Route>
                 {config ? (
                     <Route path='/'>
+                        {updateInfo && <NewUpdateAlert />}
                         <MergeRequestsPage />
                     </Route>
                 ) : (

src/renderer/components/NotificationsEmiter.ts

@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react'
-import { ipcRenderer } from 'electron'
 
-import { useBackend } from '../hooks/backend'
-import { MergeRequestWithProject } from '../hooks/types'
+import { useBackend } from '../hooks/merge-requests/backend'
+import { MergeRequestWithProject } from '../hooks/merge-requests/types'
 
 export const NotificationsEmiter = () => {
     const { mergeRequestWithProjects } = useBackend()

src/renderer/components/about-us/AboutUsPage.tsx

@@ -1,5 +1,5 @@
-import { remote, shell } from 'electron'
 import * as React from 'react'
+import { remote, shell } from 'electron'
 import { Box, Text } from 'rebass'
 
 const openUrl = (url: string): React.MouseEventHandler<HTMLAnchorElement> => event => {

src/renderer/components/layout/Footer.tsx

@@ -7,7 +7,7 @@ import InfoIcon from '@material-ui/icons/Info'
 import SettingsIcon from '@material-ui/icons/Settings'
 import ExitToAppIcon from '@material-ui/icons/ExitToApp'
 import { LoadingIndicator } from '../util/LoadingIndicator'
-import { useBackend } from '../../hooks/backend'
+import { useBackend } from '../../hooks/merge-requests/backend'
 
 const closeApp = () => {
     ipcRenderer.send('close-application')