Add logged calls pagination (#140)

* Store model on LoggedCall

* Allow mulitple page sizes

* Add logged calls pagination
This commit is contained in:
arcticfly
2023-08-11 19:00:09 -07:00
committed by GitHub
parent e1fcc8fb38
commit 228c547839
11 changed files with 184 additions and 109 deletions

View File

@@ -1,7 +1,7 @@
import { useRouter } from "next/router";
import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
import { api } from "~/utils/api";
import { NumberParam, useQueryParam, withDefault } from "use-query-params";
import { NumberParam, useQueryParams } from "use-query-params";
import { useAppStore } from "~/state/store";
export const useExperiments = () => {
@@ -46,10 +46,10 @@ export const useDataset = () => {
export const useDatasetEntries = () => {
const dataset = useDataset();
const [page] = usePage();
const { page, pageSize } = usePageParams();
return api.datasetEntries.list.useQuery(
{ datasetId: dataset.data?.id ?? "", page },
{ datasetId: dataset.data?.id ?? "", page, pageSize },
{ enabled: dataset.data?.id != null },
);
};
@@ -132,14 +132,23 @@ export const useElementDimensions = (): [RefObject<HTMLElement>, Dimensions | un
return [ref, dimensions];
};
export const usePage = () => useQueryParam("page", withDefault(NumberParam, 1));
export const usePageParams = () => {
const [pageParams, setPageParams] = useQueryParams({
page: NumberParam,
pageSize: NumberParam,
});
const { page, pageSize } = pageParams;
return { page: page || 1, pageSize: pageSize || 10, setPageParams };
};
export const useScenarios = () => {
const experiment = useExperiment();
const [page] = usePage();
const { page, pageSize } = usePageParams();
return api.scenarios.list.useQuery(
{ experimentId: experiment.data?.id ?? "", page },
{ experimentId: experiment.data?.id ?? "", page, pageSize },
{ enabled: experiment.data?.id != null },
);
};
@@ -166,3 +175,13 @@ export const useScenarioVars = () => {
{ enabled: experiment.data?.id != null },
);
};
export const useLoggedCalls = () => {
const selectedProjectId = useAppStore((state) => state.selectedProjectId);
const { page, pageSize } = usePageParams();
return api.dashboard.loggedCalls.useQuery(
{ projectId: selectedProjectId ?? "", page, pageSize },
{ enabled: !!selectedProjectId },
);
};