62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { Link, useNavigate } from "react-router-dom";
|
|
|
|
import {
|
|
AsyncSurface,
|
|
Button,
|
|
CollectionPage,
|
|
} from "../../../presentation/design-system/index.ts";
|
|
import { useReferenceFailureAction } from "./use-reference-failure-action.ts";
|
|
import { useReferenceFeature } from "./use-reference-feature.ts";
|
|
|
|
export default function ReferenceResourcePage() {
|
|
const navigate = useNavigate();
|
|
const { filters, query } = useReferenceFeature();
|
|
const failureAction = useReferenceFailureAction(query.state.failure);
|
|
|
|
return (
|
|
<CollectionPage
|
|
heading={{
|
|
eyebrow: "제거 가능한 수직 슬라이스",
|
|
title: "Reference feature",
|
|
description:
|
|
"URL codec, application input, HTTP/schema/mapper와 query 상태를 한 경로로 검증합니다.",
|
|
}}
|
|
actions={[
|
|
{
|
|
kind: "button",
|
|
label: "새 항목 만들기",
|
|
onAction: () => navigate("/examples/reference-resources/new"),
|
|
},
|
|
]}
|
|
activeFilters={
|
|
<p data-testid="reference-filter">
|
|
limit {filters.limit}
|
|
{filters.tags?.length ? ` · tags ${filters.tags.join(", ")}` : ""}
|
|
</p>
|
|
}
|
|
toolbar={<Button onClick={() => void query.retry()}>새로고침</Button>}
|
|
resultCount={
|
|
query.data ? `총 ${query.data.length}개 항목` : "결과 확인 중"
|
|
}
|
|
>
|
|
<AsyncSurface
|
|
state={query.state}
|
|
onAction={failureAction}
|
|
onRetry={query.retry}
|
|
>
|
|
<ul aria-label="Reference resources">
|
|
{(query.data ?? []).map((resource) => (
|
|
<li key={resource.resourceId}>
|
|
<Link
|
|
to={`/examples/reference-resources/${encodeURIComponent(resource.resourceId)}`}
|
|
>
|
|
{resource.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</AsyncSurface>
|
|
</CollectionPage>
|
|
);
|
|
}
|