メッセージを送った人と送られた人で表示を変更

KaichiManabe · KaichiManabe · commit 1312cc2b7885 · 2024-12-02T17:58:44.000+09:00
diff --git a/server/src/database/chat.ts b/server/src/database/chat.ts
@@ -14,7 +14,11 @@ import type {
 } from "common/types";
 import { prisma } from "./client";
 import { getRelation } from "./matches";
-import { getMatchedUser, getPendingRequestsToUser } from "./requests";
+import {
+  getMatchedUser,
+  getPendingRequestsFromUser,
+  getPendingRequestsToUser,
+} from "./requests";
 
 export async function getOverview(
   user: UserID,
@@ -23,18 +27,22 @@ export async function getOverview(
     const matched = await getMatchedUser(user);
     if (!matched.ok) return Err(matched.error);
 
-    const requester = await getPendingRequestsToUser(user);
-    if (!requester.ok) return Err(requester.error);
+    const senders = await getPendingRequestsToUser(user);
+    if (!senders.ok) return Err(senders.error);
 
-    const dm = await Promise.all(
+    const receivers = await getPendingRequestsFromUser(user);
+    if (!receivers.ok) return Err(receivers.error);
+
+    //マッチングしている人のオーバービュー
+    const matchingOverview = await Promise.all(
       matched.value.map(async (friend) => {
         const lastMessageResult = await getLastMessage(user, friend.id);
         const lastMessage = lastMessageResult.ok
           ? lastMessageResult.value
           : undefined;
         const overview: DMOverview = {
           isDM: true,
-          isFriend: true,
+          matchingStatus: "matched",
           friendId: friend.id,
           name: friend.name,
           thumbnail: friend.pictureUrl,
@@ -44,6 +52,44 @@ export async function getOverview(
       }),
     );
 
+    //自分にリクエストを送ってきた人のオーバービュー
+    const senderOverview = await Promise.all(
+      senders.value.map(async (sender) => {
+        const lastMessageResult = await getLastMessage(user, sender.id);
+        const lastMessage = lastMessageResult.ok
+          ? lastMessageResult.value
+          : undefined;
+        const overview: DMOverview = {
+          isDM: true,
+          matchingStatus: "otherRequest",
+          friendId: sender.id,
+          name: sender.name,
+          thumbnail: sender.pictureUrl,
+          lastMsg: lastMessage,
+        };
+        return overview;
+      }),
+    );
+
+    //自分がリクエストを送った人のオーバービュー
+    const receiverOverview = await Promise.all(
+      receivers.value.map(async (receiver) => {
+        const lastMessageResult = await getLastMessage(user, receiver.id);
+        const lastMessage = lastMessageResult.ok
+          ? lastMessageResult.value
+          : undefined;
+        const overview: DMOverview = {
+          isDM: true,
+          matchingStatus: "myRequest",
+          friendId: receiver.id,
+          name: receiver.name,
+          thumbnail: receiver.pictureUrl,
+          lastMsg: lastMessage,
+        };
+        return overview;
+      }),
+    );
+
     const sharedRooms: {
       id: number;
       name: string;
@@ -65,26 +111,12 @@ export async function getOverview(
       return overview;
     });
 
-    // リクエスター (友達申請者) のオーバービュー作成
-    const requesterOverview = await Promise.all(
-      requester.value.map(async (requester) => {
-        const lastMessageResult = await getLastMessage(user, requester.id);
-        const lastMessage = lastMessageResult.ok
-          ? lastMessageResult.value
-          : undefined;
-        const overview: DMOverview = {
-          isDM: true,
-          isFriend: false,
-          friendId: requester.id,
-          name: requester.name,
-          thumbnail: requester.pictureUrl,
-          lastMsg: lastMessage,
-        };
-        return overview;
-      }),
-    );
-
-    return Ok([...shared, ...dm, ...requesterOverview]);
+    return Ok([
+      ...matchingOverview,
+      ...senderOverview,
+      ...receiverOverview,
+      ...shared,
+    ]);
   } catch (e) {
     return Err(e);
   }
diff --git a/server/src/functions/chat.ts b/server/src/functions/chat.ts
@@ -61,17 +61,17 @@ export async function sendDM(
 }
 
 export async function getDM(
-  requester: UserID,
-  _with: UserID,
+  user: UserID,
+  friend: UserID,
 ): Promise<http.Response<PersonalizedDMRoom & DMRoom>> {
-  const rel = await getRelation(requester, _with);
+  const rel = await getRelation(user, friend);
   if (!rel.ok || rel.value.status === "REJECTED")
     return http.forbidden("cannot send to rejected-friend");
 
-  const room = await db.getDMbetween(requester, _with);
+  const room = await db.getDMbetween(user, friend);
   if (!room.ok) return http.internalError();
 
-  const friendData = await getUserByID(_with);
+  const friendData = await getUserByID(friend);
   if (!friendData.ok) return http.notFound("friend not found");
 
   const personalized: PersonalizedDMRoom & DMRoom = {
@@ -80,9 +80,9 @@ export async function getDM(
     matchingStatus:
       rel.value.status === "MATCHED"
         ? "matched"
-        : rel.value.status === "PENDING"
+        : rel.value.sendingUserId === user //どっちが送ったリクエストなのかを判定
           ? "myRequest"
-          : "otherRequest", //Fix Me: これだとREJECTEDの時に、matchingStatus = otherRequest になってしまう。本当はちゃんと判別しないといけない。呼び出し口でこれがちゃんと使われてないので、無視している。
+          : "otherRequest",
     ...room.value,
   };
 
diff --git a/web/components/chat/RoomList.tsx b/web/components/chat/RoomList.tsx
@@ -3,7 +3,6 @@
 import { Box, List, Typography } from "@mui/material";
 import type { RoomOverview } from "common/types";
 import { useRouter } from "next/navigation";
-import request from "~/api/request";
 import { HumanListItem } from "../human/humanListItem";
 
 type RoomListProps = {
@@ -35,7 +34,7 @@ export function RoomList(props: RoomListProps) {
       </p>
       {roomsData?.map((room) => {
         if (room.isDM) {
-          if (!room.isFriend) {
+          if (room.matchingStatus === "otherRequest") {
             return (
               <Box
                 key={room.friendId}
@@ -51,16 +50,33 @@ export function RoomList(props: RoomListProps) {
                   pictureUrl={room.thumbnail}
                   rollUpName={true}
                   lastMessage={room.lastMsg?.content}
-                  onAccept={() => {
-                    request.accept(room.friendId).then(() => location.reload());
-                  }}
-                  onReject={() => {
-                    request.reject(room.friendId).then(() => location.reload());
-                  }}
+                  statusMessage="リクエストを受けました"
                 />
               </Box>
             );
           }
+          if (room.matchingStatus === "myRequest") {
+            return (
+              <Box
+                key={room.friendId}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigateToRoom(room);
+                }}
+              >
+                <HumanListItem
+                  key={room.friendId}
+                  id={room.friendId}
+                  name={room.name}
+                  pictureUrl={room.thumbnail}
+                  rollUpName={true}
+                  lastMessage={room.lastMsg?.content}
+                  statusMessage="リクエスト中 メッセージを送りましょう！"
+                />
+              </Box>
+            );
+          }
+          // if (room.matchingStatus === "matched")
           return (
             <Box
               key={room.friendId}
diff --git a/web/components/chat/RoomWindow.tsx b/web/components/chat/RoomWindow.tsx
@@ -158,10 +158,15 @@ export function RoomWindow(props: Props) {
 
   return (
     <>
-      {!room.isFriend && (
+      {room.matchingStatus !== "matched" && (
         <FloatingMessage
-          message="この人とはマッチングしていません。"
+          message={
+            room.matchingStatus === "myRequest"
+              ? "この人とはマッチングしていません。最初の挨拶をしましょう。"
+              : "この人とはマッチングしていません。"
+          }
           friendId={friendId}
+          showButtons={room.matchingStatus === "otherRequest"}
         />
       )}
 
@@ -258,11 +263,17 @@ export function RoomWindow(props: Props) {
 
 type FloatingMessageProps = {
   message: string;
-  friendId: UserID;
+  friendId: number;
+  showButtons: boolean;
 };
 
-const FloatingMessage = ({ message, friendId }: FloatingMessageProps) => {
+const FloatingMessage = ({
+  message,
+  friendId,
+  showButtons,
+}: FloatingMessageProps) => {
   const router = useRouter();
+
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center"
@@ -277,24 +288,28 @@ const FloatingMessage = ({ message, friendId }: FloatingMessageProps) => {
         }}
       >
         <p>{message}</p>
-        {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-        <button
-          className="btn btn-success btn-sm"
-          onClick={() => {
-            request.accept(friendId).then(() => router.push("/chat"));
-          }}
-        >
-          承認
-        </button>
-        {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-        <button
-          className="btn btn-error btn-sm"
-          onClick={() => {
-            request.reject(friendId).then(() => router.push("/chat"));
-          }}
-        >
-          拒否
-        </button>
+        {showButtons && (
+          <div className="mt-4 space-x-4">
+            {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+            <button
+              className="btn btn-success btn-sm"
+              onClick={() => {
+                request.accept(friendId).then(() => router.push("/chat"));
+              }}
+            >
+              承認
+            </button>
+            {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+            <button
+              className="btn btn-error btn-sm"
+              onClick={() => {
+                request.reject(friendId).then(() => router.push("/chat"));
+              }}
+            >
+              拒否
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );
