-
-
+
-
{props.percent > 100 ? 100 :(props.percent.toString().substring(0,4) ?? 0) }%
-
- );
-};
+ )
+}
-export default Progress;
+export default Progress
diff --git a/src/components/update/Progress/progress.module.scss b/src/components/update/Progress/progress.module.scss
index ff84486..1a66779 100644
--- a/src/components/update/Progress/progress.module.scss
+++ b/src/components/update/Progress/progress.module.scss
@@ -4,7 +4,7 @@
:global {
.progress-pr {
- border: 1px solid #000000;
+ border: 1px solid #000;
border-radius: 3px;
height: 6px;
}
@@ -12,10 +12,11 @@
.progress-rate {
height: 6px;
border-radius: 3px;
+ background-image: linear-gradient(to right, rgb(130, 86, 208) 0%, var(--primary-color) 100%)
}
.progress-num {
margin: 0 10px;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/update/Progress/type.d.ts b/src/components/update/Progress/type.d.ts
deleted file mode 100644
index 24a0970..0000000
--- a/src/components/update/Progress/type.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface RsProgressType {
- rateColor?: string
- rateWidth?: number
- percent: number
-}
diff --git a/src/components/update/electron-updater.d.ts b/src/components/update/electron-updater.d.ts
new file mode 100644
index 0000000..5b26aba
--- /dev/null
+++ b/src/components/update/electron-updater.d.ts
@@ -0,0 +1,10 @@
+interface VersionInfo {
+ update: boolean
+ version: string
+ newVersion?: string
+}
+
+interface ErrorType {
+ message: string
+ error: Error
+}
diff --git a/src/components/update/index.tsx b/src/components/update/index.tsx
index 3eb4fd0..796ccaf 100644
--- a/src/components/update/index.tsx
+++ b/src/components/update/index.tsx
@@ -1,123 +1,135 @@
+import { ipcRenderer } from 'electron'
+import type { ProgressInfo } from 'electron-updater'
+import { useCallback, useEffect, useState } from 'react'
import Modal from '@/components/update/Modal'
import Progress from '@/components/update/Progress'
-import { ipcRenderer } from 'electron'
-import { useEffect, useState } from 'react'
-import updateScss from './update.module.scss'
-import { checkUpdateType, isUpdateAvailable, ModalBtnText, VersionInfo } from './type'
-
-
-let onModalSubmit = () => { }
-let onModalCanCel = () => { }
+import styles from './update.module.scss'
const Update = () => {
- const [checkBtnText, setCheckBtnText] = useState('check update')
- const [checkType, setCheckType] = useState(false)
- const [checkLoading, setCheckLoading] = useState(false)
- const [isOpenModal, setIsOpenModal] = useState
(false)
- const [percentNum, setPercentNum] = useState(0)
- const [isNeedUpdate, setIsNeedUpdate] = useState(false)
- const [updateError, setUpdateError] = useState(false)
- const [versionInfo, setVersionInfo] = useState({
- oldVersion: '',
- newVersion: ''
- })
- const [modalBtnText, setModalBtnText] = useState({
- canCelText: '',
- submitText: ''
+ const [checking, setChecking] = useState(false)
+ const [updateAvailable, setUpdateAvailable] = useState(false)
+ const [versionInfo, setVersionInfo] = useState()
+ const [updateError, setUpdateError] = useState()
+ const [progressInfo, setProgressInfo] = useState()
+ const [modalOpen, setModalOpen] = useState(false)
+ const [modalBtn, setModalBtn] = useState<{
+ cancelText?: string
+ okText?: string
+ onCancel?: () => void
+ onOk?: () => void
+ }>({
+ onCancel: () => setModalOpen(false),
+ onOk: () => ipcRenderer.invoke('start-download'),
})
- useEffect(() => {
- onModalCanCel = () => setIsOpenModal(false)
- }, [])
+ const checkUpdate = async () => {
+ setChecking(true)
+ /**
+ * @type {import('electron-updater').UpdateCheckResult | null | { message: string, error: Error }}
+ */
+ const result = await ipcRenderer.invoke('check-update')
+ setChecking(false)
- // Check for updates
- const checkUpdate = () => {
- setCheckLoading(true)
- setCheckBtnText('checking Update ...')
- ipcRenderer.send('check-update')
+ if (result?.error) {
+ console.error(result.error)
+ setUpdateAvailable(false)
+ } else {
+ setUpdateAvailable(true)
+ setModalOpen(true)
+ }
}
- // Listen to get the check result
- ipcRenderer.on('check-update-type', (_event, ...args: checkUpdateType[]) => {
- setCheckLoading(false)
- setCheckBtnText('check update')
- setCheckType(args[0].checkUpdate)
- setIsOpenModal(true)
- })
-
- // Get version information and whether to update
- ipcRenderer.on('is-update-available', (_event, ...args: isUpdateAvailable[]) => {
- setVersionInfo({
- oldVersion: args[0].oldVersion,
- newVersion: args[0].newVersion,
- })
- setIsNeedUpdate(args[0].isUpdate)
- // Update required
- if (args[0].isUpdate) {
- setModalBtnText({
- canCelText: 'cancel',
- submitText: 'update'
- })
- onModalSubmit = () => ipcRenderer.send('start-download')
- onModalCanCel = () => setIsOpenModal(false)
+ const onUpdateCanAvailable = useCallback((_event: Electron.IpcRendererEvent, arg1: VersionInfo) => {
+ setVersionInfo(arg1)
+ // Can be update
+ if (arg1.update) {
+ setModalBtn(state => ({
+ ...state,
+ cancelText: 'Cancel',
+ okText: 'Update',
+ onCancel: () => setModalOpen(false),
+ onOk: () => ipcRenderer.invoke('start-download'),
+ }))
}
- })
+ }, [])
- // Throw the update failure message when the update fails
- ipcRenderer.on('update-error', (_event, ...args: { updateError: boolean }[]) => {
- setUpdateError(args[0].updateError)
- setCheckType(false)
- })
+ const onUpdateError = useCallback((_event: Electron.IpcRendererEvent, arg1: ErrorType) => {
+ console.error(arg1.error)
+ setUpdateError(arg1)
+ }, [])
- // Get update progress
- ipcRenderer.on('update-progress', (_event, ...args: { progressInfo: number }[]) => {
- setPercentNum(args[0].progressInfo)
- })
+ const onDownloadProgress = useCallback((_event: Electron.IpcRendererEvent, arg1: ProgressInfo) => {
+ console.log(arg1)
+ setProgressInfo(arg1)
+ }, [])
- // is update been completed
- ipcRenderer.on('update-downed', (_event, ...args) => {
- setPercentNum(100)
- setModalBtnText({
- canCelText: 'install later',
- submitText: 'install now'
- })
- onModalSubmit = () => ipcRenderer.send('quit-and-install')
- onModalCanCel = () => {
- ipcRenderer.send('will-quit')
- setIsOpenModal(false)
+ const onUpdateDownloaded = useCallback((_event: Electron.IpcRendererEvent, ...args: any[]) => {
+ setModalBtn(state => ({
+ ...state,
+ cancelText: 'Later',
+ okText: 'Install now',
+ onOk: () => ipcRenderer.invoke('quit-and-install'),
+ }))
+ }, [])
+
+ useEffect(() => {
+ // Get version information and whether to update
+ ipcRenderer.on('update-can-available', onUpdateCanAvailable)
+ ipcRenderer.on('update-error', onUpdateError)
+ ipcRenderer.on('download-progress', onDownloadProgress)
+ ipcRenderer.on('update-downloaded', onUpdateDownloaded)
+
+ return () => {
+ ipcRenderer.off('update-can-available', onUpdateCanAvailable)
+ ipcRenderer.off('update-error', onUpdateError)
+ ipcRenderer.off('download-progress', onDownloadProgress)
+ ipcRenderer.off('update-downloaded', onUpdateDownloaded)
}
- })
+ }, [])
return (
<>
-
-
- {updateError ?
-
Error downloading the latest version, please contact the developer
:
- checkType ? (
- isNeedUpdate ? (
-
-
-
oldVersion : v.{versionInfo.oldVersion}
-
newVersion : v.{versionInfo.newVersion}
+
+
+ {updateError ? (
+
+
Error downloading the latest version.
+
{updateError.message}
+
+ ) : null}
+ {!updateAvailable ? (
+
+ Check update is Error, Please check your Network!
+
+ ) : null}
+ {versionInfo
+ ? (
+
+
The last version is: v{versionInfo.newVersion}
+
v{versionInfo.version} -> v{versionInfo.newVersion}
+
)
- :
This is last version : v.{versionInfo.oldVersion} !
- ) :
Check update is Error,Please check your network!
- }
+
+
-