PromptsPage.tsx•1.02 kB
import { useEffect } from "react";
import { usePreloadedQuery } from "react-relay";
import { useLoaderData } from "react-router";
import invariant from "tiny-invariant";
import { Flex } from "@phoenix/components";
import { PromptsFilterBar } from "@phoenix/pages/prompts/PromptsFilterBar";
import { PromptsFilterProvider } from "@phoenix/pages/prompts/PromptsFilterProvider";
import {
promptsLoaderGql,
PromptsLoaderType,
} from "@phoenix/pages/prompts/promptsLoader";
import { PromptsTable } from "./PromptsTable";
export function PromptsPage() {
const loaderData = useLoaderData<PromptsLoaderType>();
invariant(loaderData, "loaderData is required");
const data = usePreloadedQuery(promptsLoaderGql, loaderData);
useEffect(() => {
return () => {
loaderData.dispose();
};
}, [loaderData]);
return (
<PromptsFilterProvider>
<Flex direction="column" height="100%">
<PromptsFilterBar />
<PromptsTable query={data} />
</Flex>
</PromptsFilterProvider>
);
}