app/routes/home.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

import { Link, useLoaderData } from "react-router";
import { listBands } from "~/lib/db.server";

export function loader() {
  return { bands: listBands() };
}

const STATUS_LABEL: Record<string, string> = {
  active: "活動中",
  hiatus: "活動休止",
  disbanded: "解散",
};

export default function Home() {
  const { bands } = useLoaderData<typeof loader>();
  return (
    <main>
      {bands.length === 0 ? (
        <p className="muted">
          バンドがまだありません。{" "}
          <Link to="/bands/new">追加する</Link>
        </p>
      ) : (
        <ul className="band-list">
          {bands.map((band) => (
            <li key={band.id}>
              <div className="name-col">
                <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
                {band.description && (
                  <p className="desc">{band.description}</p>
                )}
              </div>
              <div className="info">
                {band.area && <span>{band.area}</span>}
                <span>{STATUS_LABEL[band.status] ?? band.status}</span>
              </div>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}