use ipcRendered on and removeAllListener functions

valory-xyz · May 28, 2024 · c61a401 · c61a401
1 parent 1dc8181
commit c61a401
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 54 deletions.
diff --git a/electron/main.js b/electron/main.js
@@ -28,7 +28,7 @@ const { killProcesses } = require('./processes');
 const { isPortAvailable, findAvailablePort } = require('./ports');
 const { PORT_RANGE, isWindows, isMac } = require('./constants');
 const { macUpdater } = require('./update');
-const { setupStoreIpc, setStoreValue } = require('./store');
+const { setupStoreIpc } = require('./store');
 
 // Configure environment variables
 dotenv.config();
@@ -527,20 +527,20 @@ macUpdater.on('update-downloaded', () => {
   macUpdater.quitAndInstall();
 });
 
-// macUpdater.on('update-available', (info) => {});
+macUpdater.on('update-available', (info) => {
+  mainWindow.webContents.send('update-available', info);
+});
 
-// macUpdater.once('checking-for-update', () => {
-//   console.log('Checking for update...');
-// });
+macUpdater.on('download-progress', (progress) => {
+  mainWindow.webContents.send('download-progress', progress);
+});
 
-// macUpdater.on('update-not-available', (e) => {
-//   console.log('Checking for update: ', e);
-// });
+macUpdater.on('update-downloaded', (info) => {
+  mainWindow.webContents.send('update-downloaded', info);
+});
 
