BinderPage.tsx (1756B)
1 import { getBinder, getBinderCards } from "../../api/hooks/binders.hook"; 2 import PageableQueryDataTable from "../../components/table/PageableQueryDataTable"; 3 import { ColumnDef, RowDef } from "../../components/table/ColumnDef"; 4 import { useParams } from "react-router"; 5 import { BinderCardDTO } from "../../api/types/BinderCardDTO"; 6 import Breadcrumb from "react-bootstrap/Breadcrumb"; 7 import { BinderLink, BindersLink } from "../../components/navigation/Links"; 8 9 type Params = { 10 id: string 11 }; 12 13 const rows: RowDef<BinderCardDTO> = { 14 key: (b: BinderCardDTO) => b.card.id 15 } 16 17 const columns: ColumnDef<BinderCardDTO>[] = [ 18 { 19 key: "name", 20 header: "Name", 21 render: (b: BinderCardDTO) => b.card.oracleCard.name 22 }, 23 { 24 key: "set", 25 header: "Set", 26 render: (b: BinderCardDTO) => b.card.set.code.toUpperCase() 27 }, 28 { 29 key: "finish", 30 header: "Finish", 31 render: (b: BinderCardDTO) => b.card.finish 32 }, 33 { 34 key: "collectorNumber", 35 header: "Collector Number", 36 render: (b: BinderCardDTO) => b.card.collectorNumber 37 }, 38 { 39 key: "quantity", 40 header: "Qty", 41 render: (b: BinderCardDTO) => b.quantity 42 } 43 ] 44 45 export default function BinderPage() { 46 const params: Readonly<Partial<Params>> = useParams<Params>(); 47 if (params.id === undefined) 48 throw new Error("Binder id not present"); 49 50 const binderId = params.id; 51 52 const { data: binder } = getBinder(binderId); 53 if (binder == null) 54 return null; 55 56 return ( 57 <> 58 <Breadcrumb> 59 <Breadcrumb.Item linkAs="span"><BindersLink /></Breadcrumb.Item> 60 <Breadcrumb.Item linkAs="span" active><BinderLink binder={binder} /></Breadcrumb.Item> 61 </Breadcrumb> 62 63 <PageableQueryDataTable 64 query={(pageable) => getBinderCards(binderId, pageable)} 65 columns={columns} 66 rows={rows} 67 /> 68 </> 69 ); 70 }