app/routes/admin.posts.$slug.history.tsx

Functions

Imports

It imports app/components/admin/revision-list.tsx, app/components/admin/shell-parts.tsx, app/lib/content/slug.mjs, app/lib/context.ts, app/lib/editor/github.server.ts, app/lib/timing.ts. No module of this repo imports it.

Source

1import { Fragment } from "react";
2import { Link, data } from "react-router";
3
4import { timed, timedLoader } from "~/lib/timing";
5
6import { Empty } from "capsomer/react/empty";
7import { Panel } from "capsomer/react/panel";
8import { Pill, Status } from "capsomer/react/status";
9import { Row, RowList } from "capsomer/react/row-list";
10
11import { PageHead } from "capsomer/react/page-head";
12import { crumbLink } from "~/components/admin/shell-parts";
13import { DiffBlock } from "~/components/admin/revision-list";
14import { getEnv } from "~/lib/context";
15import {
16  getCommitPatch,
17  listCommitsForPath,
18  readFile,
19} from "~/lib/editor/github.server";
20import { postPath } from "~/lib/content/slug.mjs";
21import type { Route } from "./+types/admin.posts.$slug.history";
22
23export function meta({ params }: Route.MetaArgs) {
24  return [
25    { title: `History: ${params.slug} · Admin` },
26    { name: "robots", content: "noindex" },
27  ];
28}
29
30export async function loader({ params, request, context }: Route.LoaderArgs) {
31  const env = getEnv(context);
32  const path = postPath(params.slug);
33
34  return timedLoader(context, async (timings) => {
35
36    // The read is the 404: the commits endpoint answers a missing or deleted path with commits or an
37    // empty list, never a not-found.
38    const file = await timed(timings, "gh_read_file", () => readFile(env, path));
39    if (!file) throw data("Not found", { status: 404 });
40
41    const commits = await timed(timings, "gh_commits", () => listCommitsForPath(env, path));
42
43    const selected = new URL(request.url).searchParams.get("commit");
44    const patch =
45      selected && commits.some((commit) => commit.sha === selected)
46        ? await timed(timings, "gh_patch", () => getCommitPatch(env, selected, path))
47        : null;
48
49    const payload = {
50      slug: params.slug,
51      commits,
52      selected,
53      patch: patch?.patch ?? null,
54    };
55
56    return data(payload);
57  });
58}
59
60export default function PostHistory({ loaderData }: Route.ComponentProps) {
61  const { slug, commits, selected, patch } = loaderData;
62
63  return (
64    <div className="app-page">
65      <PageHead
66        renderLink={crumbLink}
67        crumbs={[
68          { label: "Posts", href: "/admin/posts" },
69          { label: slug, href: `/admin/posts/${slug}/edit` },
70          { label: "History" },
71        ]}
72        title={`History: ${slug}`}
73        lead="Every commit that touched this post. Restoring happens in the editor's drawer, where a revision loads as unsaved changes."
74        actions={
75          <Link to={`/admin/posts/${slug}/edit`} className="cap-btn">
76            Back to editor
77          </Link>
78        }
79      />
80
81      {commits.length === 0 ? (
82        <Empty kind="nothing-yet">No commits found for this post.</Empty>
83      ) : (
84        <Panel title="Commits" count={commits.length} flush>
85          <RowList label="Commits">
86            {commits.map((commit, index) => (
87              <Fragment key={commit.sha}>
88                <Row
89                  title={commit.message}
90                  status={<Pill variant="outline">{commit.sha.slice(0, 7)}</Pill>}
91                  meta={
92                    <span>
93                      {commit.author}
94                      {" · "}
95                      {/* UTC, so the server render and hydration agree on which day a commit landed. */}
96                      {new Date(commit.date).toLocaleString("en-US", { timeZone: "UTC" })}
97                    </span>
98                  }
99                  detail={index === 0 ? <Status tone="ok">current</Status> : undefined}
100                  actions={
101                    <Link
102                      className="cap-btn"
103                      data-size="sm"
104                      to={
105                        selected === commit.sha
106                          ? `/admin/posts/${slug}/history`
107                          : `/admin/posts/${slug}/history?commit=${commit.sha}`
108                      }
109                    >
110                      {selected === commit.sha ? "Hide diff" : "View diff"}
111                    </Link>
112                  }
113                />
114                {selected === commit.sha ? (
115                  <li>
116                    {patch ? (
117                      <DiffBlock patch={patch} label={`Diff for ${commit.sha.slice(0, 7)}`} />
118                    ) : (
119                      <p className="cap-muted">No diff recorded for this commit.</p>
120                    )}
121                  </li>
122                ) : null}
123              </Fragment>
124            ))}
125          </RowList>
126        </Panel>
127      )}
128    </div>
129  );
130}