ding-react-admin 1.0.4 → 2.0.4

package/src/crud/utils/useFormRecord.ts

@@ -0,0 +1,179 @@
+import type { MessageInstance } from "antd/es/message/interface";
+import {
+  useCallback,
+  useState,
+  type MutableRefObject,
+} from "react";
+import type { DataProvider } from "../../data/dataProviderTypes";
+import { isAbortError } from "../../data/abortError";
+import {
+  type DefaultValues,
+  type FieldValues,
+  type UseFormReturn,
+} from "react-hook-form";
+import type { InlineFieldRegistration } from "../context/InlineFieldsRegistry";
+import { buildResourceFormSubmitBody } from "./buildResourceFormSubmitBody";
+import { applyApiErrorsToForm } from "./formErrors";
+import { useAbortableEffect } from "./useAbortableEffect";
+
+type LoadOptions<T extends FieldValues> = {
+  dp: DataProvider;
+  resource: string;
+  id: string | undefined;
+  isNew: boolean;
+  form: UseFormReturn<T>;
+  message: MessageInstance;
+  defaultValues?: Partial<T>;
+  /** When false, skip loading (e.g. modal closed). Defaults to true. */
+  enabled?: boolean;
+};
+
+/** Edit mode: `getOne` → `form.reset` → bump `formVersion` so field arrays remount. */
+export function useFormRecordLoad<T extends FieldValues>({
+  dp,
+  resource,
+  id,
+  isNew,
+  form,
+  message,
+  defaultValues,
+  enabled = true,
+}: LoadOptions<T>) {
+  const [loading, setLoading] = useState(!isNew);
+  const [formVersion, setFormVersion] = useState(0);
+
+  const load = useCallback(
+    async (signal?: AbortSignal) => {
+      if (isNew || !id) {
+        if (defaultValues) {
+          form.reset({ ...defaultValues } as DefaultValues<T>);
+        } else {
+          form.reset({} as DefaultValues<T>);
+        }
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      try {
+        const res = await dp.getOne(resource, id, { signal });
+        if (signal?.aborted) return;
+        form.reset(res.data as DefaultValues<T>);
+        setFormVersion((v) => v + 1);
+      } catch (e) {
+        if (!isAbortError(e)) {
+          message.error(e instanceof Error ? e.message : "Load failed");
+        }
+      } finally {
+        if (!signal?.aborted) setLoading(false);
+      }
+    },
+    [dp, resource, id, isNew, form, message, defaultValues],
+  );
+
+  useAbortableEffect(
+    (signal) => {
+      if (!enabled) return;
+      return load(signal);
+    },
+    [enabled, load],
+  );
+
+  return { loading, formVersion };
+}
+
+type SubmitOptions<T extends FieldValues & { id?: unknown }> = {
+  dp: DataProvider;
+  resource: string;
+  id: string | undefined;
+  isNew: boolean;
+  form: UseFormReturn<T>;
+  message: MessageInstance;
+  payloadFieldsRef: MutableRefObject<Set<string>>;
+  inlineRegistryRef: MutableRefObject<Map<string, InlineFieldRegistration>>;
+  setGlobalErrors: (errors: string[]) => void;
+  onSuccess?: (record: T) => void;
+};
+
+/** Save: `buildFormPayload` → clean inline rows → one `create` or `update`. */
+export function useFormRecordSave<T extends FieldValues & { id?: unknown }>({
+  dp,
+  resource,
+  id,
+  isNew,
+  form,
+  message,
+  payloadFieldsRef,
+  inlineRegistryRef,
+  setGlobalErrors,
+  onSuccess,
+}: SubmitOptions<T>) {
+  const [saving, setSaving] = useState(false);
+
+  const onSubmit = useCallback(
+    async (values: T) => {
+      setGlobalErrors([]);
+      setSaving(true);
+      try {
+        const raw = values as Record<string, unknown>;
+        const body = buildResourceFormSubmitBody(
+          raw,
+          Array.from(payloadFieldsRef.current),
+          inlineRegistryRef.current.values(),
+        );
+
+        let saved: T;
+        if (isNew) {
+          const res = await dp.create(resource, body);
+          saved = res.data as T;
+          message.success("Created");
+        } else if (id) {
+          const res = await dp.update(resource, { id, data: body });
+          saved = res.data as T;
+          message.success("Updated");
+        } else {
+          return;
+        }
+
+        onSuccess?.(saved);
+      } catch (e) {
+        const { handled, globalErrors } = await applyApiErrorsToForm(
+          dp,
+          form,
+          e,
+          {
+            resource,
+            mutation: isNew ? "create" : "update",
+            inlineFieldPaths: Array.from(inlineRegistryRef.current.keys()),
+          },
+          {
+            payloadFields: payloadFieldsRef.current,
+            inlineRegistry: inlineRegistryRef.current.values(),
+          },
+        );
+        if (handled) {
+          setGlobalErrors(globalErrors);
+          message.error(globalErrors[0] ?? "Save failed.");
+        } else {
+          setGlobalErrors([]);
+          message.error(e instanceof Error ? e.message : "Save failed");
+        }
+      } finally {
+        setSaving(false);
+      }
+    },
+    [
+      dp,
+      resource,
+      id,
+      isNew,
+      form,
+      message,
+      payloadFieldsRef,
+      inlineRegistryRef,
+      setGlobalErrors,
+      onSuccess,
+    ],
+  );
+
+  return { onSubmit, saving };
+}

package/src/crud/utils/useListQueryState.ts

@@ -1,191 +1,191 @@
-import { useCallback, useMemo } from "react";
-import { useSearchParams } from "react-router-dom";
-import type { SortSpec } from "../../data/dataProviderTypes";
-import { LIST_QUERY_RESERVED } from "../types";
-import { parseSortParam, serializeSort } from "./sortQueryParam";
-
-const DEFAULT_PAGE = 1;
-const DEFAULT_PER_PAGE = 10;
-
-function parseFilterValue(raw: string): unknown {
-  if (raw.includes(",")) {
-    const parts = raw.split(",").map((p) => p.trim());
-    const nums = parts.map(Number);
-    if (nums.every((n) => Number.isFinite(n))) return nums;
-    return parts;
-  }
-  const n = Number(raw);
-  if (raw !== "" && Number.isFinite(n) && String(n) === raw) return n;
-  if (raw === "true") return true;
-  if (raw === "false") return false;
-  return raw;
-}
-
-function serializeFilterValue(value: unknown): string | null {
-  if (value === undefined || value === null || value === "") return null;
-  if (Array.isArray(value)) {
-    if (value.length === 0) return null;
-    return value.map(String).join(",");
-  }
-  return String(value);
-}
-
-export type ListQueryState = {
-  page: number;
-  perPage: number;
-  sort: SortSpec[];
-  filter: Record<string, unknown>;
-  createModal: boolean;
-  editId: string | null;
-};
-
-export type ListQueryActions = {
-  setPage: (page: number) => void;
-  setPerPage: (perPage: number) => void;
-  setSort: (sort: SortSpec[]) => void;
-  toggleSort: (field: string) => void;
-  setFilter: (source: string, value: unknown) => void;
-  setFilters: (filter: Record<string, unknown>) => void;
-  openCreateModal: () => void;
-  openEditModal: (id: string | number) => void;
-  closeModal: () => void;
-};
-
-export function useListQueryState(
-  staticFilter?: Record<string, unknown>,
-): [ListQueryState, ListQueryActions] {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const state = useMemo((): ListQueryState => {
-    const pageRaw = searchParams.get("page");
-    const perPageRaw = searchParams.get("perPage");
-    const page = pageRaw ? Math.max(1, Number(pageRaw) || DEFAULT_PAGE) : DEFAULT_PAGE;
-    const perPage = perPageRaw
-      ? Math.max(1, Number(perPageRaw) || DEFAULT_PER_PAGE)
-      : DEFAULT_PER_PAGE;
-
-    const sortEntries = searchParams.getAll("sort");
-    const sort =
-      sortEntries.length > 0
-        ? sortEntries.flatMap((s) => parseSortParam(s))
-        : parseSortParam(searchParams.get("sort"));
-
-    const filter: Record<string, unknown> = { ...staticFilter };
-    searchParams.forEach((value, key) => {
-      if (LIST_QUERY_RESERVED.has(key)) return;
-      const existing = filter[key];
-      if (existing !== undefined) {
-        const arr = Array.isArray(existing) ? existing : [existing];
-        filter[key] = [...arr, parseFilterValue(value)];
-      } else if (searchParams.getAll(key).length > 1) {
-        filter[key] = searchParams.getAll(key).map(parseFilterValue);
-      } else {
-        filter[key] = parseFilterValue(value);
-      }
-    });
-
-    const createModal = searchParams.has("create");
-    const editId = searchParams.get("edit");
-
-    return { page, perPage, sort, filter, createModal, editId };
-  }, [searchParams, staticFilter]);
-
-  const updateParams = useCallback(
-    (mutate: (params: URLSearchParams) => void) => {
-      setSearchParams(
-        (prev) => {
-          const next = new URLSearchParams(prev);
-          mutate(next);
-          return next;
-        },
-        { replace: true },
-      );
-    },
-    [setSearchParams],
-  );
-
-  const actions: ListQueryActions = useMemo(
-    () => ({
-      setPage: (page) => {
-        updateParams((p) => {
-          if (page <= 1) p.delete("page");
-          else p.set("page", String(page));
-        });
-      },
-      setPerPage: (perPage) => {
-        updateParams((p) => {
-          if (perPage === DEFAULT_PER_PAGE) p.delete("perPage");
-          else p.set("perPage", String(perPage));
-          p.delete("page");
-        });
-      },
-      setSort: (sort) => {
-        updateParams((p) => {
-          p.delete("sort");
-          const serialized = serializeSort(sort);
-          if (serialized) p.set("sort", serialized);
-        });
-      },
-      toggleSort: (field) => {
-        updateParams((p) => {
-          const current = p.getAll("sort").flatMap((s) => parseSortParam(s));
-          const idx = current.findIndex((s) => s.field === field);
-          let next: SortSpec[];
-          if (idx < 0) {
-            next = [...current, { field, order: "ASC" }];
-          } else if (current[idx].order === "ASC") {
-            next = current.map((s, i) =>
-              i === idx ? { ...s, order: "DESC" as const } : s,
-            );
-          } else {
-            next = current.filter((_, i) => i !== idx);
-          }
-          p.delete("sort");
-          const serialized = serializeSort(next);
-          if (serialized) p.set("sort", serialized);
-        });
-      },
-      setFilter: (source, value) => {
-        updateParams((p) => {
-          p.delete(source);
-          const serialized = serializeFilterValue(value);
-          if (serialized != null) p.set(source, serialized);
-          p.delete("page");
-        });
-      },
-      setFilters: (filter) => {
-        updateParams((p) => {
-          for (const key of [...p.keys()]) {
-            if (!LIST_QUERY_RESERVED.has(key)) p.delete(key);
-          }
-          for (const [key, value] of Object.entries(filter)) {
-            const serialized = serializeFilterValue(value);
-            if (serialized != null) p.set(key, serialized);
-          }
-          p.delete("page");
-        });
-      },
-      openCreateModal: () => {
-        updateParams((p) => {
-          p.set("create", "1");
-          p.delete("edit");
-        });
-      },
-      openEditModal: (id) => {
-        updateParams((p) => {
-          p.set("edit", String(id));
-          p.delete("create");
-        });
-      },
-      closeModal: () => {
-        updateParams((p) => {
-          p.delete("create");
-          p.delete("edit");
-        });
-      },
-    }),
-    [updateParams],
-  );
-
-  return [state, actions];
-}
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import type { SortSpec } from "../../data/dataProviderTypes";
+import { LIST_QUERY_RESERVED } from "../types";
+import { parseSortParam, serializeSort } from "./sortQueryParam";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_PER_PAGE = 10;
+
+function parseFilterValue(raw: string): unknown {
+  if (raw.includes(",")) {
+    const parts = raw.split(",").map((p) => p.trim());
+    const nums = parts.map(Number);
+    if (nums.every((n) => Number.isFinite(n))) return nums;
+    return parts;
+  }
+  const n = Number(raw);
+  if (raw !== "" && Number.isFinite(n) && String(n) === raw) return n;
+  if (raw === "true") return true;
+  if (raw === "false") return false;
+  return raw;
+}
+
+function serializeFilterValue(value: unknown): string | null {
+  if (value === undefined || value === null || value === "") return null;
+  if (Array.isArray(value)) {
+    if (value.length === 0) return null;
+    return value.map(String).join(",");
+  }
+  return String(value);
+}
+
+export type ListQueryState = {
+  page: number;
+  perPage: number;
+  sort: SortSpec[];
+  filter: Record<string, unknown>;
+  createModal: boolean;
+  editId: string | null;
+};
+
+export type ListQueryActions = {
+  setPage: (page: number) => void;
+  setPerPage: (perPage: number) => void;
+  setSort: (sort: SortSpec[]) => void;
+  toggleSort: (field: string) => void;
+  setFilter: (source: string, value: unknown) => void;
+  setFilters: (filter: Record<string, unknown>) => void;
+  openCreateModal: () => void;
+  openEditModal: (id: string | number) => void;
+  closeModal: () => void;
+};
+
+export function useListQueryState(
+  staticFilter?: Record<string, unknown>,
+): [ListQueryState, ListQueryActions] {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const state = useMemo((): ListQueryState => {
+    const pageRaw = searchParams.get("page");
+    const perPageRaw = searchParams.get("perPage");
+    const page = pageRaw ? Math.max(1, Number(pageRaw) || DEFAULT_PAGE) : DEFAULT_PAGE;
+    const perPage = perPageRaw
+      ? Math.max(1, Number(perPageRaw) || DEFAULT_PER_PAGE)
+      : DEFAULT_PER_PAGE;
+
+    const sortEntries = searchParams.getAll("sort");
+    const sort =
+      sortEntries.length > 0
+        ? sortEntries.flatMap((s) => parseSortParam(s))
+        : parseSortParam(searchParams.get("sort"));
+
+    const filter: Record<string, unknown> = { ...staticFilter };
+    searchParams.forEach((value, key) => {
+      if (LIST_QUERY_RESERVED.has(key)) return;
+      const existing = filter[key];
+      if (existing !== undefined) {
+        const arr = Array.isArray(existing) ? existing : [existing];
+        filter[key] = [...arr, parseFilterValue(value)];
+      } else if (searchParams.getAll(key).length > 1) {
+        filter[key] = searchParams.getAll(key).map(parseFilterValue);
+      } else {
+        filter[key] = parseFilterValue(value);
+      }
+    });
+
+    const createModal = searchParams.has("create");
+    const editId = searchParams.get("edit");
+
+    return { page, perPage, sort, filter, createModal, editId };
+  }, [searchParams, staticFilter]);
+
+  const updateParams = useCallback(
+    (mutate: (params: URLSearchParams) => void) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          mutate(next);
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  const actions: ListQueryActions = useMemo(
+    () => ({
+      setPage: (page) => {
+        updateParams((p) => {
+          if (page <= 1) p.delete("page");
+          else p.set("page", String(page));
+        });
+      },
+      setPerPage: (perPage) => {
+        updateParams((p) => {
+          if (perPage === DEFAULT_PER_PAGE) p.delete("perPage");
+          else p.set("perPage", String(perPage));
+          p.delete("page");
+        });
+      },
+      setSort: (sort) => {
+        updateParams((p) => {
+          p.delete("sort");
+          const serialized = serializeSort(sort);
+          if (serialized) p.set("sort", serialized);
+        });
+      },
+      toggleSort: (field) => {
+        updateParams((p) => {
+          const current = p.getAll("sort").flatMap((s) => parseSortParam(s));
+          const idx = current.findIndex((s) => s.field === field);
+          let next: SortSpec[];
+          if (idx < 0) {
+            next = [...current, { field, order: "ASC" }];
+          } else if (current[idx].order === "ASC") {
+            next = current.map((s, i) =>
+              i === idx ? { ...s, order: "DESC" as const } : s,
+            );
+          } else {
+            next = current.filter((_, i) => i !== idx);
+          }
+          p.delete("sort");
+          const serialized = serializeSort(next);
+          if (serialized) p.set("sort", serialized);
+        });
+      },
+      setFilter: (source, value) => {
+        updateParams((p) => {
+          p.delete(source);
+          const serialized = serializeFilterValue(value);
+          if (serialized != null) p.set(source, serialized);
+          p.delete("page");
+        });
+      },
+      setFilters: (filter) => {
+        updateParams((p) => {
+          for (const key of [...p.keys()]) {
+            if (!LIST_QUERY_RESERVED.has(key)) p.delete(key);
+          }
+          for (const [key, value] of Object.entries(filter)) {
+            const serialized = serializeFilterValue(value);
+            if (serialized != null) p.set(key, serialized);
+          }
+          p.delete("page");
+        });
+      },
+      openCreateModal: () => {
+        updateParams((p) => {
+          p.set("create", "1");
+          p.delete("edit");
+        });
+      },
+      openEditModal: (id) => {
+        updateParams((p) => {
+          p.set("edit", String(id));
+          p.delete("create");
+        });
+      },
+      closeModal: () => {
+        updateParams((p) => {
+          p.delete("create");
+          p.delete("edit");
+        });
+      },
+    }),
+    [updateParams],
+  );
+
+  return [state, actions];
+}

package/src/data/abortError.test.ts

@@ -1,19 +1,19 @@
-import { describe, expect, it } from "vitest";
-import { isAbortError } from "./abortError";
-
-describe("isAbortError", () => {
-  it("detects DOM AbortError", () => {
-    expect(isAbortError({ name: "AbortError" })).toBe(true);
-  });
-
-  it("detects axios CanceledError", () => {
-    expect(isAbortError({ name: "CanceledError", code: "ERR_CANCELED" })).toBe(
-      true,
-    );
-  });
-
-  it("returns false for ordinary errors", () => {
-    expect(isAbortError(new Error("Network Error"))).toBe(false);
-    expect(isAbortError(null)).toBe(false);
-  });
-});
+import { describe, expect, it } from "vitest";
+import { isAbortError } from "./abortError";
+
+describe("isAbortError", () => {
+  it("detects DOM AbortError", () => {
+    expect(isAbortError({ name: "AbortError" })).toBe(true);
+  });
+
+  it("detects axios CanceledError", () => {
+    expect(isAbortError({ name: "CanceledError", code: "ERR_CANCELED" })).toBe(
+      true,
+    );
+  });
+
+  it("returns false for ordinary errors", () => {
+    expect(isAbortError(new Error("Network Error"))).toBe(false);
+    expect(isAbortError(null)).toBe(false);
+  });
+});

package/src/data/abortError.ts

@@ -1,10 +1,10 @@
-/** True when a fetch/axios call was aborted via `AbortSignal` (not a real failure). */
-export function isAbortError(error: unknown): boolean {
-  if (error == null || typeof error !== "object") return false;
-  const e = error as { name?: string; code?: string };
-  return (
-    e.name === "AbortError" ||
-    e.name === "CanceledError" ||
-    e.code === "ERR_CANCELED"
-  );
-}
+/** True when a fetch/axios call was aborted via `AbortSignal` (not a real failure). */
+export function isAbortError(error: unknown): boolean {
+  if (error == null || typeof error !== "object") return false;
+  const e = error as { name?: string; code?: string };
+  return (
+    e.name === "AbortError" ||
+    e.name === "CanceledError" ||
+    e.code === "ERR_CANCELED"
+  );
+}