リクエストをキャンセルする (#390)

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

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

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

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

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

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->

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

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

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

Author: aster-void

server/src/database/requests.ts

@@ -90,6 +90,27 @@ export async function rejectRequest(
   }
 }
 
+export async function cancelRequest(
+  senderId: UserID,
+  receiverId: UserID,
+): Promise<Result<void>> {
+  try {
+    return prisma.relationship
+      .delete({
+        where: {
+          sendingUserId_receivingUserId: {
+            sendingUserId: senderId,
+            receivingUserId: receiverId,
+          },
+        },
+      })
+      .then(() => Ok(undefined))
+      .catch((err) => Err(err));
+  } catch (err) {
+    return Err(err);
+  }
+}
+
 //ユーザーへのリクエストを探す 俺をリクエストしているのは誰だ
 export async function getPendingRequestsToUser(
   userId: UserID,

server/src/router/requests.ts

@@ -4,6 +4,7 @@ import type { UserID } from "../common/types";
 import { safeParseInt } from "../common/lib/result/safeParseInt";
 import {
   approveRequest,
+  cancelRequest,
   rejectRequest,
   sendRequest,
 } from "../database/requests";
@@ -12,27 +13,6 @@ import { safeGetUserId } from "../firebase/auth/db";
 
 const router = express.Router();
 
-// I'm pretty sure that this is not used, but I'm not confident enough to delete this
-// 特定のユーザ同士が送信・受信したマッチリクエストの取得
-// router.get("/id/:matchId", async (req: Request, res: Response) => {
-//   const { senderId, receiverId } = req.query;
-//   if (!senderId && !receiverId) {
-//     return res
-//       .status(400)
-//       .json({ error: "SenderID or ReceiverID is required" });
-//   }
-//   try {
-//     const requests: Relationship[] = await getRequestsByUserId({
-//       senderId: senderId ? parseInt(senderId as string) : undefined,
-//       receiverId: receiverId ? parseInt(receiverId as string) : undefined,
-//     });
-//     res.status(200).json(requests);
-//   } catch (error) {
-//     console.error("Error fetching requests:", error);
-//     res.status(500).json({ error: "Failed to fetch requests" });
-//   }
-// });
-
 // リクエストの送信
 router.put("/send/:receiverId", async (req: Request, res: Response) => {
   const receiverId = safeParseInt(req.params.receiverId);
@@ -70,6 +50,23 @@ router.put("/accept/:senderId", async (req: Request, res: Response) => {
   }
 });
 
+router.put("/cancel/:opponentId", async (req: Request, res: Response) => {
+  const opponentId = safeParseInt(req.params.opponentId);
+  if (!opponentId.ok) return res.status(400).send("bad param encoding");
+
+  const requesterId = await safeGetUserId(req);
+  if (!requesterId.ok) return res.status(401).send("auth error");
+
+  const result = await cancelRequest(requesterId.value, opponentId.value);
+
+  switch (result.ok) {
+    case true:
+      return res.status(204).send();
+    case false:
+      return res.status(500).send();
+  }
+});
+
 // リクエストの拒否
 router.put("/reject/:opponentId", async (req: Request, res: Response) => {
   const opponentId = safeParseInt(req.params.opponentId);

web/src/api/internal/endpoints.ts

@@ -1,7 +1,7 @@
 import type { CourseID, Day, GUID } from "../../common/types";
 import type { MessageID, ShareRoomID } from "../../common/types";
 
-const origin: string | null = import.meta.env.VITE_API_ENDPOINT;
+export const origin: string | null = import.meta.env.VITE_API_ENDPOINT;
 if (!origin) throw new Error("import.meta.env.VITE_API_ENDPOINT not found!");
 
 // TODO: de-export this and use one from /common
@@ -16,7 +16,7 @@ export type UserID = number;
  *   - 400: not found.
  *   - 500: internal error.
  **/
-const user = (userId: UserID) => {
+export const user = (userId: UserID) => {
   return `${origin}/users/id/${userId}`;
 };
 
@@ -36,7 +36,7 @@ const user = (userId: UserID) => {
  *   - 500: internal error.
  *
  **/
-const users = `${origin}/users`;
+export const users = `${origin}/users`;
 
 /**
  * [v] 実装済み
@@ -61,7 +61,7 @@ const users = `${origin}/users`;
  *   - 500: internal error.
  *
  **/
-const me = `${origin}/users/me`;
+export const me = `${origin}/users/me`;
 
 /**
  * [v] 実装済み
@@ -72,7 +72,7 @@ const me = `${origin}/users/me`;
  *   - 401: unauthorized.
  *   - 500: internal error.
  **/
-const matchedUsers = `${origin}/users/matched`;
+export const matchedUsers = `${origin}/users/matched`;
 
 /**
  * [v] 実装済み
@@ -83,7 +83,7 @@ const matchedUsers = `${origin}/users/matched`;
  *   - 401: unauthorized.
  *   - 500: internal error.
  **/
-const pendingRequestsToMe = `${origin}/users/pending/to-me`;
+export const pendingRequestsToMe = `${origin}/users/pending/to-me`;
 
 /**
  * [v] 実装済み
@@ -94,7 +94,7 @@ const pendingRequestsToMe = `${origin}/users/pending/to-me`;
  *   - 401: unauthorized.
  *   - 500: internal error.
  **/
-const pendingRequestsFromMe = `${origin}/users/pending/from-me`;
+export const pendingRequestsFromMe = `${origin}/users/pending/from-me`;
 
 /**
  * [v] 実装済み
@@ -105,7 +105,7 @@ const pendingRequestsFromMe = `${origin}/users/pending/from-me`;
  *   - 400: not found.
  *   - 500: internal error.
  **/
-const userByGUID = (guid: GUID) => {
+export const userByGUID = (guid: GUID) => {
   return `${origin}/users/guid/${guid}`;
 };
 
@@ -118,7 +118,7 @@ const userByGUID = (guid: GUID) => {
  *   - 404: no, user doesn't exist.
  *   - 500: internal error.
  **/
-const userExists = (guid: GUID) => {
+export const userExists = (guid: GUID) => {
   return `${origin}/users/exists/${guid}`;
 };
 
@@ -132,7 +132,7 @@ const userExists = (guid: GUID) => {
  *          (not implemented at server)
  *   - 500: internal error.
  **/
-const match = (opponentID: UserID) => {
+export const match = (opponentID: UserID) => {
   return `${origin}/matches/${opponentID}`;
 };
 
@@ -146,7 +146,7 @@ const match = (opponentID: UserID) => {
  *   - 401: unauthorized.
  *   - 500: internal error.
  **/
-const matches = `${origin}/matches`;
+export const matches = `${origin}/matches`;
 
 /**
  * [x] 実装済み
@@ -167,7 +167,7 @@ const matches = `${origin}/matches`;
  *  - 401: unauthorized.
  *  - 500: internal error.
  */
-const coursesUserId = (userId: UserID) => {
+export const coursesUserId = (userId: UserID) => {
   return `${origin}/courses/userId/${userId}`;
 };
 
@@ -194,7 +194,7 @@ const coursesUserId = (userId: UserID) => {
  *  - 401: unauthorized.
  *  - 500: internal error.
  */
-const coursesMine = `${origin}/courses/mine`;
+export const coursesMine = `${origin}/courses/mine`;
 
 /**
  * [v] 実装済み
@@ -205,7 +205,7 @@ const coursesMine = `${origin}/courses/mine`;
  *  - 401: unauthorized.
  *  - 500: internal error.
  */
-const coursesMineOverlaps = (courseId: CourseID) => {
+export const coursesMineOverlaps = (courseId: CourseID) => {
   return `${origin}/courses/mine/overlaps/${courseId}`;
 };
 
@@ -218,7 +218,7 @@ const coursesMineOverlaps = (courseId: CourseID) => {
  *   - 401: unauthorized.
  *   - 500: internal error.
  **/
-const coursesDayPeriod = (day: Day, period: number) => {
+export const coursesDayPeriod = (day: Day, period: number) => {
   return `${origin}/courses/day-period?day=${day}&period=${period}`;
 };
 
@@ -230,10 +230,20 @@ const coursesDayPeriod = (day: Day, period: number) => {
  *   - 401: unauthorized.
  *   - 500: internal error.
  **/
-const sendRequest = (opponentId: UserID) => {
+export const sendRequest = (opponentId: UserID) => {
   return `${origin}/requests/send/${opponentId}`;
 };
 
+/**
+ * PUT -> cancel request that you already sent.
+ * - status:
+ *   - 204: Successfully
+ *   - 401: Unauthorized
+ *   - 500: internal error
+ **/
+export const cancelRequest = (opponentId: UserID) => {
+  return `${origin}/requests/cancel/${opponentId}`;
+};
 /**
  * [v] 実装済み
  * PUT -> accept request.
@@ -242,7 +252,7 @@ const sendRequest = (opponentId: UserID) => {
  *   - 403: (not implemented) Forbidden. he hasn't sent a request to you.
  *   - 500: internal error.
  **/
-const acceptRequest = (opponentId: UserID) => {
+export const acceptRequest = (opponentId: UserID) => {
   return `${origin}/requests/accept/${opponentId}`;
 };
 
@@ -255,7 +265,7 @@ const acceptRequest = (opponentId: UserID) => {
  *   - 404: (not implemented) Not found. he hasn't sent a request to you.
  *   - 500: internal error.
  **/
-const rejectRequest = (opponentId: UserID) => {
+export const rejectRequest = (opponentId: UserID) => {
   return `${origin}/requests/reject/${opponentId}`;
 };
 
@@ -268,7 +278,7 @@ const rejectRequest = (opponentId: UserID) => {
  *   - 401: unauthorized
  *   - 500: internal error
  */
-const roomOverview = `${origin}/chat/overview`;
+export const roomOverview = `${origin}/chat/overview`;
 
 /**
  * []実装済み
@@ -281,7 +291,7 @@ const roomOverview = `${origin}/chat/overview`;
  *   - 403: Forbidden
  *   - 500: internal error
  **/
-const dmTo = (userId: UserID) => `${origin}/chat/dm/to/${userId}`;
+export const dmTo = (userId: UserID) => `${origin}/chat/dm/to/${userId}`;
 
 /**
  * PUT -> start dm with userId. created one if none was found. authorized.
@@ -295,7 +305,7 @@ const dmTo = (userId: UserID) => `${origin}/chat/dm/to/${userId}`;
  *   - 403: forbidden. you and the user are not matched yet.
  *   - 500: internal error.
  **/
-const dmWith = (userId: UserID) => `${origin}/chat/dm/with/${userId}`;
+export const dmWith = (userId: UserID) => `${origin}/chat/dm/with/${userId}`;
 
 /**
  * POST -> Create a room. authenticated
@@ -307,14 +317,15 @@ const dmWith = (userId: UserID) => `${origin}/chat/dm/with/${userId}`;
  *   - 403: forbidden (cannot invite non-friends)
  *   - 500: internal error
  **/
-const sharedRooms = `${origin}/chat/shared`;
+export const sharedRooms = `${origin}/chat/shared`;
 
 /** authorized
  * GET -> Get info of a room (including the message log).
  * PATCH -> update room info. (excluding the message log).
  * - body: UpdateRoom
  **/
-const sharedRoom = (roomId: ShareRoomID) => `${origin}/chat/shared/${roomId}`;
+export const sharedRoom = (roomId: ShareRoomID) =>
+  `${origin}/chat/shared/${roomId}`;
 
 /** POST: invite. authorized
  * - body: UserID[]
@@ -324,25 +335,25 @@ const sharedRoom = (roomId: ShareRoomID) => `${origin}/chat/shared/${roomId}`;
  *   - 403: forbidden (cannot invite non-friends)
  *   - 500: internal error
  **/
-const roomInvite = (roomId: ShareRoomID) =>
+export const roomInvite = (roomId: ShareRoomID) =>
   `${origin}/chat/shared/id/${roomId}/invite`;
 
 /**
  * PATCH: authorized body=SendMessage
  * DELETE: authorized
  **/
-const message = (messageId: MessageID) =>
+export const message = (messageId: MessageID) =>
   `${origin}/chat/messages/id/${messageId}`;
 
 /**
  * GET: get profile picture of URL (this is usually hard-encoded in pictureURL so this variable is barely used)
  */
-const pictureOf = (guid: GUID) => `${origin}/picture/${guid}`;
+export const pictureOf = (guid: GUID) => `${origin}/picture/${guid}`;
 
 /**
  * POST: update my profile picture.
  */
-const picture = `${origin}/picture`;
+export const picture = `${origin}/picture`;
 
 export default {
   user,
@@ -360,6 +371,7 @@ export default {
   sendRequest,
   acceptRequest,
   rejectRequest,
+  cancelRequest,
   coursesUserId,
   coursesDayPeriod,
   roomOverview,

web/src/api/request.ts

@@ -7,6 +7,11 @@ export async function send(receiverId: UserID) {
   return res.text();
 }
 
+export async function cancel(receiverId: UserID) {
+  const res = await credFetch("PUT", endpoints.cancelRequest(receiverId));
+  return await res.text();
+}
+
 //相手からのリクエストを拒否する
 export async function reject(opponentID: UserID) {
   const res = await credFetch("PUT", endpoints.rejectRequest(opponentID));

web/src/components/human/humanListItem.tsx

@@ -19,6 +19,7 @@ type HumanListItemProps = {
   onOpen?: (user: { id: number; name: string; pictureUrl: string }) => void;
   onAccept?: (id: number) => void;
   onReject?: (id: number) => void;
+  onCancel?: (id: number) => void;
   hasDots?: boolean;
   dotsActions?: object;
 };
@@ -33,6 +34,7 @@ export function HumanListItem(props: HumanListItemProps) {
     onOpen,
     onAccept,
     onReject,
+    onCancel,
     hasDots,
   } = props;
   const handleDeleteClick = () => {
@@ -51,6 +53,7 @@ export function HumanListItem(props: HumanListItemProps) {
         <Stack direction="row" spacing={1}>
           {onAccept && <Button onClick={() => onAccept(id)}>承認</Button>}
           {onReject && <Button onClick={() => onReject(id)}>拒否</Button>}
+          {onCancel && <Button onClick={() => onCancel(id)}>キャンセル</Button>}
         </Stack>
       }
       sx={{

web/src/components/match/myRequests.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import { List } from "@mui/material";
 import hooks from "../../api/hooks";
+import * as request from "../../api/request";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
 import { useModal } from "../common/modal/ModalProvider";
 import { HumanListItem } from "../human/humanListItem";
@@ -33,6 +34,9 @@ export default function MyReq() {
               name={receivingUser.name}
               pictureUrl={receivingUser.pictureUrl}
               onOpen={() => openModal(receivingUser)}
+              onCancel={(id) => {
+                request.cancel(id);
+              }}
             />
           ))}
         </List>