From 2497561cd3fe634a61571764ec3c815089b933ec Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 27 Jun 2023 15:44:55 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat(API):=20add=20postCustomCom?=
 =?UTF-8?q?ponent=20function=20to=20send=20custom=20component=20code=20to?=
 =?UTF-8?q?=20the=20server=20=F0=9F=9A=80=20feat(CodeAreaModal):=20replace?=
 =?UTF-8?q?=20UpdateTemplate=20function=20with=20postCustomComponent=20fun?=
 =?UTF-8?q?ction=20to=20send=20custom=20component=20code=20to=20the=20serv?=
 =?UTF-8?q?er=20The=20UpdateTemplate=20function=20was=20not=20being=20used?=
 =?UTF-8?q?=20and=20was=20removed.=20The=20postCustomComponent=20function?=
 =?UTF-8?q?=20was=20added=20to=20send=20custom=20component=20code=20to=20t?=
 =?UTF-8?q?he=20server.=20The=20CodeAreaModal=20component=20was=20updated?=
 =?UTF-8?q?=20to=20use=20the=20new=20postCustomComponent=20function=20inst?=
 =?UTF-8?q?ead=20of=20the=20UpdateTemplate=20function=20to=20send=20custom?=
 =?UTF-8?q?=20component=20code=20to=20the=20server.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/controllers/API/index.ts     |  9 +++---
 .../src/modals/codeAreaModal/index.tsx        | 32 +++++++------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 60820bb7e..516e34201 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -3,7 +3,6 @@ import {
   PromptTypeAPI,
   errorsTypeAPI,
   InitTypeAPI,
-  TemplateVariableType,
   APITemplateType,
 } from "./../../types/api/index";
 import { APIObjectType, sendAllProps } from "../../types/api/index";
@@ -322,6 +321,8 @@ export async function postBuildInit(
   return await axios.post(`/api/v1/build/init`, flow);
 }
 
-export async function UpdateTemplate(type:string, template:APITemplateType):Promise<AxiosResponse<{template:APITemplateType}>>{
-  return await axios.get(`/dynamic_node`);
-}
\ No newline at end of file
+export async function postCustomComponent(
+  code: string
+): Promise<AxiosResponse<{ template: APITemplateType }>> {
+  return await axios.post(`/api/v1/custom_component`, { code });
+}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 451946b0e..536404fcc 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -1,5 +1,5 @@
-import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline";
-import { Fragment, useContext, useRef, useState } from "react";
+import { CommandLineIcon } from "@heroicons/react/24/outline";
+import { useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-python";
@@ -8,9 +8,8 @@ import "ace-builds/src-noconflict/theme-twilight";
 import "ace-builds/src-noconflict/ext-language_tools";
 // import "ace-builds/webpack-resolver";
 import { darkContext } from "../../contexts/darkContext";
-import { UpdateTemplate, postValidateCode } from "../../controllers/API";
+import { postCustomComponent, postValidateCode } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
-import { TabsContext } from "../../contexts/tabsContext";
 import {
   Dialog,
   DialogContent,
@@ -22,18 +21,17 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
-import Loading from "../../components/ui/loading";
 import { APITemplateType } from "../../types/api";
 
 export default function CodeAreaModal({
   value,
   setValue,
   template,
-  setTemplate
+  setTemplate,
 }: {
   setValue: (value: string) => void;
   value: string;
-  template: APITemplateType,
+  template: APITemplateType;
   setTemplate: (template: APITemplateType) => void;
 }) {
   const [open, setOpen] = useState(true);
@@ -88,19 +86,17 @@ export default function CodeAreaModal({
       .catch((_) => {
         setLoading(false);
         setErrorData({
-          title:
-            "There is something wrong with this code, please review it",
-        })
-      }
-      );
-    UpdateTemplate('code',template).then((apiReturn) => {
+          title: "There is something wrong with this code, please review it",
+        });
+      });
+    postCustomComponent(code).then((apiReturn) => {
       const data = apiReturn.data;
       if (data.template) {
-        console.log('updated')
+        console.log("updated");
         setTemplate(data.template);
         setModalOpen(false);
       }
-    })
+    });
   }
 
   return (
@@ -137,11 +133,7 @@ export default function CodeAreaModal({
         </div>
 
         <DialogFooter>
-          <Button
-            className="mt-3"
-            onClick={handleClick}
-            type="submit"
-          >
+          <Button className="mt-3" onClick={handleClick} type="submit">
             {/* {loading?(<Loading/>):'Check & Save'} */}
             Check & Save
           </Button>