feat: improve auto update (#33)

* feat: improve auto update

* fix: fixing the code smell

Author: invisal

src/main/autoupdate.ts

@@ -0,0 +1,40 @@
+import { autoUpdater } from 'electron-updater';
+import log from 'electron-log';
+import { BrowserWindow, ipcMain } from 'electron';
+
+let globalCheckForUpdate = false;
+
+export default function handleAutoUpdate(window: BrowserWindow) {
+  log.transports.file.level = 'info';
+  autoUpdater.logger = log;
+
+  autoUpdater.addListener('checking-for-update', () => {
+    window.webContents.send('checking-for-update');
+  });
+
+  autoUpdater.addListener('update-available', (e) => {
+    window.webContents.send('update-available', e);
+  });
+
+  autoUpdater.addListener('update-not-available', (e) => {
+    window.webContents.send('update-not-available', e);
+  });
+
+  autoUpdater.addListener('download-progress', (e) => {
+    window.webContents.send('update-download-progress', e);
+  });
+
+  autoUpdater.addListener('update-downloaded', (e) => {
+    window.webContents.send('update-downloaded', e);
+  });
+
+  ipcMain.handle('check-for-updates', () => {
+    if (globalCheckForUpdate) return;
+    globalCheckForUpdate = true;
+    autoUpdater.checkForUpdates();
+  });
+
+  ipcMain.handle('quit-and-install', () => {
+    autoUpdater.quitAndInstall();
+  });
+}

src/main/main.ts

@@ -8,29 +8,20 @@
  */
 import path from 'path';
 import { app, BrowserWindow, shell, ipcMain } from 'electron';
-import { autoUpdater } from 'electron-updater';
-import log from 'electron-log';
 import { resolveHtmlPath } from './util';
 
 import electronDebug from 'electron-debug';
 import sourceMapSupport from 'source-map-support';
 import OtherIpcHandler from './ipc/other';
 import ConnectionIpcHandler from './ipc/handleConnection';
+import handleAutoUpdate from './autoupdate';
 
 const otherIpcHandler = new OtherIpcHandler();
 const connectionIpcHandler = new ConnectionIpcHandler();
 
 otherIpcHandler.register();
 connectionIpcHandler.register();
 
-class AppUpdater {
-  constructor() {
-    log.transports.file.level = 'info';
-    autoUpdater.logger = log;
-    autoUpdater.checkForUpdatesAndNotify();
-  }
-}
-
 let mainWindow: BrowserWindow | null = null;
 
 ipcMain.on('ipc-example', async (event, arg) => {
@@ -99,9 +90,7 @@ const createWindow = async () => {
     return { action: 'deny' };
   });
 
-  // Remove this if your app does not use auto updates
-  // eslint-disable-next-line
-  new AppUpdater();
+  handleAutoUpdate(mainWindow);
 };
 
 /**

src/main/preload.ts

@@ -8,6 +8,11 @@ import {
   MessageBoxSyncOptions,
   MenuItemConstructorOptions,
 } from 'electron';
+import {
+  ProgressInfo,
+  UpdateDownloadedEvent,
+  UpdateInfo,
+} from 'electron-updater';
 
 export type Channels = 'ipc-example' | 'create-connection';
 
@@ -50,6 +55,9 @@ const electronHandler = {
   setNativeMenu: (options: MenuItemConstructorOptions[]) =>
     ipcRenderer.invoke('set-menu', [options]),
 
+  quitAndInstall: () => ipcRenderer.invoke('quit-and-install'),
+  checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
+
   handleMenuClick: (
     callback: (event: IpcRendererEvent, id: string) => void
   ) => {
@@ -59,6 +67,39 @@ const electronHandler = {
     cacheHandleMenuClickCb = callback;
     return ipcRenderer.on('native-menu-click', callback);
   },
+
+  listenCheckingForUpdate: (callback: () => void) => {
+    ipcRenderer.removeAllListeners('checking-for-update');
+    return ipcRenderer.on('checking-for-update', callback);
+  },
+
+  listenUpdateAvailable: (
+    callback: (event: IpcRendererEvent, e: UpdateInfo) => void
+  ) => {
+    ipcRenderer.removeAllListeners('update-available');
+    return ipcRenderer.on('update-available', callback);
+  },
+
+  listenUpdateNotAvailable: (
+    callback: (event: IpcRendererEvent, e: UpdateInfo) => void
+  ) => {
+    ipcRenderer.removeAllListeners('update-not-available');
+    return ipcRenderer.on('update-not-available', callback);
+  },
+
+  listenUpdateDownloadProgress: (
+    callback: (event: IpcRendererEvent, e: ProgressInfo) => void
+  ) => {
+    ipcRenderer.removeAllListeners('update-download-progress');
+    return ipcRenderer.on('update-download-progress', callback);
+  },
+
+  listenUpdateDownloaded: (
+    callback: (event: IpcRendererEvent, e: UpdateDownloadedEvent) => void
+  ) => {
+    ipcRenderer.removeAllListeners('update-downloaded');
+    return ipcRenderer.on('update-downloaded', callback);
+  },
 };
 
 contextBridge.exposeInMainWorld('electron', electronHandler);

src/renderer/App.tsx

@@ -9,6 +9,8 @@ import { DialogProvider } from './contexts/DialogProvider';
 import AppFeatureContext from './contexts/AppFeatureProvider';
 import NativeMenuProvider from './contexts/NativeMenuProvider';
 import NotImplementCallback from 'libs/NotImplementCallback';
+import Layout from './components/Layout';
+import StatusBar from './components/StatusBar';
 
 const ConnectionContext = createContext<{
   connect: (connectionConfig: ConnectionStoreItem) => void;
@@ -47,7 +49,18 @@ export default function App() {
             <NativeMenuProvider>
               <SqlExecuteProvider>
                 <div style={{ width: '100vw', height: '100vh' }}>
-                  {config ? <DatabaseScreen config={config} /> : <HomeScreen />}
+                  <Layout>
+                    <Layout.Grow>
+                      {config ? (
+                        <DatabaseScreen config={config} />
+                      ) : (
+                        <HomeScreen />
+                      )}
+                    </Layout.Grow>
+                    <Layout.Fixed>
+                      <StatusBar />
+                    </Layout.Fixed>
+                  </Layout>
                 </div>
               </SqlExecuteProvider>
             </NativeMenuProvider>

src/renderer/components/Splitter/styles.css

@@ -10,7 +10,7 @@
 .splitter-layout .layout-pane {
   position: relative;
   flex: 0 0 auto;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .splitter-layout .layout-pane.layout-pane-primary {

src/renderer/components/StatusBar/index.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import styles from './styles.module.css';
+import pkg from './../../../../package.json';
+import Button from '../Button';
+import Stack from '../Stack';
+import ButtonGroup from '../ButtonGroup';
+
+function StatusBarAutoUpdate() {
+  const [autoUpdateMessage, setAutoUpdateMessage] = useState('');
+  const [autoUpdateProgress, setAutoUpdateProgress] = useState(0);
+  const [downloadCompleted, setDownloadCompleted] = useState(false);
+  const [showUpdateModal, setShowUpdateModal] = useState(false);
+
+  useEffect(() => {
+    window.electron.listenCheckingForUpdate(() =>
+      setAutoUpdateMessage('Checking for update...')
+    );
+
+    window.electron.listenUpdateNotAvailable(() => {
+      setAutoUpdateMessage('Up to date');
+    });
+
+    window.electron.listenUpdateAvailable(console.log);
+
+    window.electron.listenUpdateDownloadProgress((_, e) => {
+      setAutoUpdateProgress(e.percent);
+    });
+
+    window.electron.listenUpdateDownloaded(() => {
+      setDownloadCompleted(true);
+      setShowUpdateModal(true);
+    });
+
+    window.electron.checkForUpdates();
+    console.log('Check for update');
+  }, [setAutoUpdateMessage, setDownloadCompleted, setShowUpdateModal]);
+
+  if (downloadCompleted) {
+    return (
+      <>
+        {showUpdateModal && (
+          <div className={styles.popup}>
+            <Stack vertical spacing="md">
+              <h1>New Update!</h1>
+              <p>
+                There is new update. Restart QueryMaster to use the latest
+                version.
+              </p>
+
+              <ButtonGroup>
+                <Button
+                  primary
+                  onClick={() => window.electron.quitAndInstall()}
+                >
+                  Restart
+                </Button>
+                <Button primary onClick={() => setShowUpdateModal(false)}>
+                  Later
+                </Button>
+              </ButtonGroup>
+            </Stack>
+          </div>
+        )}
+        <li>New update is available. Restart for update</li>
+      </>
+    );
+  }
+
+  if (autoUpdateProgress > 0) {
+    return (
+      <li style={{ display: 'flex', gap: 10 }}>
+        Downloading Update ({autoUpdateProgress.toFixed(0)}%)
+        <div
+          style={{
+            width: 150,
+            background: '#fffa',
+            height: '100%',
+          }}
+        >
+          <div
+            style={{
+              width: `${autoUpdateProgress}%`,
+              background: '#16a085',
+              height: '100%',
+            }}
+          ></div>
+        </div>
+      </li>
+    );
+  }
+
+  return <li>{autoUpdateMessage}</li>;
+}
+
+export default function StatusBar() {
+  return (
+    <div className={styles.statusBarContainer}>
+      <ul>
+        <li>QueryMaster v{pkg.version}</li>
+        <li style={{ flexGrow: 1 }}></li>
+        <StatusBarAutoUpdate />
+      </ul>
+    </div>
+  );
+}

src/renderer/components/StatusBar/styles.module.css

@@ -0,0 +1,28 @@
+.statusBarContainer {
+  padding: 5px 10px;
+  background: #8e44ad;
+  color: #fff;
+  font-size: 0.9rem;
+}
+
+.statusBarContainer ul {
+  list-style: none;
+  display: flex;
+}
+
+.popup {
+  font-size: 1rem;
+  width: 300px;
+  background: var(--color-surface);
+  position: fixed;
+  z-index: 100;
+  padding: 20px;
+  right: 10px;
+  bottom: 40px;
+  box-shadow: var(--color-shadow) 0px 3px 8px;
+  border: 1px solid var(--color-surface-hover);
+}
+
+.popup h1 {
+  font-size: 1.5rem;
+}