-// CONFIRMED // TODO: remove this line
 ipcMain.on('check-for-updates', async () => {
-  const res = await macUpdater.checkForUpdates();
-  return res && !!res.downloadPromise;
+  macUpdater.checkForUpdates();
 });
 
 ipcMain.on('start-download', () => {

diff --git a/electron/store.js b/electron/store.js
@@ -48,17 +48,4 @@ const setupStoreIpc = async (ipcChannel, mainWindow) => {
   ipcChannel.handle('store-clear', (_) => store.clear());
 };
 
-/**
- *
- * @param {import('electron').IpcMain} ipcChannel
- * @param {string} key
- * @param {any} value
- */
-const setStoreValue = async (ipcChannel, key, value) => {
-  console.log('store-set called =====>>>> ');
-  // ipcRenderer.invoke('store-set', key, value);
-
-  ipcChannel.handle('store-set', key, value);
-};
-
-module.exports = { setupStoreIpc, setStoreValue };
+module.exports = { setupStoreIpc };
diff --git a/frontend/components/Main/UpdateInstallationModal.tsx b/frontend/components/Main/UpdateInstallationModal.tsx
@@ -1,7 +1,6 @@
 import { Button, Flex, Modal, Typography } from 'antd';
 import Image from 'next/image';
-import { FC, useState } from 'react';
-import { useInterval } from 'usehooks-ts';
+import { FC, useEffect, useState } from 'react';
 
 import { MODAL_WIDTH } from '@/constants/sizes';
 import { useElectronApi } from '@/hooks/useElectronApi';
@@ -11,25 +10,24 @@ const { Title, Paragraph } = Typography;
 
 export const UpdateInstallationModal: FC = () => {
   const { storeState } = useStore();
-  const { store, checkForUpdates, startDownload } = useElectronApi();
+  const { store, ipcRenderer, startDownload } = useElectronApi();
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   // console.log(storeState);
 
-  // Check for updates every 10 seconds
-  useInterval(
-    () => {
-      (async () => {
-        const isUpdateAvailable = await checkForUpdates?.();
-        window.console.log({ isUpdateAvailable });
-        // console.log({ isUpdateAvailable });
-        // if (storeState?.canCheckForUpdates) {
-        //   setIsModalVisible(!!isUpdateAvailable);
-        // }
-      })();
-    },
-    storeState?.canCheckForUpdates ? 3000 : null,
-  );
+  // listen for update available event
+  useEffect(() => {
+    ipcRenderer?.on?.('update-available', (info) => {
+      if (!info) return;
+      if (storeState?.canCheckForUpdates === false) return;
+
+      setIsModalVisible(true);
+    });
+
+    return () => {
+      ipcRenderer?.removeAllListeners?.('update-available');
+    };
+  }, [ipcRenderer, storeState]);
 
   const handleInstall = () => {
     startDownload?.();

diff --git a/frontend/components/Main/UpdateProgressIndicator.tsx b/frontend/components/Main/UpdateProgressIndicator.tsx
@@ -1,10 +1,8 @@
 import { Button, Flex, Typography } from 'antd';
-import { isNil } from 'lodash';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { CSSProperties } from 'styled-components';
 
 import { useElectronApi } from '@/hooks/useElectronApi';
-import { useStore } from '@/hooks/useStore';
 
 import { Alert } from '../common/Alert';
 import { CardSection } from '../styled/CardSection';
@@ -13,21 +11,39 @@ const { Text, Paragraph } = Typography;
 const COVER_PREV_BLOCK_BORDER_STYLE: CSSProperties = { marginBottom: '-1px' };
 
 export const UpdateProgressIndicator: FC = () => {
-  const { storeState } = useStore();
-  const { quitAndInstall } = useElectronApi();
+  const [progressPercent, setProgressPercent] = useState(0);
+  const [isDownloaded, setUpdateDownloaded] = useState(false);
+
+  const { quitAndInstall, ipcRenderer } = useElectronApi();
+
+  useEffect(() => {
+    ipcRenderer?.on?.(
+      'download-progress',
+      (_event: unknown, progress: unknown) => {
+        const progressInfo = progress as { percent?: number | undefined };
+        setProgressPercent(progressInfo.percent || 0);
+      },
+    );
+
+    ipcRenderer?.on?.('update-downloaded', () => {
+      setUpdateDownloaded(true);
+    });
+
+    return () => {
+      ipcRenderer?.removeAllListeners?.('download-progress');
+      ipcRenderer?.removeAllListeners?.('update-downloaded');
+    };
+  }, [ipcRenderer, setProgressPercent, setUpdateDownloaded]);
 
   const restartApp = () => {
     quitAndInstall?.();
   };
 
-  if (
-    isNil(storeState?.downloadPercentage) ||
-    storeState.downloadPercentage === -1
-  ) {
+  if (!progressPercent) {
     return null;
   }
 
-  const isAppReady = storeState.downloadPercentage === 100;
+  const isAppReady = progressPercent === 100;
 
   return (
     <CardSection style={COVER_PREV_BLOCK_BORDER_STYLE}>
@@ -41,13 +57,18 @@ export const UpdateProgressIndicator: FC = () => {
               <Text className="font-weight-600 mb-4">Preparing for update</Text>
               {isAppReady ? null : (
                 <Paragraph className="mb-4">
-                  Downloading the update... {storeState.downloadPercentage}%
+                  Downloading the update... {progressPercent}%
                 </Paragraph>
               )}
             </Flex>
 
             {isAppReady && (
-              <Button type="primary" ghost onClick={restartApp}>
+              <Button
+                type="primary"
+                ghost
+                onClick={restartApp}
+                loading={!isDownloaded}
+              >
                 Install Update
               </Button>
             )}

diff --git a/frontend/context/ElectronApiProvider.tsx b/frontend/context/ElectronApiProvider.tsx
@@ -14,6 +14,7 @@ type ElectronApiContextProps = {
       func: (event: unknown, data: unknown) => void,
     ) => void; // listen to messages from main process
     invoke?: (channel: string, data: unknown) => Promise<unknown>; // send message to main process and get Promise response
+    removeAllListeners?: (channel: string) => void;
   };
   store?: {
     store?: () => Promise<ElectronStore>;
@@ -81,6 +82,9 @@ export const ElectronApiProvider = ({ children }: PropsWithChildren) => {
           send: getElectronApiFunction('ipcRenderer.send'),
           on: getElectronApiFunction('ipcRenderer.on'),
           invoke: getElectronApiFunction('ipcRenderer.invoke'),
+          removeAllListeners: getElectronApiFunction(
+            'ipcRenderer.removeAllListeners',
+          ),
         },
         store: {
           store: getElectronApiFunction('store.store'),