From 4eb89022e0d669742dd8a07530eb796c38f92555 Mon Sep 17 00:00:00 2001
From: h8570rg <namao0627@gmail.com>
Date: Mon, 5 Feb 2024 23:25:08 +0900
Subject: [PATCH 1/2] fix: delete unused file;

---
 app/(app)/matches/[matchId]/MatchAddButton.tsx | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 app/(app)/matches/[matchId]/MatchAddButton.tsx

diff --git a/app/(app)/matches/[matchId]/MatchAddButton.tsx b/app/(app)/matches/[matchId]/MatchAddButton.tsx
deleted file mode 100644
index a509f3c..0000000
--- a/app/(app)/matches/[matchId]/MatchAddButton.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { Button } from "@nextui-org/react";
-
-export default function MatchAddButton({ className }: { className?: string }) {
-  return (
-    <Button className={className} fullWidth color="primary">
-      結果を入力する
-    </Button>
-  );
-}

From 9eb255b166fa04fd0044c7ad89f3ff839f46aab5 Mon Sep 17 00:00:00 2001
From: h8570rg <namao0627@gmail.com>
Date: Mon, 12 Feb 2024 23:11:30 +0900
Subject: [PATCH 2/2] fix: player add

---
 app/(app)/friends/page.tsx                    |   2 +-
 .../matches/[matchId]/GameInputModal.tsx      |   6 +-
 .../[matchId]/MatchPlayerInputModal.tsx       | 119 ----------------
 .../AnonymousPlayerSelect.tsx                 |  50 +++++++
 .../MatchPlayerInputModal/ModalController.tsx |  25 ++++
 .../[matchId]/MatchPlayerInputModal/Tabs.tsx  |  29 ++++
 .../MatchPlayerInputModal/UserSelect.tsx      | 129 ++++++++++++++++++
 .../MatchPlayerInputModal/actions.ts          | 106 ++++++++++++++
 .../[matchId]/MatchPlayerInputModal/index.tsx |  34 +++++
 .../[matchId]/MatchTable/AddGameButton.tsx    |  34 +++++
 .../[matchId]/MatchTable/AddPlayerButton.tsx  |  40 ++++++
 .../{MatchTable.tsx => MatchTable/index.tsx}  |  69 +---------
 app/(app)/matches/[matchId]/page.tsx          |  19 ++-
 app/api/matches/[matchId]/players/route.ts    |  15 --
 app/api/profiles/route.ts                     |  11 --
 components/User/index.tsx                     |   8 +-
 lib/hooks/api/games.ts                        |  17 +--
 lib/hooks/api/match.ts                        |  13 +-
 lib/hooks/api/profile.ts                      |  21 ---
 lib/services/match.ts                         |  99 ++++++++------
 lib/services/matches.ts                       |   3 +-
 21 files changed, 536 insertions(+), 313 deletions(-)
 delete mode 100644 app/(app)/matches/[matchId]/MatchPlayerInputModal.tsx
 create mode 100644 app/(app)/matches/[matchId]/MatchPlayerInputModal/AnonymousPlayerSelect.tsx
 create mode 100644 app/(app)/matches/[matchId]/MatchPlayerInputModal/ModalController.tsx
 create mode 100644 app/(app)/matches/[matchId]/MatchPlayerInputModal/Tabs.tsx
 create mode 100644 app/(app)/matches/[matchId]/MatchPlayerInputModal/UserSelect.tsx
 create mode 100644 app/(app)/matches/[matchId]/MatchPlayerInputModal/actions.ts
 create mode 100644 app/(app)/matches/[matchId]/MatchPlayerInputModal/index.tsx
 create mode 100644 app/(app)/matches/[matchId]/MatchTable/AddGameButton.tsx
 create mode 100644 app/(app)/matches/[matchId]/MatchTable/AddPlayerButton.tsx
 rename app/(app)/matches/[matchId]/{MatchTable.tsx => MatchTable/index.tsx} (60%)
 delete mode 100644 app/api/matches/[matchId]/players/route.ts
 delete mode 100644 app/api/profiles/route.ts
 delete mode 100644 lib/hooks/api/profile.ts

