From 80de5b19ea4497b74ba59d05efe894388d865719 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Fri, 9 Jun 2023 15:44:49 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat(App.tsx):=20add=20getVersio?= =?UTF-8?q?n=20function=20to=20fetch=20API=20version=20=F0=9F=9A=80=20feat?= =?UTF-8?q?(API/index.ts):=20add=20getVersion=20function=20to=20fetch=20AP?= =?UTF-8?q?I=20version=20=F0=9F=9A=80=20feat(cardComponent/index.tsx):=20a?= =?UTF-8?q?dd=20CardComponent=20to=20display=20flow=20data=20=F0=9F=9A=80?= =?UTF-8?q?=20feat(types/flow/index.ts):=20add=20FlowStyleType=20to=20repr?= =?UTF-8?q?esent=20flow=20styles=20The=20getVersion=20function=20was=20add?= =?UTF-8?q?ed=20to=20fetch=20the=20version=20of=20the=20API.=20The=20CardC?= =?UTF-8?q?omponent=20was=20added=20to=20display=20flow=20data.=20The=20Fl?= =?UTF-8?q?owStyleType=20was=20added=20to=20represent=20flow=20styles.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/App.tsx | 3 +- src/frontend/src/controllers/API/index.ts | 125 +++++++++++++++++- .../components/cardComponent/index.tsx | 10 +- src/frontend/src/types/flow/index.ts | 1 + 4 files changed, 131 insertions(+), 8 deletions(-) rename src/frontend/src/{ => pages/MainPage}/components/cardComponent/index.tsx (91%) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index ede56aaa0..b16c36766 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -14,6 +14,7 @@ import { ErrorBoundary } from "react-error-boundary"; import CrashErrorComponent from "./components/CrashErrorComponent"; import { TabsContext } from "./contexts/tabsContext"; import MainPage from "./pages/MainPage"; +import { getVersion } from "./controllers/API"; export default function App() { let { setCurrent, setShowSideBar, setIsStackedOpen } = @@ -49,7 +50,7 @@ export default function App() { // Initialize state variable for the version const [version, setVersion] = useState(""); useEffect(() => { - fetch("/version") + getVersion() .then((res) => res.json()) .then((data) => { setVersion(data.version); diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 42038a89a..a7270a7a0 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -1,28 +1,56 @@ import { PromptTypeAPI, errorsTypeAPI } from "./../../types/api/index"; import { APIObjectType, sendAllProps } from "../../types/api/index"; import axios, { AxiosResponse } from "axios"; -import { FlowType } from "../../types/flow"; +import { FlowStyleType, FlowType } from "../../types/flow"; +/** + * Fetches all objects from the API endpoint. + * + * @returns {Promise>} A promise that resolves to an AxiosResponse containing all the objects. + */ export async function getAll(): Promise> { return await axios.get(`/all`); } +/** + * Sends data to the API for prediction. + * + * @param {sendAllProps} data - The data to be sent to the API. + * @returns {AxiosResponse} The API response. + */ export async function sendAll(data: sendAllProps) { return await axios.post(`/predict`, data); } +/** + * Validates code by sending it to an API endpoint. + * + * @param {string} code - The code to validate. + * @returns {Promise>} A promise that resolves to an AxiosResponse containing the validation results. + */ export async function checkCode( code: string ): Promise> { return await axios.post("/validate/code", { code }); } +/** + * Checks the prompt for the code block by sending it to an API endpoint. + * + * @param {string} template - The template string of the prompt to check. + * @returns {Promise>} A promise that resolves to an AxiosResponse containing the validation results. + */ export async function checkPrompt( template: string ): Promise> { return await axios.post("/validate/prompt", { template }); } +/** + * Fetches a list of JSON files from a GitHub repository and returns their contents as an array of FlowType objects. + * + * @returns {Promise} A promise that resolves to an array of FlowType objects. + */ export async function getExamples(): Promise { const url = "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples"; @@ -40,6 +68,13 @@ export async function getExamples(): Promise { return await Promise.all(contentsPromises); } +/** + * Saves a new flow to the database. + * + * @param {FlowType} newFlow - The flow data to save. + * @returns {Promise} The saved flow data. + * @throws Will throw an error if saving fails. + */ export async function saveFlowToDatabase(newFlow: FlowType) { try { const response = await fetch("/flows/", { @@ -63,7 +98,13 @@ export async function saveFlowToDatabase(newFlow: FlowType) { throw error; } } - +/** + * Updates an existing flow in the database. + * + * @param {FlowType} updatedFlow - The updated flow data. + * @returns {Promise} The updated flow data. + * @throws Will throw an error if the update fails. + */ export async function updateFlowInDatabase(updatedFlow: FlowType) { try { const response = await fetch(`/flows/${updatedFlow.id}`, { @@ -88,6 +129,12 @@ export async function updateFlowInDatabase(updatedFlow: FlowType) { } } +/** + * Reads all flows from the database. + * + * @returns {Promise} The flows data. + * @throws Will throw an error if reading fails. + */ export async function readFlowsFromDatabase() { try { const response = await fetch("/flows/"); @@ -101,6 +148,13 @@ export async function readFlowsFromDatabase() { } } +/** + * Deletes a flow from the database. + * + * @param {string} flowId - The ID of the flow to delete. + * @returns {Promise} The deleted flow data. + * @throws Will throw an error if deletion fails. + */ export async function deleteFlowFromDatabase(flowId: string) { try { const response = await fetch(`/flows/${flowId}`, { @@ -116,6 +170,13 @@ export async function deleteFlowFromDatabase(flowId: string) { } } +/** + * Fetches a flow from the database by ID. + * + * @param {number} flowId - The ID of the flow to fetch. + * @returns {Promise} The flow data. + * @throws Will throw an error if fetching fails. + */ export async function getFlowFromDatabase(flowId: number) { try { const response = await fetch(`/flows/${flowId}`); @@ -129,6 +190,66 @@ export async function getFlowFromDatabase(flowId: number) { } } +/** + * Fetches flow styles from the database. + * + * @returns {Promise} The flow styles data. + * @throws Will throw an error if fetching fails. + */ +export async function getFlowStylesFromDatabase() { + try { + const response = await fetch("/flows_styles/"); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + } catch (error) { + console.error(error); + throw error; + } +} + +/** + * Saves a new flow style to the database. + * + * @param {FlowStyleType} flowStyle - The flow style data to save. + * @returns {Promise} The saved flow style data. + * @throws Will throw an error if saving fails. + */ +export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) { + try { + const response = await fetch("/flows_styles/", { + method: "POST", + headers: { + accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify(flowStyle), + }); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + } catch (error) { + console.error(error); + throw error; + } +} + +/** + * Fetches the version of the API. + * + * @returns {Promise>} A promise that resolves to an AxiosResponse containing the version information. + */ +export async function getVersion() { + return await axios.get("/version"); +} + +/** + * Fetches the health status of the API. + * + * @returns {Promise>} A promise that resolves to an AxiosResponse containing the health status. + */ export async function getHealth() { return await axios.get("/health"); } diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx similarity index 91% rename from src/frontend/src/components/cardComponent/index.tsx rename to src/frontend/src/pages/MainPage/components/cardComponent/index.tsx index b9c9bb46c..7871d18f3 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx @@ -3,17 +3,17 @@ import { ArrowTopRightOnSquareIcon, TrashIcon, } from "@heroicons/react/24/outline"; -import { OpenAiIcon } from "../../icons/OpenAi"; -import { Button } from "../../components/ui/button"; -import { Badge } from "../../components/ui/badge"; +import { OpenAiIcon } from "../../../../icons/OpenAi"; +import { Button } from "../../../../components/ui/button"; +import { Badge } from "../../../../components/ui/badge"; import { Card, CardDescription, CardFooter, CardHeader, CardTitle, -} from "../ui/card"; -import { FlowType } from "../../types/flow"; +} from "../../../../components/ui/card"; +import { FlowType } from "../../../../types/flow"; export const CardComponent = ({ flow, idx, diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 3cfbee421..b1f86392b 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -26,4 +26,5 @@ export type NodeDataType = { export type FlowStyleType = { emoji: string; color: string; + flow_id: string; };