Merge pull request #40 from iway1/object-arrays-and-checkbox-names

fixes issue with object arrays and checkboxes
iway1 · Jan 31, 2023 · 445bc69 · 445bc69
2 parents 3dfc065 + f16d61d
commit 445bc69
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 61 deletions.
diff --git a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/ProcedureFormContext.tsx b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/ProcedureFormContext.tsx
@@ -0,0 +1,27 @@
+import React, { useContext } from "react";
+import { createContext, ReactNode } from "react";
+
+type ContextType = {
+  path: string;
+};
+
+const Context = createContext<ContextType | null>(null);
+
+export function ProcedureFormContextProvider({
+  children,
+  path,
+}: {
+  children: ReactNode;
+  path: string;
+}) {
+  return <Context.Provider value={{ path }}>{children}</Context.Provider>;
+}
+
+export function useProcedureFormContext() {
+  const ctx = useContext(Context);
+  if (!ctx)
+    throw new Error(
+      "Procedure form context must be called within ProcedureFormContextProvider (this is a bug with trpc-panel, open an issue)."
+    );
+  return ctx;
+}
diff --git a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx
@@ -18,6 +18,7 @@ import { fullFormats } from "ajv-formats/dist/formats";
 import type { ParsedInputNode } from "@src/parse/parseNodeTypes";
 import { DocumentationSection } from "@src/react-app/components/form/ProcedureForm/DescriptionSection";
 import { Field } from "@src/react-app/components/form/Field";
