From 52baae64e6991ecb7ae1906b0df55ded99f251ff Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 13 Jun 2023 18:05:11 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(chatComponent):=20remov?=
 =?UTF-8?q?e=20unused=20imports=20and=20variables,=20and=20extract=20postB?=
 =?UTF-8?q?uildInit=20function=20to=20API=20controller=20=E2=9C=A8=20feat(?=
 =?UTF-8?q?API):=20add=20postBuildInit=20function=20to=20handle=20POST=20r?=
 =?UTF-8?q?equests=20to=20/api/v1/build/init=20The=20chatComponent=20file?=
 =?UTF-8?q?=20had=20unused=20imports=20and=20variables=20that=20were=20rem?=
 =?UTF-8?q?oved=20to=20improve=20code=20readability.=20The=20postBuildInit?=
 =?UTF-8?q?=20function=20was=20extracted=20to=20the=20API=20controller=20t?=
 =?UTF-8?q?o=20improve=20code=20organization=20and=20maintainability.=20Th?=
 =?UTF-8?q?e=20function=20handles=20POST=20requests=20to=20/api/v1/build/i?=
 =?UTF-8?q?nit.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chatComponent/buildTrigger/index.tsx      | 36 ++++++++++---------
 src/frontend/src/controllers/API/index.ts     | 17 ++++++---
 src/frontend/src/types/api/index.ts           |  4 +++
 src/frontend/vite.config.ts                   | 13 +++----
 4 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index d447780e1..c09d2bb82 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -1,16 +1,13 @@
-import { useState, useContext, useRef, useEffect } from "react";
+import { useState, useContext } from "react";
 import { Transition } from "@headlessui/react";
-import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
 import { Zap } from "lucide-react";
-import { nodeColors, validateNodes } from "../../../utils";
-import { PopUpContext } from "../../../contexts/popUpContext";
-import ChatModal from "../../../modals/chatModal";
+import { validateNodes } from "../../../utils";
 import { FlowType } from "../../../types/flow";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
-import axios from "axios";
 import { typesContext } from "../../../contexts/typesContext";
 import { alertContext } from "../../../contexts/alertContext";
+import { postBuildInit } from "../../../controllers/API";
 
 export default function BuildTrigger({
   open,
@@ -26,21 +23,24 @@ export default function BuildTrigger({
   const [isBuilding, setIsBuilding] = useState(false);
 
   const { updateSSEData } = useSSE();
-  const {reactFlowInstance} = useContext(typesContext);
-  const {setErrorData} = useContext(alertContext)
+  const { reactFlowInstance } = useContext(typesContext);
+  const { setErrorData } = useContext(alertContext);
 
   async function handleBuild(flow: FlowType) {
-    const errors = validateNodes(reactFlowInstance)
-    if(errors.length > 0) {
-      setErrorData({title: "Oops! Looks like you missed something", list: errors})
-      return
+    const errors = validateNodes(reactFlowInstance);
+    if (errors.length > 0) {
+      setErrorData({
+        title: "Oops! Looks like you missed something",
+        list: errors,
+      });
+      return;
     }
     const minimumLoadingTime = 200; // in milliseconds
     const startTime = Date.now();
     setIsBuilding(true);
 
     try {
-      const allNodesValid = await streamNodeData(`/build/init`, flow);
+      const allNodesValid = await streamNodeData(flow);
       await enforceMinimumLoadingTime(startTime, minimumLoadingTime);
       setIsBuilt(allNodesValid);
     } catch (error) {
@@ -50,15 +50,15 @@ export default function BuildTrigger({
     }
   }
 
-  async function streamNodeData(apiUrl: string, flow: FlowType) {
+  async function streamNodeData(flow: FlowType) {
     // Step 1: Make a POST request to send the flow data and receive a unique session ID
-    const response = await axios.post(apiUrl, flow);
+    const response = await postBuildInit(flow);
     const { flowId } = response.data;
 
     // Step 2: Use the session ID to establish an SSE connection using EventSource
     let validationResults = [];
     let finished = false;
-    apiUrl = `/build/stream/${flowId}`;
+    const apiUrl = `/build/stream/${flowId}`;
     const eventSource = new EventSource(apiUrl);
 
     eventSource.onmessage = (event) => {
@@ -128,7 +128,9 @@ export default function BuildTrigger({
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
           className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-700 via-blue-600 to-blue-500 dark:border-gray-600 cursor-pointer"
-          onClick={() => {if(!isBuilding) handleBuild(flow)}}
+          onClick={() => {
+            if (!isBuilding) handleBuild(flow);
+          }}
         >
           <button>
             <div className="flex gap-3 items-center">
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 2b8a4ed85..89b17ef7a 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -2,29 +2,30 @@ import {
   BuildStatusTypeAPI,
   PromptTypeAPI,
   errorsTypeAPI,
+  InitTypeAPI,
 } from "./../../types/api/index";
 import { APIObjectType, sendAllProps } from "../../types/api/index";
 import axios, { AxiosResponse } from "axios";
 import { FlowType } from "../../types/flow";
 
 export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
-  return await axios.get(`/all`);
+  return await axios.get(`/api/v1/all`);
 }
 
 export async function sendAll(data: sendAllProps) {
-  return await axios.post(`/predict`, data);
+  return await axios.post(`/api/v1/predict`, data);
 }
 
 export async function checkCode(
   code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
-  return await axios.post("/validate/code", { code });
+  return await axios.post("/api/v1/validate/code", { code });
 }
 
 export async function checkPrompt(
   template: string
 ): Promise<AxiosResponse<PromptTypeAPI>> {
-  return await axios.post("/validate/prompt", { template });
+  return await axios.post("/api/v1/validate/prompt", { template });
 }
 
 export async function getExamples(): Promise<FlowType[]> {
@@ -47,5 +48,11 @@ export async function getExamples(): Promise<FlowType[]> {
 export async function getBuildStatus(
   flowId: string
 ): Promise<BuildStatusTypeAPI> {
-  return await axios.get(`/build/${flowId}/status`);
+  return await axios.get(`/api/v1/build/${flowId}/status`);
+}
+
+export async function postBuildInit(
+  flow: FlowType
+): Promise<AxiosResponse<InitTypeAPI>> {
+  return await axios.post(`/api/v1/build/init`, flow);
 }
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index a07e9e7ed..534657644 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -42,3 +42,7 @@ export type PromptTypeAPI = { input_variables: Array<string> };
 export type BuildStatusTypeAPI = {
   built: boolean;
 };
+
+export type InitTypeAPI = {
+  flowId: string;
+};
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 564343d19..d572ebc07 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -2,13 +2,12 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import svgr from "vite-plugin-svgr";
 const apiRoutes = [
-  "/all",
-  "/predict",
-  "^/validate/*",
-  "^/chat/*",
-  "/version",
+  "/api/v1/all",
+  "/api/v1/predict",
+  "^/api/v1/validate/*",
+  "/api/v1/chat/*",
+  "/api/v1/version",
   "/health",
-  "^/build/*",
 ];
 
 // Use environment variable to determine the target.
@@ -20,11 +19,9 @@ const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
     changeOrigin: true,
     secure: false,
     ws: true,
-    rewrite: (path) => `/api/v1${path}`,
   };
   return proxyObj;
 }, {});
-
 export default defineConfig(() => {
   return {
     build: {