updated admin to use swr hooks instead of react-query

app/src/ui/routes/data/data.$entity.index.tsx

@@ -1,12 +1,12 @@
 import { Type } from "core/utils";
 import { querySchema } from "data";
 import { TbDots } from "react-icons/tb";
+import { useApiQuery } from "ui/client";
 import { useBkndData } from "ui/client/schema/data/use-bknd-data";
 import { Button } from "ui/components/buttons/Button";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { Message } from "ui/components/display/Message";
 import { Dropdown } from "ui/components/overlay/Dropdown";
-import { EntitiesContainer } from "ui/container";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import { useSearch } from "ui/hooks/use-search";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
@@ -25,19 +25,33 @@ const searchSchema = Type.Composite(
    { additionalProperties: false }
 );
 
+const PER_PAGE_OPTIONS = [5, 10, 25];
+
 export function DataEntityList({ params }) {
-   const { $data, relations } = useBkndData();
-   const entity = $data.entity(params.entity as string);
+   const { $data } = useBkndData();
+   const entity = $data.entity(params.entity as string)!;
+   useBrowserTitle(["Data", entity?.label ?? params.entity]);
    const [navigate] = useNavigate();
    const search = useSearch(searchSchema, {
       select: entity?.getSelect(undefined, "table") ?? [],
       sort: entity?.getDefaultSort()
    });
-   console.log("search", search.value);
-   useBrowserTitle(["Data", entity?.label ?? params.entity]);
-   const PER_PAGE_OPTIONS = [5, 10, 25];
 
-   //console.log("search", search.value);
+   const $q = useApiQuery(
+      (api) =>
+         api.data.readMany(entity.name, {
+            select: search.value.select,
+            limit: search.value.perPage,
+            offset: (search.value.page - 1) * search.value.perPage,
+            sort: search.value.sort
+         }),
+      {
+         revalidateOnFocus: true,
+         keepPreviousData: true
+      }
+   );
+   const data = $q.data?.data;
+   const meta = $q.data?.body.meta;
 
    function handleClickRow(row: Record<string, any>) {
       if (entity) navigate(routes.data.entity.edit(entity.name, row.id));
@@ -65,6 +79,8 @@ export function DataEntityList({ params }) {
       return <Message.NotFound description={`Entity "${params.entity}" doesn't exist.`} />;
    }
 
+   const isUpdating = $q.isLoading && $q.isValidating;
+
    return (
       <>
          <AppShell.SectionHeader
@@ -103,45 +119,25 @@ export function DataEntityList({ params }) {
                   <SearchInput placeholder={`Filter ${entity.label}`} />
                </div>*/}
 
-               <EntitiesContainer
-                  entity={entity.name}
-                  query={{
-                     select: search.value.select,
-                     limit: search.value.perPage,
-                     offset: (search.value.page - 1) * search.value.perPage,
-                     sort: search.value.sort
-                  }}
+               <div
+                  data-updating={isUpdating ? 1 : undefined}
+                  className="data-[updating]:opacity-50 transition-opacity pb-10"
                >
-                  {(params) => {
-                     if (params.status.fetch.isLoading) {
-                        return null;
-                     }
-
-                     const isUpdating = params.status.fetch.isUpdating;
-
-                     return (
-                        <div
-                           data-updating={isUpdating ? 1 : undefined}
-                           className="data-[updating]:opacity-50 transition-opacity pb-10"
-                        >
-                           <EntityTable2
-                              data={params.data ?? []}
-                              entity={entity}
-                              select={search.value.select}
-                              onClickRow={handleClickRow}
-                              page={search.value.page}
-                              sort={search.value.sort}
-                              onClickSort={handleSortClick}
-                              perPage={search.value.perPage}
-                              perPageOptions={PER_PAGE_OPTIONS}
-                              total={params.meta?.count}
-                              onClickPage={handleClickPage}
-                              onClickPerPage={handleClickPerPage}
-                           />
-                        </div>
-                     );
-                  }}
-               </EntitiesContainer>
+                  <EntityTable2
+                     data={data ?? null}
+                     entity={entity}
+                     /*select={search.value.select}*/
+                     onClickRow={handleClickRow}
+                     page={search.value.page}
+                     sort={search.value.sort}
+                     onClickSort={handleSortClick}
+                     perPage={search.value.perPage}
+                     perPageOptions={PER_PAGE_OPTIONS}
+                     total={meta?.count}
+                     onClickPage={handleClickPage}
+                     onClickPerPage={handleClickPerPage}
+                  />
+               </div>
             </div>
          </AppShell.Scrollable>
       </>