From c6eb90c00ca1e99f5f6682536e4ee8e62c77e953 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 8 Dec 2023 19:45:25 -0300 Subject: [PATCH] fix(GenericNode/index.tsx): import alertContext from correct file path to fix compilation error feat(alertContext.tsx): add modalContextOpen state and setModalContextOpen function to manage modal context open state fix(genericModal/index.tsx): add useEffect to update modalContextOpen state when modalOpen prop changes feat(typesContext/index.ts): add modalContextOpen state and setModalContextOpen function to typesContext --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 12 +++++++++--- src/frontend/src/contexts/alertContext.tsx | 5 +++++ src/frontend/src/modals/genericModal/index.tsx | 6 +++++- src/frontend/src/types/components/index.ts | 1 + src/frontend/src/types/typesContext/index.ts | 2 ++ 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 0eb1bb900..526c10cfa 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -7,13 +7,18 @@ import InputComponent from "../../components/inputComponent"; import { Textarea } from "../../components/ui/textarea"; import { priorityFields } from "../../constants/constants"; import { useSSE } from "../../contexts/SSEContext"; +import { alertContext } from "../../contexts/alertContext"; import { FlowsContext } from "../../contexts/flowsContext"; import { typesContext } from "../../contexts/typesContext"; import { undoRedoContext } from "../../contexts/undoRedoContext"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import { validationStatusType } from "../../types/components"; import { NodeDataType } from "../../types/flow"; -import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils"; +import { + cleanEdges, + handleKeyDown, + scapedJSONStringfy, +} from "../../utils/reactflowUtils"; import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import { classNames, getFieldTitle } from "../../utils/utils"; import ParameterComponent from "./components/parameterComponent"; @@ -45,6 +50,7 @@ export default function GenericNode({ useState(null); const [handles, setHandles] = useState([]); let numberOfInputs: boolean[] = []; + const { modalContextOpen } = useContext(alertContext); const { takeSnapshot } = useContext(undoRedoContext); @@ -83,7 +89,7 @@ export default function GenericNode({ // State for outline color const { sseData, isBuilding } = useSSE(); - /* useEffect(() => { + useEffect(() => { let flow = flows.find((flow) => flow.id === tabId); if (reactFlowInstance && flow && flow.data) { cleanEdges({ @@ -99,7 +105,7 @@ export default function GenericNode({ updateFlow(flow); } countHandles(); - }, [data]); */ + }, [modalContextOpen]); useEffect(() => { setNodeDescription(data.node!.description); diff --git a/src/frontend/src/contexts/alertContext.tsx b/src/frontend/src/contexts/alertContext.tsx index 0b183a297..30932f21b 100644 --- a/src/frontend/src/contexts/alertContext.tsx +++ b/src/frontend/src/contexts/alertContext.tsx @@ -26,6 +26,8 @@ const initialValue: alertContextType = { pushNotificationList: () => {}, clearNotificationList: () => {}, removeFromNotificationList: () => {}, + modalContextOpen: false, + setModalContextOpen: (open: boolean) => {}, }; export const alertContext = createContext(initialValue); @@ -49,6 +51,7 @@ export function AlertProvider({ children }: { children: ReactNode }) { const [notificationCenter, setNotificationCenter] = useState(false); const [notificationList, setNotificationList] = useState([]); const [isTweakPage, setIsTweakPage] = useState(false); + const [modalContextOpen, setModalContextOpen] = useState(false); const pushNotificationList = (notification: AlertItemType) => { setNotificationList((old) => { let newNotificationList = _.cloneDeep(old); @@ -141,6 +144,8 @@ export function AlertProvider({ children }: { children: ReactNode }) { setSuccessData, successOpen, setSuccessOpen, + modalContextOpen, + setModalContextOpen, }} > {children} diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index a0147030c..ce63ca004 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -40,7 +40,7 @@ export default function GenericModal({ const [inputValue, setInputValue] = useState(value); const [isEdit, setIsEdit] = useState(true); const [wordsHighlight, setWordsHighlight] = useState([]); - const { setErrorData, setSuccessData, setNoticeData } = + const { setErrorData, setSuccessData, setNoticeData, setModalContextOpen } = useContext(alertContext); const ref = useRef(); const divRef = useRef(null); @@ -160,6 +160,10 @@ export default function GenericModal({ }); } + useEffect(() => { + setModalContextOpen(modalOpen); + }, [modalOpen]); + return ( {}} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index d5119e309..fbd68f136 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -54,6 +54,7 @@ export type ParameterComponentType = { proxy?: { field: string; id: string }; showNode?: boolean; index?: string; + onCloseModal?: (close: boolean) => void; }; export type InputListComponentType = { value: string[]; diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts index f3bdc6e2b..6b0fbbe2c 100644 --- a/src/frontend/src/types/typesContext/index.ts +++ b/src/frontend/src/types/typesContext/index.ts @@ -44,6 +44,8 @@ export type alertContextType = { removeFromNotificationList: (index: string) => void; loading: boolean; setLoading: (newState: boolean) => void; + modalContextOpen: boolean | null; + setModalContextOpen: (newState: boolean) => void; }; export type darkContextType = {