From e9e576abd9d6c6030aa4bb290e869890831488ad Mon Sep 17 00:00:00 2001 From: yyamashita Date: Mon, 11 May 2026 00:06:52 +0900 Subject: Add lists feature (band recommendation lists with history) New lists, list_entries, list_revisions tables; full CRUD routes under /lists; nav link in root. Co-Authored-By: Claude Sonnet 4.6 --- app/routes/list-by-slug.tsx | 13 +++++ app/routes/list-by-uuid.tsx | 54 +++++++++++++++++ app/routes/list-edit.tsx | 137 ++++++++++++++++++++++++++++++++++++++++++++ app/routes/list-history.tsx | 48 ++++++++++++++++ app/routes/list-index.tsx | 36 ++++++++++++ app/routes/list-new.tsx | 133 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 421 insertions(+) create mode 100644 app/routes/list-by-slug.tsx create mode 100644 app/routes/list-by-uuid.tsx create mode 100644 app/routes/list-edit.tsx create mode 100644 app/routes/list-history.tsx create mode 100644 app/routes/list-index.tsx create mode 100644 app/routes/list-new.tsx (limited to 'app/routes') diff --git a/app/routes/list-by-slug.tsx b/app/routes/list-by-slug.tsx new file mode 100644 index 0000000..902c74e --- /dev/null +++ b/app/routes/list-by-slug.tsx @@ -0,0 +1,13 @@ +import { data, redirect } from "react-router"; +import type { LoaderFunctionArgs } from "react-router"; +import { getBandListBySlug } from "~/lib/db.server"; + +export async function loader({ params }: LoaderFunctionArgs) { + const list = getBandListBySlug(params.slug!); + if (!list) throw data("Not found", { status: 404 }); + return redirect(`/lists/of/${list.id}`); +} + +export default function ListBySlug() { + return null; +} diff --git a/app/routes/list-by-uuid.tsx b/app/routes/list-by-uuid.tsx new file mode 100644 index 0000000..f8c7380 --- /dev/null +++ b/app/routes/list-by-uuid.tsx @@ -0,0 +1,54 @@ +import { data, Link, useLoaderData } from "react-router"; +import type { LoaderFunctionArgs } from "react-router"; +import { getBandListById, getListEntries, getListRevisions } from "~/lib/db.server"; + +export async function loader({ params }: LoaderFunctionArgs) { + const list = getBandListById(params.uuid!); + if (!list) throw data("Not found", { status: 404 }); + const entries = getListEntries(list.id); + const revisions = getListRevisions(list.id); + return { list, entries, latest: revisions[0] ?? null }; +} + +export default function ListDetail() { + const { list, entries, latest } = useLoaderData(); + + return ( +
+
+
+

{list.title}

+ {list.description &&

{list.description}

} +
+
+ 履歴 + 編集 +
+
+ + {entries.length === 0 ? ( +

エントリがありません。

+ ) : ( +
    + {entries.map((entry) => ( +
  • +
    {entry.band_name}
    + {entry.note &&
    {entry.note}
    } +
    • + ))} +
+ )} + +
+
+

/lists/of/{list.id}

+

+ /lists/named/{list.slug} +

+ {latest && ( +

最終更新: {latest.created_at} — {latest.message}

+ )} +
+
+ ); +} diff --git a/app/routes/list-edit.tsx b/app/routes/list-edit.tsx new file mode 100644 index 0000000..5d47737 --- /dev/null +++ b/app/routes/list-edit.tsx @@ -0,0 +1,137 @@ +import { useState } from "react"; +import { data, Form, Link, redirect, useActionData, useLoaderData } from "react-router"; +import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router"; +import { + getBandListById, + getListEntries, + getIpAddress, + updateBandList, + type ListEntryInput, +} from "~/lib/db.server"; + +export async function loader({ params }: LoaderFunctionArgs) { + const list = getBandListById(params.uuid!); + if (!list) throw data("Not found", { status: 404 }); + const entries = getListEntries(list.id); + return { list, entries }; +} + +export async function action({ params, request }: ActionFunctionArgs) { + const list = getBandListById(params.uuid!); + if (!list) throw data("Not found", { status: 404 }); + + const fd = await request.formData(); + const title = (fd.get("title") as string).trim(); + const slug = (fd.get("slug") as string).trim(); + const description = (fd.get("description") as string).trim(); + const message = (fd.get("message") as string).trim(); + const entries: ListEntryInput[] = JSON.parse((fd.get("entries") as string) || "[]"); + + const errors: Record = {}; + if (!title) errors.title = "必須です"; + if (!slug) errors.slug = "必須です"; + if (!message) errors.message = "必須です"; + if (Object.keys(errors).length > 0) return { errors }; + + try { + updateBandList(list.id, { slug, title, description, entries, message, ip_address: getIpAddress(request) }); + } catch (e) { + if (e instanceof Error && e.message.includes("UNIQUE constraint failed: lists.slug")) { + return { errors: { slug: "このslugは既に使用されています" } }; + } + throw e; + } + return redirect(`/lists/of/${list.id}`); +} + +type EntryRow = { key: string; band_name: string; note: string }; + +export default function ListEdit() { + const { list, entries: initEntries } = useLoaderData(); + const actionData = useActionData(); + const errors = actionData?.errors ?? {}; + + const [title, setTitle] = useState(list.title); + const [slug, setSlug] = useState(list.slug); + const [description, setDescription] = useState(list.description); + const [entries, setEntries] = useState( + initEntries.map((e) => ({ key: crypto.randomUUID(), band_name: e.band_name, note: e.note })) + ); + + function addEntry() { + setEntries((prev) => [...prev, { key: crypto.randomUUID(), band_name: "", note: "" }]); + } + + function removeEntry(key: string) { + setEntries((prev) => prev.filter((e) => e.key !== key)); + } + + function updateEntry(key: string, field: "band_name" | "note", value: string) { + setEntries((prev) => prev.map((e) => e.key === key ? { ...e, [field]: value } : e)); + } + + return ( +
+
+ ← +

