diff options
| -rw-r--r-- | app/root.tsx | 5 | ||||
| -rw-r--r-- | app/routes.ts | 2 | ||||
| -rw-r--r-- | app/routes/artist-index.tsx | 33 | ||||
| -rw-r--r-- | app/routes/band-index.tsx | 36 | ||||
| -rw-r--r-- | app/routes/home.tsx | 28 |
5 files changed, 76 insertions, 28 deletions
diff --git a/app/root.tsx b/app/root.tsx index 242ffe2..e30abe8 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -49,9 +49,8 @@ export default function App() { <nav> <div> <Link to="/" className="logo">whois.band</Link> - <Link to="/bands/new">+ Band</Link> - <Link to="/artists/new">+ Artist</Link> - <Link to="/lists">Lists</Link> + <Link to="/bands">Bands</Link> + <Link to="/artists">Artists</Link> </div> </nav> <Outlet /> diff --git a/app/routes.ts b/app/routes.ts index b02a70a..0a2c028 100644 --- a/app/routes.ts +++ b/app/routes.ts @@ -6,11 +6,13 @@ export default [ route("/api/artists", "routes/api-artists.tsx"), route("/api/export", "routes/api-export.tsx"), route("/api/import", "routes/api-import.tsx"), + route("/bands", "routes/band-index.tsx"), route("/bands/new", "routes/band-new.tsx"), route("/bands/of/:uuid", "routes/band-by-uuid.tsx"), route("/bands/named/:slug", "routes/band-by-slug.tsx"), route("/bands/of/:uuid/edit", "routes/band-edit.tsx"), route("/bands/of/:uuid/history", "routes/band-history.tsx"), + route("/artists", "routes/artist-index.tsx"), route("/artists/new", "routes/artist-new.tsx"), route("/artists/of/:uuid", "routes/artist-by-uuid.tsx"), route("/artists/named/:slug", "routes/artist-by-slug.tsx"), diff --git a/app/routes/artist-index.tsx b/app/routes/artist-index.tsx new file mode 100644 index 0000000..9981567 --- /dev/null +++ b/app/routes/artist-index.tsx @@ -0,0 +1,33 @@ +import { Link, useLoaderData } from "react-router"; +import { listArtists } from "~/lib/db.server"; + +export function loader() { + return { artists: listArtists() }; +} + +export default function ArtistIndex() { + const { artists } = useLoaderData<typeof loader>(); + return ( + <main> + <div className="page-header"> + <h1>Artists</h1> + <Link to="/artists/new">+ Artist</Link> + </div> + + {artists.length === 0 ? ( + <p className="muted"> + アーティストがまだありません。{" "} + <Link to="/artists/new">追加する</Link> + </p> + ) : ( + <ul className="band-list"> + {artists.map((artist) => ( + <li key={artist.id}> + <Link to={`/artists/of/${artist.id}`}>{artist.name}</Link> + </li> + ))} + </ul> + )} + </main> + ); +} diff --git a/app/routes/band-index.tsx b/app/routes/band-index.tsx new file mode 100644 index 0000000..0b47da5 --- /dev/null +++ b/app/routes/band-index.tsx @@ -0,0 +1,36 @@ +import { Link, useLoaderData } from "react-router"; +import { listBands } from "~/lib/db.server"; + +export function loader() { + return { bands: listBands() }; +} + +export default function BandIndex() { + const { bands } = useLoaderData<typeof loader>(); + return ( + <main> + <div className="page-header"> + <h1>Bands</h1> + <Link to="/bands/new">+ Band</Link> + </div> + + {bands.length === 0 ? ( + <p className="muted"> + バンドがまだありません。{" "} + <Link to="/bands/new">追加する</Link> + </p> + ) : ( + <ul className="band-list"> + {bands.map((band) => ( + <li key={band.id}> + <Link to={`/bands/of/${band.id}`}>{band.name}</Link> + {band.status === "hiatus" && ( + <span className="muted" style={{ fontSize: ".75rem" }}>活動休止</span> + )} + </li> + ))} + </ul> + )} + </main> + ); +} diff --git a/app/routes/home.tsx b/app/routes/home.tsx index ef6912d..9795ba8 100644 --- a/app/routes/home.tsx +++ b/app/routes/home.tsx @@ -1,31 +1,9 @@ -import { Link, useLoaderData } from "react-router"; -import { listBands } from "~/lib/db.server"; +import { redirect } from "react-router"; export function loader() { - return { bands: listBands() }; + return redirect("/bands"); } 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}> - <Link to={`/bands/of/${band.id}`}>{band.name}</Link> - {band.status === "hiatus" && ( - <span className="muted" style={{ fontSize: ".75rem" }}>活動休止</span> - )} - </li> - ))} - </ul> - )} - </main> - ); + return null; } |