opencodeiiita · BuddyLongLegs · Jul 13, 2023 · Jul 5, 2023 · Jul 5, 2023 · Jul 7, 2023
diff --git a/components/elements/FormInput/index.js b/components/elements/FormInput/index.js
@@ -1,5 +1,13 @@
 import React from "react";
-import { Input, Checkbox, Dropdown, Button, Space, Select, message } from "antd";
+import {
+  Input,
+  Checkbox,
+  Dropdown,
+  Button,
+  Space,
+  Select,
+  message,
+} from "antd";
 import { AiOutlineDown, AiOutlinePlus, AiOutlineClose } from "react-icons/ai";
 import CustomParameter from "../CustomParameterInput";
 export default function FormInput({ fields, setFields, hasFileField }) {
@@ -32,7 +40,10 @@ export default function FormInput({ fields, setFields, hasFileField }) {
   const handleMenuClick = (e) => {};
   const addField = () => {
     if (fields.length < 10) {
-      setFields([...fields, { name: "", isRequired: false }]);
+      setFields((prev) => [
+        ...prev,
+        { label: "", type: "text", required: false },
+      ]);
     } else {
       message.error("You cannot add more than 10 fields");
     }
@@ -51,7 +62,9 @@ export default function FormInput({ fields, setFields, hasFileField }) {
   return (
     <>
       <div className="rounded-lg  border-solid border-2 border-[#01684a] p-4 flex flex-col gap-2">
-        <div className="text-lg text-[#01684a] font-bold">Add Fields to your Form</div>
+        <div className="text-lg text-[#01684a] font-bold">
+          Add Fields to your Form
+        </div>
         {fields.map((field, i) => (
           <div className="flex flex-col gap-4" key={i}>
             <div className="border-2 rounded-lg p-4 flex flex-col gap-2">
@@ -63,7 +76,11 @@ export default function FormInput({ fields, setFields, hasFileField }) {
                     style={{ width: "100%" }}
                     options={
                       hasFileField
-                        ? options.filter((option) => option.label !== "file" && option.label !== "image")
+                        ? options.filter(
+                            (option) =>
+                              option.label !== "file" &&
+                              option.label !== "image"
+                          )
                         : options
                     }
                     showArrow={true}
@@ -109,7 +126,12 @@ export default function FormInput({ fields, setFields, hasFileField }) {
                   </Checkbox>
                 </div>
                 <div onClick={() => handleRemove(i)}>
-                  <AiOutlineClose size={20} strokeWidth={12} className="cursor-pointer" fill="#970606" />
+                  <AiOutlineClose
+                    size={20}
+                    strokeWidth={12}
+                    className="cursor-pointer"
+                    fill="#970606"
+                  />
                 </div>
               </div>
               {/* <div className="flex flex-col gap-2">

diff --git a/components/elements/FormResponse/index.js b/components/elements/FormResponse/index.js
@@ -1,26 +1,26 @@
-import React from 'react';
+import React from "react";
+import moment from "moment";
+
 export default function FormResponse({ response }) {
-  return (
-    <>
-      <div className="border-2 rounded-lg">
-        <div className="p-4 flex flex-col">
-          <div className="flex flex-row gap-1">
-            <div className="text-[#001e2b] font-semibold text-sm">Name:</div>
-            <div className="text-[#006bfb] font-base text-sm">Manas Gupta</div>
-          </div>
-          <div className="flex flex-row gap-1">
-            <div className="text-[#001e2b] font-semibold text-sm">City:</div>
-            <div className="text-[#006bfb] font-base text-sm">Ludhiana</div>
-          </div>
-          <div className="flex flex-row gap-1">
-            <div className="text-[#001e2b] font-semibold text-sm">State:</div>
-            <div className="text-[#006bfb] font-base text-sm">Punjab</div>
-          </div>
-          <div className="self-end text-[#001e2b] italic text-xs">
-            Submittted a week ago
-          </div>
-        </div>
-      </div>
-    </>
-  );
+    return (
+        <>
+            <div className="border-2 rounded-lg">
+                <div className="p-4 flex flex-col">
+                    {Object.entries(response.data).map((el) => (
+                        <div className="flex flex-row gap-1">
+                            <div className="text-[#001e2b] font-semibold text-sm">
+                                {el[0]}:
+                            </div>
+                            <div className="text-[#006bfb] font-base text-sm">
+                                {el[1]}
+                            </div>
+                        </div>
+                    ))}
+                    <div className="self-end text-[#001e2b] italic text-xs">
+                        {moment(response.createdAt).fromNow()}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
 }
diff --git a/components/utils/API/index.js b/components/utils/API/index.js
@@ -66,7 +66,11 @@ const get = async (endpoint, token = null) => {
 
 const patch = async (endpoint, body, token = null) => {
   try {
-    const response = await axios.patch(API_URL + endpoint, body, getHeaders(token));
+    const response = await axios.patch(
+      API_URL + endpoint,
+      body,
+      getHeaders(token)
+    );
     return response.data;
   } catch (err) {
     console.error(err?.response?.data || err);

diff --git a/components/utils/JSONSchema/index.js b/components/utils/JSONSchema/index.js
@@ -1,50 +1,62 @@
 const options = {
-    email: { type: "string", format: "email" },
-    checkbox: { type: "boolean" },
-    color: {
-        type: "string",
-        pattern: "^#[0-9a-f]{3}([0-9a-f]{3})?$",
-    },
-    date: { type: "string", format: "date" },
-    "datetime-local": { type: "string", format: "date-time" },
-    image: {
-        type: "string",
-        format: "uri",
-    },
-    hidden: { type: "boolean" },
-    month: { type: "integer", minimum: 1, maximum: 12 },
-    number: { type: "number" },
-    radio: { type: "boolean" },
-    range: { type: "number" },
-    reset: { type: "boolean" },
-    search: { type: "string" },
-    tel: {
-        type: "string",
-        minLength: 10,
-        maxLength: 20,
-        pattern: "^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$",
-    },
-    text: { type: "string" },
-    time: { type: "string", format: "time" },
-    url: { type: "string", format: "uri" },
-    week: { type: "number", minimum: 1, maximum: 53 },
-    file: { type: "string", format: "uri" },
-    password: { type: "string" },
+  email: { type: "string", format: "email" },
+  checkbox: { type: "boolean" },
+  color: {
+    type: "string",
+    pattern: "^#[0-9a-f]{3}([0-9a-f]{3})?$",
+  },
+  date: { type: "string", format: "date" },
+  "datetime-local": { type: "string", format: "date-time" },
+  image: {
+    type: "string",
+    format: "uri",
+  },
+  hidden: { type: "boolean" },
+  month: { type: "integer", minimum: 1, maximum: 12 },
+  number: { type: "number" },
+  radio: { type: "boolean" },
+  range: { type: "number" },
+  reset: { type: "boolean" },
+  search: { type: "string" },
+  tel: {
+    type: "string",
+    minLength: 10,
+    maxLength: 20,
+    pattern: "^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$",
+  },
+  text: { type: "string" },
+  time: { type: "string", format: "time" },
+  url: { type: "string", format: "uri" },
+  week: { type: "number", minimum: 1, maximum: 53 },
+  file: { type: "string" },
+  password: { type: "string" },
 };
 
-const createJSONSchema = (inputs) => {
-    let JSONSchema = {
-        type: "object",
-        properties: {},
-        required: [],
-        additionalProperties: false,
+export const createJSONSchema = (inputs) => {
+  let JSONSchema = {
+    type: "object",
+    properties: {},
+    required: [],
+    additionalProperties: false,
+  };
+  inputs.forEach((input) => {
+    JSONSchema.properties[input.name] = options[input.type];
+    if (input.isRequired) {
+      JSONSchema.required.push(input.name);
+    }
+  });
+  return JSONSchema;
+};
+
+export const schemaToInputsConverter = (schema) => {
+  const inputs = [];
+  for (const [key, value] of Object.entries(schema.properties)) {
+    const input = {
+      name: key,
+      type: value.type,
+      isRequired: schema.required.includes(key),
     };
-    inputs.forEach((input) => {
-        JSONSchema.properties[input.name] = options[input.type];
-        if (input.isRequired) {
-            JSONSchema.required.push(input.name);
-        }
-    });
-    return JSONSchema;
+    inputs.push(input);
+  }
+  return inputs;
 };
-export default createJSONSchema;