Merge pull request #136 from h8570rg/fix/match_add

Fix/match add

app/(app)/friends/page.tsx

@@ -17,7 +17,7 @@ export default async function Page() {
       <ul className="space-y-1">
         {friends?.map((friend) => (
           <li
-            className="flex items-center justify-between py-2"
+            className="flex items-center justify-between py-1"
             key={friend.id}
           >
             <User {...friend} />

app/(app)/matches/[matchId]/GameInputModal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DndContext } from "@dnd-kit/core";
 import { SortableContext } from "@dnd-kit/sortable";
 import { useSortable } from "@dnd-kit/sortable";
@@ -123,7 +125,7 @@ export function GameInputModal({
                 <PopoverTrigger>
                   <Button className="gap-1" variant="light" size="sm">
                     <span className="text-secondary underline">同点の場合</span>
-                    <Icon className="h-4 w-4 fill-secondary" name="help" />
+                    <Icon className="size-4 fill-secondary" name="help" />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent className="max-w-[280px] py-2">
@@ -148,7 +150,7 @@ export function GameInputModal({
                                 {...listeners}
                               >
                                 <Icon
-                                  className="h-5 w-5 fill-current"
+                                  className="size-5 fill-current"
                                   name="dragIndicator"
                                 />
                               </div>

app/(app)/matches/[matchId]/MatchPlayerInputModal/AnonymousPlayerSelect.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { useFormState } from "react-dom";
+import { Avatar } from "~/components/Avatar";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+import { NAME_MAX_LENGTH } from "~/lib/utils/schemas";
+import { addAnonymousPlayer } from "./actions";
+
+export function AnonymousPlayerSelect({ matchId }: { matchId: string }) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const [{ errors, success }, formAction] = useFormState(
+    addAnonymousPlayer.bind(null, matchId),
+    {
+      success: false,
+    },
+  );
+
+  // TODO: 見直し。サーバー側でできないか
+  useEffect(() => {
+    if (success) {
+      const params = new URLSearchParams(searchParams);
+      params.delete("mode");
+      router.replace(`${pathname}?${params.toString()}`);
+    }
+  }, [pathname, router, searchParams, success]);
+
+  return (
+    <form className="pt-1" action={formAction} noValidate>
+      <div className="flex  gap-3">
+        <Avatar className="mt-2 shrink-0" />
+        <Input
+          name="name"
+          type="text"
+          placeholder="プレイヤー名を入力してください"
+          maxLength={NAME_MAX_LENGTH}
+          errorMessage={errors?.name}
+        />
+      </div>
+      <Button className="mt-4" fullWidth type="submit" color="primary">
+        決定
+      </Button>
+    </form>
+  );
+}

app/(app)/matches/[matchId]/MatchPlayerInputModal/ModalController.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+import { Modal, ModalContent } from "~/components/Modal";
+
+export function ModalController({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+  const mode = searchParams.get("mode");
+  const isOpen = mode === "player-add";
+
+  const handleClose = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.delete("mode");
+    router.replace(`${pathname}?${params.toString()}`);
+  }, [pathname, router, searchParams]);
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} hideCloseButton>
+      <ModalContent>{children}</ModalContent>
+    </Modal>
+  );
+}

app/(app)/matches/[matchId]/MatchPlayerInputModal/Tabs.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Tab, Tabs } from "~/components/Tabs";
+
+export function PlayerTypeTabs({
+  userTab,
+  anonymousTab,
+}: {
+  userTab: React.ReactNode;
+  anonymousTab: React.ReactNode;
+}) {
+  return (
+    <Tabs
+      classNames={{
+        panel: "min-h-0",
+      }}
+      fullWidth
+      radius="lg"
+      aria-label="プレイヤー選択の選択肢"
+    >
+      <Tab key="friends" title="ユーザー">
+        {userTab}
+      </Tab>
+      <Tab key="anonymous" title="一般">
+        {anonymousTab}
+      </Tab>
+    </Tabs>
+  );
+}