[front] request matchボタンからmatch をrequest する (#286)

* [frontend] request match ボタンから request 出来る

* [front] denyされた後に listener を解除した

frontend/app/lib/hooks/useRequestMatch.ts

@@ -7,8 +7,13 @@ export const useRequestMatch = (userId: number) => {
   const [isRequestingMatch, setIsRequestingMatch] = useState(false);
   const [sendRequestPending, setSendRequestPending] = useState(false);
 
+  const handleDenyMatchRequest = useCallback(() => {
+    setIsRequestingMatch(false);
+    socket.off("denied-match-request", handleDenyMatchRequest);
+  }, [userId]);
   const requestMatch = useCallback(async () => {
     setSendRequestPending(true);
+    socket.on("denied-match-request", handleDenyMatchRequest);
     await socket.emit("request-match", { requestedUserId: userId });
     setIsRequestingMatch(true);
     setSendRequestPending(false);

frontend/app/ui/user/match-request-button.tsx

@@ -1,12 +1,23 @@
 "use client";
 import { Button } from "@/components/ui/button";
-import { useFormState } from "react-dom";
+import { useRequestMatch } from "@/app/lib/hooks/useRequestMatch";
 
 export default function MatchRequestButton({ id }: { id: number }) {
   // TODO: Implement this
-  const [code, action] = useFormState(
-    () => console.log("Match Request to ", id),
-    undefined,
+  const {
+    sendRequestPending,
+    isRequestingMatch,
+    requestMatch,
+    cancelRequestMatch,
+  } = useRequestMatch(id);
+
+  return isRequestingMatch ? (
+    <Button onClick={cancelRequestMatch} disabled={sendRequestPending}>
+      Cancel Request
+    </Button>
+  ) : (
+    <Button onClick={requestMatch} disabled={sendRequestPending}>
+      Request Match
+    </Button>
   );
-  return <Button onClick={action}>Request Match</Button>;
 }