feat: server version checker

src/common/component/ServerVersionChecker.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import { useGetServerVersionQuery } from '../../app/services/server';
+import { compareVersion } from '../utils';
+
+type Props = {
+  version: string,
+}
+
+const ServerVersionChecker = ({ version, children }: PropsWithChildren<Props>) => {
+  const { data: currentVersion, isSuccess } = useGetServerVersionQuery();
+  if (!isSuccess) return null;
+  const res = compareVersion(currentVersion, version);
+  if (res < 0) return <div className='flex flex-col gap-2 items-start'>
+    <span className='text-gray-400 text-sm'>🚨 Server version:<strong className='font-bold'>{version}</strong> needed at least, your current version:<strong className='font-bold'>{currentVersion}</strong>, please upgrade the Server!</span>
+    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">How to Update VoceChat Server</a>
+  </div>;
+  return children;
+};
+
+export default ServerVersionChecker;

src/common/utils.tsx

@@ -8,7 +8,6 @@ import IconCode from "../assets/icons/file.code.svg";
 import IconImage from "../assets/icons/file.image.svg";
 import { Archive, ArchiveMessage } from "../types/resource";
 import { MessagePayload } from "../app/slices/message";
-import { PinnedMessage } from "../types/channel";
 
 export const getLocalAuthData = () => {
   return {
@@ -269,3 +268,59 @@ export const normalizeArchiveData = (
     }
   );
 };
+// https://github.com/gabe0x02/version_compare/blob/20d79649da39febc883350f441ee0bd6f1a6b1e6/version_compare.js
+export const compareVersion = (v1: string, v2: string, options?: { lexicographical: boolean, zeroExtend: boolean }) => {
+  //remove anything after - 1.1.2-3-a4agbr-dirty
+  function cropDash(s: string) {
+    let idx = s.indexOf('-');
+    if (idx !== -1) {
+      s = s.substring(0, idx);
+    }
+    return s;
+  }
+  v1 = cropDash(v1);
+  v2 = cropDash(v2);
+  let lexicographical = options && options.lexicographical,
+    zeroExtend = options && options.zeroExtend,
+    v1parts = v1.split('.'),
+    v2parts = v2.split('.');
+  function isValidPart(x) {
+    return (lexicographical ? /^\d+[A-Za-z]*$/ : /^\d+$/).test(x);
+  }
+
+  if (!v1parts.every(isValidPart) || !v2parts.every(isValidPart)) {
+    return NaN;
+  }
+
+  if (zeroExtend) {
+    while (v1parts.length < v2parts.length) v1parts.push("0");
+    while (v2parts.length < v1parts.length) v2parts.push("0");
+  }
+
+  if (!lexicographical) {
+    v1parts = v1parts.map(Number);
+    v2parts = v2parts.map(Number);
+  }
+
+  for (var i = 0; i < v1parts.length; ++i) {
+    if (v2parts.length == i) {
+      return 1;
+    }
+
+    if (v1parts[i] == v2parts[i]) {
+      continue;
+    }
+    else if (v1parts[i] > v2parts[i]) {
+      return 1;
+    }
+    else {
+      return -1;
+    }
+  }
+
+  if (v1parts.length != v2parts.length) {
+    return -1;
+  }
+
+  return 0;
+};

src/routes/setting/navs.tsx

@@ -13,6 +13,7 @@ import Version from "../../common/component/Version";
 // import ConfigAgora from "./config/Agora";
 import { useAppSelector } from "../../app/store";
 import { useTranslation } from "react-i18next";
+import ServerVersionChecker from "../../common/component/ServerVersionChecker";
 
 const navs = [
   {
@@ -38,7 +39,7 @@ const navs = [
     items: [
       {
         name: "bot",
-        component: <BotConfig />,
+        component: <ServerVersionChecker version="0.3.2"><BotConfig /></ServerVersionChecker>,
         admin: true
       },
       {