app/routes/list-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

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<typeof loader>();
  return (
    <main>
      <div className="page-header">
        <Link to={`/lists/of/${list.id}`} className="back">←</Link>
        <h1>{list.title} — 編集履歴</h1>
      </div>

      {revisions.length === 0 ? (
        <p className="muted">履歴がありません。</p>
      ) : (
        <ol className="rev-list">
          {revisions.map((rev, i) => {
            let snap: { title?: string; entries?: unknown[] } = {};
            try { snap = JSON.parse(rev.snapshot); } catch { /* ignore */ }
            return (
              <li key={rev.id} className="rev">
                <div className="rev-header">
                  <div className="rev-main">
                    <p className="rev-message">{rev.message}</p>
                    <p className="rev-time">{rev.created_at} · {rev.ip_address}</p>
                  </div>
                  {i === 0 && <span className="rev-latest">最新</span>}
                </div>
                <div className="rev-snap">
                  <p>タイトル: {snap.title ?? "—"}</p>
                  <p>エントリ数: {snap.entries?.length ?? 0}件</p>
                </div>
              </li>
            );
          })}
        </ol>
      )}
    </main>
  );
}