Add scroll new message into view

ItzyBitzySpider · Jan 20, 2024 · ecd33b5 · ecd33b5
1 parent 1d65f7c
commit ecd33b5
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/frontend/src/Game.tsx b/frontend/src/Game.tsx
@@ -9,7 +9,7 @@ import {
 import { Chessboard } from "react-chessboard";
 import "./Game.css";
 import { Message } from "./types/message";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { move, onUpdate } from "./utils/socket";
 
 export default function Game({
@@ -21,6 +21,7 @@ export default function Game({
   isWhite: boolean;
   isTurn: boolean;
 }) {
+  const bottomChat = useRef<HTMLDivElement>(null);
   const [text, setText] = useState("");
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setLoading] = useState(false);
@@ -60,6 +61,11 @@ export default function Game({
     setText("");
   }, [text]);
 
+  useEffect(
+    () => bottomChat.current?.scrollIntoView({ behavior: "smooth" }),
+    [messages]
+  );
+
   return (
     <Grid columns={2} style={{ height: "80vh", width: "80vw" }}>
       <Grid.Column>
@@ -94,6 +100,7 @@ export default function Game({
                   <div>{m.text}</div>
                 </div>
               ))}
+              <div ref={bottomChat}></div>
             </Container>
             <Input
               onKeyDown={(event: KeyboardEvent) => {