feat: Add Download Progress for Updater (#34)

src/components/setting/mods/update-viewer.tsx

@@ -2,17 +2,19 @@ import useSWR from "swr";
 import snarkdown from "snarkdown";
 import { forwardRef, useImperativeHandle, useState, useMemo } from "react";
 import { useLockFn } from "ahooks";
-import { Box, styled } from "@mui/material";
+import { Box, LinearProgress, styled } from "@mui/material";
 import { useRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import { relaunch } from "@tauri-apps/api/process";
 import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
 import { atomUpdateState } from "@/services/states";
+import { listen, Event, UnlistenFn } from "@tauri-apps/api/event";
 
 const UpdateLog = styled(Box)(() => ({
   "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
 }));
+let eventListener: UnlistenFn | null = null;
 
 export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -26,6 +28,10 @@ export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
     focusThrottleInterval: 36e5, // 1 hour
   });
 
+  const [downloaded, setDownloaded] = useState(0);
+  const [buffer, setBuffer] = useState(0);
+  const [total, setTotal] = useState(0);
+
   useImperativeHandle(ref, () => ({
     open: () => setOpen(true),
     close: () => setOpen(false),
@@ -42,7 +48,19 @@ export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
   const onUpdate = useLockFn(async () => {
     if (updateState) return;
     setUpdateState(true);
-
+    if (eventListener !== null) {
+      eventListener();
+    }
+    eventListener = await listen(
+      "tauri://update-download-progress",
+      (e: Event<any>) => {
+        setTotal(e.payload.contentLength);
+        setBuffer(e.payload.chunkLength);
+        setDownloaded((a) => {
+          return a + e.payload.chunkLength;
+        });
+      }
+    );
     try {
       await installUpdate();
       await relaunch();
@@ -65,6 +83,14 @@ export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
       onOk={onUpdate}
     >
       <UpdateLog dangerouslySetInnerHTML={{ __html: parseContent }} />
+      {updateState && (
+        <LinearProgress
+          variant="buffer"
+          value={(downloaded / total) * 100}
+          valueBuffer={buffer}
+          sx={{ marginTop: "5px" }}
+        />
+      )}
     </BaseDialog>
   );
 });