just some light refactoring this fine friday

app/components/button.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+
+export let Button = forwardRef<
+ HTMLButtonElement,
+ React.ButtonHTMLAttributes<HTMLButtonElement>
+>((props, ref) => {
+ return (
+ <button
+ {...props}
+ ref={ref}
+ className="flex w-full justify-center rounded-md bg-brand-blue px-1 py-1 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-blue"
+ />
+ );
+});

app/components/input.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, useId } from "react";
+
+export let Input = forwardRef<
+ HTMLInputElement,
+ React.InputHTMLAttributes<HTMLInputElement>
+>((props, ref) => {
+ return (
+ <input
+ {...props}
+ ref={ref}
+ className="form-input block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-blue sm:text-sm sm:leading-6"
+ />
+ );
+});
+
+export let Label = forwardRef<
+ HTMLLabelElement,
+ React.LabelHTMLAttributes<HTMLLabelElement>
+>((props, ref) => {
+ return (
+ <label
+ {...props}
+ ref={ref}
+ className="block text-sm font-medium leading-6 text-gray-900"
+ />
+ );
+});
+
+export let LabeledInput = forwardRef<
+ HTMLInputElement,
+ React.InputHTMLAttributes<HTMLInputElement> & {
+ label: React.ReactNode;
+ id?: string;
+ }
+>(({ id, label, ...props }, ref) => {
+ let uid = useId();
+ id = id ?? uid;
+ return (
+ <>
+ <Label htmlFor={id}>{label}</Label>
+ <div className="mt-2">
+ <Input {...props} ref={ref} id={id} />
+ </div>
+ </>
+ );
+});

app/icons/icons.tsx

