feat: sync version button

public/locales/en/setting.json

@@ -202,7 +202,8 @@
   "version": {
     "client_version": "Client Version",
     "server_version": "Server Version",
-    "build_time": "Build Timestamp"
+    "build_time": "Build Timestamp",
+    "sync": "Sync to the latest version"
   },
   "api_doc": {
     "desc": "We have detailed API documentation that you can build your own chat tool based on.",

public/locales/zh/setting.json

@@ -197,7 +197,8 @@
   "version": {
     "client_version": "客户端版本",
     "server_version": "服务器端版本",
-    "build_time": "构建时间戳"
+    "build_time": "构建时间戳",
+    "sync": "同步到最新版"
   },
   "api_doc": {
     "desc": "我们有详尽的API文档说明，你可以基于该文档，构建自己的客户端聊天工具。",

src/common/component/Version.tsx

@@ -1,12 +1,22 @@
 import dayjs from "dayjs";
-import { FC } from "react";
+import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetServerVersionQuery } from "../../app/services/server";
+import Button from "./styled/Button";
+import { unregister } from '../../serviceWorkerRegistration';
 type Props = {};
 const Version: FC<Props> = () => {
+  const [syncing, setSyncing] = useState(false);
   const { t } = useTranslation("setting", { keyPrefix: "version" });
   const { data: serverVersion } = useGetServerVersionQuery();
   const ts = (process.env.REACT_APP_BUILD_TIME ?? 0) as number;
+  const handleSync = () => {
+    setSyncing(true);
+    unregister();
+    setTimeout(() => {
+      location.reload();
+    }, 1500);
+  };
   return (
     <ul className="flex flex-col gap-2 dark:text-white">
       <li>{t("client_version")}: {process.env.VERSION}</li>
@@ -17,6 +27,9 @@ const Version: FC<Props> = () => {
           <a className="text-primary-600 underline underline-offset-2" href="https://github.com/Privoce/vocechat-web/issues" target="_blank" rel="noopener noreferrer">vocechat-web/issues</a>
         </strong>
       </li>
+      <li>
+        <Button disabled={syncing} onClick={handleSync}>{t("sync")}</Button>
+      </li>
     </ul>
   );
 };