Merge branch 'optimize/timeline' into 'main'

Optimize/timeline

See merge request !116

src/ui/Duel/hintNotification.tsx

@@ -2,14 +2,12 @@ import React, { useEffect } from "react";
 import { useAppSelector } from "../../hook";
 import { selectMeHint, selectOpHint } from "../../reducers/duel/hintSlice";
 import { selectCurrentPhase } from "../../reducers/duel/phaseSlice";
-import { selectChat } from "../../reducers/chatSlice";
 import { notification } from "antd";
 
 const HintNotification = () => {
   const meHint = useAppSelector(selectMeHint);
   const opHint = useAppSelector(selectOpHint);
   const currentPhase = useAppSelector(selectCurrentPhase);
-  const chat = useAppSelector(selectChat);
 
   const [api, contextHolder] = notification.useNotification();
   useEffect(() => {
@@ -39,16 +37,6 @@ const HintNotification = () => {
     }
   }, [currentPhase]);
 
-  useEffect(() => {
-    if (chat !== "") {
-      api.info({
-        message: "Chat",
-        description: chat,
-        placement: "topLeft",
-      });
-    }
-  }, [chat]);
-
   return <>{contextHolder}</>;
 };
 

src/ui/Duel/timeLine.tsx

-import React from "react";
-import { Timeline } from "antd";
-import { UserOutlined, SettingOutlined } from "@ant-design/icons";
+import React, { useEffect, useState } from "react";
+import { Timeline, TimelineItemProps } from "antd";
+import { SettingOutlined } from "@ant-design/icons";
+import { useAppSelector } from "../../hook";
+import { selectChat } from "../../reducers/chatSlice";
 
-const DuelTimeLine = () => (
-  <Timeline
-    items={[
-      {
-        dot: <UserOutlined />,
-        children: "对手消息",
-        color: "red",
-      },
-      {
-        dot: <UserOutlined />,
-        children: "自己消息",
-        color: "green",
-      },
-      {
-        dot: <SettingOutlined />,
-        children: "系统消息",
-      },
-    ]}
-  />
-);
+const DuelTimeLine = () => {
+  const [items, setItems] = useState<TimelineItemProps[]>([]);
+  const chat = useAppSelector(selectChat);
+
+  useEffect(() => {
+    setItems((prev) =>
+      prev.concat([
+        {
+          dot: <SettingOutlined />,
+          children: chat,
+          color: "red",
+        },
+      ])
+    );
+  }, [chat]);
+
+  return <Timeline items={items} />;
+};
 
 export default DuelTimeLine;