chore: allow skip version (#411)

* chore: allow skip version

* chore: opacity

* chore: polish

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/UpdateVersionBanner.tsx

@@ -1,40 +1,70 @@
 import { useEffect, useState } from "react";
 import * as api from "../helpers/api";
+import * as storage from "../helpers/storage";
 import Icon from "./Icon";
 import "../less/about-site-dialog.less";
 
 interface State {
   latestVersion: string;
+  show: boolean;
 }
 
 const UpdateVersionBanner: React.FC = () => {
   const [state, setState] = useState<State>({
     latestVersion: "",
+    show: false,
   });
 
   useEffect(() => {
-    try {
-      api.getRepoLatestTag().then((latestTag) => {
-        setState({
-          latestVersion: latestTag,
-        });
+    Promise.all([api.getRepoLatestTag(), api.getSystemStatus()])
+      .then(
+        ([
+          latestTag,
+          {
+            data: {
+              data: { profile },
+            },
+          },
+        ]) => {
+          const { skippedVersion } = storage.get(["skippedVersion"]);
+          const latestVersion = latestTag.slice(1) || "0.0.0";
+          const currentVersion = profile.version;
+          const skipped = skippedVersion ? skippedVersion === latestVersion : false;
+          setState({
+            latestVersion,
+            show: !skipped && currentVersion !== latestVersion,
+          });
+        }
+      )
+      .catch(() => {
+        // do nth
       });
-    } catch (error) {
-      // do nth
-    }
   }, []);
 
+  const onSkip = () => {
+    storage.set({ skippedVersion: state.latestVersion });
+    setState((s) => ({
+      ...s,
+      show: false,
+    }));
+  };
+
+  if (!state.show) return null;
+
   return (
-    <div className="w-full flex flex-row justify-center items-center text-white bg-green-600 py-2">
+    <div className="flex flex-row items-center justify-center w-full py-2 text-white bg-green-600">
       <a
-        className="flex flex-row justify-center items-center hover:underline"
+        className="flex flex-row items-center justify-center hover:underline"
         target="_blank"
         href="https://github.com/usememos/memos/releases"
         rel="noreferrer"
       >
         <Icon.ArrowUpCircle className="w-5 h-auto mr-2" />
-        New Update <span className="font-bold ml-1">{state.latestVersion}</span>
+        New Update <span className="ml-1 font-bold">{state.latestVersion}</span>
       </a>
+      <button className="absolute opacity-20 right-4 btn" title="Skip this version" onClick={onSkip}>
+        <Icon.X />
+      </button>
     </div>
   );
 };

web/src/helpers/storage.ts

@@ -8,6 +8,8 @@ interface StorageData {
   editingMemoIdCache: MemoId;
   // locale
   locale: Locale;
+  // skipped version
+  skippedVersion: string;
 }
 
 type StorageKey = keyof StorageData;

web/src/pages/Home.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import * as api from "../helpers/api";
 import { globalService, userService } from "../services";
 import { useAppSelector } from "../store";
 import toastHelper from "../components/Toast";
@@ -13,42 +12,10 @@ import MemoList from "../components/MemoList";
 import UpdateVersionBanner from "../components/UpdateVersionBanner";
 import "../less/home.less";
 
-interface State {
-  shouldShowUpdateVersionBanner: boolean;
-}
-
 function Home() {
   const { t } = useTranslation();
   const location = useLocation();
   const user = useAppSelector((state) => state.user.user);
-  const [state, setState] = useState<State>({
-    shouldShowUpdateVersionBanner: false,
-  });
-
-  useEffect(() => {
-    Promise.all([api.getRepoLatestTag(), api.getSystemStatus()])
-      .then(
-        ([
-          latestTag,
-          {
-            data: {
-              data: { profile },
-            },
-          },
-        ]) => {
-          const latestVersion = latestTag.slice(1) || "0.0.0";
-          const currentVersion = profile.version;
-          if (latestVersion > currentVersion) {
-            setState({
-              shouldShowUpdateVersionBanner: true,
-            });
-          }
-        }
-      )
-      .catch(() => {
-        // do nth
-      });
-  }, []);
 
   useEffect(() => {
     const { owner } = userService.getState();
@@ -68,7 +35,9 @@ function Home() {
 
   return (
     <section className="page-wrapper home">
-      <div className="banner-wrapper">{state.shouldShowUpdateVersionBanner && <UpdateVersionBanner />}</div>
+      <div className="banner-wrapper">
+        <UpdateVersionBanner />
+      </div>
       <div className="page-container">
         <Sidebar />
         <main className="memos-wrapper">