refactor: SEE

.eslintrc.json

@@ -8,6 +8,7 @@
   "plugins": ["import", "react", "react-hooks", "@typescript-eslint"],
   "rules": {
     "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
+    "@typescript-eslint/no-floating-promises": "off",
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "semi": 2,

config/webpack.config.js

@@ -316,8 +316,7 @@ module.exports = function (webpackEnv) {
                     require.resolve("babel-preset-react-app"),
                     {
                       runtime: "automatic",
-                      development: process.env.NODE_ENV === "development",
+                      development: process.env.NODE_ENV === "development"
-                      importSource: "@welldone-software/why-did-you-render"
                     }
                   ]
                 ],

package.json

@@ -1,46 +1,46 @@
 {
   "name": "vocechat-web",
-  "version": "0.6.11",
+  "version": "0.6.12",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@radix-ui/react-popover": "^1.0.7",
     "@react-oauth/google": "^0.12.1",
-    "@reduxjs/toolkit": "^2.0.1",
+    "@reduxjs/toolkit": "^2.2.1",
     "@svgr/webpack": "^8.1.0",
     "@tippyjs/react": "^4.2.6",
     "@toast-ui/editor": "^3.2.2",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "@toast-ui/react-editor": "^3.2.3",
-    "@udecode/plate-break": "^25.0.1",
+    "@udecode/plate-break": "^30.5.3",
-    "@udecode/plate-combobox": "^25.0.1",
+    "@udecode/plate-combobox": "^30.5.3",
-    "@udecode/plate-common": "^25.0.1",
+    "@udecode/plate-common": "^30.4.5",
-    "@udecode/plate-emoji": "^25.0.1",
+    "@udecode/plate-emoji": "^30.7.0",
-    "@udecode/plate-floating": "^26.0.4",
+    "@udecode/plate-floating": "^30.5.3",
-    "@udecode/plate-font": "^25.0.1",
+    "@udecode/plate-font": "^30.5.3",
-    "@udecode/plate-mention": "^25.0.1",
+    "@udecode/plate-mention": "^30.5.3",
-    "@udecode/plate-node-id": "^25.0.1",
+    "@udecode/plate-node-id": "^30.5.3",
-    "@udecode/plate-paragraph": "^25.0.1",
+    "@udecode/plate-paragraph": "^30.5.3",
-    "@udecode/plate-trailing-block": "^25.0.1",
+    "@udecode/plate-trailing-block": "^30.5.3",
     "@uiball/loaders": "^1.3.0",
-    "agora-rtc-sdk-ng": "^4.20.0",
+    "agora-rtc-sdk-ng": "^4.20.1",
     "broadcast-channel": "^7.0.0",
-    "browserslist": "^4.22.2",
+    "browserslist": "^4.23.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "copy-image-clipboard": "^2.1.2",
-    "css-loader": "^6.8.1",
+    "css-loader": "^6.10.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^6.0.0",
     "dayjs": "^1.11.10",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
-    "firebase": "^10.5.2",
+    "firebase": "^10.9.0",
-    "framer-motion": "^10.16.15",
+    "framer-motion": "^11.0.13",
     "fs-extra": "^11.2.0",
     "heic2any": "^0.0.4",
-    "html-webpack-plugin": "^5.5.4",
+    "html-webpack-plugin": "^5.6.0",
-    "i18next": "^23.7.8",
+    "i18next": "^23.10.1",
     "i18next-browser-languagedetector": "^7.2.0",
-    "i18next-http-backend": "^2.4.2",
+    "i18next-http-backend": "^2.5.0",
     "linkify-plugin-mention": "^4.1.3",
     "linkify-react": "^4.1.3",
     "linkifyjs": "^4.1.3",
@@ -48,7 +48,7 @@
     "localforage-setitems": "^1.4.0",
     "lodash": "^4.17.21",
     "masonry-layout": "^4.2.2",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "^2.8.1",
     "prismjs": "^1.29.0",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
@@ -56,31 +56,31 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.11",
+    "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^13.5.0",
+    "react-i18next": "^14.1.0",
-    "react-redux": "^9.0.2",
+    "react-redux": "^9.1.0",
     "react-refresh": "0.14.0",
-    "react-router-dom": "^6.20.1",
+    "react-router-dom": "^6.22.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
-    "react-use-wizard": "^2.2.4",
+    "react-use-wizard": "^2.3.0",
     "react-viewport-list": "^7.1.2",
-    "react-virtuoso": "^4.6.2",
+    "react-virtuoso": "^4.7.2",
     "rooks": "^7.14.1",
-    "slate": "^0.101.1",
+    "slate": "^0.102.0",
     "slate-history": "^0.100.0",
     "slate-hyperscript": "^0.100.0",
-    "slate-react": "0.101.3",
+    "slate-react": "0.102.0",
-    "source-map-loader": "^4.0.1",
+    "source-map-loader": "^5.0.0",
-    "style-loader": "^3.3.3",
+    "style-loader": "^3.3.4",
-    "tailwind-merge": "2.1.0",
+    "tailwind-merge": "2.2.1",
-    "terser-webpack-plugin": "^5.3.9",
+    "terser-webpack-plugin": "^5.3.10",
     "tippy.js": "^6.3.7",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
-    "wavesurfer.js": "^7.5.0",
+    "wavesurfer.js": "^7.7.5",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.3",
     "webpack-dev-server": "^4.15.1",
     "webpack-manifest-plugin": "^5.0.0",
     "workbox-core": "^7.0.0",
@@ -115,34 +115,33 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.24.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.2.0",
     "@types/masonry-layout": "^4.2.7",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.11.28",
-    "@types/react": "18.2.42",
+    "@types/react": "18.2.66",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.22",
     "@types/react-helmet": "^6.1.11",
     "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/parser": "^7.2.0",
-    "@welldone-software/why-did-you-render": "^7.0.1",
+    "autoprefixer": "^10.4.18",
-    "autoprefixer": "^10.4.16",
     "babel-loader": "^9.1.3",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "gh-pages": "^6.1.0",
+    "gh-pages": "^6.1.1",
     "md5-file": "^5.0.0",
     "patch-package": "^8.0.0",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.35",
-    "postcss-loader": "^7.3.3",
+    "postcss-loader": "^8.1.1",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.5",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.4.1",
     "webpack-bundle-analyzer": "^4.10.1"
   }
 }

