diff --git a/frontend/app/lib/hooks/useInviteToGame.ts b/frontend/app/lib/hooks/useInviteToGame.ts deleted file mode 100644 index e507be96..00000000 --- a/frontend/app/lib/hooks/useInviteToGame.ts +++ /dev/null @@ -1,29 +0,0 @@ -"use client"; - -import { chatSocket as socket } from "@/socket"; -import { useCallback, useState } from "react"; - -export const useInviteToGame = (userId: number) => { - const [isInvitingToGame, setIsInvitingToGame] = useState(false); - const [invitePending, setInvitePending] = useState(false); - - const inviteToGame = useCallback(async () => { - setInvitePending(true); - await socket.emit("invite-pong", { userId: userId }); - setIsInvitingToGame(true); - setInvitePending(false); - }, [userId]); - const cancelInviteToGame = useCallback(async () => { - setInvitePending(true); - await socket.emit("invite-cancel-pong", { userId: userId }); - setIsInvitingToGame(false); - setInvitePending(false); - }, [userId]); - - return { - invitePending, - isInvitingToGame, - inviteToGame, - cancelInviteToGame, - }; -}; diff --git a/frontend/app/lib/hooks/useRequestMatch.ts b/frontend/app/lib/hooks/useRequestMatch.ts new file mode 100644 index 00000000..ab551afc --- /dev/null +++ b/frontend/app/lib/hooks/useRequestMatch.ts @@ -0,0 +1,29 @@ +"use client"; + +import { chatSocket as socket } from "@/socket"; +import { useCallback, useState } from "react"; + +export const useRequestMatch = (userId: number) => { + const [isRequestingMatch, setIsRequestingMatch] = useState(false); + const [sendRequestPending, setSendRequestPending] = useState(false); + + const requestMatch = useCallback(async () => { + setSendRequestPending(true); + await socket.emit("invite-pong", { userId: userId }); + setIsRequestingMatch(true); + setSendRequestPending(false); + }, [userId]); + const cancelRequestMatch = useCallback(async () => { + setSendRequestPending(true); + await socket.emit("invite-cancel-pong", { userId: userId }); + setIsRequestingMatch(false); + setSendRequestPending(false); + }, [userId]); + + return { + isRequestingMatch, + sendRequestPending, + requestMatch, + cancelRequestMatch, + }; +}; diff --git a/frontend/app/room/[id]/sidebar-item.tsx b/frontend/app/room/[id]/sidebar-item.tsx index ba6fd317..7ce803c2 100644 --- a/frontend/app/room/[id]/sidebar-item.tsx +++ b/frontend/app/room/[id]/sidebar-item.tsx @@ -8,9 +8,9 @@ import type { UserOnRoomEntity, } from "@/app/lib/dtos"; import { useBlock } from "@/app/lib/hooks/useBlock"; -import { useInviteToGame } from "@/app/lib/hooks/useInviteToGame"; import { useKick } from "@/app/lib/hooks/useKick"; import { useMute } from "@/app/lib/hooks/useMute"; +import { useRequestMatch } from "@/app/lib/hooks/useRequestMatch"; import { useUpdateRole } from "@/app/lib/hooks/useUpdateRole"; import { Avatar } from "@/app/ui/user/avatar"; import { @@ -53,8 +53,12 @@ export default function SidebarItem({ user.userId, blockingUsers, ); - const { invitePending, isInvitingToGame, inviteToGame, cancelInviteToGame } = - useInviteToGame(user.userId); + const { + sendRequestPending, + isRequestingMatch, + requestMatch, + cancelRequestMatch, + } = useRequestMatch(user.userId); const { kickPending, kick } = useKick(room.id, user.userId, me.userId); const { mutePending, isMuted, mute, unmute } = useMute( room.id, @@ -138,20 +142,20 @@ export default function SidebarItem({ > Unblock - {!isInvitingToGame && ( + {!isRequestingMatch && ( - Invite + Request Match )} - {isInvitingToGame && ( + {isRequestingMatch && ( - Cancel invite + Cancel Request )} {isMeAdminOrOwner && !isUserOwner && (