app/routes/band-history.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

import { data, Link, useLoaderData } from "react-router";
import type { LoaderFunctionArgs } from "react-router";
import { getBandById, getBandRevisions } from "~/lib/db.server";

export async function loader({ params }: LoaderFunctionArgs) {
  const band = getBandById(params.uuid!);
  if (!band) throw data("Not found", { status: 404 });
  const revisions = getBandRevisions(band.id);
  return { band, revisions };
}

export default function BandHistory() {
  const { band, revisions } = useLoaderData<typeof loader>();
  return (
    <main className="max-w-3xl mx-auto px-4 py-8">
      <div className="flex items-center gap-3 mb-6">
        <Link
          to={`/bands/of/${band.id}`}
          className="text-gray-400 hover:text-gray-200 transition-colors"
        >
          ←
        </Link>
        <h1 className="text-xl font-semibold">{band.name} — 編集履歴</h1>
      </div>

      {revisions.length === 0 ? (
        <p className="text-gray-400">履歴がありません。</p>
      ) : (
        <ol className="space-y-4">
          {revisions.map((rev, i) => {
            let snap: { name?: string; area?: string; links?: unknown[]; artists?: unknown[] } = {};
            try { snap = JSON.parse(rev.snapshot); } catch { /* ignore */ }
            return (
              <li key={rev.id} className="bg-gray-900 rounded-lg p-4">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-gray-100 truncate">{rev.message}</p>
                    <p className="text-xs text-gray-500 mt-1">
                      {rev.created_at} · {rev.ip_address}
                    </p>
                  </div>
                  {i === 0 && (
                    <span className="text-xs text-blue-400 shrink-0">最新</span>
                  )}
                </div>
                <div className="mt-3 text-xs text-gray-400 space-y-0.5">
                  <p>名前: {snap.name ?? "—"}</p>
                  {snap.area && <p>拠点: {snap.area}</p>}
                  <p>
                    リンク: {snap.links?.length ?? 0}件 / メンバー:{" "}
                    {snap.artists?.length ?? 0}人
                  </p>
                </div>
              </li>
            );
          })}
        </ol>
      )}
    </main>
  );
}