@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/organisms/__fixtures__/useEditForm.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+
+import { SubmissionType } from "../../interfaces";
+
+function useFetch(url: string, opts: any) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  function fetchData() {
+    fetch(url, opts)
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    fetchData();
+  }, [url, opts.method]);
+
+  return { data, loading, error, fetchData };
+}
+
+async function updateSubmission(model: string, submissionId: string, submission: SubmissionType["data"]) {
+  const response = await fetch(`https://local.dev/form/${model}/submissions/${submissionId}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    },
+    body: JSON.stringify(submission)
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    const error: any = new Error("Update submission failed");
+    error.errors = [data];
+    throw error;
+  }
+
+  return data;
+}
+
+export function useEditForm({ model, submissionId }: any) {
+  const form = useFetch(`https://local.dev/form/${model}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    }
+  });
+
+  const submission = useFetch(`https://local.dev/form/${model}/submissions/${submissionId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    }
+  });
+
+  function onSubmit(submission: any) {
+    return updateSubmission(model, submissionId, submission.data).then((data) => {
+      return {
+        ...submission,
+        data
+      };
+    });
+  }
+
+  return {
+    form: form.data,
+    data: submission.data,
+    loading: form.loading || submission.loading,
+    error: form.error || submission.error,
+    onSubmit
+  };
+}

package/src/organisms/__fixtures__/utils.ts

@@ -0,0 +1,74 @@
+export function filter(args: any[]) {
+  return args.map((item) => {
+    if (item && item._form) {
+      return "FormioInstance";
+    }
+
+    if (item && item.component) {
+      return ["Component", item.component.type, item.component.key].filter(Boolean).join(":");
+    }
+
+    if (item && item.changed) {
+      return `${item.changed.component.key}(${item.changed.value})`;
+    }
+
+    return item;
+  });
+}
+
+export function wrap(args: any) {
+  return {
+    ...args,
+    onPrevPage: (...list: any[]) => {
+      return args.onPrevPage(...filter(list));
+    },
+    onNextPage: (...list: any[]) => {
+      return args.onNextPage(...filter(list));
+    },
+    onCancel: (...list: any[]) => {
+      return args.onCancel(...filter(list));
+    },
+    onChange: (...list: any[]) => {
+      return args.onChange(...filter(list));
+    },
+    onCustomEvent: (...list: any[]) => {
+      return args.onCustomEvent(...filter(list));
+    },
+    onComponentChange: (...list: any[]) => {
+      return args.onComponentChange(...filter(list));
+    },
+    onSubmit: (...list: any[]) => {
+      return args.onSubmit(...filter(list));
+    },
+    onSubmitDone: (...list: any[]) => {
+      return args.onSubmitDone(...filter(list));
+    },
+    onFormLoad: (...list: any[]) => {
+      return args.onFormLoad(...filter(list));
+    },
+    onError: (...list: any[]) => {
+      return args.onError(...filter(list));
+    },
+    onRender: (...list: any[]) => {
+      return args.onRender(...filter(list));
+    },
+    onAttach: (...list: any[]) => {
+      return args.onAttach(...filter(list));
+    },
+    onBuild: (...list: any[]) => {
+      return args.onBuild(...filter(list));
+    },
+    onFocus: (...list: any[]) => {
+      return args.onFocus(...filter(list));
+    },
+    onBlur: (...list: any[]) => {
+      return args.onBlur(...filter(list));
+    },
+    onInitialized: (...list: any[]) => {
+      return args.onInitialized(...filter(list));
+    },
+    onFormReady: (...list: any[]) => {
+      return args.onFormReady(...filter(list));
+    }
+  };
+}

package/src/{components/form/form.component.spec.tsx → organisms/form/Form.spec.tsx}

@@ -1,7 +1,6 @@
-import { screen } from "@testing-library/react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
-import { Form } from "./form.component";
+import { Form } from "./Form";
 
 async function createFixture(props: any = {}) {
   const onSubmit = vi.fn();
@@ -42,16 +41,16 @@ async function createFixture(props: any = {}) {
 describe("Form", () => {
   it("should render the Form", async () => {
     await createFixture({
+      "data-testid": "formio-container",
       data: [],
       model: "MyForm",
       groups: ["creation"],
       params: {
         env: "prod"
-      },
-      isActive: false
+      }
     });
 
-    expect(screen.getByTestId("formioContainer")).toBeInTheDocument();
+    expect(screen.getByTestId("formio-container")).toBeInTheDocument();
     expect(screen.getByText("First name")).toBeInTheDocument();
   });
 });