🚀 feat(App.tsx): add getVersion function to fetch API version

🚀 feat(API/index.ts): add getVersion function to fetch API version
🚀 feat(cardComponent/index.tsx): add CardComponent to display flow data
🚀 feat(types/flow/index.ts): add FlowStyleType to represent flow styles
The getVersion function was added to fetch the version of the API. The CardComponent was added to display flow data. The FlowStyleType was added to represent flow styles.

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);

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<AxiosResponse<APIObjectType>>} A promise that resolves to an AxiosResponse containing all the objects.
+ */
 export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
   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<any>} 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<AxiosResponse<errorsTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
+ */
 export async function checkCode(
   code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   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<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
+ */
 export async function checkPrompt(
   template: string
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   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<FlowType[]>} A promise that resolves to an array of FlowType objects.
+ */
 export async function getExamples(): Promise<FlowType[]> {
   const url =
     "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
@@ -40,6 +68,13 @@ export async function getExamples(): Promise<FlowType[]> {
   return await Promise.all(contentsPromises);
 }
 
+/**
+ * Saves a new flow to the database.
+ *
+ * @param {FlowType} newFlow - The flow data to save.
+ * @returns {Promise<any>} 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<any>} 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<any>} 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<any>} 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<any>} 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<any>} 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<any>} 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<AxiosResponse<any>>} 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<AxiosResponse<any>>} A promise that resolves to an AxiosResponse containing the health status.
+ */
 export async function getHealth() {
   return await axios.get("/health");
 }

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,

src/frontend/src/types/flow/index.ts

@@ -26,4 +26,5 @@ export type NodeDataType = {
 export type FlowStyleType = {
   emoji: string;
   color: string;
+  flow_id: string;
 };