feat(typesContext.tsx): add saveFlowStore function to API controller to save a new flow to the database

fix(typesContext.tsx): call saveFlowStore function to save the newly created flow component to the database

src/frontend/src/contexts/typesContext.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 import { Edge, Node, ReactFlowInstance } from "reactflow";
-import { getAll, getHealth } from "../controllers/API";
+import { getAll, getHealth, saveFlowStore } from "../controllers/API";
 import { APIClassType, APIKindType } from "../types/api";
 import { localStorageUserType } from "../types/entities";
 import { NodeDataType } from "../types/flow";
@@ -185,6 +185,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
     }
     component.node!.official = false;
     components[key] = createFlowComponent(component);
+    saveFlowStore(createFlowComponent(component));
     savedComponentsJSON.components = components;
     localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
     setData((prev) => {

src/frontend/src/controllers/API/index.ts

@@ -536,3 +536,35 @@ export async function addApiKeyStore(key: string) {
     throw error;
   }
 }
+
+/**
+ * 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 saveFlowStore(newFlow: {
+  name: string;
+  data: ReactFlowJsonObject | null;
+  description: string;
+  style?: FlowStyleType;
+  is_component?: boolean;
+}): Promise<FlowType> {
+  try {
+    const response = await api.post(`${BASE_URL_API}store/`, {
+      name: newFlow.name,
+      data: newFlow.data,
+      description: newFlow.description,
+      is_component: newFlow.is_component,
+    });
+
+    if (response.status !== 201) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}