mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
29 lines (28 loc) • 1.27 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { Box, LoadingOverlay } from "@mantine/core";
import { useViewQuery } from "./querys";
import DynamicTable from "../../components/dynamic-table";
import ErrorPage from "../../components/error-page";
import NotFoundLayout from "../../components/not-found-layout";
const RenderDetailView = ({ queryBuilder, rootConfig, requestParams, searchParams }) => {
const id = searchParams.get("id") ?? "";
const memoViewQuery = useMemo(() => queryBuilder?.view, [queryBuilder]);
const { data, isLoading, isFetching, isError, refetch } = useViewQuery({
rootConfig,
actionQuery: memoViewQuery,
id,
requestParams
});
const isDataLoading = useMemo(() => isLoading || isFetching, [isLoading, isFetching]);
if (!id)
return _jsx(NotFoundLayout, {});
if (isError) {
return (_jsx(ErrorPage, { errorMessage: "Something went wrong. Please try again.", onRetry: () => {
refetch();
} }));
}
return (_jsxs(Box, { className: "p-6", children: [_jsx(LoadingOverlay, { visible: isDataLoading }), _jsx(DynamicTable, { data: data })] }));
};
export default RenderDetailView;