game systems: game system pages, game system create

components: moved DevTool to client component

app/game-systems/[id]/page.tsx

@@ -0,0 +1,49 @@
+import { Sticky } from "@/lib/sticky";
+import { prisma } from "@/prisma/prismaClient";
+
+export default async function GameSystem(
+  { params: { id } }: { params: { id: string } },
+) {
+  if (!id) throw "HOW DID YOU GET HERE?";
+
+  const gameSystem = await prisma.gameSystem.findFirst({
+    where: {
+      id,
+    },
+    select: {
+      id: true,
+      name: true,
+      schemas: {
+        select: {
+          name: true,
+          id: true,
+          publications: {
+            select: {
+              name: true,
+              id: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  return (
+    <>
+      <section className="heading">
+        <h2 className="strapline">Game System</h2>
+        <h1>{gameSystem?.name}</h1>
+      </section>
+      <section>
+        <ul>
+          {gameSystem?.schemas.map((schema) => (
+            <li key={schema.id}>{schema.name}</li>
+          ))}
+        </ul>
+      </section>
+      <Sticky sidedness={-1}>
+        <h1>HELLO!</h1>
+      </Sticky>
+    </>
+  );
+}

app/game-systems/client.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { deleteAllGameSystems } from "@/actions/GameSystems/deleteAll";
+import { DevTool } from "@/components/devtools/DevTool";
+import { useRouter } from "next/navigation";
+import { FC, PropsWithChildren } from "react";
+
+export const GameSystemsClient: FC<PropsWithChildren> = ({ children }) => {
+  const router = useRouter();
+  // DEV TOOL ONLY
+  async function deleteAll() {
+    await deleteAllGameSystems();
+    router.refresh();
+  }
+
+  return (
+    <>
+      <DevTool id="game-system-home">
+        <button onClick={deleteAll} className="btn-primary bg-lime-600">
+          Delete All Game Systems
+        </button>
+      </DevTool>
+      {children}
+    </>
+  );
+};

app/game-systems/create.tsx

@@ -0,0 +1,35 @@
+import { prisma } from "@/prisma/prismaClient";
+import { redirect } from "next/navigation";
+
+export default function CreateGameSystem() {
+  async function create(form: FormData) {
+    "use server";
+
+    const name = form.get("name")?.toString();
+    if (!name) return;
+    const { id } = await prisma.gameSystem.create({
+      data: {
+        name,
+      },
+      select: {
+        id: true,
+      },
+    });
+    redirect(`/game-systems/${id}`);
+  }
+
+  return (
+    <form action={create}>
+      <input
+        type="text"
+        // {...bind}
+        name="name"
+        placeholder="Create a new game system..."
+        className="w-min"
+      />
+      <button className="btn-primary p-2 px-2 ml-2" type="submit">
+        Create
+      </button>
+    </form>
+  );
+}

app/game-systems/page.tsx

@@ -0,0 +1,33 @@
+import { prisma } from "@/prisma/prismaClient";
+import CreateGameSystem from "./create";
+import { GameSystemsClient } from "./client";
+import Link from "next/link";
+
+export default async function GameSystems() {
+  const existingGameSystems = await prisma.gameSystem.findMany({
+    orderBy: {
+      created: "asc",
+    },
+  });
+
+  return (
+    <GameSystemsClient>
+      <section className="heading">
+        <h2 className="strapline">Tabletop Commander</h2>
+        <h1>Game Systems</h1>
+      </section>
+      <section className="mb-6">
+        <CreateGameSystem />
+      </section>
+      <section className="">
+        <ul>
+          {existingGameSystems.map((g) => (
+            <li key={g.id} className="odd:bg-black/20 p-2 text-lg">
+              <Link href={`/game-systems/${g.id}`}>{g.name}</Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </GameSystemsClient>
+  );
+}