From c61a401c24f520d6f8a6893272779c68bab64396 Mon Sep 17 00:00:00 2001 From: mohandast52 Date: Wed, 29 May 2024 00:40:55 +0530 Subject: [PATCH] use ipcRendered on and removeAllListener functions --- electron/main.js | 22 ++++----- electron/store.js | 15 +------ .../Main/UpdateInstallationModal.tsx | 32 +++++++------ .../Main/UpdateProgressIndicator.tsx | 45 ++++++++++++++----- frontend/context/ElectronApiProvider.tsx | 4 ++ 5 files changed, 64 insertions(+), 54 deletions(-) diff --git a/electron/main.js b/electron/main.js index 30b59d80..f01b2ffa 100644 --- 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 index f95fa9be..14c53423 100644 --- 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 index 8c49e2ff..fbd440b8 100644 --- 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 index c59bad6a..d2de23d6 100644 --- 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 ( @@ -41,13 +57,18 @@ export const UpdateProgressIndicator: FC = () => { Preparing for update {isAppReady ? null : ( - Downloading the update... {storeState.downloadPercentage}% + Downloading the update... {progressPercent}% )} {isAppReady && ( - )} diff --git a/frontend/context/ElectronApiProvider.tsx b/frontend/context/ElectronApiProvider.tsx index f1120617..6c67c6bc 100644 --- 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; // send message to main process and get Promise response + removeAllListeners?: (channel: string) => void; }; store?: { store?: () => Promise; @@ -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'),