feat: add check for updates button, close #766

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

@@ -0,0 +1,70 @@
+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 { 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";
+
+const UpdateLog = styled(Box)(() => ({
+  "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
+}));
+
+export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+  const [updateState, setUpdateState] = useRecoilState(atomUpdateState);
+
+  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
+    errorRetryCount: 2,
+    revalidateIfStale: false,
+    focusThrottleInterval: 36e5, // 1 hour
+  });
+
+  useImperativeHandle(ref, () => ({
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+  }));
+
+  // markdown parser
+  const parseContent = useMemo(() => {
+    if (!updateInfo?.manifest?.body) {
+      return "New Version is available";
+    }
+    return snarkdown(updateInfo?.manifest?.body);
+  }, [updateInfo]);
+
+  const onUpdate = useLockFn(async () => {
+    if (updateState) return;
+    setUpdateState(true);
+
+    try {
+      await installUpdate();
+      await relaunch();
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    } finally {
+      setUpdateState(false);
+    }
+  });
+
+  return (
+    <BaseDialog
+      open={open}
+      title={`New Version v${updateInfo?.manifest?.version}`}
+      contentSx={{ minWidth: 360, maxWidth: 400, maxHeight: "50vh" }}
+      okBtn={t("Update")}
+      cancelBtn={t("Cancel")}
+      onClose={() => setOpen(false)}
+      onCancel={() => setOpen(false)}
+      onOk={onUpdate}
+    >
+      <UpdateLog dangerouslySetInnerHTML={{ __html: parseContent }} />
+    </BaseDialog>
+  );
+});

src/components/setting/setting-verge.tsx

@@ -1,11 +1,13 @@
 import { useRef } from "react";
+import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { IconButton, MenuItem, Select, Typography } from "@mui/material";
 import { openAppDir, openCoreDir, openLogsDir } from "@/services/cmds";
 import { ArrowForward } from "@mui/icons-material";
+import { checkUpdate } from "@tauri-apps/api/updater";
 import { useVerge } from "@/hooks/use-verge";
 import { version } from "@root/package.json";
-import { DialogRef } from "@/components/base";
+import { DialogRef, Notice } from "@/components/base";
 import { SettingList, SettingItem } from "./mods/setting-comp";
 import { ThemeModeSwitch } from "./mods/theme-mode-switch";
 import { ConfigViewer } from "./mods/config-viewer";
@@ -14,29 +16,45 @@ import { MiscViewer } from "./mods/misc-viewer";
 import { ThemeViewer } from "./mods/theme-viewer";
 import { GuardState } from "./mods/guard-state";
 import { LayoutViewer } from "./mods/layout-viewer";
+import { UpdateViewer } from "./mods/update-viewer";
+import getSystem from "@/utils/get-system";
 
 interface Props {
   onError?: (err: Error) => void;
 }
 
+const OS = getSystem();
+
 const SettingVerge = ({ onError }: Props) => {
   const { t } = useTranslation();
 
   const { verge, patchVerge, mutateVerge } = useVerge();
-
-  const { theme_mode, theme_blur, traffic_graph, language } = verge ?? {};
+  const { theme_mode, language } = verge ?? {};
 
   const configRef = useRef<DialogRef>(null);
   const hotkeyRef = useRef<DialogRef>(null);
   const miscRef = useRef<DialogRef>(null);
   const themeRef = useRef<DialogRef>(null);
   const layoutRef = useRef<DialogRef>(null);
+  const updateRef = useRef<DialogRef>(null);
 
-  const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<IVergeConfig>) => {
     mutateVerge({ ...verge, ...patch }, false);
   };
 
+  const onCheckUpdate = useLockFn(async () => {
+    try {
+      const info = await checkUpdate();
+      if (!info?.shouldUpdate) {
+        Notice.success("No Updates Available");
+      } else {
+        updateRef.current?.open();
+      }
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
   return (
     <SettingList title={t("Verge Setting")}>
       <ThemeViewer ref={themeRef} />
@@ -44,6 +62,7 @@ const SettingVerge = ({ onError }: Props) => {
       <HotkeyViewer ref={hotkeyRef} />
       <MiscViewer ref={miscRef} />
       <LayoutViewer ref={layoutRef} />
+      <UpdateViewer ref={updateRef} />
 
       <SettingItem label={t("Language")}>
         <GuardState
@@ -160,6 +179,19 @@ const SettingVerge = ({ onError }: Props) => {
         </IconButton>
       </SettingItem>
 
+      {!(OS === "windows" && WIN_PORTABLE) && (
+        <SettingItem label={t("Check for Updates")}>
+          <IconButton
+            color="inherit"
+            size="small"
+            sx={{ my: "2px" }}
+            onClick={onCheckUpdate}
+          >
+            <ArrowForward />
+          </IconButton>
+        </SettingItem>
+      )}
+
       <SettingItem label={t("Verge Version")}>
         <Typography sx={{ py: "7px", pr: 1 }}>v{version}</Typography>
       </SettingItem>