+import { ProcedureFormContextProvider } from "@src/react-app/components/form/ProcedureForm/ProcedureFormContext";
 
 const TRPCErrorSchema = z.object({
   shape: z.object({
@@ -147,66 +148,68 @@ export function ProcedureForm({
   const fieldName = procedure.node.path.join(".");
 
   return (
-    <CollapsableSection
-      titleElement={
-        <span className="font-bold text-lg flex flex-row items-center">
-          {name}
-        </span>
-      }
-      fullPath={procedure.pathFromRootRouter}
-      sectionType={procedure.procedureType}
-      focusOnScrollRef={formRef}
-    >
-      <form
-        className="flex flex-col space-y-4"
-        onSubmit={handleSubmit(onSubmit)}
-        ref={formRef}
+    <ProcedureFormContextProvider path={procedure.pathFromRootRouter.join(".")}>
+      <CollapsableSection
+        titleElement={
+          <span className="font-bold text-lg flex flex-row items-center">
+            {name}
+          </span>
+        }
+        fullPath={procedure.pathFromRootRouter}
+        sectionType={procedure.procedureType}
+        focusOnScrollRef={formRef}
       >
-        <div className="flex flex-col">
-          <DocumentationSection extraData={procedure.extraData} />
-
-          <FormSection
-            title="Input"
-            topRightElement={<XButton control={control} reset={reset} />}
-          >
-            {procedure.node.type === "object" ? (
-              Object.keys(procedure.node.children).length > 0 && (
-                <ObjectField
-                  node={
-                    procedure.node as ParsedInputNode & {
-                      type: "object";
+        <form
+          className="flex flex-col space-y-4"
+          onSubmit={handleSubmit(onSubmit)}
+          ref={formRef}
+        >
+          <div className="flex flex-col">
+            <DocumentationSection extraData={procedure.extraData} />
+
+            <FormSection
+              title="Input"
+              topRightElement={<XButton control={control} reset={reset} />}
+            >
+              {procedure.node.type === "object" ? (
+                Object.keys(procedure.node.children).length > 0 && (
+                  <ObjectField
+                    node={
+                      procedure.node as ParsedInputNode & {
+                        type: "object";
+                      }
                     }
-                  }
-                  label={fieldName}
-                  control={control}
-                  topLevel
-                />
-              )
+                    label={fieldName}
+                    control={control}
+                    topLevel
+                  />
+                )
+              ) : (
+                <Field inputNode={procedure.node} control={control} />
+              )}
+
+              <ProcedureFormButton
+                text={`Execute ${name}`}
+                colorScheme={"neutral"}
+                loading={query.fetchStatus === "fetching" || mutation.isLoading}
+              />
+            </FormSection>
+          </div>
+        </form>
+        <div className="flex flex-col space-y-4">
+          {data && <RequestResult result={data} />}
+          {!data && data !== null && (
+            <Response>Successful request but no data was returned</Response>
+          )}
+          {error &&
+            (isTrpcError(error) ? (
+              <Error error={error} />
             ) : (
-              <Field inputNode={procedure.node} control={control} />
-            )}
-
-            <ProcedureFormButton
-              text={`Execute ${name}`}
-              colorScheme={"neutral"}
-              loading={query.fetchStatus === "fetching" || mutation.isLoading}
-            />
-          </FormSection>
+              <Response>{JSON.stringify(error)}</Response>
+            ))}
         </div>
-      </form>
-      <div className="flex flex-col space-y-4">
-        {data && <RequestResult result={data} />}
-        {!data && data !== null && (
-          <Response>Successful request but no data was returned</Response>
-        )}
-        {error &&
-          (isTrpcError(error) ? (
-            <Error error={error} />
-          ) : (
-            <Response>{JSON.stringify(error)}</Response>
-          ))}
-      </div>
-    </CollapsableSection>
+      </CollapsableSection>
+    </ProcedureFormContextProvider>
   );
 }
 

diff --git a/packages/trpc-panel/src/react-app/components/form/fields/ObjectField.tsx b/packages/trpc-panel/src/react-app/components/form/fields/ObjectField.tsx
@@ -22,7 +22,14 @@ export function ObjectField({
     return (
       <div className={"space-y-2 flex-col flex p-1 "}>
         {Object.entries(node.children).map(([name, e]) => (
-          <Field inputNode={e} control={control} key={name} />
+          <Field
+            inputNode={{
+              ...e,
+              path: node.path.concat([name]),
+            }}
+            control={control}
+            key={name}
+          />
         ))}
       </div>
     );
@@ -33,7 +40,14 @@ export function ObjectField({
       iconElement={overrideIconElement ?? <ObjectIcon className="mr-1" />}
     >
       {Object.entries(node.children).map(([childFieldName, e]) => (
-        <Field inputNode={e} control={control} key={childFieldName} />
+        <Field
+          inputNode={{
+            ...e,
+            path: node.path.concat([childFieldName]),
+          }}
+          control={control}
+          key={childFieldName}
+        />
       ))}
     </InputGroupContainer>
   );

diff --git a/packages/trpc-panel/src/react-app/components/form/fields/base/BaseCheckboxField.tsx b/packages/trpc-panel/src/react-app/components/form/fields/base/BaseCheckboxField.tsx
@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import { FieldError } from "@src/react-app/components/form/fields/FieldError";
 import { useEnableInputGlobalHotkeys } from "@src/react-app/components/contexts/HotKeysContext";
+import { useProcedureFormContext } from "@src/react-app/components/form/ProcedureForm/ProcedureFormContext";
 
 export function BaseCheckboxField({
   value,
@@ -17,17 +18,19 @@ export function BaseCheckboxField({
 }) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   useEnableInputGlobalHotkeys(inputRef, []);
+  const { path: procedurePath } = useProcedureFormContext();
+  const id = procedurePath + "." + fieldId;
   return (
     <div className="flex flex-col">
-      <label htmlFor={fieldId} className="flex flex-row items-center">
+      <label htmlFor={id} className="flex flex-row items-center">
         <input
           ref={inputRef}
           checked={value}
           onChange={(e) => onChange(e.target.checked)}
           className="mr-2"
           type="checkbox"
-          name={fieldId}
-          id={fieldId}
+          name={id}
+          id={id}
         />
         {label}
       </label>