src/app/config.ts

@@ -1,7 +1,7 @@
 import i18n from "../i18n";
 import { Price } from "../types/common";
 
-let prices: Price[] = [
+const prices: Price[] = [
   {
     type: "payment",
     limit: 999999,
@@ -13,7 +13,7 @@ let prices: Price[] = [
 ];
 const official_dev = `https://dev.voce.chat`;
 const local_dev = `https://dev.voce.chat`;
-// const local_dev = `http://localhost:3000`;
+// const local_dev = `https://cqvoce.com`;
 const dev_origin = process.env.REACT_APP_OFFICIAL_DEMO ? official_dev : local_dev;
 
 // const local_dev = `https://im.ttt.td`;

src/hooks/useChatScroll.ts

@@ -6,12 +6,13 @@ function useChatScroll<T extends HTMLElement>() {
     if (ref.current) {
       const ele = ref.current;
       const resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
+        for (const entry of entries) {
           entry.target.scrollTop = entry.target.scrollHeight;
         }
       });
 
       resizeObserver.observe(ele);
+      // window.addEventListener("error", (e) => console.log(e.message));
     }
   }, []);
   return ref;

src/index.tsx

@@ -1,5 +1,3 @@
-// just for debug performance problem
-// import "./wdyr";
 import { Suspense } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";

src/routes/chat/GuestSessionList/index.tsx

@@ -10,7 +10,7 @@ export interface ChatSession {
   id: number;
   mid?: number;
 }
-type Props = {};
+type Props = Record<string, never>;
 const SessionList: FC<Props> = () => {
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const readChannels = useAppSelector((store) => store.footprint.readChannels, shallowEqual);
@@ -26,7 +26,7 @@ const SessionList: FC<Props> = () => {
       if (!mids || mids.length == 0) {
         return { key: `channel_${id}`, unreads: 0, id, type: "channel" };
       }
-      const mid = [...mids].sort().pop();
+      const mid = [...mids].sort((a, b) => +a - +b).pop();
       return { key: `channel_${id}`, id, mid, type: "channel" };
     });
     const tmps = [...(cSessions as ChatSession[])].sort((a, b) => {

src/routes/login/index.tsx

@@ -17,6 +17,7 @@ import MagicLinkLogin from "./MagicLinkLogin";
 import SignUpLink from "./SignUpLink";
 import SocialLoginButtons from "./SocialLoginButtons";
 import { shallowEqual } from "react-redux";
+import useStreaming from "@/hooks/useStreaming";
 
 const defaultInput = {
   email: "",
@@ -26,6 +27,7 @@ export default function LoginPage() {
   const { name: serverName, logo } = useAppSelector((store) => store.server, shallowEqual);
   const { t } = useTranslation("auth");
   const { t: ct } = useTranslation();
+  const { stopStreaming } = useStreaming();
   const { data: enableSMTP, isLoading: loadingSMTPStatus } = useGetSMTPStatusQuery();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
@@ -76,7 +78,7 @@ export default function LoginPage() {
             "No associated account found, please contact user admin for an invitation link to join."
           );
           break;
-        // 451有解析错误，暂时先客户端处理
+        // 451 有解析错误，暂时先客户端处理
         case "PARSING_ERROR":
           break;
         default:
@@ -88,6 +90,9 @@ export default function LoginPage() {
   }, [error]);
   useEffect(() => {
     if (isSuccess) {
+      // 登录页不需要连 SSE（在这里处理可能不是最好的方式，但是能解决当前问题，暂时没找到更好的处理方式）
+      // 断开已有的 SSE
+      stopStreaming();
       toast.success(ct("tip.login"));
       // navigateTo("/");
     }

src/wdyr.ts

@@ -1,9 +0,0 @@
-/// <reference types="@welldone-software/why-did-you-render" />
-import React from "react";
-
-if (process.env.NODE_ENV === "development") {
-  const whyDidYouRender = require("@welldone-software/why-did-you-render");
-  whyDidYouRender(React, {
-    trackAllPureComponents: true
-  });
-}