Merge pull request #252 from h8570rg/develop

Release v0.1.1

app/(main)/(components)/ReleaseNotes/ReleaseNotesModal/versions/0_1_1.tsx

@@ -0,0 +1,11 @@
+export default function ReleaseNotes_0_1_0() {
+  return (
+    <>
+      <h2>Version 0.1.1</h2>
+      <ol className="list-inside list-disc">
+        <li>ゲーム結果削除機能追加</li>
+        <li>ゲーム入力において一部端末で画面が拡大してしまう問題の修正</li>
+      </ol>
+    </>
+  );
+}

app/(main)/(components)/ReleaseNotes/ReleaseNotesModal/versions/index.ts

@@ -1,5 +1,7 @@
 import V0_1_0 from "./0_1_0";
+import V0_1_1 from "./0_1_1";
 
 export const versionComponents = {
   "0.1.0": V0_1_0,
+  "0.1.1": V0_1_1,
 } as const;

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

@@ -110,9 +110,11 @@ export function GameForm({ match }: { match: Match }) {
                               classNames={{
                                 base: "basis-[160px] shrink-0",
                                 input:
-                                  "text-right placeholder:text-default-400",
+                                  "text-right placeholder:text-default-400 text-medium",
                               }}
+                              size="md"
                               type="number"
+                              autoFocus={index === 0}
                               startContent={
                                 isAutoFillAvailable &&
                                 points === "" && (

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

@@ -11,11 +11,7 @@ export function GameModalController({
   const { gameModal } = useMatchContext();
 
   return (
-    <Modal
-      {...gameModal.bind}
-      hideCloseButton
-      placement="center" // TODO: 考える
-    >
+    <Modal {...gameModal.bind} hideCloseButton placement="bottom">
       <ModalContent>{children}</ModalContent>
     </Modal>
   );

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

@@ -0,0 +1,33 @@
+"use client";
+
+import { Card } from "@/components/Card";
+import { GameUpdateModal, useGameUpdateModal } from "../GameUpdateModal";
+
+export function GameRow({
+  index,
+  className,
+  children,
+  matchId,
+  gameId,
+}: {
+  index: number;
+  className?: string;
+  children: React.ReactNode;
+  matchId: string;
+  gameId: string;
+}) {
+  const gameUpdateModal = useGameUpdateModal();
+  return (
+    <>
+      <Card isPressable className={className} onPress={gameUpdateModal.onOpen}>
+        {children}
+      </Card>
+      <GameUpdateModal
+        {...gameUpdateModal.bind}
+        index={index}
+        matchId={matchId}
+        gameId={gameId}
+      />
+    </>
+  );
+}

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/MatchTable/(components)/GameUpdateModal/(components)/GameDeleteConfirmDialog/actions.ts

@@ -0,0 +1,17 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { serverServices } from "@/lib/services/server";
+
+export async function deleteGame({
+  gameId,
+  matchId,
+}: {
+  gameId: string;
+  matchId: string;
+}) {
+  const { deleteGame } = await serverServices();
+  await deleteGame({ gameId });
+
+  revalidatePath(`/matches/${matchId}`);
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import {
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalProps,
+  useModal,
+} from "@/components/Modal";
+import { deleteGame } from "./actions";
+
+export function GameDeleteConfirmDialog({
+  matchId,
+  gameId,
+  ...props
+}: Omit<ModalProps, "children"> & {
+  matchId: string;
+  gameId: string;
+}) {
+  return (
+    <Modal {...props} hideCloseButton placement="center">
+      <ModalContent>
+        {(onClose) => (
+          <>
+            <ModalHeader>本当に削除しますか？</ModalHeader>
+            <ModalFooter>
+              <Button variant="light" onPress={onClose}>
+                キャンセル
+              </Button>
+              <Button
+                color="danger"
+                variant="flat"
+                onPress={() => {
+                  deleteGame({
+                    gameId,
+                    matchId,
+                  }).catch((e) => {
+                    throw e;
+                  });
+                }}
+              >
+                削除
+              </Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export { useModal as useGameDeleteConfirmDialog };

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import {
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalProps,
+  useModal,
+} from "@/components/Modal";
+import {
+  GameDeleteConfirmDialog,
+  useGameDeleteConfirmDialog,
+} from "./(components)/GameDeleteConfirmDialog";
+
+export function GameUpdateModal({
+  matchId,
+  gameId,
+  index,
+  ...props
+}: Omit<ModalProps, "children"> & {
+  matchId: string;
+  gameId: string;
+  index: number;
+}) {
+  const gameDeleteConfirmDialog = useGameDeleteConfirmDialog();
+  return (
+    <>
+      <Modal {...props} hideCloseButton>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader>{index + 1}ゲーム目</ModalHeader>
+              <ModalFooter>
+                <Button
+                  className="mr-auto"
+                  color="danger"
+                  variant="flat"
+                  onPress={gameDeleteConfirmDialog.onOpen}
+                >
+                  削除
+                </Button>
+                <Button variant="light" onPress={onClose}>
+                  キャンセル
+                </Button>
+                <Button type="submit" color="primary" onPress={onClose}>
+                  OK
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+      <GameDeleteConfirmDialog
+        {...gameDeleteConfirmDialog.bind}
+        matchId={matchId}
+        gameId={gameId}
+      />
+    </>
+  );
+}
+
+export { useModal as useGameUpdateModal };

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

@@ -5,6 +5,7 @@ import { MatchPlayer } from "@/lib/type";
 import { ChipModalTrigger } from "../ChipModal";
 import { GameModalTrigger } from "../GameModal";
 import { PlayersModalTrigger } from "../PlayersModal";
+import { GameRow } from "./(components)/GameRow";
 import styles from "./styles.module.css";
 
 type Column = {
@@ -15,7 +16,8 @@ type Column = {
 } & MatchPlayer;
 
 type Row = {
-  [playerId: Column["id"]]: number;
+  gameId: string;
+  players: { [playerId: Column["id"]]: number };
 };
 
 export async function MatchTable({
@@ -58,11 +60,12 @@ export async function MatchTable({
   ];
 
   const gameRows: Row[] =
-    match.games?.map((game) =>
-      Object.fromEntries(
+    match.games?.map((game) => ({
+      gameId: game.id,
+      players: Object.fromEntries(
         game.players.map((player) => [player.id, player.score]),
       ),
-    ) ?? [];
+    })) ?? [];
 
   return (
     <div className={classNames(className, "flex flex-col")}>
@@ -99,29 +102,40 @@ export async function MatchTable({
         {gameRows.length > 0 && (
           <ol className="py-1">
             {gameRows.map((item, index) => (
-              <li
-                className={classNames(styles["row"], "flex items-center")}
-                key={index}
-              >
-                <div
+              <li key={item.gameId}>
+                <GameRow
+                  index={index}
+                  matchId={matchId}
+                  gameId={item.gameId}
                   className={classNames(
-                    styles["col"],
-                    styles["col--index"],
-                    styles["col--body"],
+                    styles["row"],
+                    "flex w-full flex-row items-center bg-transparent",
                   )}
                 >
-                  {index + 1}
-                </div>
-                {columns.map((column) => (
                   <div
-                    key={column.id}
-                    className={classNames(styles["col"], styles["col--body"], {
-                      "text-danger": item[column.id] < 0,
-                    })}
+                    className={classNames(
+                      styles["col"],
+                      styles["col--index"],
+                      styles["col--body"],
+                    )}
                   >
-                    {item[column.id]}
+                    {index + 1}
                   </div>
-                ))}
+                  {columns.map((column) => (
+                    <div
+                      key={column.id}
+                      className={classNames(
+                        styles["col"],
+                        styles["col--body"],
+                        {
+                          "text-danger": item.players[column.id] < 0,
+                        },
+                      )}
+                    >
+                      {item.players[column.id]}
+                    </div>
+                  ))}
+                </GameRow>
               </li>
             ))}
           </ol>

components/Modal/index.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { uniqueId } from "lodash-es";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useRef } from "react";
+import { useDisclosure } from "@nextui-org/react";
 
 export type { ModalProps } from "@nextui-org/react";
 export {
@@ -24,36 +22,7 @@ export type UseModalReturn = {
 };
 
 export const useModal = (): UseModalReturn => {
-  const key = useRef(uniqueId("modal")).current;
-  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 onClose = useCallback(() => {
-    const params = new URLSearchParams(searchParams);
-    params.delete(key);
-    router.push(`${pathname}?${params.toString()}`);
-  }, [key, pathname, router, searchParams]);
-
-  const onOpenChange = useCallback(
-    (isOpen: boolean) => {
-      if (isOpen) {
-        onOpen();
-      } else {
-        onClose();
-      }
-    },
-    [onClose, onOpen],
-  );
-
+  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
   return {
     isOpen,
     onOpen,

eslint.config.mjs

@@ -100,4 +100,11 @@ export default tseslint.config(
       ],
     },
   },
+  {
+    settings: {
+      tailwindcss: {
+        callees: ["classNames"],
+      },
+    },
+  },
 );

lib/services/features/game.ts

@@ -0,0 +1,9 @@
+import { Supabase } from ".";
+
+export const gameService = (supabase: Supabase) => {
+  return {
+    deleteGame: async ({ gameId }: { gameId: string }) => {
+      await supabase.from("games").delete().match({ id: gameId });
+    },
+  };
+};

lib/services/features/index.ts

@@ -1,6 +1,7 @@
 import { SupabaseClient } from "@supabase/supabase-js";
 import { Database } from "@/lib/database.types";
 import { friendService } from "./friend";
+import { gameService } from "./game";
 import { matchService } from "./match";
 import { profileService } from "./profile";
 
@@ -11,5 +12,6 @@ export const services = (supabase: Supabase) => {
     ...matchService(supabase),
     ...profileService(supabase),
     ...friendService(supabase),
+    ...gameService(supabase),
   };
 };