検索画面から、リクエストを送れるようになった (#561)

# PRの概要
#494

## 具体的な変更内容
<img width="381" alt="スクリーンショット 2024-12-28 19 11 19"
src="https://github.com/user-attachments/assets/464162d3-5ca5-4f4b-b045-40c12826e5c6"
/>

## 影響範囲

## 動作要件

## 補足

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

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

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

Author: KaichiManabe

web/components/human/humanListItem.tsx

@@ -14,6 +14,7 @@ type HumanListItemProps = {
   onAccept?: (id: number) => void;
   onReject?: (id: number) => void;
   onCancel?: (id: number) => void;
+  onRequest?: (id: number) => void;
   hasDots?: boolean;
   dotsActions?: object;
 };
@@ -32,6 +33,7 @@ export function HumanListItem(props: HumanListItemProps) {
     onAccept,
     onReject,
     onCancel,
+    onRequest,
     hasDots,
   } = props;
 
@@ -70,7 +72,7 @@ export function HumanListItem(props: HumanListItemProps) {
           )}
         </div>
       </button>
-      <div className="flex items-center space-x-2">
+      <div className="mr-3 flex items-center space-x-2">
         {unreadCount ? (
           <span className="badge badge-primary">{unreadCount}</span>
         ) : undefined}
@@ -107,6 +109,15 @@ export function HumanListItem(props: HumanListItemProps) {
             キャンセル
           </button>
         )}
+        {onRequest && (
+          // biome-ignore lint/a11y/useButtonType: <explanation>
+          <button
+            className="btn btn-sm bg-primary text-white"
+            onClick={() => onRequest(id)}
+          >
+            リクエスト
+          </button>
+        )}
         {hasDots && (
           <Dots
             actions={[

web/components/search/table.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useMemo } from "react";
-import { useAll, useMyID } from "~/api/user";
+import request from "~/api/request";
+import { useAll, useMatched, useMyID, usePendingFromMe } from "~/api/user";
 import { useModal } from "../common/modal/ModalProvider";
 import { HumanListItem } from "../human/humanListItem";
 
@@ -21,6 +22,19 @@ export default function UserTable({ query }: { query: string }) {
       )
     : initialData;
 
+  const {
+    state: { data: matches },
+  } = useMatched();
+
+  const {
+    state: { data: pending },
+  } = usePendingFromMe();
+
+  // ユーザーがリクエストを送ってない人だけリストアップする
+  const canRequest = (userId: number) =>
+    !matches?.some((match) => match.id === userId) &&
+    !pending?.some((pending) => pending.id === userId);
+
   return (
     <div>
       {users?.map((user) => (
@@ -30,6 +44,14 @@ export default function UserTable({ query }: { query: string }) {
           name={user.name}
           pictureUrl={user.pictureUrl}
           onOpen={() => openModal(user)}
+          onRequest={
+            canRequest(user.id)
+              ? () => {
+                  request.send(user.id);
+                  location.reload();
+                }
+              : undefined
+          }
         />
       ))}
     </div>