Chatのルーティングを修正する (#360)

<!--変更したい場合は、`/.github/pull_request_template.md` を修正して下さい。-->
# PRの概要

<!-- 変更の目的 もしくは 関連する Issue 番号 -->
<!-- 以下のように書くと Issue にリンクでき、マージ時に自動で Issue を閉じられる-->
<!-- closes #1 -->
closes #346 


https://github.com/user-attachments/assets/f267b164-d395-4c96-98c3-8c6d573ce4fe



## 具体的な変更内容
<!-- ビューの変更がある場合はスクショによる比較などがあるとわかりやすい -->

## 影響範囲
<!-- この関数を変更したのでこの機能にも影響がある、など -->

## 動作要件
<!-- 動作に必要な 環境変数 / 依存関係 / DBの更新 など -->

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->
RoomWIndow(実際にチャットするところ)でリロードすると、Headerがホーム/Homeに戻ってしまう問題が発生しました。
Issue → #392

## レビューリクエストを出す前にチェック！

- [x] 改めてセルフレビューしたか
- [x] 手動での動作検証を行ったか
- [x] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [x] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [x] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

---------

Co-authored-by: aster <[email protected]>

Author: KaichiManabe

web/src/App.tsx

@@ -6,6 +6,7 @@ import {
   RouterProvider,
   createBrowserRouter,
 } from "react-router-dom";
+import { RoomWindow } from "./components/chat/RoomWindow";
 import { NavigateByAuthState } from "./components/common/NavigateByAuthState";
 import EditCourses from "./routes/editCourses";
 import EditProfile from "./routes/editProfile";
@@ -101,6 +102,14 @@ export default function App() {
             </NavigateByAuthState>
           ),
         },
+        {
+          path: "chat/:friendId",
+          element: (
+            <NavigateByAuthState type="toLoginForUnauthenticated">
+              <RoomWindow />
+            </NavigateByAuthState>
+          ),
+        },
         {
           path: "edit/profile",
           element: (

web/src/components/chat/RoomHeader.tsx

@@ -1,14 +1,15 @@
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { Box, Button, Typography } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 import type { DMOverview } from "../../common/types";
 import UserAvatar from "../human/avatar";
 type Props = {
   room: DMOverview;
-  setActiveRoom: (room: DMOverview | null) => void;
 };
 
 export function RoomHeader(props: Props) {
-  const { room, setActiveRoom } = props;
+  const { room } = props;
+  const navigation = useNavigate();
   return (
     <Box
       sx={{
@@ -21,7 +22,7 @@ export function RoomHeader(props: Props) {
         variant="text"
         sx={{ color: "black", padding: "0px", margin: "0px", minWidth: "0px" }}
         onClick={() => {
-          setActiveRoom(null);
+          navigation("/chat");
         }}
       >
         <ArrowBackIcon />

web/src/components/chat/RoomList.tsx

@@ -1,15 +1,16 @@
 import { Box, List, Typography } from "@mui/material";
-import type { DMOverview, RoomOverview } from "../../common/types";
+import { useNavigate } from "react-router-dom";
+import type { RoomOverview } from "../../common/types";
 import { HumanListItem } from "../human/humanListItem";
 
 type RoomListProps = {
   roomsData: RoomOverview[] | null;
-  activeRoom: DMOverview | null;
-  setActiveRoom: (room: DMOverview) => void;
 };
 
 export function RoomList(props: RoomListProps) {
-  const { roomsData, activeRoom, setActiveRoom } = props;
+  const { roomsData } = props;
+  const navigate = useNavigate();
+
   return (
     <List disablePadding>
       <p
@@ -31,12 +32,9 @@ export function RoomList(props: RoomListProps) {
           return (
             <Box
               key={room.friendId}
-              onClick={() => setActiveRoom(room)}
-              sx={{
-                backgroundColor:
-                  activeRoom?.friendId === room.friendId
-                    ? "gainsboro"
-                    : "white",
+              onClick={() => {
+                // `state`を使って`room`データを渡す
+                navigate(`./${room.friendId}`, { state: { room } });
               }}
             >
               <HumanListItem

web/src/components/chat/RoomWindow.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Paper, TextField, Typography } from "@mui/material";
 import { useSnackbar } from "notistack";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
 import * as chat from "../../api/chat/chat";
 import { useMessages } from "../../api/chat/hooks";
 import * as user from "../../api/user";
@@ -19,18 +20,16 @@ import { socket } from "../data/socket";
 import { MessageInput } from "./MessageInput";
 import { RoomHeader } from "./RoomHeader";
 
-type Prop = {
-  room: DMOverview;
-  setActiveRoom: (room: DMOverview | null) => void;
-};
+export function RoomWindow() {
+  const { state: locationState } = useLocation();
+  const { room } = locationState as { room: DMOverview }; // `room`データを抽出
 
-export function RoomWindow(props: Prop) {
-  const { room, setActiveRoom } = props;
   const {
     state: { data: myId },
   } = useMyID();
   const { state, reload, write } = useMessages(room.friendId);
   const [messages, setMessages] = useState(state.data);
+
   useEffect(() => {
     setMessages(state.data);
   }, [state.data]);
@@ -161,7 +160,7 @@ export function RoomWindow(props: Prop) {
           top: "56px",
         }}
       >
-        <RoomHeader room={room} setActiveRoom={setActiveRoom} />
+        <RoomHeader room={room} />
       </Box>
       <Box
         sx={{

web/src/routes/tabs/chat.tsx

@@ -1,38 +1,18 @@
-import { Box, Typography } from "@mui/material";
-import { useState } from "react";
+import { Typography } from "@mui/material";
 import { useRoomsOverview } from "../../api/chat/hooks";
-import type { DMOverview } from "../../common/types";
 import RoomList from "../../components/chat/RoomList";
-import { RoomWindow } from "../../components/chat/RoomWindow";
 import FullScreenCircularProgress from "../../components/common/FullScreenCircularProgress";
 
 export default function Chat() {
   const { state } = useRoomsOverview();
-  const [activeRoom, setActiveRoom] = useState<DMOverview | null>(null);
 
-  return (
-    <Box>
-      {activeRoom ? (
-        // activeRoomがtrueの場合、画面全体にRoomWindowを表示
-        <Box>
-          <RoomWindow room={activeRoom} setActiveRoom={setActiveRoom} />
-        </Box>
-      ) : (
-        // activeRoomがfalseの場合、通常のRoomListを表示
-        <Box>
-          {state.current === "loading" ? (
-            <FullScreenCircularProgress />
-          ) : state.current === "error" ? (
-            <Typography color="error">Error: {state.error.message}</Typography>
-          ) : (
-            <RoomList
-              roomsData={state.data}
-              activeRoom={activeRoom}
-              setActiveRoom={setActiveRoom}
-            />
-          )}
-        </Box>
-      )}
-    </Box>
-  );
+  if (state.current === "loading") {
+    return <FullScreenCircularProgress />;
+  }
+
+  if (state.current === "error") {
+    return <Typography color="error">Error: {state.error.message}</Typography>;
+  }
+
+  return <RoomList roomsData={state.data} />;
 }