2 files changed, 135 insertions, 78 deletions

diff --git a/src/components/FormBuilder/FinalForm.js b/src/components/FormBuilder/FinalForm.js
new file mode 100644
index 0000000..070a0fe
--- /dev/null
+++ b/src/components/FormBuilder/FinalForm.js
@@ -0,0 +1,12 @@
+import { Form } from "./index";
+
+export default function FinalForm({ formId, setResults, results }) {
+  return (
+    <Form
+      formId={formId}
+      editable={false}
+      setResults={setResults}
+      results={results}
+    />
+  );
+}
diff --git a/src/components/FormBuilder/index.js b/src/components/FormBuilder/index.js
index 5636b32..5c77c25 100644
--- a/src/components/FormBuilder/index.js
+++ b/src/components/FormBuilder/index.js
@@ -8,7 +8,9 @@ import {
   TextField,
 } from "@mui/material";
 import React, { useRef, useState } from "react";
-export default function FormBuilder() {
+import useForm from "../../hooks/useForm";
+
+export default function FormBuilder({ formId }) {
   return (
     <Stack direction={"column"}>
       <h3>FormBuilder</h3>
@@ -18,7 +20,7 @@ export default function FormBuilder() {
         alignItems={"flex-start"}
         spacing={2}
       >
-        <Form initialForm={false} editable />
+        <Form initialForm={false} editable formId={formId} />
         <WidgetsLibrary />
       </Stack>
     </Stack>
@@ -28,43 +30,57 @@ export default function FormBuilder() {
 const availableWidgets = {
   label: {
     name: "Label",
-    element: ({ id, name, setName }) => (
-      <TextField
-        id={id}
-        variant="standard"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-        fullWidth
-      />
-    ),
-    finalElement: ({ id }) => <div>{id}</div>,
+    element: ({ id, name, setName, finalField }) =>
+      finalField ? (
+        <div>{name}</div>
+      ) : (
+        <TextField
+          id={id}
+          variant="standard"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          fullWidth
+        />
+      ),
   },
   number: {
     name: "Number",
-    element: ({ id }) => (
+    element: ({ id, value, setValue }) => (
       <TextField
         id={id}
         label={id ? `example field ${id}` : "Outlined"}
         variant="outlined"
         type={"number"}
+        value={value || ""}
+        onChange={(e) => {
+          if (setValue) {
+            setValue(e.target.value);
+          }
+        }}
         fullWidth
       />
     ),
   },
   text: {
     name: "Text",
-    element: ({ id }) => (
+    element: ({ id, setValue, value }) => (
       <TextField
         id={id}
         label={id ? `example field ${id}` : "Outlined"}
         variant="outlined"
         fullWidth
+        value={value || ""}
+        onChange={(e) => {
+          if (setValue) {
+            setValue(e.target.value);
+          }
+        }}
       />
     ),
   },
   multiline: {
     name: "Multiline",
-    element: ({ id }) => (
+    element: ({ id, setValue, value }) => (
       <TextField
         id={id}
         label={id ? `example field ${id}` : "Multiline"}
@@ -72,6 +88,12 @@ const availableWidgets = {
         multiline
         minRows={4}
         fullWidth
+        value={value || ""}
+        onChange={(e) => {
+          if (setValue) {
+            setValue(e.target.value);
+          }
+        }}
       />
     ),
   },
@@ -134,7 +156,14 @@ function WidgetCard({ name, element, type, finalElement }) {
   }
 }
 
-function FormField({ formField, setFormField, deleteFormField }) {
+function FormField({
+  formField,
+  setFormField,
+  deleteFormField,
+  editable,
+  setResult,
+  result,
+}) {
   const { id, type, name } = formField;
 
   function setName(name) {
@@ -147,33 +176,47 @@ function FormField({ formField, setFormField, deleteFormField }) {
   const { element: Element } = availableWidgets[type];
   const dragHandleRef = useRef();
   const [target, setTarget] = useState();
-  return (
-    <Stack
-      direction={"row"}
-      sx={{ width: "100%" }}
-      alignItems={"center"}
-      justifyContent={"space-between"}
-      draggable
-      onMouseDown={(e) => {
-        setTarget(e.target);
-      }}
-      onDragStart={(e) => {
-        if (dragHandleRef.current.contains(target)) {
-          e.dataTransfer.setData("application/formwidgetid", id);
-        } else {
-          e.preventDefault();
-        }
-      }}
-    >
-      <span ref={dragHandleRef} style={{ cursor: "grab" }}>
-        <DragIndicator />
-      </span>
-      <Element id={id} name={name} setName={setName} type={type} />
-      <IconButton onClick={deleteFormField}>
-        <Clear />
-      </IconButton>
-    </Stack>
-  );
+  if (!editable) {
+    return (
+      <Element
+        id={id}
+        name={name}
+        setName={setName}
+        type={type}
+        finalField={!editable}
+        setValue={setResult}
+        value={result?.result}
+      />
+    );
+  } else {
+    return (
+      <Stack
+        direction={"row"}
+        sx={{ width: "100%" }}
+        alignItems={"center"}
+        justifyContent={"space-between"}
+        draggable
+        onMouseDown={(e) => {
+          setTarget(e.target);
+        }}
+        onDragStart={(e) => {
+          if (dragHandleRef.current.contains(target)) {
+            e.dataTransfer.setData("application/formwidgetid", id);
+          } else {
+            e.preventDefault();
+          }
+        }}
+      >
+        <span ref={dragHandleRef} style={{ cursor: "grab" }}>
+          <DragIndicator />
+        </span>
+        <Element id={id} name={name} setName={setName} type={type} />
+        <IconButton onClick={deleteFormField}>
+          <Clear />
+        </IconButton>
+      </Stack>
+    );
+  }
 }
 
 function capture(e) {
@@ -214,8 +257,9 @@ function DropZone({ insertField, index, moveField }) {
   );
 }
 
-function Form({ initialForm, editable }) {
-  const [form, setForm] = useState({ fields: [], ...initialForm });
+export function Form({ editable, formId, setResults, results }) {
+  // const [form, setForm] = useState({ fields: [], ...initialForm });
+  const [form, setForm] = useForm(formId);
 
   function updateFormField(newField) {
     setForm({
@@ -254,41 +298,42 @@ function Form({ initialForm, editable }) {
     setForm({ ...form });
   }
 
-  if (!editable && !initialForm) {
-    return;
-    // else if (!initialForm) {
-    //   return <FormInitialPrompt />;
-    // }
-  } else {
-    return (
-      <Stack sx={{ width: "100%" }}>
-        <FormHeader form={form} />
-        {editable && (
-          <DropZone
-            moveField={moveField}
-            insertField={insertField}
-            index={-1}
+  function setResult(fieldId, result) {
+    const fieldResult = {
+      fieldId,
+      result,
+      fieldName: form?.fields?.find(({ id }) => id === fieldId)?.name,
+    };
+    setResults({ ...results, [fieldId]: fieldResult });
+  }
+
+  return (
+    <Stack sx={{ width: "100%" }} spacing={editable ? 0 : 1}>
+      <FormHeader form={form} />
+      {editable && (
+        <DropZone moveField={moveField} insertField={insertField} index={-1} />
+      )}
+      {form?.fields?.map((formField, i) => (
+        <Grouping key={formField.id}>
+          <FormField
+            setFormField={(field) => updateFormField(field)}
+            deleteFormField={() => deleteFormField(formField.id)}
+            formField={formField}
+            editable={editable}
+            setResult={results && ((result) => setResult(formField.id, result))}
+            result={results && results[formField.id]}
           />
-        )}
-        {form?.fields?.map((formField, i) => (
-          <Grouping key={formField.id}>
-            <FormField
-              setFormField={(field) => updateFormField(field)}
-              deleteFormField={() => deleteFormField(formField.id)}
-              formField={formField}
+          {editable && (
+            <DropZone
+              moveField={moveField}
+              insertField={insertField}
+              index={i}
             />
-            {editable && (
-              <DropZone
-                moveField={moveField}
-                insertField={insertField}
-                index={i}
-              />
-            )}
-          </Grouping>
-        ))}
-      </Stack>
-    );
-  }
+          )}
+        </Grouping>
+      ))}
+    </Stack>
+  );
 }
 
 function FormHeader() {