chat component

Author: h908714124

src/main/client/src/feature/game/GameChat.jsx renamed to src/main/client/src/component/Chat.jsx

@@ -10,24 +10,23 @@ import {
 } from "react-router-dom"
 import {
   useAuthStore,
-} from "../../store.js"
+} from "../store.js"
 import {
   StompContext,
   tfetch,
   doTry,
-} from "../../util.js"
+} from "../util.js"
 
-export const GameChat = () => {
+export const Chat = ({chatId}) => {
   let [messages, setMessages] = useState([])
   let divRef = useRef()
   let messageRef = useRef()
   let needsScroll = useRef(false)
   let stompClient = useContext(StompContext)
-  let {gameId} = useParams()
   let auth = useAuthStore(state => state.auth)
 
   useEffect(() => {
-    stompClient.subscribe("/topic/chat/" + gameId, (m) => {
+    stompClient.subscribe("/topic/chat/" + chatId, (m) => {
       let message = JSON.parse(m.body)
       let msg = messageRef.current
       needsScroll.current = msg.scrollHeight <= msg.scrollTop + msg.offsetHeight
@@ -40,7 +39,7 @@ export const GameChat = () => {
     })
 
     doTry(async () => {
-      let chat = await tfetch("/api/chat/" + gameId, {
+      let chat = await tfetch("/api/chat/" + chatId, {
         method: "GET",
         headers: {
           "Authorization": "Bearer " + auth.token,
@@ -49,7 +48,7 @@ export const GameChat = () => {
       })
       setMessages(chat.messages || [])
     })
-  }, [stompClient, auth, gameId])
+  }, [stompClient, auth, chatId])
 
   useEffect(() => {
     if (!needsScroll.current) {
@@ -66,10 +65,10 @@ export const GameChat = () => {
       destination: "/app/chat/send/",
       body: JSON.stringify({
         message: data.get("message"),
-        id: gameId,
+        id: chatId,
       }),
     })
-  }), [stompClient, gameId])
+  }), [stompClient, chatId])
 
   return <>
     <div ref={messageRef}

src/main/client/src/feature/game/GamePanel.jsx

@@ -3,6 +3,7 @@ import {
   useContext,
 } from "react"
 import {
+  useParams,
   useNavigate,
 } from "react-router-dom"
 import {
@@ -34,8 +35,8 @@ import {
   useLayoutStore,
 } from "../../layout.js"
 import {
-  GameChat,
-} from "./GameChat.jsx"
+  Chat,
+} from "../../component/Chat.jsx"
 import {
   SideBar,
 } from "../../component/SideBar.jsx"
@@ -51,6 +52,7 @@ export const GamePanel = () => {
 }
 
 function Panel() {
+  let {gameId} = useParams()
   let zoom = useLayoutStore(state => state.zoom)
   let setZoom = useLayoutStore(state => state.setZoom)
   let stompClient = useContext(StompContext)
@@ -174,7 +176,7 @@ function Panel() {
           {(result.w > result.b ? "W+" : "B+") + Math.abs(result.b - result.w)}
         </div>
       )}
-      <GameChat />
+      <Chat chatId={gameId}/>
     </>
   )
 }