Merge pull request #69 from arthyn/adding-auto-updates-pt2

adding auto update support for mac

package.json

@@ -73,6 +73,7 @@
     "@davidwinter/electron-forge-maker-snap": "^0.7.1",
     "@radix-ui/react-dialog": "0.0.8",
     "@radix-ui/react-dropdown-menu": "^0.0.17",
+    "@radix-ui/react-popover": "^0.0.16",
     "@radix-ui/react-tabs": "^0.0.11",
     "@radix-ui/react-tooltip": "^0.0.16",
     "@types/adm-zip": "^0.4.33",

src/background/services/os-service.ts

@@ -10,6 +10,7 @@ export interface OSHandlers {
     'create-view': OSService['createView'];
     'update-view-bounds': OSService['updateViewBounds'];
     'remove-view': OSService['removeView'];
+    'install-updates': OSService['installUpdates'];
 }
 
 export class OSService {
@@ -81,6 +82,10 @@ export class OSService {
     async removeView(url: string): Promise<void> {
         await ipc.invoke('remove-view', url);
     }
+
+    async installUpdates(): Promise<void> {
+        await ipc.invoke('install-updates');
+    }
 }
 
 export interface ViewData {

src/main/index.ts

@@ -1,8 +1,9 @@
-import { app, BrowserWindow } from 'electron';
+import { app, autoUpdater, BrowserWindow } from 'electron';
 import findOpenSocket from '../renderer/client/find-open-socket'
 import isDev from 'electron-is-dev'
 import { isOSX } from './helpers';
 import { createMainWindow } from './main-window';
+import { send } from '../background/server/ipc';
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 declare const BACKGROUND_WINDOW_WEBPACK_ENTRY: string;
 
@@ -13,6 +14,28 @@ if (require('electron-squirrel-startup')) { // eslint-disable-line global-requir
 
 let mainWindow: BrowserWindow;
 
+if (!isDev) {
+  const server = 'https://update.electronjs.org'
+  const feed = `${server}/arthyn/taisho/${process.platform}-${process.arch}/${app.getVersion()}`
+
+  autoUpdater.setFeedURL({
+    url: feed
+  })
+
+  autoUpdater.on('update-available', () => {
+    send('update-available');
+  });
+
+  autoUpdater.on('update-downloaded', () => {
+    send('update-downloaded');
+  })
+
+  autoUpdater.on('error', message => {
+    console.error('There was a problem updating the application')
+    console.error(message)
+  })
+}
+
 function createBackgroundWindow(socketName: string) {
   const win = new BrowserWindow({
     title: 'background',
@@ -56,6 +79,12 @@ async function start(bootBg: boolean) {
   }
 
   mainWindow = createMainWindow(MAIN_WINDOW_WEBPACK_ENTRY, serverSocket, app.quit.bind(this), bgWindow)
+
+  if (!isDev) {
+    setInterval(() => {
+      autoUpdater.checkForUpdates()
+    }, 10 * 60 * 1000) //check every 10 mins for updates
+  }
 }
 
 // This method will be called when Electron has finished

src/main/os-service-helper.ts

@@ -1,4 +1,4 @@
-import { BrowserView, BrowserWindow, dialog, ipcMain, IpcMainInvokeEvent } from 'electron'
+import { autoUpdater, BrowserView, BrowserWindow, dialog, ipcMain, IpcMainInvokeEvent } from 'electron'
 import isDev from 'electron-is-dev'
 import { ViewData } from '../background/services/os-service';
 import { initContextMenu } from './context-menu';
@@ -90,6 +90,10 @@ async function removeView(mainWindow: BrowserWindow, url: string) {
     }
 }
 
+function installUpdates() {
+    autoUpdater.quitAndInstall();
+}
+
 export function start(mainWindow: BrowserWindow, createNewWindow, bgWindow?: BrowserWindow): void {
     ipcMain.handle('open-dialog', openDialog)
     ipcMain.handle('set-title', (event, args) => setTitle(mainWindow, event, args))
@@ -98,4 +102,5 @@ export function start(mainWindow: BrowserWindow, createNewWindow, bgWindow?: Bro
     ipcMain.handle('create-view', (event, args) => createView(mainWindow, createNewWindow, args))
     ipcMain.handle('update-view-bounds', (event, args) => updateViewBounds(args))
     ipcMain.handle('remove-view', (event, args) => removeView(mainWindow, args))
+    ipcMain.handle('install-updates', installUpdates)
 }

src/renderer/App.tsx

@@ -28,7 +28,8 @@ const queryClient = new QueryClient({
 });
 
 export const useStore = create(() => ({
-    piers: []
+    piers: [],
+    updateStatus: 'initial'
 }))
 
 const AppWrapped = () => (

src/renderer/shared/Layout.tsx

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom'
 import { send } from '../client/ipc';
 import { Bug } from '../icons/Bug';
 import { isOSX } from '../../main/helpers';
+import { UpdateNotifier } from './UpdateNotifier';
 
 interface LayoutProps {
     title: string;
@@ -63,7 +64,8 @@ export const Layout: FunctionComponent<LayoutProps> = ({ children, title, center
                             }
                         }}
                     />
-                    <button className="p-2 ml-4 text-gray-400 dark:text-gray-500 hover:text-black dark:hover:text-white focus:text-black dark:focus:text-white focus:outline-none" onClick={toggleDevTools}>
+                    <UpdateNotifier />
+                    <button className="p-2 ml-2 text-gray-400 dark:text-gray-500 hover:text-black dark:hover:text-white focus:text-black dark:focus:text-white focus:outline-none" onClick={toggleDevTools}>
                         <Bug className="h-4 w-4" primary="fill-current" secondary="fill-current opacity-40" />
                     </button>
                 </div>

src/renderer/shared/UpdateNotifier.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react'
+import { useStore } from '../App';
+import { listen, send } from '../client/ipc';
+import { Spinner } from './Spinner';
+import * as Popover from '@radix-ui/react-popover';
+import { Close } from '../icons/Close';
+import { Button } from './Button';
+
+const PopoverContent: any = Popover.Content;
+
+export const UpdateNotifier = () => {
+    const status = useStore(state => state.updateStatus);
+
+    function install() {
+        send('install-updates');
+    }
+
+    useEffect(() => {
+        const unlistenAvailable = listen('update-available', () => {
+            useStore.setState({ updateStatus: 'available' });
+        });
+
+        const unlistenDownloaded = listen('update-downloaded', () => {
+            useStore.setState({ updateStatus: 'downloaded' });
+        })
+
+        return () => {
+            unlistenAvailable();
+            unlistenDownloaded();
+        }
+    }, []);
+
+    if (status === 'initial') {
+        return null;
+    }
+
+    return (
+        <span className="flex items-center ml-4 mr-2 text-xs leading-none text-gray-400 dark:text-gray-500">
+            {status === 'available' && 
+                <>
+                    <Spinner className="w-4 h-4 mr-2" />
+                    <span>Getting Updates</span>
+                </>
+            }
+            {status === 'downloaded' &&
+                <>
+                    <Popover.Root defaultOpen={true}>
+                        <Popover.Trigger className="hover:text-black dark:hover:text-white default-ring">
+                            Updates Ready
+                        </Popover.Trigger>
+                        <PopoverContent
+                            align="end"
+                            sideOffset={20}
+                            onOpenAutoFocus={event => event.preventDefault()}
+                            onPointerDownOutside={event => event.preventDefault()}
+                            className="relative -right-8 flex items-center p-2 text-sm text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-900 default-ring rounded"
+                        >
+                            <Popover.Close className="mr-2 text-gray-300 dark:text-gray-700 hover:text-gray-400 dark:hover:text-gray-500 focus:text-gray-400 dark:focus:text-gray-500 default-ring rounded">
+                                <Close className="w-5 h-5" primary="fill-current" />
+                            </Popover.Close>
+                            <h2><strong>Update Available</strong></h2>
+                            <Popover.Close as={Button} className="ml-6" onClick={install}>Quit and Install</Popover.Close>
+                        </PopoverContent>
+                    </Popover.Root>
+                </>    
+            }
+        </span>
+    );
+}