From 2436461f5d79b84fd3131555a272aa07160cb4a2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 10 Aug 2023 14:50:15 -0300 Subject: [PATCH 1/2] Fixed bug on Export Modal --- .../EditFlowSettingsComponent/index.tsx | 30 ++++++++++++------- src/frontend/src/modals/exportModal/index.tsx | 17 ++++++----- .../src/modals/flowSettingsModal/index.tsx | 20 ++++++------- 3 files changed, 39 insertions(+), 28 deletions(-) diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx index 6504c2b4eee..8abec4ec363 100644 --- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx +++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx @@ -10,22 +10,22 @@ type InputProps = { maxLength?: number; flows: Array<{ id: string; name: string; description: string }>; tabId: string; - invalidName: boolean; - setInvalidName: (invalidName: boolean) => void; + invalidName?: boolean; + setInvalidName?: (invalidName: boolean) => void; setName: (name: string) => void; setDescription: (description: string) => void; updateFlow: (flow: { id: string; name: string }) => void; }; export const EditFlowSettings: React.FC = ({ - name, + name: myName, invalidName, setInvalidName, description, maxLength = 50, flows, tabId, - setName, + setName: setMyName, setDescription, updateFlow, }) => { @@ -46,17 +46,25 @@ export const EditFlowSettings: React.FC = ({ } else { setIsMaxLength(false); } - if (!nameLists.current.includes(value)) { - setInvalidName(false); - } else { - setInvalidName(true); + if (invalidName !== undefined) { + if (!nameLists.current.includes(value)) { + setInvalidName(false); + } else { + setInvalidName(true); + } } setName(value); + setMyName(value); }; - const [desc, setDesc] = useState( - flows.find((f) => f.id === tabId).description - ); + const [name, setName] = useState(myName); + + const [desc, setDesc] = useState(description); + + useEffect(() => { + setName(name); + setDesc(description); + }, [name, description]); const handleDescriptionChange = (event: ChangeEvent) => { flows.find((f) => f.id === tabId).description = event.target.value; diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index ee6434f678a..91c6e484c96 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/src/frontend/src/modals/exportModal/index.tsx @@ -1,4 +1,4 @@ -import { ReactNode, forwardRef, useContext, useState } from "react"; +import { ReactNode, forwardRef, useContext, useEffect, useState } from "react"; import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import IconComponent from "../../components/genericIconComponent"; import { Button } from "../../components/ui/button"; @@ -9,14 +9,17 @@ import { removeApiKeys } from "../../utils/reactflowUtils"; import BaseModal from "../baseModal"; const ExportModal = forwardRef((props: { children: ReactNode }, ref) => { - const { flows, tabId, updateFlow, downloadFlow, saveFlow } = - useContext(TabsContext); + const { flows, tabId, updateFlow, downloadFlow } = useContext(TabsContext); const [checked, setChecked] = useState(false); - const [name, setName] = useState(flows.find((f) => f.id === tabId).name); - const [description, setDescription] = useState( - flows.find((f) => f.id === tabId).description - ); + const flow = flows.find((f) => f.id === tabId); + useEffect(() => { + setName(flow.name); + setDescription(flow.description); + }, [flow.name, flow.description]); + const [name, setName] = useState(flow.name); + const [description, setDescription] = useState(flow.description); const [open, setOpen] = useState(false); + return ( {props.children} diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index 7f9e2e6e942..58611948da8 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/src/frontend/src/modals/flowSettingsModal/index.tsx @@ -1,4 +1,4 @@ -import { useContext, useRef, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import IconComponent from "../../components/genericIconComponent"; import { Button } from "../../components/ui/button"; @@ -14,15 +14,15 @@ export default function FlowSettingsModal({ open: boolean; setOpen: (open: boolean) => void; }) { - const { setErrorData, setSuccessData } = useContext(alertContext); - const ref = useRef(); - const { flows, tabId, updateFlow, setTabsState, saveFlow } = - useContext(TabsContext); - const maxLength = 50; - const [name, setName] = useState(flows.find((f) => f.id === tabId).name); - const [description, setDescription] = useState( - flows.find((f) => f.id === tabId).description - ); + const { setSuccessData } = useContext(alertContext); + const { flows, tabId, updateFlow, saveFlow } = useContext(TabsContext); + const flow = flows.find((f) => f.id === tabId); + useEffect(() => { + setName(flow.name); + setDescription(flow.description); + }, [flow.name, flow.description]); + const [name, setName] = useState(flow.name); + const [description, setDescription] = useState(flow.description); const [invalidName, setInvalidName] = useState(false); function handleClick() { From c37e1223fc4c39f9cbd59e8906847f7a5b27e318 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 11 Aug 2023 12:09:00 -0300 Subject: [PATCH 2/2] Fixed variable names --- .../EditFlowSettingsComponent/index.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx index 8abec4ec363..be5a6db8d33 100644 --- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx +++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx @@ -18,14 +18,14 @@ type InputProps = { }; export const EditFlowSettings: React.FC = ({ - name: myName, + name, invalidName, setInvalidName, description, maxLength = 50, flows, tabId, - setName: setMyName, + setName, setDescription, updateFlow, }) => { @@ -54,21 +54,21 @@ export const EditFlowSettings: React.FC = ({ } } setName(value); - setMyName(value); + setCurrentName(value); }; - const [name, setName] = useState(myName); + const [currentName, setCurrentName] = useState(name); - const [desc, setDesc] = useState(description); + const [currentDescription, setCurrentDescription] = useState(description); useEffect(() => { - setName(name); - setDesc(description); + setCurrentName(name); + setCurrentDescription(description); }, [name, description]); const handleDescriptionChange = (event: ChangeEvent) => { flows.find((f) => f.id === tabId).description = event.target.value; - setDesc(flows.find((f) => f.id === tabId).description); + setCurrentDescription(flows.find((f) => f.id === tabId).description); setDescription(event.target.value); }; @@ -89,7 +89,7 @@ export const EditFlowSettings: React.FC = ({ onChange={handleNameChange} type="text" name="name" - value={name ?? ""} + value={currentName ?? ""} placeholder="File name" id="name" maxLength={maxLength} @@ -104,7 +104,7 @@ export const EditFlowSettings: React.FC = ({ name="description" id="description" onChange={handleDescriptionChange} - value={desc} + value={currentDescription} placeholder="Flow description" className="mt-2 max-h-[100px] font-normal" rows={3}