just cleaning up some stuff

The String() coercion on formData is probably the most important, in my haste I forgot that `formData.get(‘does not exist’)` returns `null` so you’d get `”null”` out of the coercion, so made them empty strings for the validation to work, or validated before the coercion in some cases

app/root.tsx

@@ -58,9 +58,12 @@ export default function App() {
                   className="inline-block h-8"
                 />
                 <br />
-                <span className="text-slate-500 text-xs uppercase font-bold">
+                <a
+                  href="https://www.youtube.com/watch?v=RTHzZVbTl6c&list=PLXoynULbYuED9b2k5LS44v9TQjfXifwNu&pp=gAQBiAQB"
+                  className="text-slate-500 text-xs uppercase font-bold"
+                >
                   Videos
-                </span>
+                </a>
               </a>
               <a
                 href="https://github.com/remix-run/example-trellix"

app/routes/board.$id/board.tsx

@@ -24,13 +24,15 @@ export function Board() {
   }
 
   // merge pending and existing columns
-  let optAddingColumns = useAddingColumns();
-  type Column = (typeof board.columns)[0] | (typeof optAddingColumns)[0];
+  let optAddingColumns = usePendingColumns();
+  type Column =
+    | (typeof board.columns)[number]
+    | (typeof optAddingColumns)[number];
   type ColumnWithItems = Column & { items: typeof board.items };
-  let columns = [...board.columns, ...optAddingColumns].reduce(
-    (map, column) => map.set(String(column.id), { ...column, items: [] }),
-    new Map<string, ColumnWithItems>(),
-  );
+  let columns = new Map<string, ColumnWithItems>();
+  for (let column of [...board.columns, ...optAddingColumns]) {
+    columns.set(column.id, { ...column, items: [] });
+  }
 
   // add items to their columns
   for (let item of itemsById.values()) {
@@ -40,6 +42,7 @@ export function Board() {
     column.items.push(item);
   }
 
+  // scroll right when new columns are added
   let scrollContainerRef = useRef<HTMLDivElement>(null);
   function scrollRight() {
     invariant(scrollContainerRef.current, "no scroll container");
@@ -85,14 +88,17 @@ export function Board() {
           editInitially={board.columns.length === 0}
         />
 
-        <div data-lol-shutup className="w-8 h-1 flex-shrink-0" />
+        {/* trolling you to add some extra margin to the right of the container with a whole dang div */}
+        <div data-lol className="w-8 h-1 flex-shrink-0" />
       </div>
     </div>
   );
 }
 
-function useAddingColumns() {
-  type CreateColumnFetcher = ReturnType<typeof useFetchers>[0] & {
+// These are the inflight columns that are being created, instead of managing
+// state ourselves, we just ask Remix for the state
+function usePendingColumns() {
+  type CreateColumnFetcher = ReturnType<typeof useFetchers>[number] & {
     formData: FormData;
   };
 
@@ -107,6 +113,8 @@ function useAddingColumns() {
     });
 }
 
+// These are the inflight items that are being created or moved, instead of
+// managing state ourselves, we just ask Remix for the state
 function usePendingItems() {
   type PendingItem = ReturnType<typeof useFetchers>[0] & {
     formData: FormData;

app/routes/board.$id/card.tsx

@@ -2,9 +2,10 @@ import invariant from "tiny-invariant";
 import { useFetcher, useSubmit } from "@remix-run/react";
 import { useState } from "react";
 
-import { ItemMutation, INTENTS, CONTENT_TYPES } from "./types";
 import { Icon } from "~/icons/icons";
 
+import { ItemMutation, INTENTS, CONTENT_TYPES } from "./types";
+
 interface CardProps {
   title: string;
   content: string | null;

app/routes/board.$id/column.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef } from "react";
 import { useSubmit } from "@remix-run/react";
+import invariant from "tiny-invariant";
 
 import { Icon } from "~/icons/icons";
 
@@ -9,7 +10,6 @@ import {
   CONTENT_TYPES,
   type RenderedItem,
 } from "./types";
-import invariant from "tiny-invariant";
 import { NewCard } from "./new-card";
 import { flushSync } from "react-dom";
 import { Card } from "./card";
@@ -70,6 +70,8 @@ export function Column({ name, columnId, items }: ColumnProps) {
           {
             method: "post",
             navigate: false,
+            // use the same fetcher instance for any mutations on this card so
+            // that interruptions cancel the earlier request and revalidation
             fetcherKey: `card:${transfer.id}`,
           },
         );

app/routes/board.$id/route.tsx

@@ -2,7 +2,7 @@ import { type MetaFunction } from "@remix-run/node";
 import invariant from "tiny-invariant";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 
-import { badRequest, notFound } from "~/http/bad-response";
+import { badRequest, notFound } from "~/http/bad-request";
 import { requireAuthCookie } from "~/auth/auth";
 
 import { parseItemMutation } from "./utils";
@@ -20,8 +20,8 @@ import { Board } from "./board";
 export async function loader({ request, params }: LoaderFunctionArgs) {
   await requireAuthCookie(request);
 
+  invariant(params.id, "Missing board ID");
   let id = Number(params.id);
-  invariant(id, "Missing board ID");
 
   let board = await getBoardData(id);
   if (!board) throw notFound();
@@ -46,12 +46,12 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
   switch (intent) {
     case INTENTS.deleteCard: {
-      let id = String(formData.get("itemId"));
+      let id = String(formData.get("itemId") || "");
       await deleteCard(id);
       break;
     }
     case INTENTS.updateBoardName: {
-      let name = String(formData.get("name"));
+      let name = String(formData.get("name") || "");
       invariant(name, "Missing name");
       await updateBoardName(boardId, name);
       break;
@@ -76,7 +76,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
       break;
     }
     default: {
-      throw new Error("Unknown intent");
+      throw badRequest(`Unknown intent: ${intent}`);
     }
   }
 

app/routes/home/route.tsx

@@ -2,6 +2,7 @@ import {
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   redirect,
+  broadcastDevReady,
 } from "@remix-run/node";
 import {
   Form,
@@ -14,7 +15,7 @@ import {
 import { requireAuthCookie } from "~/auth/auth";
 import { Button } from "~/components/button";
 import { Label, LabeledInput } from "~/components/input";
-import { badRequest } from "~/http/bad-response";
+import { badRequest } from "~/http/bad-request";
 
 import { getHomeData, createBoard, deleteBoard } from "./queries";
 import { INTENTS } from "../board.$id/types";
@@ -36,17 +37,21 @@ export async function action({ request }: ActionFunctionArgs) {
   let intent = String(formData.get("intent"));
   switch (intent) {
     case INTENTS.createBoard: {
-      let name = String(formData.get("name"));
-      let color = String(formData.get("color"));
+      let name = String(formData.get("name") || "");
+      let color = String(formData.get("color") || "");
       if (!name) throw badRequest("Bad request");
       let board = await createBoard(userId, name, color);
       return redirect(`/board/${board.id}`);
     }
     case INTENTS.deleteBoard: {
-      let boardId = Number(formData.get("boardId"));
-      await deleteBoard(boardId);
+      let boardId = formData.get("boardId");
+      if (!boardId) throw badRequest("Missing boardId");
+      await deleteBoard(Number(boardId));
       return { ok: true };
     }
+    default: {
+      throw badRequest(`Unknown intent: ${intent}`);
+    }
   }
 }
 

app/routes/login/route.tsx

@@ -16,8 +16,8 @@ export const meta = () => {
 
 export async function action({ request }: DataFunctionArgs) {
   let formData = await request.formData();
-  let email = String(formData.get("email"));
-  let password = String(formData.get("password"));
+  let email = String(formData.get("email") || "");
+  let password = String(formData.get("password") || "");
 
   let errors = validate(email, password);
   if (errors) {
@@ -32,7 +32,8 @@ export async function action({ request }: DataFunctionArgs) {
     );
   }
 
-  return setAuthOnResponse(redirect("/home"), userId);
+  let response = redirect("/home");
+  return setAuthOnResponse(response, userId);
 }
 
 export default function Signup() {

app/routes/signup/queries.ts

@@ -20,12 +20,7 @@ export async function createAccount(email: string, password: string) {
   return prisma.account.create({
     data: {
       email: email,
-      Password: {
-        create: {
-          hash: hash,
-          salt: salt,
-        },
-      },
+      Password: { create: { hash, salt } },
     },
   });
 }

app/routes/signup/route.tsx

@@ -17,8 +17,8 @@ export const meta = () => {
 export async function action({ request }: ActionFunctionArgs) {
   let formData = await request.formData();
 
-  let email = String(formData.get("email"));
-  let password = String(formData.get("password"));
+  let email = String(formData.get("email") || "");
+  let password = String(formData.get("password") || "");
 
   let errors = await validate(email, password);
   if (errors) {