chore: refactor basic deck functions

Author: devmetal

app/Domain/Dto/FeDeckView.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Domain\Dto;
+
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript]
+class FeDeckView extends Data
+{
+    public function __construct(
+        public readonly int $id,
+        public readonly string $name,
+        public readonly ?string $description
+    ) {}
+}

app/Http/Controllers/DeckController.php

@@ -6,8 +6,11 @@
 
 use App\Domain\Dto\BeDeck;
 use App\Domain\Dto\FeDeck;
+use App\Domain\Dto\FeDeckView;
+use App\Models\Deck;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
 use Inertia\Response;
 use Redirect;
@@ -19,41 +22,65 @@ public function list(Request $req): Response
         $user = $req->user();
 
         return Inertia::render('Decks/DeckList', [
-            'decks' => FeDeck::collect($user->decks()->get()),
+            'decks' => fn () => FeDeck::collect($user->decks()->get()),
+        ]);
+    }
+
+    public function show(Deck $deck): Response
+    {
+        return Inertia::render('Decks/Show', [
+
         ]);
     }
 
     public function create(Request $req): RedirectResponse
     {
         $user = $req->user();
 
-        $deck = $user->decks()
-            ->create(BeDeck::from($req)->all());
+        $deck = DB::transaction(function () use (&$user, &$req) {
+            $deck = $user->decks()
+                ->create(BeDeck::from($req)->all());
 
-        return Redirect::route('deck.edit', [
-            'id' => $deck->id,
+            // create a default deck view
+            $view = $deck->views()->create([
+                'name' => 'Default',
+            ]);
+
+            // create some default categories
+            $view->categories()->createMany([
+                ['name' => 'Creatures'],
+                ['name' => 'Instants'],
+                ['name' => 'Sorceries'],
+                ['name' => 'Enchantments'],
+                ['name' => 'Artifacts'],
+                ['name' => 'Planeswalkers'],
+                ['name' => 'Lands'],
+                ['name' => 'Sideboard'],
+                ['name' => 'Other'],
+            ]);
+
+            return $deck;
+        });
+
+        return Redirect::route('decks.edit', [
+            'deck' => $deck->id,
         ]);
     }
 
-    public function edit(Request $req, int $id): Response
+    public function edit(Deck $deck): Response
     {
-        $deck = $req->user()->decks()->find($id);
-
         return Inertia::render('Decks/EditDeck', [
-            'deck' => FeDeck::from($deck),
+            'deck' => fn () => FeDeck::from($deck),
+            'views' => fn () => FeDeckView::collect(
+                $deck->views()->get()
+            ),
         ]);
     }
 
-    public function update(Request $req, int $id): RedirectResponse
+    public function update(Deck $deck, Request $req): RedirectResponse
     {
-        /**
-         * @var \App\Models\Deck
-         */
-        $deck = $req->user()->decks()
-            ->find($id);
-
         $deck->update(BeDeck::from($req)->all());
 
-        return Redirect::route('deck.list');
+        return Redirect::route('decks.list');
     }
 }

database/migrations/2025_07_07_163337_update-view-table-unique-keys.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('views', function (Blueprint $table) {
+            $table->dropUnique('views_name_unique');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('views', function (Blueprint $table) {
+            $table->unique(['name'], 'views_name_unique');
+        });
+    }
+};

database/migrations/2025_07_07_164706_update-categories-table-unique-keys.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('categories', function (Blueprint $table) {
+            $table->dropUnique('categories_name_unique');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('categories', function (Blueprint $table) {
+            $table->unique(['name'], 'categories_name_unique');
+        });
+    }
+};

resources/js/Layouts/Partials/Navigation.tsx

@@ -22,7 +22,7 @@ export default function Navigation() {
 
               <NavigationMenu.Item>
                 <NavigationMenu.Link asChild>
-                  <Link href={route('deck.list')}>Decks</Link>
+                  <Link href={route('decks.list')}>Decks</Link>
                 </NavigationMenu.Link>
               </NavigationMenu.Item>
 
@@ -58,7 +58,7 @@ export default function Navigation() {
 
         <NavigationMenu.Item>
           <NavigationMenu.Link asChild>
-            <Link href={route('deck.list')}>Decks</Link>
+            <Link href={route('decks.list')}>Decks</Link>
           </NavigationMenu.Link>
         </NavigationMenu.Item>
 

resources/js/Pages/Decks/DeckList.tsx

@@ -24,14 +24,14 @@ export default function DeckList({
             key={deck.id}
           >
             <div className="w-full p-2 bg-white/10 backdrop-blur-[3px] text-md font-semibold rounded-t-md">
-              <Link href={route('deck.cards', { id: deck.id })}>
+              <Link href={route('decks.show', { id: deck.id })}>
                 {deck.name}
               </Link>
             </div>
             <div className="w-full p-2 bg-white/10 backdrop-blur-[3px] text-sm rounded-b-md">
               <Link
                 className="underline"
-                href={route('deck.edit', { id: deck.id })}
+                href={route('decks.edit', { id: deck.id })}
               >
                 Edit
               </Link>

resources/js/Pages/Decks/EditDeck.tsx

@@ -1,95 +1,23 @@
 import Authenticated from '@/Layouts/AuthenticatedLayout';
-import { useForm } from '@inertiajs/react';
-import clsx from 'clsx';
-import { Form } from 'radix-ui';
-import { FormEventHandler } from 'react';
-
-export default function EditDeck({ deck }: { deck: App.Domain.Dto.FeDeck }) {
-  const { data, setData, patch, processing, errors } = useForm({
-    name: deck.name,
-    note: deck.note ?? '',
-    commander: deck.commander ?? false,
-  });
-
-  const submit: FormEventHandler = (e) => {
-    e.preventDefault();
-
-    patch(route('deck.update', { id: deck.id }));
-  };
-
+import DeckViewsList from './Partials/DeckViewsList';
+import EditDeckForm from './Partials/EditDeckForm';
+
+export default function EditDeck({
+  deck,
+  views,
+}: {
+  deck: App.Domain.Dto.FeDeck;
+  views: App.Domain.Dto.FeDeckView[];
+}) {
   return (
     <Authenticated>
-      <div className="flex justify-center">
-        <Form.Root onSubmit={submit} className="max-w-lg w-lg">
-          <fieldset className="fieldset bg-base-200 border border-base-300 p-4 rounded-box space-y-2">
-            <legend className="fieldset-legend">Deck settings</legend>
-
-            <Form.Field className="space-y-1" name="name">
-              <Form.Label htmlFor="name" className="fieldset-label">
-                Name
-              </Form.Label>
-              <Form.Control asChild>
-                <input
-                  className={clsx('input w-full', {
-                    'input-error': errors.name,
-                  })}
-                  type="text"
-                  required
-                  name="name"
-                  id="name"
-                  value={data.name}
-                  onChange={(e) => setData('name', e.currentTarget.value)}
-                />
-              </Form.Control>
-              <Form.Message match="valueMissing">
-                Provide a new for your deck
-              </Form.Message>
-              {!!errors.name && <Form.Message>{errors.name}</Form.Message>}
-            </Form.Field>
-
-            <Form.Field className="space-y-1" name="note">
-              <Form.Label htmlFor="note" className="fieldset-label">
-                Notes
-              </Form.Label>
-              <Form.Control asChild>
-                <textarea
-                  className={clsx('textarea h-12 w-full', {
-                    'input-error': errors.note,
-                  })}
-                  name="note"
-                  id="note"
-                  value={data.note}
-                  onChange={(e) => setData('note', e.currentTarget.value)}
-                />
-              </Form.Control>
-            </Form.Field>
-
-            <Form.Field name="commander">
-              <Form.Label className="fieldset-label">
-                <input
-                  name="commander"
-                  id="commander"
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  checked={data.commander}
-                  onChange={(e) =>
-                    setData('commander', e.currentTarget.checked)
-                  }
-                />
-                Is Commander
-              </Form.Label>
-            </Form.Field>
-
-            <div>
-              <Form.Submit
-                disabled={processing}
-                className="btn btn-primary w-24"
-              >
-                Save
-              </Form.Submit>
-            </div>
-          </fieldset>
-        </Form.Root>
+      <div className="flex flex-wrap justify-center gap-4 p-7">
+        <div className="flex justify-center">
+          <DeckViewsList views={views} />
+        </div>
+        <div className="flex justify-center">
+          <EditDeckForm deck={deck} />
+        </div>
       </div>
     </Authenticated>
   );

resources/js/Pages/Decks/Partials/CreateDeckForm.tsx

@@ -11,7 +11,7 @@ export default function CreateDeckForm() {
   const submit: FormEventHandler = (e) => {
     e.preventDefault();
 
-    post(route('deck.create'));
+    post(route('decks.create'));
   };
 
   return (

resources/js/Pages/Decks/Partials/DeckViewsList.tsx

@@ -0,0 +1,38 @@
+import { Form } from 'radix-ui';
+
+export default function DeckViewsList({
+  views,
+}: {
+  views: App.Domain.Dto.FeDeckView[];
+}) {
+  return (
+    <ul className="list border border-base-300 max-w-lg w-lg bg-base-200 rounded-box shadow-md p-2 m-4">
+      <li className="text-xs opacity-60">Deck views</li>
+      {views.map((view) => (
+        <li key={view.id} className="list-row flex items-center">
+          <div className="uppercase font-semibold">{view.name}</div>
+          <div className="flex-1"></div>
+          <button className="btn">Delete</button>
+          <button className="btn">Edit</button>
+        </li>
+      ))}
+      <li className="list-row flex items-center">
+        <Form.Root className="w-full flex gap-4 items-center">
+          <Form.Field className="w-full" name="newView">
+            <Form.Control asChild>
+              <input
+                type="text"
+                id="newView"
+                name="newView"
+                className="input w-full"
+                placeholder="Enter view name"
+              />
+            </Form.Control>
+          </Form.Field>
+          <div className="flex-1"></div>
+          <Form.Submit className="btn btn-primary">Add</Form.Submit>
+        </Form.Root>
+      </li>
+    </ul>
+  );
+}