updated admin to use swr hooks instead of react-query

app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx

@@ -4,7 +4,7 @@ import { ucFirst } from "core/utils";
 import type { EntityData, RelationField } from "data";
 import { useEffect, useRef, useState } from "react";
 import { TbEye } from "react-icons/tb";
-import { useClient } from "ui/client";
+import { useClient, useEntityQuery } from "ui/client";
 import { useBknd } from "ui/client/bknd";
 import { Button } from "ui/components/buttons/Button";
 import * as Formy from "ui/components/form/Formy";
@@ -31,25 +31,21 @@ export function EntityRelationalFormField({
    const { app } = useBknd();
    const entity = app.entity(field.target())!;
    const [query, setQuery] = useState<any>({ limit: 10, page: 1, perPage: 10 });
-   const [location, navigate] = useLocation();
+   const [, navigate] = useLocation();
    const ref = useRef<any>(null);
    const client = useClient();
-   const container = useEntities(
-      field.target(),
-      {
-         limit: query.limit,
-         offset: (query.page - 1) * query.limit
-         //select: entity.getSelect(undefined, "form")
-      },
-      { enabled: true }
-   );
+   const $q = useEntityQuery(field.target(), undefined, {
+      limit: query.limit,
+      offset: (query.page - 1) * query.limit
+   });
    const [_value, _setValue] = useState<{ id: number | undefined; [key: string]: any }>();
 
    const referenceField = data?.[field.reference()];
    const relationalField = data?.[field.name];
 
    useEffect(() => {
-      _setValue(data?.[field.reference()]);
+      const value = data?.[field.reference()];
+      _setValue(value);
    }, [referenceField]);
 
    useEffect(() => {
@@ -57,62 +53,40 @@ export function EntityRelationalFormField({
          const rel_value = field.target();
          if (!rel_value || !relationalField) return;
 
-         console.log("-- need to fetch", field.target(), relationalField);
          const fetched = await client.api.data.readOne(field.target(), relationalField);
-         if (fetched.res.ok && fetched.data) {
+         if (fetched.ok && fetched.data) {
             _setValue(fetched.data as any);
          }
-         console.log("-- fetched", fetched);
-
-         console.log("relation", {
-            referenceField,
-            relationalField,
-            data,
-            field,
-            entity
-         });
       })();
    }, [relationalField]);
 
-   /*const initialValue: { id: number | undefined; [key: string]: any } = data?.[
-      field.reference()
-   ] ?? {
-      id: data?.[field.name],
-   };*/
-
    function handleViewItem(e: React.MouseEvent<HTMLButtonElement>) {
       e.preventDefault();
       e.stopPropagation();
-      console.log("yo");
       if (_value) {
          navigate(routes.data.entity.edit(entity.name, _value.id as any));
       }
    }
 
-   /*console.log(
-      "relationfield:data",
-      { _value, initialValue },
-      data,
-      field.reference(),
-      entity,
-      //container.entity,
-      //data[field.reference()],
-      data?.[field.name],
-      field,
-   );*/
-
    // fix missing value on fields that are required
    useEffect(() => {
       if (field.isRequired() && !fieldApi.state.value) {
-         fieldApi.setValue(container.data?.[0]?.id);
+         const firstValue = $q.data?.[0];
+         if (!firstValue) return;
+
+         console.warn("setting first value because field is required", field.name, firstValue.id);
+         fieldApi.setValue(firstValue.id);
+         _setValue(firstValue as any);
       }
-   }, [container.data]);
+   }, [$q.data]);
+
+   const fetching = $q.isLoading || $q.isValidating;
 
    return (
       <Formy.Group>
          <Formy.Label htmlFor={fieldApi.name}>{field.getLabel()}</Formy.Label>
          <div
-            data-disabled={!Array.isArray(container.data) || disabled ? 1 : undefined}
+            data-disabled={fetching || disabled ? 1 : undefined}
             className="data-[disabled]:opacity-70 data-[disabled]:pointer-events-none"
          >
             <Popover
@@ -120,7 +94,7 @@ export function EntityRelationalFormField({
                className=""
                target={({ toggle }) => (
                   <PopoverTable
-                     container={container}
+                     container={$q.data}
                      entity={entity}
                      query={query}
                      toggle={toggle}
@@ -198,28 +172,6 @@ export function EntityRelationalFormField({
             onChange={console.log}
             tabIndex={-1}
          />
-         {/*<Formy.Select
-            ref={ref}
-            name={fieldApi.name}
-            id={fieldApi.name}
-            value={fieldApi.state.value}
-            data-value={fieldApi.state.value}
-            onBlur={fieldApi.handleBlur}
-            onChange={handleUpdate}
-            disabled={!Array.isArray(container.data)}
-         >
-            {container.data ? (
-               <>
-                  {emptyOption}
-                  {!field.isRequired() && emptyOption}
-                  {container.data?.map(renderRow)}
-               </>
-            ) : (
-               <option value={undefined} disabled>
-                  Loading...
-               </option>
-            )}
-         </Formy.Select>*/}
       </Formy.Group>
    );
 }

app/src/ui/modules/data/hooks/useEntityForm.tsx

@@ -19,18 +19,16 @@ export function useEntityForm({
    // @todo: check if virtual must be filtered
    const fields = entity.getFillableFields(action, true);
 
-   console.log("useEntityForm:data", data);
-
    // filter defaultValues to only contain fillable fields
    const defaultValues = getDefaultValues(fields, data);
-   console.log("useEntityForm:defaultValues", data);
+   //console.log("useEntityForm", { data, defaultValues });
 
    const Form = useForm({
       defaultValues,
       validators: {
          onSubmitAsync: async ({ value }): Promise<any> => {
             try {
-               console.log("validating", value, entity.isValidData(value, action));
+               //console.log("validating", value, entity.isValidData(value, action));
                entity.isValidData(value, action, true);
                return undefined;
             } catch (e) {
@@ -40,7 +38,7 @@ export function useEntityForm({
          }
       },
       onSubmit: async ({ value, formApi }) => {
-         console.log("onSubmit", value);
+         //console.log("onSubmit", value);
          if (!entity.isValidData(value, action)) {
             console.error("invalid data", value);
             return;
@@ -49,7 +47,7 @@ export function useEntityForm({
 
          if (!data) return;
          const changeSet = getChangeSet(action, value, data, fields);
-         console.log("changesSet", action, changeSet);
+         //console.log("changesSet", action, changeSet, { data });
 
          // only submit change set if there were changes
          await onSubmitted?.(Object.keys(changeSet).length === 0 ? undefined : changeSet);