feat: add check for updates button, close #766

src/components/layout/layout-control.tsx

@@ -6,7 +6,7 @@ import {
   HorizontalRuleRounded,
 } from "@mui/icons-material";
 
-const LayoutControl = () => {
+export const LayoutControl = () => {
   const minWidth = 40;
 
   return (
@@ -37,5 +37,3 @@ const LayoutControl = () => {
     </>
   );
 };
-
-export default LayoutControl;

src/components/layout/layout-item.tsx

@@ -2,7 +2,7 @@ import { alpha, ListItem, ListItemButton, ListItemText } from "@mui/material";
 import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
 import type { LinkProps } from "react-router-dom";
 
-const LayoutItem = (props: LinkProps) => {
+export const LayoutItem = (props: LinkProps) => {
   const { to, children } = props;
 
   const resolved = useResolvedPath(to);
@@ -40,5 +40,3 @@ const LayoutItem = (props: LinkProps) => {
     </ListItem>
   );
 };
-
-export default LayoutItem;

src/components/layout/layout-traffic.tsx

@@ -14,7 +14,7 @@ import { useWebsocket } from "@/hooks/use-websocket";
 import parseTraffic from "@/utils/parse-traffic";
 
 // setup the traffic
-const LayoutTraffic = () => {
+export const LayoutTraffic = () => {
   const { clashInfo } = useClashInfo();
   const { verge } = useVerge();
 
@@ -134,5 +134,3 @@ const LayoutTraffic = () => {
     </Box>
   );
 };
-
-export default LayoutTraffic;

src/components/layout/update-button.tsx

@@ -1,17 +1,19 @@
 import useSWR from "swr";
-import { useState } from "react";
+import { useRef } from "react";
 import { Button } from "@mui/material";
 import { checkUpdate } from "@tauri-apps/api/updater";
-import UpdateDialog from "./update-dialog";
+import { UpdateViewer } from "../setting/mods/update-viewer";
+import { DialogRef } from "../base";
 
 interface Props {
   className?: string;
 }
 
-const UpdateButton = (props: Props) => {
+export const UpdateButton = (props: Props) => {
   const { className } = props;
 
-  const [dialogOpen, setDialogOpen] = useState(false);
+  const viewerRef = useRef<DialogRef>(null);
+
   const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
     errorRetryCount: 2,
     revalidateIfStale: false,
@@ -22,21 +24,17 @@ const UpdateButton = (props: Props) => {
 
   return (
     <>
+      <UpdateViewer ref={viewerRef} />
+
       <Button
         color="error"
         variant="contained"
         size="small"
         className={className}
-        onClick={() => setDialogOpen(true)}
+        onClick={() => viewerRef.current?.open()}
       >
         New
       </Button>
-
-      {dialogOpen && (
-        <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
-      )}
     </>
   );
 };
-
-export default UpdateButton;

src/components/layout/update-dialog.tsx

@@ -1,87 +0,0 @@
-import useSWR from "swr";
-import snarkdown from "snarkdown";
-import { useMemo } from "react";
-import { useRecoilState } from "recoil";
-import { useTranslation } from "react-i18next";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  styled,
-} from "@mui/material";
-import { relaunch } from "@tauri-apps/api/process";
-import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
-import { atomUpdateState } from "@/services/states";
-import { Notice } from "@/components/base";
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-}
-
-const UpdateLog = styled(Box)(() => ({
-  "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
-}));
-
-const UpdateDialog = (props: Props) => {
-  const { open, onClose } = props;
-  const { t } = useTranslation();
-  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
-    errorRetryCount: 2,
-    revalidateIfStale: false,
-    focusThrottleInterval: 36e5, // 1 hour
-  });
-
-  const [updateState, setUpdateState] = useRecoilState(atomUpdateState);
-
-  const onUpdate = async () => {
-    if (updateState) return;
-    setUpdateState(true);
-
-    try {
-      await installUpdate();
-      await relaunch();
-    } catch (err: any) {
-      Notice.error(err?.message || err.toString());
-    } finally {
-      setUpdateState(false);
-    }
-  };
-
-  // markdown parser
-  const parseContent = useMemo(() => {
-    if (!updateInfo?.manifest?.body) {
-      return "New Version is available";
-    }
-    return snarkdown(updateInfo?.manifest?.body);
-  }, [updateInfo]);
-
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle>New Version v{updateInfo?.manifest?.version}</DialogTitle>
-
-      <DialogContent sx={{ minWidth: 360, maxWidth: 400, maxHeight: "50vh" }}>
-        <UpdateLog dangerouslySetInnerHTML={{ __html: parseContent }} />
-      </DialogContent>
-
-      <DialogActions>
-        <Button variant="outlined" onClick={onClose}>
-          {t("Cancel")}
-        </Button>
-        <Button
-          autoFocus
-          variant="contained"
-          disabled={updateState}
-          onClick={onUpdate}
-        >
-          {t("Update")}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default UpdateDialog;

src/components/layout/use-custom-theme.ts

@@ -9,7 +9,7 @@ import { useVerge } from "@/hooks/use-verge";
 /**
  * custom theme
  */
-export default function useCustomTheme() {
+export const useCustomTheme = () => {
   const { verge } = useVerge();
   const { theme_mode, theme_setting } = verge ?? {};
   const [mode, setMode] = useRecoilState(atomThemeMode);
@@ -121,4 +121,4 @@ export default function useCustomTheme() {
   }, [mode, theme_setting]);
 
   return { theme };
-}
+};