From ac448bdd09c62808d245e5e068a59b67c82a30c3 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 5 Jan 2024 17:08:12 -0300 Subject: [PATCH] code refactor --- src/frontend/src/App.tsx | 10 ++-- .../components/parameterComponent/index.tsx | 6 +-- .../src/CustomNodes/GenericNode/index.tsx | 2 +- .../src/alerts/alertDropDown/index.tsx | 6 +-- .../src/components/cardComponent/index.tsx | 2 +- .../chatComponent/buildTrigger/index.tsx | 6 +-- .../chatComponent/chatTrigger/index.tsx | 3 +- .../src/components/chatComponent/index.tsx | 5 +- .../components/codeTabsComponent/index.tsx | 4 +- .../components/menuBar/index.tsx | 2 +- .../src/components/headerComponent/index.tsx | 2 +- .../components/inputFileComponent/index.tsx | 5 +- src/frontend/src/contexts/authContext.tsx | 4 +- src/frontend/src/contexts/flowsContext.tsx | 37 ++----------- src/frontend/src/contexts/typesContext.tsx | 3 +- src/frontend/src/contexts/undoRedoContext.tsx | 5 +- .../src/modals/EditNodeModal/index.tsx | 4 +- .../src/modals/SecretKeyModal/index.tsx | 4 +- .../src/modals/StoreApiKeyModal/index.tsx | 2 +- .../src/modals/codeAreaModal/index.tsx | 7 +-- src/frontend/src/modals/exportModal/index.tsx | 2 +- src/frontend/src/modals/formModal/index.tsx | 5 +- .../src/modals/genericModal/index.tsx | 4 +- src/frontend/src/modals/shareModal/index.tsx | 5 +- .../src/pages/AdminPage/LoginPage/index.tsx | 2 +- src/frontend/src/pages/AdminPage/index.tsx | 2 +- src/frontend/src/pages/ApiKeysPage/index.tsx | 5 +- .../extraSidebarComponent/index.tsx | 2 +- .../src/pages/ProfileSettingsPage/index.tsx | 2 +- src/frontend/src/pages/StorePage/index.tsx | 2 +- src/frontend/src/pages/signUpPage/index.tsx | 4 +- src/frontend/src/stores/flowStore.ts | 6 +-- src/frontend/src/stores/flowsManagerStore.ts | 8 +-- src/frontend/src/types/tabs/index.ts | 3 +- src/frontend/src/types/typesContext/index.ts | 2 +- src/frontend/src/types/zustand/dark/index.ts | 14 ++--- src/frontend/src/types/zustand/flow/index.ts | 53 +++++++++++-------- .../src/types/zustand/flowsManager/index.ts | 10 ++-- src/frontend/src/utils/reactflowUtils.ts | 22 ++++---- 39 files changed, 122 insertions(+), 150 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index b900a698b..b1a5dcd69 100644 --- a/src/frontend/src/App.tsx +++ b/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); }); diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 49a339a35..74503ddc2 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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(null); const refHtml = useRef(null); const infoHtml = useRef(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 diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 4cc6afa54..f3b47836f 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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, diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx index f4b6a3eb1..967d82174 100644 --- a/src/frontend/src/alerts/alertDropDown/index.tsx +++ b/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 ( diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index c4abc93ac..f4afea46b 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/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, diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 78ed618ba..ba89279a8 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/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); diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx index 93a90b3ec..134544872 100644 --- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx +++ b/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, diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index b3fc73559..1bf8e6ab9 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/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 } = - useContext(FlowsContext); + const { tabsState } = useContext(FlowsContext); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index ed7aac785..e28ac51d0 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/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, diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx index 32530ebda..eb8b22bc3 100644 --- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx +++ b/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); diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 05532137b..b88f6be70 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index f7b707d7c..539da2600 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/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(() => { diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 39555dbaa..68e0701c2 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/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, diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index cad78795a..489699135 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/src/frontend/src/contexts/flowsContext.tsx @@ -1,56 +1,33 @@ import { AxiosError } from "axios"; import _, { cloneDeep } from "lodash"; -import { - ReactNode, - createContext, - useCallback, - useContext, - useRef, - useState, -} from "react"; +import { ReactNode, createContext, 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, - NodeType, - sourceHandleType, - targetHandleType, -} from "../types/flow"; +import { FlowType, NodeDataType } 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>([]); const [tabsState, setTabsState] = useState({}); - 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 ( {}, @@ -29,8 +29,7 @@ const defaultOptions: UseUndoRedoOptions = { export const undoRedoContext = createContext(initialValue); export function UndoRedoProvider({ children }) { - const { tabId, flows } = - useContext(FlowsContext); + const { tabId, flows } = useContext(FlowsContext); const setNodes = useFlowStore((state) => state.setNodes); const setEdges = useFlowStore((state) => state.setEdges); diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index a82d9e0b1..93e90a6d3 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/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( ( diff --git a/src/frontend/src/modals/SecretKeyModal/index.tsx b/src/frontend/src/modals/SecretKeyModal/index.tsx index bf147d624..b4b16a04f 100644 --- a/src/frontend/src/modals/SecretKeyModal/index.tsx +++ b/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, diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx index b9347fc0e..3472f77dd 100644 --- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx +++ b/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, diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index fbbbd2676..ff2f6a0be 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/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(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); diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index 243865b77..bafaf6ab9 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/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 => { diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index ae895846f..bbf1d79ec 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/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([]); const template = useRef(tabsState[flow.id].formKeysData.template); const { accessToken } = useContext(AuthContext); - const setErrorData = useAlertStore((state) => state.setErrorData); const ws = useRef(null); + const setErrorData = useAlertStore((state) => state.setErrorData); + const ws = useRef(null); const [lockChat, setLockChat] = useState(false); const isOpen = useRef(open); const messagesRef = useRef(null); diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index 6557b0d06..03908fb2f 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/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 = "", diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index 3c5494016..f70e0b21c 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/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"; diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx index 78781c2c8..c62bc5eb2 100644 --- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx +++ b/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(); diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index 145341ab9..bb7f52e4c 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/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(""); diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx index 69b7ccc5b..a0c0845f2 100644 --- a/src/frontend/src/pages/ApiKeysPage/index.tsx +++ b/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([]); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 0d2d95b98..070c3e962 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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 } = diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx index 3d040ea28..42a919c9c 100644 --- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx +++ b/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); diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index 91d9cde18..922a5b9b7 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/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); diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx index ba309a37b..d731eee9e 100644 --- a/src/frontend/src/pages/signUpPage/index.tsx +++ b/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] = diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index ebd7abfcc..16d7985e4 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/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((set, get) => ({ diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts index b8b282ffc..f4c04a2bd 100644 --- a/src/frontend/src/stores/flowsManagerStore.ts +++ b/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((set, get) => ({ - flows: [], - currentFlow: get().flows[currentFlowId], + flows: [], + currentFlow: get().flows[currentFlowId], })); -export default useFlowsManagerStore; \ No newline at end of file +export default useFlowsManagerStore; diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index d98afd773..b921ef921 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -1,5 +1,4 @@ -import { Edge, EdgeChange, Node, NodeChange, XYPosition } from "reactflow"; -import { tweakType } from "../components"; +import { XYPosition } from "reactflow"; import { FlowType, NodeDataType } from "../flow"; type OnChange = (changes: ChangesType[]) => void; diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts index e04c40ce7..dc877244b 100644 --- a/src/frontend/src/types/typesContext/index.ts +++ b/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"; diff --git a/src/frontend/src/types/zustand/dark/index.ts b/src/frontend/src/types/zustand/dark/index.ts index b25910c38..544160067 100644 --- a/src/frontend/src/types/zustand/dark/index.ts +++ b/src/frontend/src/types/zustand/dark/index.ts @@ -1,8 +1,8 @@ export type DarkStoreType = { - dark: boolean; - stars: number; - gradientIndex: number; - setDark: (dark: boolean) => void; - setStars: (stars: number) => void; - setGradientIndex: (gradientIndex: number) => void; - }; \ No newline at end of file + dark: boolean; + stars: number; + gradientIndex: number; + setDark: (dark: boolean) => void; + setStars: (stars: number) => void; + setGradientIndex: (gradientIndex: number) => void; +}; diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 5ed74e79a..e2d875f87 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/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; - setReactFlowInstance: (newState: ReactFlowInstance) => void; - nodes: Node[]; - edges: Edge[]; - onNodesChange: OnNodesChange; - onEdgesChange: OnEdgesChange; - setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void; - setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void; - setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void; - getNode: (id: string) => Node | undefined; - onConnect: OnConnect; - deleteNode: (nodeId: string | Array) => void; - deleteEdge: (edgeId: string | Array) => void; - paste: ( - selection: { nodes: any; edges: any }, - position: { x: number; y: number; paneX?: number; paneY?: number } - ) => void; - isBuilt: boolean; - setIsBuilt: (isBuilt: boolean) => void; - isPending: boolean; - setPending: (pending: boolean) => void; - }; \ No newline at end of file + reactFlowInstance: ReactFlowInstance | null; + setReactFlowInstance: (newState: ReactFlowInstance) => void; + nodes: Node[]; + edges: Edge[]; + onNodesChange: OnNodesChange; + onEdgesChange: OnEdgesChange; + setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void; + setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void; + setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void; + getNode: (id: string) => Node | undefined; + onConnect: OnConnect; + deleteNode: (nodeId: string | Array) => void; + deleteEdge: (edgeId: string | Array) => void; + paste: ( + selection: { nodes: any; edges: any }, + position: { x: number; y: number; paneX?: number; paneY?: number } + ) => void; + isBuilt: boolean; + setIsBuilt: (isBuilt: boolean) => void; + isPending: boolean; + setPending: (pending: boolean) => void; +}; diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts index 28bd5e32d..f2f9f45a4 100644 --- a/src/frontend/src/types/zustand/flowsManager/index.ts +++ b/src/frontend/src/types/zustand/flowsManager/index.ts @@ -1,8 +1,6 @@ -import { XYPosition } from "reactflow"; -import { FlowType, NodeDataType } from "../../flow"; -import { FlowsState } from "../../tabs"; +import { FlowType } from "../../flow"; export type FlowsManagerStoreType = { - flows: Array; - currentFlow: FlowType | undefined; - }; \ No newline at end of file + flows: Array; + currentFlow: FlowType | undefined; +}; diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 0f3af8a55..550443455 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -148,9 +148,7 @@ export function updateTemplate( return clonedObject; } -export function updateIds( - newFlow: ReactFlowJsonObject, -) { +export function updateIds(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){ - return "reactflow__edge-" + - source + - sourceHandle + - "-" + - target + - targetHandle; +export function getHandleId( + source: string, + sourceHandle: string, + target: string, + targetHandle: string +) { + return ( + "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle + ); } export function generateFlow(