code refactor

src/frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import _ from "lodash";
 import { useContext, useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import "reactflow/dist/style.css";
 import "./App.css";
 
@@ -15,12 +15,12 @@ import {
   FETCH_ERROR_DESCRIPION,
   FETCH_ERROR_MESSAGE,
 } from "./constants/constants";
-import { locationContext } from "./contexts/locationContext";
-import { typesContext } from "./contexts/typesContext";
-import Router from "./routes";
 import { AuthContext } from "./contexts/authContext";
 import { FlowsContext } from "./contexts/flowsContext";
+import { locationContext } from "./contexts/locationContext";
+import { typesContext } from "./contexts/typesContext";
 import { getVersion } from "./controllers/API";
+import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 
 export default function App() {
@@ -139,7 +139,7 @@ export default function App() {
       // get data from db
       refreshFlows();
     }
-    
+
     getVersion().then((data) => {
       setVersion(data.version);
     });

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -30,6 +30,7 @@ import { FlowsContext } from "../../../../contexts/flowsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { postCustomComponentUpdate } from "../../../../controllers/API";
+import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import { APIClassType } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
@@ -47,7 +48,6 @@ import {
   nodeNames,
 } from "../../../../utils/styleUtils";
 import { classNames, groupByFamily } from "../../../../utils/utils";
-import useAlertStore from "../../../../stores/alertStore";
 
 export default function ParameterComponent({
   left,
@@ -68,14 +68,14 @@ export default function ParameterComponent({
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
-  const setErrorData = useAlertStore((state) => state.setErrorData);  const updateNodeInternals = useUpdateNodeInternals();
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { tabId, flows } = useContext(FlowsContext);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNode = useFlowStore((state) => state.setNode);
 
-
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 
   // Update component position

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -10,13 +10,13 @@ import { useSSE } from "../../contexts/SSEContext";
 import { typesContext } from "../../contexts/typesContext";
 import { undoRedoContext } from "../../contexts/undoRedoContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
+import useFlowStore from "../../stores/flowStore";
 import { validationStatusType } from "../../types/components";
 import { NodeDataType } from "../../types/flow";
 import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn, getFieldTitle } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
-import useFlowStore from "../../stores/flowStore";
 
 export default function GenericNode({
   data,

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,18 +1,17 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "../../components/ui/popover";
+import useAlertStore from "../../stores/alertStore";
 import { AlertDropdownType } from "../../types/alerts";
 import SingleAlert from "./components/singleAlertComponent";
-import useAlertStore from "../../stores/alertStore";
 
 export default function AlertDropdown({
   children,
 }: AlertDropdownType): JSX.Element {
-
   const notificationList = useAlertStore((state) => state.notificationList);
   const clearNotificationList = useAlertStore(
     (state) => state.clearNotificationList
@@ -24,7 +23,6 @@ export default function AlertDropdown({
     (state) => state.setNotificationCenter
   );
 
-
   const [open, setOpen] = useState(false);
 
   return (

src/frontend/src/components/cardComponent/index.tsx

@@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import useAlertStore from "../../stores/alertStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import cloneFLowWithParent from "../../utils/storeUtils";
@@ -17,7 +18,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import useAlertStore from "../../stores/alertStore";
 
 export default function CollectionCardComponent({
   data,

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -6,13 +6,13 @@ import { postBuildInit } from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
 
 import { FlowsContext } from "../../../contexts/flowsContext";
+import useAlertStore from "../../../stores/alertStore";
+import useFlowStore from "../../../stores/flowStore";
 import { parsedDataType } from "../../../types/components";
 import { FlowsState } from "../../../types/tabs";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
-import useFlowStore from "../../../stores/flowStore";
-import useAlertStore from "../../../stores/alertStore";
 
 export default function BuildTrigger({
   open,
@@ -30,7 +30,7 @@ export default function BuildTrigger({
   const edges = useFlowStore((state) => state.edges);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  
+
   const [isIconTouched, setIsIconTouched] = useState(false);
   const eventClick = isBuilding ? "pointer-events-none" : "";
   const [progress, setProgress] = useState(0);

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -1,15 +1,14 @@
 import { Transition } from "@headlessui/react";
 
-import { useContext } from "react";
 import {
   CHAT_CANNOT_OPEN_DESCRIPTION,
   CHAT_CANNOT_OPEN_TITLE,
   FLOW_NOT_BUILT_DESCRIPTION,
   FLOW_NOT_BUILT_TITLE,
 } from "../../../constants/constants";
+import useAlertStore from "../../../stores/alertStore";
 import { chatTriggerPropType } from "../../../types/components";
 import IconComponent from "../../genericIconComponent";
-import useAlertStore from "../../../stores/alertStore";
 
 export default function ChatTrigger({
   open,

src/frontend/src/components/chatComponent/index.tsx

@@ -8,8 +8,8 @@ import * as _ from "lodash";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
 import FormModal from "../../modals/formModal";
-import { NodeType } from "../../types/flow";
 import useFlowStore from "../../stores/flowStore";
+import { NodeType } from "../../types/flow";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -17,8 +17,7 @@ export default function Chat({ flow }: ChatType): JSX.Element {
   const isBuilt = useFlowStore((state) => state.isBuilt);
   const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
   const isPending = useFlowStore((state) => state.isPending);
-  const { tabsState } =
+  const { tabsState } = useContext(FlowsContext);
-    useContext(FlowsContext);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import AccordionComponent from "../../components/AccordionComponent";
@@ -29,6 +29,7 @@ import {
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
 import { useDarkStore } from "../../stores/darkStore";
+import useFlowStore from "../../stores/flowStore";
 import { codeTabsPropsType } from "../../types/components";
 import {
   convertObjToArray,
@@ -40,7 +41,6 @@ import { classNames } from "../../utils/utils";
 import DictComponent from "../dictComponent";
 import IconComponent from "../genericIconComponent";
 import KeypairListComponent from "../keypairListComponent";
-import useFlowStore from "../../stores/flowStore";
 
 export default function CodeTabsComponent({
   flow,

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -11,10 +11,10 @@ import {
 import { useNavigate } from "react-router-dom";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
+import useAlertStore from "../../../../stores/alertStore";
 import { menuBarPropsType } from "../../../../types/components";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
-import useAlertStore from "../../../../stores/alertStore";
 
 export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
   const { addFlow } = useContext(FlowsContext);

src/frontend/src/components/headerComponent/index.tsx

@@ -6,6 +6,7 @@ import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 
 import { FlowsContext } from "../../contexts/flowsContext";
+import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { gradients } from "../../utils/styleUtils";
@@ -21,7 +22,6 @@ import {
 } from "../ui/dropdown-menu";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
-import useAlertStore from "../../stores/alertStore";
 
 export default function Header(): JSX.Element {
   const { flows, tabId } = useContext(FlowsContext);

src/frontend/src/components/inputFileComponent/index.tsx

@@ -1,9 +1,9 @@
 import { useContext, useEffect, useState } from "react";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { uploadFile } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import { FileComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
-import useAlertStore from "../../stores/alertStore";
 
 export default function InputFileComponent({
   value,
@@ -15,7 +15,8 @@ export default function InputFileComponent({
 }: FileComponentType): JSX.Element {
   const [myValue, setMyValue] = useState(value);
   const [loading, setLoading] = useState(false);
-  const setErrorData = useAlertStore((state) => state.setErrorData);  const { tabId } = useContext(FlowsContext);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const { tabId } = useContext(FlowsContext);
 
   // Clear component state
   useEffect(() => {

src/frontend/src/contexts/authContext.tsx

@@ -1,9 +1,9 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import Cookies from "universal-cookie";
 import { autoLogin as autoLoginApi, getLoggedUser } from "../controllers/API";
+import useAlertStore from "../stores/alertStore";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
-import useAlertStore from "../stores/alertStore";
 
 const initialValue: AuthContextType = {
   isAdmin: false,

src/frontend/src/contexts/flowsContext.tsx

@@ -1,56 +1,33 @@
 import { AxiosError } from "axios";
 import _, { cloneDeep } from "lodash";
-import {
+import { ReactNode, createContext, useContext, useRef, useState } from "react";
-  ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-  useRef,
-  useState,
-} from "react";
 import {
   Edge,
-  EdgeChange,
   Node,
-  NodeChange,
   ReactFlowJsonObject,
   Viewport,
   XYPosition,
-  addEdge,
-  useEdgesState,
-  useNodesState,
 } from "reactflow";
 import ShortUniqueId from "short-unique-id";
 import {
   deleteFlowFromDatabase,
   downloadFlowsFromDatabase,
-  getVersion,
   readFlowsFromDatabase,
   saveFlowToDatabase,
   updateFlowInDatabase,
   uploadFlowsToDatabase,
 } from "../controllers/API";
+import useAlertStore from "../stores/alertStore";
+import useFlowStore from "../stores/flowStore";
 import { APIClassType } from "../types/api";
-import { tweakType } from "../types/components";
+import { FlowType, NodeDataType } from "../types/flow";
-import {
-  FlowType,
-  NodeDataType,
-  NodeType,
-  sourceHandleType,
-  targetHandleType,
-} from "../types/flow";
 import { FlowsContextType, FlowsState } from "../types/tabs";
 import {
   addVersionToDuplicates,
-  checkOldEdgesHandles,
-  cleanEdges,
   createFlowComponent,
   processFlowEdges,
   removeFileNameFromComponents,
-  scapeJSONParse,
-  scapedJSONStringfy,
   updateEdges,
-  updateEdgesHandleIds,
   updateIds,
 } from "../utils/reactflowUtils";
 import {
@@ -58,10 +35,7 @@ import {
   getRandomDescription,
   getRandomName,
 } from "../utils/utils";
-import { AuthContext } from "./authContext";
 import { typesContext } from "./typesContext";
-import useFlowStore from "../stores/flowStore";
-import useAlertStore from "../stores/alertStore";
 
 const uid = new ShortUniqueId({ length: 5 });
 
@@ -102,7 +76,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   const [isLoading, setIsLoading] = useState(false);
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [tabsState, setTabsState] = useState<FlowsState>({});
-  const {setData} = useContext(typesContext);
+  const { setData } = useContext(typesContext);
 
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -498,7 +472,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   // Initialize state variable for the version
   const [version, setVersion] = useState("");
 
-
   return (
     <FlowsContext.Provider
       value={{

src/frontend/src/contexts/typesContext.tsx

@@ -6,12 +6,11 @@ import {
   useEffect,
   useState,
 } from "react";
-import { ReactFlowInstance } from "reactflow";
 import { getAll, getHealth } from "../controllers/API";
+import useAlertStore from "../stores/alertStore";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
 import { AuthContext } from "./authContext";
-import useAlertStore from "../stores/alertStore";
 
 //context to share types adn functions from nodes to flow
 

src/frontend/src/contexts/undoRedoContext.tsx

@@ -6,6 +6,7 @@ import {
   useEffect,
   useState,
 } from "react";
+import useFlowStore from "../stores/flowStore";
 import {
   HistoryItem,
   UseUndoRedoOptions,
@@ -13,7 +14,6 @@ import {
 } from "../types/typesContext";
 import { isWrappedWithClass } from "../utils/utils";
 import { FlowsContext } from "./flowsContext";
-import useFlowStore from "../stores/flowStore";
 
 const initialValue = {
   undo: () => {},
@@ -29,8 +29,7 @@ const defaultOptions: UseUndoRedoOptions = {
 export const undoRedoContext = createContext<undoRedoContextType>(initialValue);
 
 export function UndoRedoProvider({ children }) {
-  const { tabId, flows } =
+  const { tabId, flows } = useContext(FlowsContext);
-    useContext(FlowsContext);
 
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import { forwardRef, useContext, useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import DictComponent from "../../components/dictComponent";
@@ -28,6 +28,7 @@ import {
   LANGFLOW_SUPPORTED_TYPES,
   limitScrollFieldsModal,
 } from "../../constants/constants";
+import useFlowStore from "../../stores/flowStore";
 import { NodeDataType } from "../../types/flow";
 import {
   convertObjToArray,
@@ -37,7 +38,6 @@ import {
 } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import useFlowStore from "../../stores/flowStore";
 
 const EditNodeModal = forwardRef(
   (

src/frontend/src/modals/SecretKeyModal/index.tsx

@@ -1,13 +1,13 @@
 import * as Form from "@radix-ui/react-form";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { createApiKey } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import { ApiKeyType } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
-import useAlertStore from "../../stores/alertStore";
 
 export default function SecretKeyModal({
   title,

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -5,10 +5,10 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { AuthContext } from "../../contexts/authContext";
 import { addApiKeyStore } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { StoreApiKeyType } from "../../types/components";
 import BaseModal from "../baseModal";
-import useAlertStore from "../../stores/alertStore";
 
 export default function StoreApiKeyModal({
   children,

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -4,17 +4,17 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 // import "ace-builds/webpack-resolver";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import AceEditor from "react-ace";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import { codeAreaModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
-import useAlertStore from "../../stores/alertStore";
 
 export default function CodeAreaModal({
   value,
@@ -30,7 +30,8 @@ export default function CodeAreaModal({
 
   const [height, setHeight] = useState<string | null>(null);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);  const [error, setError] = useState<{
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const [error, setError] = useState<{
     detail: { error: string | undefined; traceback: string | undefined };
   } | null>(null);
 

src/frontend/src/modals/exportModal/index.tsx

@@ -5,9 +5,9 @@ import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { FlowsContext } from "../../contexts/flowsContext";
+import useAlertStore from "../../stores/alertStore";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
-import useAlertStore from "../../stores/alertStore";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {

src/frontend/src/modals/formModal/index.tsx

@@ -24,10 +24,10 @@ import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import { FlowsState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
-import useAlertStore from "../../stores/alertStore";
 
 export default function FormModal({
   flow,
@@ -65,7 +65,8 @@ export default function FormModal({
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const template = useRef(tabsState[flow.id].formKeysData.template);
   const { accessToken } = useContext(AuthContext);
-  const setErrorData = useAlertStore((state) => state.setErrorData);  const ws = useRef<WebSocket | null>(null);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const ws = useRef<WebSocket | null>(null);
   const [lockChat, setLockChat] = useState(false);
   const isOpen = useRef(open);
   const messagesRef = useRef<HTMLDivElement | null>(null);

src/frontend/src/modals/genericModal/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -14,11 +14,11 @@ import {
 } from "../../constants/constants";
 import { TypeModal } from "../../constants/enums";
 import { postValidatePrompt } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import { genericModalPropsType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, varHighlightHTML } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import useAlertStore from "../../stores/alertStore";
 
 export default function GenericModal({
   field_name = "",

src/frontend/src/modals/shareModal/index.tsx

@@ -12,6 +12,7 @@ import {
   saveFlowStore,
   updateFlowStore,
 } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { FlowType } from "../../types/flow";
 import {
@@ -22,7 +23,6 @@ import {
 import { getTagsIds } from "../../utils/storeUtils";
 import ConfirmationModal from "../ConfirmationModal";
 import BaseModal from "../baseModal";
-import useAlertStore from "../../stores/alertStore";
 
 export default function ShareModal({
   component,
@@ -44,7 +44,8 @@ export default function ShareModal({
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);  const [internalOpen, internalSetOpen] = useState(children ? false : true);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const [internalOpen, internalSetOpen] = useState(children ? false : true);
   const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
   const nameComponent = is_component ? "component" : "flow";
 

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -5,12 +5,12 @@ import { Input } from "../../../components/ui/input";
 import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
 import { AuthContext } from "../../../contexts/authContext";
 import { getLoggedUser, onLogin } from "../../../controllers/API";
+import useAlertStore from "../../../stores/alertStore";
 import { LoginType } from "../../../types/api";
 import {
   inputHandlerEventType,
   loginInputStateType,
 } from "../../../types/components";
-import useAlertStore from "../../../stores/alertStore";
 
 export default function LoginAdminPage() {
   const navigate = useNavigate();

src/frontend/src/pages/AdminPage/index.tsx

@@ -30,9 +30,9 @@ import {
 } from "../../controllers/API";
 import ConfirmationModal from "../../modals/ConfirmationModal";
 import UserManagementModal from "../../modals/UserManagementModal";
+import useAlertStore from "../../stores/alertStore";
 import { Users } from "../../types/api";
 import { UserInputType } from "../../types/components";
-import useAlertStore from "../../stores/alertStore";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");

src/frontend/src/pages/ApiKeysPage/index.tsx

@@ -24,13 +24,14 @@ import {
   LAST_USED_SPAN_1,
   LAST_USED_SPAN_2,
 } from "../../constants/constants";
-import { ApiKey } from "../../types/components";
 import useAlertStore from "../../stores/alertStore";
+import { ApiKey } from "../../types/components";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);  const { userData } = useContext(AuthContext);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const { userData } = useContext(AuthContext);
   const [userId, setUserId] = useState("");
   const keysList = useRef([]);
 

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -9,6 +9,7 @@ import { typesContext } from "../../../../contexts/typesContext";
 import ApiModal from "../../../../modals/ApiModal";
 import ExportModal from "../../../../modals/exportModal";
 import ShareModal from "../../../../modals/shareModal";
+import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import { useStoreStore } from "../../../../stores/storeStore";
 import { APIClassType, APIObjectType } from "../../../../types/api";
@@ -24,7 +25,6 @@ import {
 } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
-import useAlertStore from "../../../../stores/alertStore";
 
 export default function ExtraSidebar(): JSX.Element {
   const { data, templates, getFilterEdge, setFilterEdge } =

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -10,12 +10,12 @@ import { CONTROL_PATCH_USER_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { resetPassword, updateUser } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import {
   inputHandlerEventType,
   patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
-import useAlertStore from "../../stores/alertStore";
 export default function ProfileSettingsPage(): JSX.Element {
   const { setTabId } = useContext(FlowsContext);
 

src/frontend/src/pages/StorePage/index.tsx

@@ -28,10 +28,10 @@ import {
   getStoreTags,
 } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
+import useAlertStore from "../../stores/alertStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
-import useAlertStore from "../../stores/alertStore";
 
 export default function StorePage(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);

src/frontend/src/pages/signUpPage/index.tsx

@@ -1,5 +1,5 @@
 import * as Form from "@radix-ui/react-form";
-import { FormEvent, useContext, useEffect, useState } from "react";
+import { FormEvent, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@@ -9,12 +9,12 @@ import {
   SIGN_UP_SUCCESS,
 } from "../../constants/constants";
 import { addUser } from "../../controllers/API";
+import useAlertStore from "../../stores/alertStore";
 import {
   UserInputType,
   inputHandlerEventType,
   signUpInputStateType,
 } from "../../types/components";
-import useAlertStore from "../../stores/alertStore";
 
 export default function SignUp(): JSX.Element {
   const [inputState, setInputState] =

src/frontend/src/stores/flowStore.ts

@@ -5,10 +5,6 @@ import {
   EdgeChange,
   Node,
   NodeChange,
-  OnConnect,
-  OnEdgesChange,
-  OnNodesChange,
-  ReactFlowInstance,
   addEdge,
   applyEdgeChanges,
   applyNodeChanges,
@@ -20,6 +16,7 @@ import {
   sourceHandleType,
   targetHandleType,
 } from "../types/flow";
+import { FlowStoreType } from "../types/zustand/flow";
 import {
   cleanEdges,
   getHandleId,
@@ -27,7 +24,6 @@ import {
   scapeJSONParse,
   scapedJSONStringfy,
 } from "../utils/reactflowUtils";
-import { FlowStoreType } from "../types/zustand/flow";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
 const useFlowStore = create<FlowStoreType>((set, get) => ({

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,11 +1,11 @@
 import { create } from "zustand";
 import { FlowsManagerStoreType } from "../types/zustand/flowsManager";
-  
+
 let currentFlowId: string = "";
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
-    flows: [],
+  flows: [],
-    currentFlow: get().flows[currentFlowId],
+  currentFlow: get().flows[currentFlowId],
 }));
 
-export default useFlowsManagerStore;
+export default useFlowsManagerStore;

src/frontend/src/types/tabs/index.ts

@@ -1,5 +1,4 @@
-import { Edge, EdgeChange, Node, NodeChange, XYPosition } from "reactflow";
+import { XYPosition } from "reactflow";
-import { tweakType } from "../components";
 import { FlowType, NodeDataType } from "../flow";
 
 type OnChange<ChangesType> = (changes: ChangesType[]) => void;

src/frontend/src/types/typesContext/index.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, ReactFlowInstance } from "reactflow";
+import { Edge, Node } from "reactflow";
 import { AlertItemType } from "../alerts";
 import { APIClassType, APIDataType } from "../api";
 

src/frontend/src/types/zustand/dark/index.ts

@@ -1,8 +1,8 @@
 export type DarkStoreType = {
-    dark: boolean;
+  dark: boolean;
-    stars: number;
+  stars: number;
-    gradientIndex: number;
+  gradientIndex: number;
-    setDark: (dark: boolean) => void;
+  setDark: (dark: boolean) => void;
-    setStars: (stars: number) => void;
+  setStars: (stars: number) => void;
-    setGradientIndex: (gradientIndex: number) => void;
+  setGradientIndex: (gradientIndex: number) => void;
-  };
+};

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

@@ -1,25 +1,32 @@
-import { Node, Edge, OnEdgesChange, OnNodesChange, ReactFlowInstance, OnConnect } from "reactflow";
+import {
+  Edge,
+  Node,
+  OnConnect,
+  OnEdgesChange,
+  OnNodesChange,
+  ReactFlowInstance,
+} from "reactflow";
 
 export type FlowStoreType = {
-    reactFlowInstance: ReactFlowInstance | null;
+  reactFlowInstance: ReactFlowInstance | null;
-    setReactFlowInstance: (newState: ReactFlowInstance) => void;
+  setReactFlowInstance: (newState: ReactFlowInstance) => void;
-    nodes: Node[];
+  nodes: Node[];
-    edges: Edge[];
+  edges: Edge[];
-    onNodesChange: OnNodesChange;
+  onNodesChange: OnNodesChange;
-    onEdgesChange: OnEdgesChange;
+  onEdgesChange: OnEdgesChange;
-    setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
+  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
-    setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
-    setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
+  setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
-    getNode: (id: string) => Node | undefined;
+  getNode: (id: string) => Node | undefined;
-    onConnect: OnConnect;
+  onConnect: OnConnect;
-    deleteNode: (nodeId: string | Array<string>) => void;
+  deleteNode: (nodeId: string | Array<string>) => void;
-    deleteEdge: (edgeId: string | Array<string>) => void;
+  deleteEdge: (edgeId: string | Array<string>) => void;
-    paste: (
+  paste: (
-      selection: { nodes: any; edges: any },
+    selection: { nodes: any; edges: any },
-      position: { x: number; y: number; paneX?: number; paneY?: number }
+    position: { x: number; y: number; paneX?: number; paneY?: number }
-      ) => void;
+  ) => void;
-    isBuilt: boolean;
+  isBuilt: boolean;
-    setIsBuilt: (isBuilt: boolean) => void;
+  setIsBuilt: (isBuilt: boolean) => void;
-    isPending: boolean;
+  isPending: boolean;
-    setPending: (pending: boolean) => void;
+  setPending: (pending: boolean) => void;
-  };
+};

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -1,8 +1,6 @@
-import { XYPosition } from "reactflow";
+import { FlowType } from "../../flow";
-import { FlowType, NodeDataType } from "../../flow";
-import { FlowsState } from "../../tabs";
 
 export type FlowsManagerStoreType = {
-    flows: Array<FlowType>;
+  flows: Array<FlowType>;
-    currentFlow: FlowType | undefined;
+  currentFlow: FlowType | undefined;
-  };
+};

src/frontend/src/utils/reactflowUtils.ts

@@ -148,9 +148,7 @@ export function updateTemplate(
   return clonedObject;
 }
 
-export function updateIds(
+export function updateIds(newFlow: ReactFlowJsonObject) {
-  newFlow: ReactFlowJsonObject,
-) {
   let idsMap = {};
 
   if (newFlow.nodes)
@@ -280,7 +278,7 @@ export function updateEdges(edges: Edge[]) {
           : "stroke-gray-900 ") + " stroke-connection";
       edge.animated = targetHandleObject.type === "Text";
     });
-};
+}
 
 export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
   const existingNames = flows.map((item) => item.name);
@@ -513,13 +511,15 @@ export function getNodeId(nodeType: string) {
   return nodeType + "-" + uid();
 }
 
-export function getHandleId(source: string, sourceHandle: string, target: string, targetHandle: string){
+export function getHandleId(
-  return "reactflow__edge-" +
+  source: string,
-  source +
+  sourceHandle: string,
-  sourceHandle +
+  target: string,
-  "-" +
+  targetHandle: string
-  target +
+) {
-  targetHandle;
+  return (
+    "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle
+  );
 }
 
 export function generateFlow(