{list.title} — 編集

+
+ +
+ ({ band_name, note })))} /> + +
+ + setTitle(e.target.value)} /> + {errors.title &&

{errors.title}

} +
+ +
+ + setSlug(e.target.value)} className="mono" /> + {errors.slug &&

{errors.slug}

} +
+ +
+ + setDescription(e.target.value)} /> +
+ +
+ +
+ {entries.map((entry) => ( +
+ updateEntry(entry.key, "band_name", e.target.value)} + placeholder="バンド名" + /> + updateEntry(entry.key, "note", e.target.value)} + placeholder="メモ" + /> + +
+ ))} +
+ +
+ +
+ + + {errors.message &&

{errors.message}

} +
+ +
+ + キャンセル +
+
+
+ ); +} diff --git a/app/routes/list-history.tsx b/app/routes/list-history.tsx new file mode 100644 index 0000000..c47614b --- /dev/null +++ b/app/routes/list-history.tsx @@ -0,0 +1,48 @@ +import { data, Link, useLoaderData } from "react-router"; +import type { LoaderFunctionArgs } from "react-router"; +import { getBandListById, getListRevisions } from "~/lib/db.server"; + +export async function loader({ params }: LoaderFunctionArgs) { + const list = getBandListById(params.uuid!); + if (!list) throw data("Not found", { status: 404 }); + const revisions = getListRevisions(list.id); + return { list, revisions }; +} + +export default function ListHistory() { + const { list, revisions } = useLoaderData(); + return ( +
+
+ ← +

{list.title} — 編集履歴

+
+ + {revisions.length === 0 ? ( +

履歴がありません。

+ ) : ( +
    + {revisions.map((rev, i) => { + let snap: { title?: string; entries?: unknown[] } = {}; + try { snap = JSON.parse(rev.snapshot); } catch { /* ignore */ } + return ( +
  1. +
    +
    +

    {rev.message}

    +

    {rev.created_at} · {rev.ip_address}

    +
    + {i === 0 && 最新} +
    +
    +

    タイトル: {snap.title ?? "—"}

    +

    エントリ数: {snap.entries?.length ?? 0}件

    +
    +
    2. + ); + })} +
+ )} +
+ ); +} diff --git a/app/routes/list-index.tsx b/app/routes/list-index.tsx new file mode 100644 index 0000000..7995068 --- /dev/null +++ b/app/routes/list-index.tsx @@ -0,0 +1,36 @@ +import { Link, useLoaderData } from "react-router"; +import { listBandLists } from "~/lib/db.server"; + +export function loader() { + return { lists: listBandLists() }; +} + +export default function ListIndex() { + const { lists } = useLoaderData(); + return ( +
+
+

Lists

+ + List +
+ + {lists.length === 0 ? ( +

+ リストがまだありません。{" "} + 作成する +

+ ) : ( +
    + {lists.map((list) => ( +
  • + {list.title} + {list.description && ( + {list.description} + )} +
    • + ))} +
+ )} +
+ ); +} diff --git a/app/routes/list-new.tsx b/app/routes/list-new.tsx new file mode 100644 index 0000000..472f0d8 --- /dev/null +++ b/app/routes/list-new.tsx @@ -0,0 +1,133 @@ +import { useState } from "react"; +import { Form, Link, redirect, useActionData } from "react-router"; +import type { ActionFunctionArgs } from "react-router"; +import { createBandList, getIpAddress, type ListEntryInput } from "~/lib/db.server"; + +export async function action({ request }: ActionFunctionArgs) { + const fd = await request.formData(); + const title = (fd.get("title") as string).trim(); + const slug = (fd.get("slug") as string).trim(); + const description = (fd.get("description") as string).trim(); + const message = (fd.get("message") as string).trim(); + const entries: ListEntryInput[] = JSON.parse((fd.get("entries") as string) || "[]"); + + const errors: Record = {}; + if (!title) errors.title = "必須です"; + if (!slug) errors.slug = "必須です"; + if (!message) errors.message = "必須です"; + if (Object.keys(errors).length > 0) return { errors }; + + const id = crypto.randomUUID(); + try { + createBandList({ id, slug, title, description, entries, message, ip_address: getIpAddress(request) }); + } catch (e) { + if (e instanceof Error && e.message.includes("UNIQUE constraint failed: lists.slug")) { + return { errors: { slug: "このslugは既に使用されています" } }; + } + throw e; + } + return redirect(`/lists/of/${id}`); +} + +function toSlug(s: string) { + return s.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^\w぀-ヿ一-鿿＀-￯-]/g, "").replace(/^-+|-+$/g, ""); +} + +type EntryRow = { key: string; band_name: string; note: string }; + +export default function ListNew() { + const actionData = useActionData(); + const errors = actionData?.errors ?? {}; + + const [title, setTitle] = useState(""); + const [slug, setSlug] = useState(""); + const [slugManual, setSlugManual] = useState(false); + const [description, setDescription] = useState(""); + const [entries, setEntries] = useState([]); + + function addEntry() { + setEntries((prev) => [...prev, { key: crypto.randomUUID(), band_name: "", note: "" }]); + } + + function removeEntry(key: string) { + setEntries((prev) => prev.filter((e) => e.key !== key)); + } + + function updateEntry(key: string, field: "band_name" | "note", value: string) { + setEntries((prev) => prev.map((e) => e.key === key ? { ...e, [field]: value } : e)); + } + + return ( +
+
+ ← +

New List

+
+ +
+ ({ band_name, note })))} /> + +
+ + { setTitle(e.target.value); if (!slugManual) setSlug(toSlug(e.target.value)); }} + /> + {errors.title &&

{errors.title}

} +
+ +
+ + { setSlugManual(true); setSlug(e.target.value); }} + className="mono" + /> + {errors.slug &&

{errors.slug}

} +
+ +
+ + setDescription(e.target.value)} /> +
+ +
+ +
+ {entries.map((entry) => ( +
+ updateEntry(entry.key, "band_name", e.target.value)} + placeholder="バンド名" + /> + updateEntry(entry.key, "note", e.target.value)} + placeholder="メモ" + /> + +
+ ))} +
+ +
+ +
+ + + {errors.message &&

{errors.message}

} +
+ +
+ + キャンセル +
+
+
+ ); +} -- cgit v1.2.3