bug: adding element of array like in as a form state (#60)

LunaTK · Nov 8, 2023 · 12fdb5e · 12fdb5e
1 parent 101ba22
commit 12fdb5e
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 18 deletions.
diff --git a/.changeset/lemon-scissors-attend.md b/.changeset/lemon-scissors-attend.md
@@ -0,0 +1,5 @@
+---
+"protobuf-auto-form": patch
+---
+
+bug: add element of array-like as a form state
diff --git a/packages/core/src/AutoForm.test.tsx b/packages/core/src/AutoForm.test.tsx
@@ -35,7 +35,7 @@ const MockApp: React.FC<MockAppProps> = (props) => {
 afterEach(cleanup);
 
 describe("AutoForm", () => {
-  it("Add map item", async () => {
+  it("Add repeated item", async () => {
     const namespace = protobuf.parse(`
       syntax = "proto3";
 
@@ -44,16 +44,8 @@ describe("AutoForm", () => {
       }
     `).root;
 
-    const handleSubmit = vi.fn();
-    const dom = render(
-      <MockApp
-        onSubmit={handleSubmit}
-        namespace={namespace}
-        messageType="RepeatedString"
-      >
-        <button id="submit" />
-      </MockApp>
-    );
+    const { handleSubmit, dom } = renderAutoForm(namespace, "RepeatedString");
+
     fireEvent.click(dom.queryByTestId("add-btn")!);
     await vi.waitUntil(() => dom.queryByTestId("delete-btn") !== null);
     fireEvent.click(dom.container.querySelector("#submit")!);
@@ -69,4 +61,71 @@ describe("AutoForm", () => {
       "repeated element should be added"
     ).toEqual([{ children: [""] }]);
   });
+
+  it('Add repeated item', async () => {
+    const namespace = protobuf.parse(`
+      syntax = "proto3";
+
+      message Child {
+        map<string, string> val = 1;
+      }
+
+      message Parent {
+        repeated Child children = 1;
+      }
+    `).root;
+
+    const { handleSubmit, dom } = renderAutoForm(namespace, "Parent");
+
+    fireEvent.click(dom.queryByTestId("add-btn")!);
+    await vi.waitUntil(() => dom.queryByTestId("delete-btn") !== null);
+    fireEvent.click(dom.container.querySelector("#submit")!);
+    await waitFor(() => handleSubmit.mock.calls.length === 1);
+
+    expect(
+      handleSubmit.mock.calls[0],
+      "repeated element with map should work"
+    ).toEqual([{ children: [{ val: {} }] }]);
+  })
+
+
+  it('Add nested map', async () => {
+    const namespace = protobuf.parse(`
+      syntax = "proto3";
+
+      message Child {
+        map<string, string> val = 1;
+      }
+
+      message Parent {
+        map<string, Child> children = 1;
+      }
+    `).root;
+
+    const { handleSubmit, dom } = renderAutoForm(namespace, "Parent");
+
+    fireEvent.click(dom.queryByTestId("add-btn")!);
+    await vi.waitUntil(() => dom.queryByTestId("delete-btn") !== null);
+    fireEvent.click(dom.container.querySelector("#submit")!);
+    await waitFor(() => handleSubmit.mock.calls.length === 1);
+
+    expect(
+      handleSubmit.mock.calls[0],
+      "repeated element with map should work"
+    ).toEqual([{ children: {"": {"val": {}}} }]);
+  })
 });
+
+function renderAutoForm(namespace: protobuf.Namespace, messageType: string) {
+  const handleSubmit = vi.fn();
+  const dom = render(
+    <MockApp
+      onSubmit={handleSubmit}
+      namespace={namespace}
+      messageType={messageType}
+    >
+      <button id="submit" />
+    </MockApp>
+  );
+  return { handleSubmit, dom };
+}
diff --git a/packages/core/src/protobuf/conversion/convert.test.ts b/packages/core/src/protobuf/conversion/convert.test.ts
@@ -1,8 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import protobuf from 'protobufjs';
 import { AutoFormContext } from '../../context';
-import { proto2Form } from './proto2Form';
-import { form2Proto, pruneUnselectedOneofValues } from './form2Proto';
+import { form2Proto, proto2Form, pruneUnselectedOneofValues } from './';
 import { fillInitialValues } from './initial';
 
 describe('Protobuf Conversion', () => {

diff --git a/packages/core/src/protobuf/input/arrayLike/Map.tsx b/packages/core/src/protobuf/input/arrayLike/Map.tsx
@@ -8,6 +8,8 @@ import { FieldOptions } from '../../../models';
 import { useChildFields } from '../../../hooks';
 import { getInitialValue } from '../../conversion/initial';
 import ArrayLike from './ArrayLike';
+import { useAutoFormCtx } from '../../../context';
+import { proto2Form } from '../../conversion';
 
 interface MapProps {
   name: string;
@@ -35,7 +37,7 @@ const MapKeyValueInput: React.FC<{
   const valueLabel = valueOptions?.label ?? 'Value';
 
   return (
-    <div className="af-repeat-ele flex-1 flex flex-col my-2 p-2">
+    <div className="flex flex-col flex-1 p-2 my-2 af-repeat-ele">
       <div className="label">
         <span className="label-text">{keyLabel}</span>
       </div>
@@ -66,11 +68,14 @@ const MapInput: React.FC<MapProps> = ({ name, field, keyType, options }) => {
     name,
     rules: options?.rules,
   });
+  const ctx = useAutoFormCtx();
 
   const add = () => {
+    const value = getInitialValue(field, { ignoreArrayLike: true });
+    const $value = proto2Form(ctx)(value, field.resolvedType, options);
     append({
       $key: '',
-      $value: getInitialValue(field, { ignoreArrayLike: true }),
+      $value,
     });
   };
 

diff --git a/packages/core/src/protobuf/input/arrayLike/Repeated.tsx b/packages/core/src/protobuf/input/arrayLike/Repeated.tsx
@@ -6,6 +6,8 @@ import { FieldOptions } from '../../../models';
 import { useChildFields } from '../../../hooks';
 import { getInitialValue } from '../../conversion/initial';
 import ArrayLike from './ArrayLike';
+import { useAutoFormCtx } from '../../../context';
+import { proto2Form } from '../../conversion';
 
 interface Props {
   name: string;
@@ -21,12 +23,15 @@ const RepeatedInput: React.FC<Props> = ({ field, name, options }) => {
     name,
     rules: options?.rules,
   });
+  const ctx = useAutoFormCtx();
 
   return (
     <ArrayLike
-      onAdd={() =>
-        append({ $value: getInitialValue(field, { ignoreArrayLike: true }) })
-      }
+      onAdd={() => {
+        const value = getInitialValue(field, { ignoreArrayLike: true });
+        const $value = proto2Form(ctx)(value, field.resolvedType, options);
+        append({ $value });
+      }}
       onRemove={remove}
       fields={fields}
       render={({ idx }) => (