fix: modal

app/(main)/(routes)/matches/(components)/CreateMatchButton/actions.ts

@@ -5,7 +5,6 @@ import { redirect } from "next/navigation";
 import { z } from "zod";
 import { serverServices } from "@/lib/services/server";
 import { schema } from "@/lib/utils/schema";
-import { matchPlayerInputModalKey } from "../../(routes)/[matchId]/(components)/MatchPlayerInputModal/hooks";
 
 type State = {
   errors?: {
@@ -82,6 +81,5 @@ export async function createMatch(
   });
 
   revalidatePath("/matches");
-  // TODO: refactor
-  redirect(`/matches/${id}?${matchPlayerInputModalKey}=true`);
+  redirect(`/matches/${id}`);
 }

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/ChipInputModal/hooks.ts

@@ -1,5 +1,5 @@
-import { useQueryControlledModal } from "@/components/Modal";
+import { useDisclosure } from "@/components/Modal";
 
 export const useChipInputModal = () => {
-  return useQueryControlledModal("chip-input");
+  return useDisclosure();
 };

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/GameInputModal/hooks.ts

@@ -1,5 +1,5 @@
-import { useQueryControlledModal } from "@/components/Modal";
+import { useDisclosure } from "@/components/Modal";
 
 export const useGameInputModal = () => {
-  return useQueryControlledModal("game-input");
+  return useDisclosure();
 };

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchPlayerInputButton/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { Button, ButtonProps } from "@/components/Button";
-import { useMatchPlayerInputModal } from "../MatchPlayerInputModal/hooks";
+import { useDisclosure } from "@/components/Modal";
 
 export function MatchPlayerInputButton(props: Omit<ButtonProps, "onClick">) {
-  const { onOpen } = useMatchPlayerInputModal();
+  const { onOpen } = useDisclosure();
   return <Button {...props} onClick={onOpen} />;
 }

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchPlayerInputModal/(components)/ModalController/index.tsx

@@ -1,10 +1,17 @@
 "use client";
 
-import { Modal } from "@/components/Modal";
-import { useMatchPlayerInputModal } from "../../hooks";
+import { Modal, useDisclosure } from "@/components/Modal";
 
-export function ModalController({ children }: { children: React.ReactNode }) {
-  const { onClose, isOpen } = useMatchPlayerInputModal();
+export function ModalController({
+  children,
+  defaultOpen,
+}: {
+  children: React.ReactNode;
+  defaultOpen: boolean;
+}) {
+  const { onClose, isOpen } = useDisclosure({
+    defaultOpen: defaultOpen,
+  });
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} hideCloseButton>

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchPlayerInputModal/index.tsx

@@ -2,15 +2,21 @@ import { serverServices } from "@/lib/services/server";
 import { MatchPlayerInputModalContent } from "./(components)/Content";
 import { ModalController } from "./(components)/ModalController";
 
-export async function MatchPlayerInputModal({ matchId }: { matchId: string }) {
+export async function MatchPlayerInputModal({
+  matchId,
+  defaultOpen,
+}: {
+  matchId: string;
+  defaultOpen: boolean;
+}) {
   const { getFriends, getMatch } = serverServices();
   const [friends, match] = await Promise.all([
     getFriends(),
     getMatch({ matchId }),
   ]);
 
   return (
-    <ModalController>
+    <ModalController defaultOpen={defaultOpen}>
       <MatchPlayerInputModalContent
         friends={friends}
         matchId={matchId}

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchTable/(components)/MatchPlayerInputButton/index.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useMatchPlayerInputModal } from "../../../MatchPlayerInputModal/hooks";
+import { useDisclosure } from "@/components/Modal";
 
 export function MatchPlayerInputButton(
   props: React.ComponentPropsWithoutRef<"button">,
 ) {
-  const gameInputModal = useMatchPlayerInputModal();
+  const gameInputModal = useDisclosure();
 
   return <button onClick={gameInputModal.onOpen} {...props}></button>;
 }

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/RuleModal/index.tsx

@@ -7,13 +7,13 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-  useQueryControlledModal,
+  useDisclosure,
 } from "@/components/Modal";
 import { calcMethodLabel, chipRateLabel, rateLabel } from "@/lib/config";
 import { Rule } from "@/lib/type";
 
 export const useRuleModal = () => {
-  return useQueryControlledModal("rule");
+  return useDisclosure();
 };
 
 export function RuleModal({ rule }: { rule: Rule }) {

app/(main)/(routes)/matches/(routes)/[matchId]/page.tsx

@@ -18,7 +18,7 @@ export default async function Match({
   params: { matchId: string };
 }) {
   const { getMatch } = serverServices();
-  const [match] = await Promise.all([getMatch({ matchId })]);
+  const match = await getMatch({ matchId });
 
   const { createdAt } = match;
 
@@ -29,6 +29,9 @@ export default async function Match({
     ? dayjs(createdAt).format("M/D")
     : dayjs(createdAt).format("YYYY/M/D");
 
+  // プレイヤー入力モーダルを初期状態で開くかどうか
+  const isMatchPlayerInputModalDefaultOpen = match.players.length <= 1;
+
   return (
     <div className="flex h-full flex-col">
       <div className="mb-1 flex items-center justify-between">
@@ -54,7 +57,10 @@ export default async function Match({
         <MatchTable className="grow" matchId={matchId} />
       </Suspense>
       <Suspense fallback={null}>
-        <MatchPlayerInputModal matchId={matchId} />
+        <MatchPlayerInputModal
+          matchId={matchId}
+          defaultOpen={isMatchPlayerInputModalDefaultOpen}
+        />
       </Suspense>
       <Suspense fallback={null}>
         <GameInputModal matchId={matchId} />

components/Modal/index.tsx

@@ -1,8 +1,3 @@
-"use client";
-
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
-
 export {
   Modal,
   ModalContent,
@@ -12,27 +7,28 @@ export {
   useDisclosure,
 } from "@nextui-org/react";
 
-export const useQueryControlledModal = (key: string) => {
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-  const router = useRouter();
-  const isOpen = searchParams.get(key) === "true";
+// パフォーマンスが悪いので使わない
+// export const useQueryControlledModal = (key: string) => {
+//   const searchParams = useSearchParams();
+//   const pathname = usePathname();
+//   const router = useRouter();
+//   const isOpen = searchParams.get(key) === "true";
 
-  const onOpen = useCallback(() => {
-    const params = new URLSearchParams(searchParams);
-    params.set(key, "true");
-    router.push(`${pathname}?${params.toString()}`);
-  }, [key, pathname, router, searchParams]);
+//   const onOpen = useCallback(() => {
+//     const params = new URLSearchParams(searchParams);
+//     params.set(key, "true");
+//     router.push(`${pathname}?${params.toString()}`);
+//   }, [key, pathname, router, searchParams]);
 
-  const onClose = useCallback(() => {
-    const params = new URLSearchParams(searchParams);
-    params.delete(key);
-    router.push(`${pathname}?${params.toString()}`);
-  }, [key, pathname, router, searchParams]);
+//   const onClose = useCallback(() => {
+//     const params = new URLSearchParams(searchParams);
+//     params.delete(key);
+//     router.push(`${pathname}?${params.toString()}`);
+//   }, [key, pathname, router, searchParams]);
 
-  return {
-    isOpen,
-    onOpen,
-    onClose,
-  };
-};
+//   return {
+//     isOpen,
+//     onOpen,
+//     onClose,
+//   };
+// };