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

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>