diff --git a/app/(app)/friends/page.tsx b/app/(app)/friends/page.tsx
index d0ae52f..f9f512d 100644
--- a/app/(app)/friends/page.tsx
+++ b/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} />
diff --git a/app/(app)/matches/[matchId]/GameInputModal.tsx b/app/(app)/matches/[matchId]/GameInputModal.tsx
index 5194ece..a44c94c 100644
--- a/app/(app)/matches/[matchId]/GameInputModal.tsx
+++ b/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>
diff --git a/app/(app)/matches/[matchId]/MatchPlayerInputModal.tsx b/app/(app)/matches/[matchId]/MatchPlayerInputModal.tsx
deleted file mode 100644
index a715aec..0000000
--- a/app/(app)/matches/[matchId]/MatchPlayerInputModal.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { z } from "zod";
-import { Button } from "~/components/Button";
-import { Input } from "~/components/Input";
-import {
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalHeader,
-} from "~/components/Modal";
-import { ScrollShadow } from "~/components/ScrollShadow";
-import { Tab, Tabs } from "~/components/Tabs";
-import { useMatch, useMatchPlayerAdd } from "~/lib/hooks/api/match";
-import { useProfileCreate } from "~/lib/hooks/api/profile";
-import { Match } from "~/lib/services/match";
-import { schemas } from "~/lib/utils/schemas";
-
-const anonymousFormSchema = z.object({
-  name: schemas.name,
-});
-type AnonymousFormSchema = z.infer<typeof anonymousFormSchema>;
-
-export function MatchPlayerInputModal({
-  match: defaultMatch,
-  isOpen,
-  onOpenChange,
-  onClose,
-}: {
-  match: Match;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onClose: () => void;
-}) {
-  const { data: match } = useMatch(defaultMatch);
-  const { trigger: addMatchPlayer } = useMatchPlayerAdd(match.id);
-  const { trigger: createProfile } = useProfileCreate();
-
-  // const matchPlayerIds = match.players.map((player) => player.id);
-
-  const anonymousForm = useForm<AnonymousFormSchema>({
-    resolver: zodResolver(anonymousFormSchema),
-    mode: "onChange",
-  });
-
-  const onAnonymousFormSubmit: SubmitHandler<AnonymousFormSchema> = async ({
-    name,
-  }) => {
-    const anonymousProfile = await createProfile({ name });
-    handlePlayerSelect(anonymousProfile.id);
-  };
-
-  const handlePlayerSelect = useCallback(
-    async (profileId: string) => {
-      await addMatchPlayer({ profileId });
-      onClose();
-    },
-    [addMatchPlayer, onClose],
-  );
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange} hideCloseButton>
-      <ModalContent>
-        <ModalHeader>プレイヤー選択</ModalHeader>
-        <ModalBody>
-          <div>
-            <Tabs fullWidth radius="lg" aria-label="プレイヤー選択の選択肢">
-              <Tab key="friends" title="フレンド">
-                <ScrollShadow className="h-[300px]">
-                  {/* <FriendsList
-                    showMenu={false}
-                    isSelectable={true}
-                    onSelect={handlePlayerSelect}
-                    excludeFriendIds={matchPlayerIds}
-                  /> */}
-                </ScrollShadow>
-              </Tab>
-              <Tab key="profiles" title="ユーザー検索">
-                <div className="flex h-[300px] flex-col">
-                  {/* <ProfilesSearch
-                    listClassName="grow"
-                    excludeProfileIds={matchPlayerIds}
-                    onSelect={handlePlayerSelect}
-                  /> */}
-                </div>
-              </Tab>
-              <Tab key="anonymous" title="一般">
-                <div className="h-[300px]">
-                  <form
-                    onSubmit={anonymousForm.handleSubmit(onAnonymousFormSubmit)}
-                  >
-                    <Input
-                      type="text"
-                      placeholder="プレイヤー名を入力してください"
-                      {...anonymousForm.register("name")}
-                      errorMessage={
-                        anonymousForm.formState.errors.name?.message
-                      }
-                    />
-                    <div className="mt-3 flex justify-end">
-                      <Button
-                        type="submit"
-                        color="primary"
-                        isLoading={anonymousForm.formState.isSubmitting}
-                      >
-                        決定
-                      </Button>
-                    </div>
-                  </form>
-                </div>
-              </Tab>
-            </Tabs>
-          </div>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-}
diff --git a/app/(app)/matches/[matchId]/MatchPlayerInputModal/AnonymousPlayerSelect.tsx b/app/(app)/matches/[matchId]/MatchPlayerInputModal/AnonymousPlayerSelect.tsx
new file mode 100644
index 0000000..6ed351e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/(app)/matches/[matchId]/MatchPlayerInputModal/ModalController.tsx b/app/(app)/matches/[matchId]/MatchPlayerInputModal/ModalController.tsx
new file mode 100644
index 0000000..44f0cef
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/(app)/matches/[matchId]/MatchPlayerInputModal/Tabs.tsx b/app/(app)/matches/[matchId]/MatchPlayerInputModal/Tabs.tsx
new file mode 100644
index 0000000..edc3f21
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/(app)/matches/[matchId]/MatchPlayerInputModal/UserSelect.tsx b/app/(app)/matches/[matchId]/MatchPlayerInputModal/UserSelect.tsx
new file mode 100644
index 0000000..5806b54
--- /dev/null
+++ b/app/(app)/matches/[matchId]/MatchPlayerInputModal/UserSelect.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useRef } from "react";
+import { useFormState, useFormStatus } from "react-dom";
+import { useDebouncedCallback } from "use-debounce";
+import { Icon } from "~/components/Icon";
+import { Input } from "~/components/Input";
+import { ScrollShadow } from "~/components/ScrollShadow";
+import { User } from "~/components/User";
+import { addUserPlayer, searchProfiles } from "./actions";
+
+export function UserSelect({
+  matchId,
+  friends,
+  playerIds,
+}: {
+  matchId: string;
+  friends: { id: string; name: string; janrecoId: string }[];
+  playerIds: string[];
+}) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const selectableFriends = friends.filter(
+    (friend) => !playerIds.includes(friend.id),
+  );
+
+  const [{ profiles }, formAction] = useFormState(searchProfiles, {});
+
+  const handleChange = useDebouncedCallback(() => {
+    formRef.current?.requestSubmit();
+  }, 300);
+
+  const selectUser = useCallback(
+    (profileId: string) => {
+      // TODO: await中の表示
+      addUserPlayer({ matchId, profileId });
+      // TODO: server側でredirectしてもいいかも
+      const params = new URLSearchParams(searchParams);
+      params.delete("mode");
+      router.replace(`${pathname}?${params.toString()}`);
+    },
+    [matchId, pathname, router, searchParams],
+  );
+
+  return (
+    <form className="flex h-full flex-col" ref={formRef} action={formAction}>
+      <Input
+        className="mb-3"
+        size="sm"
+        name="text"
+        placeholder="ユーザーIDもしくは名前で検索"
+        startContent={<Icon className="size-5 fill-current" name="search" />}
+        onChange={handleChange}
+      />
+      <ScrollShadow className="min-h-0">
+        {!!profiles && (
+          <ProfileList profiles={selectableFriends} onSelect={selectUser} />
+        )}
+        {!profiles && !!friends.length && (
+          <>
+            <p className="mb-2 text-small text-foreground-light">
+              フレンドから選ぶ
+            </p>
+            <ul className="space-y-1">
+              {selectableFriends.map((friend) => (
+                <li className="py-1" key={friend.id}>
+                  {/* TODO: ripple */}
+                  <button type="button" onClick={() => selectUser(friend.id)}>
+                    <User name={friend.name} janrecoId={friend.janrecoId} />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </ScrollShadow>
+    </form>
+  );
+}
+
+function ProfileList({
+  profiles,
+  onSelect,
+}: {
+  profiles: { id: string; name: string; janrecoId: string }[];
+  onSelect: (profileId: string) => void;
+}) {
+  const { pending } = useFormStatus();
+
+  if (pending) {
+    return (
+      <ul className="space-y-1">
+        {Array.from({ length: 1 }).map((_, i) => (
+          <li
+            key={`search-profiles-${i}`}
+            className="flex items-center justify-between py-2"
+          >
+            <User skeleton />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  if (!profiles.length) {
+    return (
+      <p className="mt-10 text-center text-small text-foreground-light">
+        見つかりませんでした
+      </p>
+    );
+  }
+
+  return (
+    <ul className="space-y-1">
+      {profiles.map((profile) => (
+        <li key={profile.id} className="py-1">
+          {/* TODO: ripple, 共通化, 連打対策 */}
+          <button type="button" onClick={() => onSelect(profile.id)}>
+            <User name={profile.name} janrecoId={profile.janrecoId} />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/app/(app)/matches/[matchId]/MatchPlayerInputModal/actions.ts b/app/(app)/matches/[matchId]/MatchPlayerInputModal/actions.ts
new file mode 100644
index 0000000..f8b401e
--- /dev/null
+++ b/app/(app)/matches/[matchId]/MatchPlayerInputModal/actions.ts
@@ -0,0 +1,106 @@
+"use server";
+
+import { revalidateTag } from "next/cache";
+import { z } from "zod";
+import { Profile } from "~/lib/services/profile";
+import { serverServices } from "~/lib/services/server";
+import { schemas } from "~/lib/utils/schemas";
+
+// TODO: actionごとにファイル切ったほうがいいかも
+type AddAnonymousPlayerState = {
+  success?: boolean;
+  errors?: {
+    base?: string[];
+    name?: string[];
+  };
+};
+
+const addAnonymousPlayerSchema = z.object({
+  name: schemas.name,
+});
+
+export async function addAnonymousPlayer(
+  matchId: string,
+  prevState: AddAnonymousPlayerState,
+  formData: FormData,
+): Promise<AddAnonymousPlayerState> {
+  const validatedFields = addAnonymousPlayerSchema.safeParse({
+    name: formData.get("name"),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    };
+  }
+
+  const { createProfile, addMatchPlayer } = serverServices();
+  const profile = await createProfile({
+    ...validatedFields.data,
+  });
+
+  await addMatchPlayer({
+    matchId,
+    profileId: profile.id,
+  });
+
+  revalidateTag(`match-${matchId}`);
+
+  return {
+    success: true,
+  };
+}
+
+export async function addUserPlayer({
+  matchId,
+  profileId,
+}: {
+  matchId: string;
+  profileId: string;
+}) {
+  const { addMatchPlayer } = serverServices();
+  await addMatchPlayer({
+    matchId,
+    profileId,
+  });
+
+  revalidateTag(`match-${matchId}`);
+}
+
+type SearchProfilesState = {
+  profiles?: Profile[];
+  errors?: {
+    text?: string[];
+  };
+};
+
+const searchProfilesSchema = z.object({
+  text: z.string(),
+});
+
+export async function searchProfiles(
+  prevState: SearchProfilesState,
+  formDate: FormData,
+): Promise<SearchProfilesState> {
+  const validatedFields = searchProfilesSchema.safeParse({
+    text: formDate.get("text"),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    };
+  }
+
+  const { text } = validatedFields.data;
+
+  if (!text) {
+    return {};
+  }
+
+  const { searchProfiles } = serverServices();
+  const profiles = await searchProfiles({ text });
+  return {
+    profiles,
+  };
+}
diff --git a/app/(app)/matches/[matchId]/MatchPlayerInputModal/index.tsx b/app/(app)/matches/[matchId]/MatchPlayerInputModal/index.tsx
new file mode 100644
index 0000000..9fd0d4e
--- /dev/null
+++ b/app/(app)/matches/[matchId]/MatchPlayerInputModal/index.tsx
@@ -0,0 +1,34 @@
+import { ModalBody, ModalHeader } from "~/components/Modal";
+import { serverServices } from "~/lib/services/server";
+import { AnonymousPlayerSelect } from "./AnonymousPlayerSelect";
+import { ModalController } from "./ModalController";
+import { PlayerTypeTabs } from "./Tabs";
+import { UserSelect } from "./UserSelect";
+
+export async function MatchPlayerInputModal({ matchId }: { matchId: string }) {
+  const { getFriends, getMatch } = serverServices();
+  const [friends, match] = await Promise.all([
+    getFriends(),
+    getMatch({ matchId }),
+  ]);
+
+  return (
+    <ModalController>
+      <ModalHeader>プレイヤー追加</ModalHeader>
+      <ModalBody>
+        <div className="flex h-[400px] max-h-[70dvh] flex-col">
+          <PlayerTypeTabs
+            userTab={
+              <UserSelect
+                friends={friends}
+                matchId={matchId}
+                playerIds={match.players.map((player) => player.id)}
+              />
+            }
+            anonymousTab={<AnonymousPlayerSelect matchId={matchId} />}
+          />
+        </div>
+      </ModalBody>
+    </ModalController>
+  );
+}
diff --git a/app/(app)/matches/[matchId]/MatchTable/AddGameButton.tsx b/app/(app)/matches/[matchId]/MatchTable/AddGameButton.tsx
new file mode 100644
index 0000000..bf0c7a5
--- /dev/null
+++ b/app/(app)/matches/[matchId]/MatchTable/AddGameButton.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+import { Button } from "~/components/Button";
+
+export function AddGameButton() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  /**
+   * @see https://nextjs.org/docs/app/api-reference/functions/use-search-params#examples
+   */
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams],
+  );
+  return (
+    <Button
+      as={Link}
+      fullWidth
+      color="primary"
+      href={pathname + "?" + createQueryString("mode", "game-input")}
+    >
+      結果を入力する
+    </Button>
+  );
+}
diff --git a/app/(app)/matches/[matchId]/MatchTable/AddPlayerButton.tsx b/app/(app)/matches/[matchId]/MatchTable/AddPlayerButton.tsx
new file mode 100644
index 0000000..9d38e30
--- /dev/null
+++ b/app/(app)/matches/[matchId]/MatchTable/AddPlayerButton.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+import { Button } from "~/components/Button";
+import { Icon } from "~/components/Icon";
+
+export function AddPlayerButton() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  /**
+   * @see https://nextjs.org/docs/app/api-reference/functions/use-search-params#examples
+   */
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams],
+  );
+  return (
+    <Button
+      as={Link}
+      className="w-full"
+      size="sm"
+      radius="md"
+      variant="solid"
+      color="primary"
+      isIconOnly
+      startContent={<Icon className="size-4 fill-current" name="add" />}
+      href={pathname + "?" + createQueryString("mode", "player-add")}
+    >
+      追加
+    </Button>
+  );
+}
diff --git a/app/(app)/matches/[matchId]/MatchTable.tsx b/app/(app)/matches/[matchId]/MatchTable/index.tsx
similarity index 60%
rename from app/(app)/matches/[matchId]/MatchTable.tsx
rename to app/(app)/matches/[matchId]/MatchTable/index.tsx
index fccc5f4..1ed8f24 100644
--- a/app/(app)/matches/[matchId]/MatchTable.tsx
+++ b/app/(app)/matches/[matchId]/MatchTable/index.tsx
@@ -1,10 +1,6 @@
 "use client";
 
 import classNames from "classnames";
-import { useMemo } from "react";
-import { Button } from "~/components/Button";
-import { Icon } from "~/components/Icon";
-import { useDisclosure } from "~/components/Modal";
 import {
   Table,
   TableBody,
@@ -14,25 +10,12 @@ import {
   TableRow,
   getKeyValue,
 } from "~/components/Table";
-import { useGames } from "~/lib/hooks/api/games";
-import { useMatch } from "~/lib/hooks/api/match";
 import { Game } from "~/lib/services/game";
 import { Match } from "~/lib/services/match";
-import { GameInputModal } from "./GameInputModal";
-import { MatchPlayerInputModal } from "./MatchPlayerInputModal";
-
-export default function MatchTable({
-  match: defaultMatch,
-  games: defaultGames,
-  className,
-}: {
-  match: Match;
-  games: Game[];
-  className?: string;
-}) {
-  const { data: match } = useMatch(defaultMatch);
-  const { data: games } = useGames(match.id, defaultGames);
+import { AddGameButton } from "./AddGameButton";
+import { AddPlayerButton } from "./AddPlayerButton";
 
+export function MatchTable({ match, games }: { match: Match; games: Game[] }) {
   const { rule, players } = match;
   const { playersCount } = rule;
 
@@ -75,28 +58,15 @@ export default function MatchTable({
       ]),
     ) ?? [];
 
-  const matchPlayerInputModal = useDisclosure();
-  const gameInputModal = useDisclosure();
-
-  const bottomContent = useMemo(() => {
-    return (
-      <div className="px-1 pb-1">
-        <Button fullWidth color="primary" onClick={gameInputModal.onOpen}>
-          結果を入力する
-        </Button>
-      </div>
-    );
-  }, [gameInputModal.onOpen]);
-
   return (
-    <div className={classNames(className, "overflow-x-auto")}>
+    <div className="overflow-x-auto">
       <Table
         classNames={{
           table: "sticky top-0",
         }}
         removeWrapper
         aria-label="成績表"
-        bottomContent={bottomContent}
+        bottomContent={<AddGameButton />}
         isHeaderSticky
       >
         <TableHeader columns={playerColumns}>
@@ -115,22 +85,7 @@ export default function MatchTable({
                 })}
               >
                 <div className="absolute inset-0 flex items-center justify-center">
-                  {column.type === "empty" && (
-                    <Button
-                      className="w-full"
-                      size="sm"
-                      radius="md"
-                      variant="solid"
-                      color="primary"
-                      isIconOnly
-                      startContent={
-                        <Icon className="h-4 w-4 fill-current" name="add" />
-                      }
-                      onClick={matchPlayerInputModal.onOpen}
-                    >
-                      追加
-                    </Button>
-                  )}
+                  {column.type === "empty" && <AddPlayerButton />}
                   {column.type === "player" && (
                     <span className="truncate">{column.name}</span>
                   )}
@@ -167,18 +122,6 @@ export default function MatchTable({
           )}
         </TableBody>
       </Table>
-      <MatchPlayerInputModal
-        match={match}
-        isOpen={matchPlayerInputModal.isOpen}
-        onOpenChange={matchPlayerInputModal.onOpenChange}
-        onClose={matchPlayerInputModal.onClose}
-      />
-      <GameInputModal
-        match={match}
-        isOpen={gameInputModal.isOpen}
-        onOpenChange={gameInputModal.onOpenChange}
-        onClose={gameInputModal.onClose}
-      />
     </div>
   );
 }
diff --git a/app/(app)/matches/[matchId]/page.tsx b/app/(app)/matches/[matchId]/page.tsx
index 3b77820..3623e2e 100644
--- a/app/(app)/matches/[matchId]/page.tsx
+++ b/app/(app)/matches/[matchId]/page.tsx
@@ -1,15 +1,17 @@
 import Link from "next/link";
+import { Suspense } from "react";
 import { Button } from "~/components/Button";
 import { Icon } from "~/components/Icon";
 import { serverServices } from "~/lib/services/server";
-import MatchTable from "./MatchTable";
+import { MatchPlayerInputModal } from "./MatchPlayerInputModal";
+import { MatchTable } from "./MatchTable";
 
 export default async function Match({
   params: { matchId },
 }: {
   params: { matchId: string };
 }) {
-  const { getMatch, getGames } = serverServices();
+  const { getGames, getMatch } = serverServices();
   const [match, games] = await Promise.all([
     getMatch({ matchId }),
     getGames({ matchId }),
@@ -17,15 +19,24 @@ export default async function Match({
 
   return (
     <div>
-      <header className="mb-1 flex items-center justify-between">
+      <div className="mb-1 flex items-center justify-between">
         <div className="flex items-center gap-1">
           <Button isIconOnly variant="light" as={Link} href="/matches">
             <Icon className="size-5 fill-current" name="back" />
           </Button>
         </div>
         <div>{match.date}</div>
-      </header>
+      </div>
       <MatchTable match={match} games={games} />
+      <Suspense fallback={null}>
+        <MatchPlayerInputModal matchId={matchId} />
+      </Suspense>
+      {/* <GameInputModal
+        match={match}
+        isOpen={gameInputModal.isOpen}
+        onOpenChange={gameInputModal.onOpenChange}
+        onClose={gameInputModal.onClose}
+      /> */}
     </div>
   );
 }
diff --git a/app/api/matches/[matchId]/players/route.ts b/app/api/matches/[matchId]/players/route.ts
deleted file mode 100644
index 00ca0a7..0000000
--- a/app/api/matches/[matchId]/players/route.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NextResponse } from "next/server";
-import { serverServices } from "~/lib/services/server";
-
-export async function POST(
-  request: Request,
-  { params: { matchId } }: { params: { matchId: string } },
-) {
-  const { addMatchPlayer } = serverServices();
-  const body = (await request.json()) as { profileId: string };
-  await addMatchPlayer({
-    matchId,
-    profileId: body.profileId,
-  });
-  return NextResponse.json({});
-}
diff --git a/app/api/profiles/route.ts b/app/api/profiles/route.ts
deleted file mode 100644
index b52d51b..0000000
--- a/app/api/profiles/route.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NextResponse } from "next/server";
-import { serverServices } from "~/lib/services/server";
-
-export async function POST(request: Request) {
-  const { createProfile } = serverServices();
-  const body = (await request.json()) as {
-    name: string;
-  };
-  const data = await createProfile(body);
-  return NextResponse.json(data);
-}
diff --git a/components/User/index.tsx b/components/User/index.tsx
index 5f5d60f..f0a99b6 100644
--- a/components/User/index.tsx
+++ b/components/User/index.tsx
@@ -1,19 +1,20 @@
-import { User as NextUiUser } from "@nextui-org/react";
+import { User as NextUiUser, UserProps } from "@nextui-org/react";
 import { Skeleton } from "~/components/Skeleton";
 
 export function User({
   name,
   janrecoId,
   skeleton,
+  ...restProps
 }: {
   name?: string;
   janrecoId?: string;
   skeleton?: boolean;
-}) {
+} & Omit<UserProps, "name">) {
   if (skeleton) {
     return (
       <div className="inline-flex items-center justify-center gap-2 rounded-small">
-        <Skeleton className="h-10 w-10 rounded-full" />
+        <Skeleton className="size-10 rounded-full" />
         <div className="inline-flex flex-col items-start gap-1">
           <Skeleton className="h-4 w-20 rounded-lg" />
           <Skeleton className="h-3 w-24 rounded-lg" />
@@ -28,6 +29,7 @@ export function User({
       avatarProps={{
         name: "",
       }}
+      {...restProps}
     />
   );
 }
diff --git a/lib/hooks/api/games.ts b/lib/hooks/api/games.ts
index 61b1174..4000f2f 100644
--- a/lib/hooks/api/games.ts
+++ b/lib/hooks/api/games.ts
@@ -1,24 +1,9 @@
-import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 import { z } from "zod";
-import { Game } from "~/lib/services/game";
 import { Rule } from "~/lib/services/match";
-import { get, post } from "~/lib/utils/request";
+import { post } from "~/lib/utils/request";
 import { schemas } from "~/lib/utils/schemas";
 
-export const useGames = (matchId: string, initialData?: Game[]) => {
-  return useSWR<Game[]>(
-    `/api/matches/${matchId}/games`,
-    async (url) => {
-      const games = await get<Game[]>(url);
-      return games;
-    },
-    {
-      fallbackData: initialData,
-    },
-  );
-};
-
 export const useGameAdd = (matchId: string, rule: Rule) => {
   return useSWRMutation(
     `/api/matches/${matchId}/games`,
diff --git a/lib/hooks/api/match.ts b/lib/hooks/api/match.ts
index 0f89af1..e40360a 100644
--- a/lib/hooks/api/match.ts
+++ b/lib/hooks/api/match.ts
@@ -1,20 +1,9 @@
 import useSWR from "swr";
-import useSWRMutation from "swr/mutation";
 import { Match } from "~/lib/services/match";
-import { get, post } from "~/lib/utils/request";
+import { get } from "~/lib/utils/request";
 
 export const useMatch = (match: Match) => {
   return useSWR(`/api/matches/${match.id}`, (url) => get<Match>(url), {
     fallbackData: match,
   });
 };
-
-export const useMatchPlayerAdd = (matchId: string) => {
-  return useSWRMutation(
-    `/api/matches/${matchId}`,
-    async (_, { arg }: { arg: { profileId: string } }) => {
-      const match = await post<void>(`/api/matches/${matchId}/players`, arg);
-      return match;
-    },
-  );
-};
diff --git a/lib/hooks/api/profile.ts b/lib/hooks/api/profile.ts
deleted file mode 100644
index 00eefb8..0000000
--- a/lib/hooks/api/profile.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import useSWRMutation from "swr/mutation";
-import { z } from "zod";
-import { AnonymousProfile } from "~/lib/services/profile";
-import { post } from "~/lib/utils/request";
-import { schemas } from "~/lib/utils/schemas";
-
-export const useProfileCreate = () => {
-  return useSWRMutation(
-    "/api/profiles",
-    async (url, { arg }: { arg: { name: string } }) => {
-      const data = await post<AnonymousProfile>(url, arg);
-      return data;
-    },
-  );
-};
-
-export const profileUpdateSchema = z.object({
-  name: schemas.name,
-  janrecoId: schemas.janrecoId,
-});
-export type ProfileUpdateSchema = z.infer<typeof profileUpdateSchema>;
diff --git a/lib/services/match.ts b/lib/services/match.ts
index 391eb90..9092b5b 100644
--- a/lib/services/match.ts
+++ b/lib/services/match.ts
@@ -1,4 +1,5 @@
 import { SupabaseClient } from "@supabase/supabase-js";
+import { unstable_cache } from "next/cache";
 import { Database } from "~/lib/database.types";
 import { dayjs } from "~/lib/utils/date";
 import { CalcMethod } from "../utils/schemas";
@@ -30,70 +31,78 @@ export type Match = {
   rule: Rule;
 };
 
-export type MatchPlayerAddPayload = {
-  matchId: string;
-  profileId: string;
-};
-
 export function matchService(supabaseClient: SupabaseClient<Database>) {
   return {
-    getMatch: async ({ matchId }: { matchId: string }): Promise<Match> => {
-      const { data, error } = await supabaseClient
-        .from("matches")
-        .select(
-          `
+    getMatch: ({ matchId }: { matchId: string }) =>
+      unstable_cache(
+        async (): Promise<Match> => {
+          const { data, error } = await supabaseClient
+            .from("matches")
+            .select(
+              `
           id, created_at,
           profiles!matches_profiles(id, name, janreco_id),
           rules (*)
         `,
-        )
-        .eq("id", matchId)
-        .order("updated_at", { foreignTable: "rules", ascending: true })
-        .single();
-      if (error) {
-        throw error;
-      }
+            )
+            .eq("id", matchId)
+            .order("updated_at", { foreignTable: "rules", ascending: true })
+            .single();
+          if (error) {
+            throw error;
+          }
 
-      const rule = data.rules[0];
-      const incline = rule.incline.split("_").map((incline) => Number(incline));
-      const [incline1, incline2, incline3, incline4] = incline;
+          const rule = data.rules[0];
+          const incline = rule.incline
+            .split("_")
+            .map((incline) => Number(incline));
+          const [incline1, incline2, incline3, incline4] = incline;
 
-      return {
-        id: data.id,
-        date: dayjs(data.created_at).format("YYYY / M / D"),
-        players: data.profiles.map((profile) => ({
-          id: profile.id,
-          name: profile.name as string,
-          janrecoId: profile.janreco_id as string,
-        })),
-        rule: {
-          playersCount: rule.players_count,
-          defaultPoints: rule.default_points,
-          defaultCalcPoints: rule.default_calc_points,
-          rate: rule.rate,
-          chipRate: rule.chip_rate,
-          crackBoxBonus: rule.crack_box_bonus,
-          calcMethod: rule.calc_method as CalcMethod,
-          incline: {
-            incline1,
-            incline2,
-            incline3,
-            incline4,
-          },
+          return {
+            id: data.id,
+            date: dayjs(data.created_at).format("YYYY / M / D"),
+            players: data.profiles.map((profile) => ({
+              id: profile.id,
+              name: profile.name as string,
+              janrecoId: profile.janreco_id as string,
+            })),
+            rule: {
+              playersCount: rule.players_count,
+              defaultPoints: rule.default_points,
+              defaultCalcPoints: rule.default_calc_points,
+              rate: rule.rate,
+              chipRate: rule.chip_rate,
+              crackBoxBonus: rule.crack_box_bonus,
+              calcMethod: rule.calc_method as CalcMethod,
+              incline: {
+                incline1,
+                incline2,
+                incline3,
+                incline4,
+              },
+            },
+          };
         },
-      };
-    },
+        [`match-${matchId}`],
+        {
+          tags: [`match-${matchId}`],
+        },
+      )(),
 
     addMatchPlayer: async ({
       matchId,
       profileId,
-    }: MatchPlayerAddPayload): Promise<void> => {
+    }: {
+      matchId: string;
+      profileId: string;
+    }) => {
       const { error } = await supabaseClient
         .from("matches_profiles")
         .insert([{ match_id: matchId, profile_id: profileId }]);
       if (error) {
         throw error;
       }
+      return;
     },
   };
 }
diff --git a/lib/services/matches.ts b/lib/services/matches.ts
index 2c91461..13321cd 100644
--- a/lib/services/matches.ts
+++ b/lib/services/matches.ts
@@ -95,7 +95,8 @@ export function matchesService(supabaseClient: SupabaseClient<Database>) {
       `,
         )
         .filter("matches_profiles.profile_id", "eq", userResult.data?.user.id)
-        .range(rangeFrom, rangeTo);
+        .range(rangeFrom, rangeTo)
+        .order("created_at", { ascending: false });
       if (error) {
         throw error;
       }