brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

update query wait to use error message if one is available

Browse Source
This commit is contained in:
Brandon Egger
2023-08-29 10:48:11 -05:00
parent 8895fc31b4
commit 562ff8d2a6
3 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/LoadingWrapper.tsx
View File

@ -1,31 +1,38 @@
import { type UseTRPCQueryResult } from "@trpc/react-query/shared";
import { LoadingBarChart } from "./LoadingBarChart";
import { ErrorNotice } from "./notice";
import { type TRPCClientErrorLike } from "@trpc/client";
import { type TRPCErrorShape } from "@trpc/server/rpc";
import { type AnyProcedure, type AnyRouter } from "@trpc/server";
/**
* Generic query wrapper which handles the states of a query
* (loading, error, etc.). Will hydrate child with query.data
*
*/
export function QueryWaitWrapper<TData, TError>({
export function QueryWaitWrapper<
TData,
TRouterOrProcedure extends AnyProcedure | AnyRouter | TRPCErrorShape<number>
>({
query,
Render,
}: {
query: UseTRPCQueryResult<TData, TError>;
query: UseTRPCQueryResult<TData, TRPCClientErrorLike<TRouterOrProcedure>>;
Render: (data: TData) => JSX.Element;
}) {
if (query.isLoading) {
return <LoadingBarChart width={200} height={200} />;
}
console.log(query.data);
if (!query.data || query.isError) {
return (
<div className="my-10 sm:my-16 md:my-28">
<ErrorNotice
icon
header="Unable to retrieve page data. Please try again."
header={
query.error?.message ??
"Unable to retrieve page data. Please try again."
}
body="If this issue persists, please contact a site administrator"
/>
</div>