From 4f803466029c33fa6204c5698175cc350300976e Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Sun, 9 Jun 2024 20:29:35 -0300 Subject: [PATCH] Feat: create isThereModal validate function to prevent modals from opening on top of each other --- .../src/components/chatComponent/index.tsx | 12 ++++---- src/frontend/src/modals/shareModal/index.tsx | 1 - .../components/nodeToolbarComponent/index.tsx | 28 +++++++++++-------- src/frontend/src/utils/utils.ts | 9 ++++++ 4 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index f0d7922d4..7fad5a882 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -8,23 +8,29 @@ import useFlowStore from "../../stores/flowStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; import { useShortcutsStore } from "../../stores/shortcuts"; import { useStoreStore } from "../../stores/storeStore"; -import { classNames } from "../../utils/utils"; +import { classNames, isThereModal } from "../../utils/utils"; import ForwardedIconComponent from "../genericIconComponent"; import { Separator } from "../ui/separator"; export default function FlowToolbar(): JSX.Element { const preventDefault = true; + const [open, setOpen] = useState(false); + const [openCodeModal, setOpenCodeModal] = useState(false); + const [openShareModal, setOpenShareModal] = useState(false); function handleAPIWShortcut(e: KeyboardEvent) { + if (isThereModal() && !openCodeModal) return; setOpenCodeModal((oldOpen) => !oldOpen); } function handleChatWShortcut(e: KeyboardEvent) { + if (isThereModal() && !open) return; if (useFlowStore.getState().hasIO) { setOpen((oldState) => !oldState); } } function handleShareWShortcut(e: KeyboardEvent) { + if (isThereModal() && !openShareModal) return; setOpenShareModal((oldState) => !oldState); } @@ -36,10 +42,6 @@ export default function FlowToolbar(): JSX.Element { useHotkeys(api, handleAPIWShortcut, { preventDefault }); useHotkeys(flow, handleShareWShortcut, { preventDefault }); - const [open, setOpen] = useState(false); - const [openCodeModal, setOpenCodeModal] = useState(false); - const [openShareModal, setOpenShareModal] = useState(false); - const hasIO = useFlowStore((state) => state.hasIO); const hasStore = useStoreStore((state) => state.hasStore); const validApiKey = useStoreStore((state) => state.validApiKey); diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index 9a58403d7..ac6832082 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/src/frontend/src/modals/shareModal/index.tsx @@ -1,5 +1,4 @@ import { ReactNode, useEffect, useMemo, useState } from "react"; -import { useHotkeys } from "react-hotkeys-hook"; import EditFlowSettings from "../../components/editFlowSettingsComponent"; import IconComponent from "../../components/genericIconComponent"; import { TagsSelector } from "../../components/tagsSelectorComponent"; diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 3bb03e8a1..af055ad3e 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -32,7 +32,7 @@ import { expandGroupNode, updateFlowPosition, } from "../../../../utils/reactflowUtils"; -import { classNames, cn } from "../../../../utils/utils"; +import { classNames, cn, isThereModal } from "../../../../utils/utils"; import ToolbarSelectItem from "./toolbarSelectItem"; import RenderIcons from "../../../../components/renderIconComponent"; @@ -47,6 +47,13 @@ export default function NodeToolbarComponent({ setShowState, onCloseAdvancedModal, }: nodeToolbarPropsType): JSX.Element { + const version = useDarkStore((state) => state.version); + const [showModalAdvanced, setShowModalAdvanced] = useState(false); + const [showconfirmShare, setShowconfirmShare] = useState(false); + const [showOverrideModal, setShowOverrideModal] = useState(false); + const [flowComponent, setFlowComponent] = useState( + createFlowComponent(cloneDeep(data), version), + ); const preventDefault = true; const isMac = navigator.platform.toUpperCase().includes("MAC"); const nodeLength = Object.keys(data.node!.template).filter( @@ -99,20 +106,23 @@ export default function NodeToolbarComponent({ } function handleShareWShortcut(e: KeyboardEvent) { + e.preventDefault(); + if (isThereModal() && !showOverrideModal) return; if (hasApiKey || hasStore) { - e.preventDefault(); setShowconfirmShare((state) => !state); } } function handleCodeWShortcut(e: KeyboardEvent) { e.preventDefault(); + if (isThereModal() && !openModal) return; if (hasCode) return setOpenModal((state) => !state); setNoticeData({ title: `You can not access ${data.id} code` }); } function handleAdvancedWShortcut(e: KeyboardEvent) { e.preventDefault(); + if (isThereModal() && !showModalAdvanced) return; if (!isGroup) { setShowModalAdvanced((state) => !state); } @@ -120,11 +130,12 @@ export default function NodeToolbarComponent({ function handleSaveWShortcut(e: KeyboardEvent) { e.preventDefault(); + if (isThereModal() && !showOverrideModal) return; if (isSaved) { setShowOverrideModal((state) => !state); return; } - if (hasCode) { + if (hasCode && !isSaved) { saveComponent(cloneDeep(data), false); setSuccessData({ title: `${data.id} saved successfully` }); return; @@ -195,14 +206,7 @@ export default function NodeToolbarComponent({ const saveComponent = useFlowsManagerStore((state) => state.saveComponent); const getNodePosition = useFlowStore((state) => state.getNodePosition); const flows = useFlowsManagerStore((state) => state.flows); - const version = useDarkStore((state) => state.version); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); - const [showModalAdvanced, setShowModalAdvanced] = useState(false); - const [showconfirmShare, setShowconfirmShare] = useState(false); - const [showOverrideModal, setShowOverrideModal] = useState(false); - const [flowComponent, setFlowComponent] = useState( - createFlowComponent(cloneDeep(data), version), - ); // useEffect(() => { // if (openWDoubleClick) setShowModalAdvanced(true); @@ -428,7 +432,7 @@ export default function NodeToolbarComponent({ side="top" >