diff --git a/src/components/JobList/index.tsx b/src/components/JobList/index.tsx index 089f5cb..628e7c6 100644 --- a/src/components/JobList/index.tsx +++ b/src/components/JobList/index.tsx @@ -225,14 +225,14 @@ type JobListProps = { } export default function JobList({ sortMode }: JobListProps) { - const run: Run = useData(); + const data_: Run = useData(); const options = useDefaultTableOptions(); const data = useMemo(() => { - return (run?.jobs || []).filter(item => { + return (data_?.jobs || []).filter(item => { item.id = String(item.job_id); return !! item.id; }); - }, [run, sortMode]); + }, [data_, sortMode]); const table = useMaterialReactTable({ ...options, columns, diff --git a/src/components/RunList/index.tsx b/src/components/RunList/index.tsx index 5175c04..7a7c997 100644 --- a/src/components/RunList/index.tsx +++ b/src/components/RunList/index.tsx @@ -16,7 +16,11 @@ import { import { type Theme } from "@mui/material/styles"; import { parse } from "date-fns"; -import { formatDate, formatDay, formatDuration } from "../../lib/utils"; +import { + formatDate, + formatDuration, + getUrl, +} from "../../lib/utils"; import IconLink from "../../components/IconLink"; import type { Run, @@ -27,15 +31,12 @@ import { RunResultKeys, RunStatuses, } from "../../lib/paddles.d"; +import { + DEFAULT_PAGE_SIZE +} from "#src/lib/paddles"; import useDefaultTableOptions from "../../lib/table"; -const DEFAULT_PAGE_SIZE = 25; -const NON_FILTER_PARAMS = [ - "page", - "pageSize", -]; - const _columns: MRT_ColumnDef[] = [ { accessorKey: "name", @@ -191,22 +192,6 @@ type RunListProps = { tableOptions?: Partial>; } -function getUrl(path: string, filters: MRT_ColumnFiltersState, pagination: MRT_PaginationState) { - const newUrl = new URL(path, window.location.origin); - filters.forEach(item => { - if ( ! item.id ) return; - if ( item.value instanceof Function ) return; - if ( item.value instanceof Date ) { - newUrl.searchParams.set("date", formatDay(item.value)); - } else { - newUrl.searchParams.set(String(item.id), String(item.value)); - } - }); - if ( pagination.pageIndex ) newUrl.searchParams.set("page", String(pagination.pageIndex)); - if ( pagination.pageSize != DEFAULT_PAGE_SIZE ) newUrl.searchParams.set("pageSize", String(pagination.pageSize)); - return newUrl; -} - export default function RunList(props: RunListProps) { const context = usePageContext(); const { params, tableOptions } = props; @@ -215,7 +200,7 @@ export default function RunList(props: RunListProps) { const columnFilters: MRT_ColumnFiltersState = []; Object.entries(debouncedParams).forEach(param => { const [id, value] = param; - if ( NON_FILTER_PARAMS.includes(id) ) return; + if ( ["page", "pageSize"].includes(id) ) return; if ( id === "date" && !!value ) { columnFilters.push({ id: "scheduled", diff --git a/src/lib/paddles.ts b/src/lib/paddles.ts index 4646f54..a219a2d 100644 --- a/src/lib/paddles.ts +++ b/src/lib/paddles.ts @@ -13,6 +13,9 @@ import type { const PADDLES_SERVER = import.meta.env.VITE_PADDLES_SERVER || "https://paddles.front.sepia.ceph.com"; +// for queries which mention 'page', use this default page size if another is not specified. +const DEFAULT_PAGE_SIZE = 25; + async function queryFn (params: QueryOptions) { const queryKey = params.queryKey as [string, { url: string}]; return axios.get(queryKey[1].url).then((resp) => resp.data); @@ -42,6 +45,9 @@ function getURL(endpoint: string, params?: Record) { url.pathname += `/${key}/${value}/`; } }); + if ( ! url.searchParams.get("pageSize") ) { + url.searchParams.set("count", String(DEFAULT_PAGE_SIZE)); + }; return url; } @@ -232,6 +238,7 @@ function useStatuses() { } export { + DEFAULT_PAGE_SIZE, getURL, queryFn, useBranches,