feat: i18n

src/widget/Popup/index.tsx

@@ -5,30 +5,17 @@ import Welcome from './Welcome';
 import MessageFeed from './MessageFeed';
 import MessageInput from './MessageInput';
 import { useAppSelector } from '../../app/store';
+import useSSE from '../useSSE';
+
 type Props = {
     hostId: number,
     handleClose: () => void
 }
 
 const Index = ({ handleClose, hostId }: Props) => {
+    // 建立SSE连接
+    useSSE();
     const { user: loginUser, token, guest: isGuest } = useAppSelector(store => store.authData);
-    // const { sendMessage } = useSendMessage({
-    //     from: loginUser?.uid,
-    //     to: hostId,
-    //     context: "user"
-    // });
-    // const [input, setInput] = useState('');
-    // const handleInput = (evt: ChangeEvent<HTMLTextAreaElement>) => {
-    //     setInput(evt.target.value);
-    // };
-    // const handleSend = () => {
-    //     if (!input) return;
-    //     sendMessage({
-    //         type: "text",
-    //         content: input
-    //     });
-    //     setInput("");
-    // };
 
     // no token or guest login
     const notLogin = !token || isGuest;

src/widget/index.tsx

@@ -3,13 +3,13 @@ import { useGetServerQuery } from "../app/services/server";
 
 import Icon from "./Icon";
 import Popup from "./Popup";
-import usePreload from "./usePreload";
+import useCache from "./useCache";
 type Props = {
   hostId: number
 };
 
 function Widget({ hostId }: Props) {
-  const { rehydrated } = usePreload();
+  const { rehydrated } = useCache();
   const [visible, setVisible] = useState(!!new URLSearchParams(location.search).get("open"));
   const { isLoading, isError } = useGetServerQuery();
   const toggleVisible = () => {

src/widget/useCache.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import initCache, { useRehydrate } from "../app/cache";
+export default function useCache() {
+    const { rehydrate, rehydrated } = useRehydrate();
+    useEffect(() => {
+        initCache();
+        rehydrate();
+    }, []);
+
+    return {
+        rehydrated
+    };
+}

src/widget/useSSE.ts

@@ -1,13 +1,9 @@
 import { useEffect } from "react";
 import dayjs from "dayjs";
 import { useAppSelector } from "../app/store";
-import initCache, { useRehydrate } from "../app/cache";
 import useStreaming from "../common/hook/useStreaming";
-// type Props={
-//   guest?:boolean
-// }
-export default function usePreload() {
-    const { rehydrate, rehydrated } = useRehydrate();
+
+export default function useSSE() {
     const {
         loginUid,
         token,
@@ -20,23 +16,17 @@ export default function usePreload() {
         };
     });
     const { setStreamingReady } = useStreaming();
-    useEffect(() => {
-        initCache();
-        rehydrate();
-        return () => {
-            setStreamingReady(false);
-        };
-    }, []);
 
     const tokenAlmostExpire = dayjs().isAfter(new Date(expireTime - 20 * 1000));
-    const canStreaming = !!loginUid && rehydrated && !!token && !tokenAlmostExpire;
+    const canStreaming = !!loginUid && !!token && !tokenAlmostExpire;
     // console.log("ttt", loginUid, rehydrated, token);
 
     useEffect(() => {
         setStreamingReady(canStreaming);
+        return () => {
+            setStreamingReady(false);
+        };
     }, [canStreaming]);
 
-    return {
-        rehydrated
-    };
+    return null;
 }