move autoupdater to be inside a modal

src/main/main.ts

@@ -262,7 +262,7 @@ class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
     autoUpdater.logger = log;
-    autoUpdater.checkForUpdates();
+    //autoUpdater.checkForUpdates();
   }
 }
 
@@ -402,12 +402,12 @@ function sendStatusToWindow(text) {
 }
 
 autoUpdater.on('checking-for-update', () => {
-  console.log('main.js: Checking for update...');
+  console.log('🔄 main.js: Checking for update...');
   sendStatusToWindow('Checking for update...');
 });
 autoUpdater.on('update-available', (info) => {
-  console.log('main.js: Update available...');
-  // sendStatusToWindow('Update available.');
+  console.log('🔄 main.js: Update available...');
+  sendStatusToWindow('Update available.');
 
   dialog
     .showMessageBox({
@@ -427,8 +427,8 @@ autoUpdater.on('update-available', (info) => {
     });
 });
 autoUpdater.on('update-not-available', (info) => {
-  console.log('main.js: Update not available...');
-  // sendStatusToWindow('Update not available.');
+  console.log('🔄 main.js: Update not available...');
+  sendStatusToWindow('Update not available.');
   // dialog.showMessageBox({
   //   title: 'No Updates',
   //   message: 'Current version is up-to-date.',
@@ -437,8 +437,8 @@ autoUpdater.on('update-not-available', (info) => {
   // updater = null;
 });
 autoUpdater.on('error', (err) => {
-  console.log('main.js: Error in auto-updater. ' + err);
-  // sendStatusToWindow('main.js: Error in auto-updater. ' + err);
+  console.log('🔄 main.js: Error in auto-updater. ' + err);
+  sendStatusToWindow('Update Error');
 });
 autoUpdater.on('download-progress', (progressObj) => {
   let log_message = 'Download speed: ' + progressObj.bytesPerSecond;
@@ -453,7 +453,7 @@ autoUpdater.on('download-progress', (progressObj) => {
   sendStatusToWindow(log_message);
 });
 autoUpdater.on('update-downloaded', (info) => {
-  console.log('main.js: Update downloaded...');
+  console.log('🔄 main.js: Update downloaded...');
   // sendStatusToWindow('Update downloaded');
   dialog
     .showMessageBox({
@@ -465,6 +465,15 @@ autoUpdater.on('update-downloaded', (info) => {
     });
 });
 
+ipcMain.handle('autoUpdater:requestUpdate', () => {
+  console.log('🔄 main.js: Requesting update...');
+  if (autoUpdater.isUpdaterActive()) {
+    autoUpdater.checkForUpdates();
+  } else {
+    sendStatusToWindow('Update not available.');
+  }
+});
+
 app
   .whenReady()
   .then(() => {

src/main/preload.ts

@@ -98,6 +98,8 @@ contextBridge.exposeInMainWorld('sshClient', {
 
 contextBridge.exposeInMainWorld('autoUpdater', {
   onMessage: (data) => ipcRenderer.on('autoUpdater', data),
+  removeAllListeners: () => ipcRenderer.removeAllListeners('autoUpdater'),
+  requestUpdate: () => ipcRenderer.invoke('autoUpdater:requestUpdate'),
 });
 
 contextBridge.exposeInMainWorld('darkMode', {

src/renderer/App.tsx

@@ -28,7 +28,7 @@ import { IconButton } from '@mui/joy';
 import { log } from 'node:console';
 import DraggableElipsis from './components/Shared/DraggableEllipsis';
 // import OutputTerminal from './components/OutputTerminal';
-// import AutoUpdateModal from './components/AutoUpdateModal';
+import AutoUpdateModal from './components/AutoUpdateModal';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
@@ -142,7 +142,6 @@ export default function App() {
           // backgroundColor: (theme) => theme.vars.palette.background.surface,
         })}
       >
-        {/* <AutoUpdateModal /> */}
         <Header
           connection={connection}
           setConnection={setConnection}
@@ -232,12 +231,14 @@ export default function App() {
             <OutputTerminal initialMessage="** Running a Model will Display Output Here **" />
           </Box>
         </Box>
+
         <LoginModal
           setServer={setConnection}
           connection={connection}
           setTerminalDrawerOpen={setLogsDrawerOpen}
           setSSHConnection={setSSHConnection}
         />
+        <AutoUpdateModal />
       </Box>
     </CssVarsProvider>
   );

src/renderer/components/AutoUpdateModal.tsx

-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Modal, ModalClose, Sheet, Typography } from '@mui/joy';
-window.autoUpdater.onMessage((message) => {
-  console.log('autoupdate message', message);
-  var container = document.getElementById('messages');
-  var m = document.createElement('div');
-  m.innerHTML = text;
-  container?.appendChild(message);
-});
+import HexLogoSpinner from './Shared/HexLogoSpinner';
+
 export default function AutoUpdateModal({}) {
   const [open, setOpen] = React.useState<boolean>(true);
+  const [message, setMessage] = React.useState<string>('');
+
+  useEffect(() => {
+    window.autoUpdater.requestUpdate();
+    window.autoUpdater.onMessage((event, message) => {
+      setMessage(message);
+
+      if (message === 'Update not available.') {
+        setOpen(false);
+      }
+
+      if (message === 'Update error') {
+        setTimeout(() => {
+          setOpen(false);
+        }, 2000);
+      }
+    });
+
+    return () => {
+      window.autoUpdater.removeAllListeners();
+    };
+  }, []);
 
   return (
-    <Modal open={open} onClose={() => setOpen(false)}>
+    <Modal
+      open={open}
+      onClose={() => setOpen(false)}
+      sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+    >
       <Sheet
         variant="outlined"
         sx={{
+          display: 'flex',
+          flexDirection: 'column',
           maxWidth: 500,
           borderRadius: 'md',
           p: 3,
           boxShadow: 'lg',
+          textAlign: 'center',
         }}
       >
-        <ModalClose variant="plain" sx={{ m: 1 }} />
-        <Typography
-          component="h2"
-          id="modal-title"
-          level="h4"
-          textColor="inherit"
-          fontWeight="lg"
-          mb={1}
-        >
-          This is the modal title
+        <Typography level="h4" sx={{ mb: 4 }}>
+          Auto Update
         </Typography>
-        <Typography id="modal-desc" textColor="text.tertiary">
-          Make sure to use <code>aria-labelledby</code> on the modal dialog with
-          an optional <code>aria-describedby</code> attribute.
-          <div id="messages"></div>
+        <Typography textColor="text.tertiary">
+          {/* {message} */}
+          <HexLogoSpinner />
+          {message === 'Checking for update...' && <>Checking for Updates...</>}
+          {message === 'Update available' && (
+            <>Update Available, Downloading...</>
+          )}
+          {message.startsWith('Download speed') && (
+            <>
+              Update Available, Downloading...
+              <br />
+              {message}
+            </>
+          )}
+          {message === 'Downloading update...' && <>Downloading Updates...</>}
+          {message === 'Update not available.' && <>Update not available.</>}
+          {message === 'Update error' && <>Auto Update Error</>}
         </Typography>
       </Sheet>
     </Modal>