@@ -26,7 +26,7 @@ export function Icon({
 
 export function LoginIcon() {
  return (
- <svg className="inline self-center w-8 h-8 text-white">
+ <svg className="inline self-center w-8 h-8 text-white transform scale-x-[-1]">
  <use href={`${iconsHref}#login`} />
  </svg>
  );

app/root.tsx

@@ -9,10 +9,12 @@ import {
  type ShouldRevalidateFunctionArgs,
  Link,
 } from "@remix-run/react";
-import "./styles.css";
+import { redirect, type DataFunctionArgs } from "@remix-run/node";
+
 import { LoginIcon, LogoutIcon } from "./icons/icons";
 import { getAuthFromRequest } from "./auth/auth";
-import { redirect, type DataFunctionArgs } from "@remix-run/node";
+
+import "./styles.css";
 
 export async function loader({ request }: DataFunctionArgs) {
  let auth = await getAuthFromRequest(request);

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

@@ -0,0 +1,113 @@
+import { useRef } from "react";
+import invariant from "tiny-invariant";
+import { useFetchers, useLoaderData } from "@remix-run/react";
+
+import { type loader } from "./server";
+import { INTENTS, type RenderedItem } from "./types";
+import { Column } from "./column";
+import { NewColumn } from "./new-column";
+
+export function Board() {
+ let { board } = useLoaderData<typeof loader>();
+
+ let itemsById = new Map(board.items.map((item) => [item.id, item]));
+ let pendingItems = usePendingItems();
+
+ // merge pending items and existing items
+ for (let pendingItem of pendingItems) {
+ let item = itemsById.get(pendingItem.id);
+ let merged = item
+ ? { ...item, ...pendingItem }
+ : { ...pendingItem, boardId: board.id };
+ itemsById.set(pendingItem.id, merged);
+ }
+
+ // merge pending and existing columns
+ let optAddingColumns = useAddingColumns();
+ type Column = (typeof board.columns)[0] | (typeof optAddingColumns)[0];
+ 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>(),
+ );
+
+ // add items to their columns
+ for (let item of itemsById.values()) {
+ let columnId = item.columnId;
+ let column = columns.get(columnId);
+ invariant(column, "missing column");
+ column.items.push(item);
+ }
+
+ let scrollContainerRef = useRef<HTMLDivElement>(null);
+ function scrollRight() {
+ invariant(scrollContainerRef.current);
+ scrollContainerRef.current.scrollLeft =
+ scrollContainerRef.current.scrollWidth;
+ }
+
+ return (
+ <div
+ className="h-full min-h-0 flex flex-col overflow-x-scroll"
+ ref={scrollContainerRef}
+ style={{ backgroundColor: board.color }}
+ >
+ <h1 className="px-8 my-4 text-2xl font-medium">{board.name}</h1>
+
+ <div className="flex flex-grow min-h-0 h-full items-start gap-4 px-8 pb-4">
+ {[...columns.values()].map((col) => {
+ return (
+ <Column
+ key={col.id}
+ name={col.name}
+ columnId={col.id}
+ items={col.items}
+ />
+ );
+ })}
+
+ <NewColumn
+ boardId={board.id}
+ onAdd={scrollRight}
+ editInitially={board.columns.length === 0}
+ />
+
+ <div data-lol-shutup className="w-8 h-1 flex-shrink-0" />
+ </div>
+ </div>
+ );
+}
+function useAddingColumns() {
+ type CreateColumnFetcher = ReturnType<typeof useFetchers>[0] & {
+ formData: FormData;
+ };
+
+ return useFetchers()
+ .filter((fetcher): fetcher is CreateColumnFetcher => {
+ return fetcher.formData?.get("intent") === INTENTS.createColumn;
+ })
+ .map((fetcher) => {
+ let name = String(fetcher.formData.get("name"));
+ let id = String(fetcher.formData.get("id"));
+ return { name, id };
+ });
+}
+function usePendingItems() {
+ type PendingItem = ReturnType<typeof useFetchers>[0] & {
+ formData: FormData;
+ };
+ return useFetchers()
+ .filter((fetcher): fetcher is PendingItem => {
+ if (!fetcher.formData) return false;
+ let intent = fetcher.formData.get("intent");
+ return intent === INTENTS.createItem || intent === INTENTS.moveItem;
+ })
+ .map((fetcher) => {
+ let columnId = String(fetcher.formData.get("columnId"));
+ let title = String(fetcher.formData.get("title"));
+ let id = String(fetcher.formData.get("id"));
+ let order = Number(fetcher.formData.get("order"));
+ let item: RenderedItem = { title, id, order, columnId, content: null };
+ return item;
+ });
+}

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

@@ -1,9 +1,9 @@
+import { flushSync } from "react-dom";
+import invariant from "tiny-invariant";
 import { useSubmit } from "@remix-run/react";
 import { useState } from "react";
-import { INTENTS, ItemMutation } from "./mutations";
-import invariant from "tiny-invariant";
-import { CONTENT_TYPES } from "./CONTENT_TYPES";
-import { flushSync } from "react-dom";
+
+import { ItemMutation, INTENTS, CONTENT_TYPES } from "./types";
 
 interface CardProps {
  title: string;

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

@@ -1,15 +1,18 @@
 import { useState, useEffect, useRef } from "react";
 import { useFetcher, useSubmit } from "@remix-run/react";
 
-import { Icon } from "../../icons/icons";
-
-import { INTENTS, ItemMutation } from "./mutations";
+import { Icon } from "~/icons/icons";
+
+import {
+ ItemMutation,
+ INTENTS,
+ CONTENT_TYPES,
+ type RenderedItem,
+} from "./types";
 import invariant from "tiny-invariant";
 import { NewCard } from "./new-card";
 import { flushSync } from "react-dom";
-import { CONTENT_TYPES } from "./CONTENT_TYPES";
 import { Card } from "./card";
-import type { RenderedItem } from "./types";
 
 interface ColumnProps {
  name: string;

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

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+
+export let SaveButton = forwardRef<
+ HTMLButtonElement,
+ React.ButtonHTMLAttributes<HTMLButtonElement>
+>((props, ref) => {
+ return (
+ <button
+ ref={ref}
+ {...props}
+ className="text-sm rounded-lg text-left p-2 font-medium text-white bg-brand-blue"
+ />
+ );
+});
+
+export let CancelButton = forwardRef<
+ HTMLButtonElement,
+ React.ButtonHTMLAttributes<HTMLButtonElement>
+>((props, ref) => {
+ return (
+ <button
+ ref={ref}
+ {...props}
+ className="text-sm rounded-lg text-left p-2 font-medium hover:bg-slate-200 focus:bg-slate-200"
+ />
+ );
+});

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

@@ -1,9 +1,9 @@
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import invariant from "tiny-invariant";
 import { Form, useSubmit } from "@remix-run/react";
-import { INTENTS } from "./mutations";
 
-import { ItemMutationFields } from "./mutations";
+import { INTENTS, ItemMutationFields } from "./types";
+import { SaveButton, CancelButton } from "./components";
 
 export function NewCard({
  columnId,
@@ -82,20 +82,8 @@ export function NewCard({
  }}
  />
  <div className="flex justify-between">
- <button
- ref={buttonRef}
- type="submit"
- className="text-sm rounded-lg text-left p-2 font-medium text-white bg-brand-blue"
- >
- Save Card
- </button>
- <button
- type="button"
- onClick={onComplete}
- className="text-sm rounded-lg text-left p-2 font-medium hover:bg-slate-200 focus:bg-slate-200"
- >
- Cancel
- </button>
+ <SaveButton ref={buttonRef}>Save Card</SaveButton>
+ <CancelButton onClick={onComplete}>Cancel</CancelButton>
  </div>
  </Form>
  );