From b29a54c6782f765b604d99f812d54872101e7d9f Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 28 Jun 2023 11:35:30 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(AccordionComponent/index.tsx?= =?UTF-8?q?):=20fix=20import=20formatting=20and=20add=20missing=20semicolo?= =?UTF-8?q?n=20=E2=9C=A8=20feat(AccordionComponent/index.tsx):=20add=20sup?= =?UTF-8?q?port=20for=20opening=20and=20closing=20accordion=20items=20on?= =?UTF-8?q?=20click=20=F0=9F=94=A7=20fix(popUpContext.tsx):=20add=20missin?= =?UTF-8?q?g=20semicolon=20and=20fix=20formatting=20=E2=9C=A8=20feat(popUp?= =?UTF-8?q?Context.tsx):=20add=20closeEdit=20state=20and=20setCloseEdit=20?= =?UTF-8?q?function=20to=20manage=20closing=20edit=20pop-up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🐛 fix(ApiModal/index.tsx): add missing dependencies to useEffect to prevent stale data ✨ feat(ApiModal/index.tsx): add support for opening and closing accordion when there are tweaks present 🔧 chore(ApiModal/index.tsx): refactor getValue function to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor buildContent function to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor buildTweakObject function to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor onChange functions to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor value props to improve readability and maintainability 🔧 fix(codeAreaModal): add setCloseEdit function to PopUpContext to handle closing editcode 🔧 fix(promptModal): add setCloseEdit function to PopUpContext to handle closing prompt 🔧 fix(textAreaModal): add setCloseEdit function to PopUpContext to handle closing textarea 🔧 fix(components): change value prop to open prop in AccordionComponentType for better semantics --- .../components/AccordionComponent/index.tsx | 40 ++- src/frontend/src/contexts/popUpContext.tsx | 8 +- src/frontend/src/modals/ApiModal/index.tsx | 257 +++++++++++------- .../src/modals/codeAreaModal/index.tsx | 4 +- src/frontend/src/modals/promptModal/index.tsx | 3 +- .../src/modals/textAreaModal/index.tsx | 3 +- src/frontend/src/types/components/index.ts | 2 +- 7 files changed, 195 insertions(+), 122 deletions(-) diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 19a811f87..c1174269a 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -1,5 +1,8 @@ import { ReactElement, useContext, useEffect, useRef, useState } from "react"; -import { AccordionComponentType, ProgressBarType } from "../../types/components"; +import { + AccordionComponentType, + ProgressBarType, +} from "../../types/components"; import { Progress } from "../../components/ui/progress"; import { setInterval } from "timers/promises"; import { @@ -7,22 +10,33 @@ import { AccordionContent, AccordionItem, AccordionTrigger, -} from "../../components/ui/accordion" +} from "../../components/ui/accordion"; export default function AccordionComponent({ trigger, children, + open = false, }: AccordionComponentType) { + const [value, setValue] = useState(!open ? "" : trigger); + function handleClick() { + value == "" ? setValue(trigger) : setValue(""); + } - - return <> - - - {trigger} - - {children} - - - - + return ( + <> + + + { + handleClick(); + }} + className="ml-3" + > + {trigger} + + {children} + + + + ); } diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx index 371aeefce..a59eb0f9f 100644 --- a/src/frontend/src/contexts/popUpContext.tsx +++ b/src/frontend/src/contexts/popUpContext.tsx @@ -5,12 +5,15 @@ import React, { useState } from "react"; export const PopUpContext = createContext({ openPopUp: (popUpElement: JSX.Element) => {}, closePopUp: () => {}, + setCloseEdit: (value: string) => {}, + closeEdit: "", }); interface PopUpProviderProps { children: React.ReactNode; } + const PopUpProvider = ({ children }: PopUpProviderProps) => { const [popUpElements, setPopUpElements] = useState([]); @@ -22,8 +25,11 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => { setPopUpElements((prevPopUps) => prevPopUps.slice(1)); }; + const [closeEdit, setCloseEdit] = useState(""); + + return ( - + {children} {popUpElements[0]} diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 27522ece8..a41b361e8 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -54,10 +54,11 @@ import { TabsContext } from "../../contexts/tabsContext"; export default function ApiModal({ flow }: { flow: FlowType }) { const [open, setOpen] = useState(true); const { dark } = useContext(darkContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext); const [activeTab, setActiveTab] = useState("0"); const [isCopied, setIsCopied] = useState(false); const [enabled, setEnabled] = useState(null); + const [openAccordion, setOpenAccordion] = useState(false); const tweak = useRef([]); const { setTweak, getTweak } = useContext(TabsContext); const copyToClipboard = () => { @@ -76,10 +77,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) { function setModalOpen(x: boolean) { setOpen(x); if (x === false) { + setCloseEdit(""); + setTweak([]); closePopUp(); } } - + + useEffect(() => { + if (closeEdit !== "") { + setActiveTab("3"); + setOpenAccordion(true); + } + }, [closeEdit]); + const pythonApiCode = getPythonApiCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current); @@ -172,46 +182,42 @@ export default function ApiModal({ flow }: { flow: FlowType }) { tabs[0].code = curl_code; tabs[1].code = pythonApiCode; tabs[2].code = pythonCode; - + setTweak(tweak.current); } function buildContent(value) { const htmlContent = (
- {value != null && value != '' ? value : 'None'} + {value != null && value != "" ? value : "None"}
); return htmlContent; } - function getValue(value, node, template){ - + function getValue(value, node, template) { let returnValue = value ?? ""; - if(getTweak.length > 0){ + if (getTweak.length > 0) { for (const obj of getTweak) { // Obtém a chave do objeto interno - const key = Object.keys(obj)[0]; - // Obtém o valor do objeto interno - const value = obj[key]; - if(key == node['id']){ - Object.keys(value).forEach((key) => { - if(key == template['name']){ - returnValue = value[key]; - } - }) - } + const key = Object.keys(obj)[0]; + // Obtém o valor do objeto interno + const value = obj[key]; + if (key == node["id"]) { + Object.keys(value).forEach((key) => { + if (key == template["name"]) { + returnValue = value[key]; + } + }); } - } - else{ + } + } else { return value ?? ""; } return returnValue; } - - return ( @@ -228,9 +234,15 @@ export default function ApiModal({ flow }: { flow: FlowType }) { setActiveTab(value)} + onValueChange={(value) => { + setActiveTab(value) + + if(tweak.current.length > 0){ + setOpenAccordion(true); + } + }} >
@@ -280,7 +292,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { > {flow["data"]["nodes"].map((t: any, index) => (
- +
@@ -309,7 +324,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { "code" || t.data.node.template[n].type === "prompt" || - t.data.node.template[n].type === + t.data.node.template[n].type === "file" || t.data.node.template[n].type === "int") @@ -346,9 +361,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { : t.data.node .template[n].value } - onChange={(k) => { - - }} + onChange={(k) => {}} onAddInput={(k) => { buildTweakObject( t["data"]["id"], @@ -371,14 +384,23 @@ export default function ApiModal({ flow }: { flow: FlowType }) { )} > { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); }} /> @@ -391,12 +413,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .password ?? false } - value={ - - getValue(t.data.node.template[n] - .value, t.data, t.data.node.template[n]) - - } + value={getValue( + t.data.node.template[n] + .value, + t.data, + t.data.node.template[n] + )} onChange={(k) => { buildTweakObject( t["data"]["id"], @@ -433,52 +455,54 @@ export default function ApiModal({ flow }: { flow: FlowType }) { disabled={false} /> - ) - : - t.data.node.template[n] + ) : t.data.node.template[n] .type === "file" ? ( - + .value, + t.data, + t.data.node.template[n] + ) + )} + >
- { - }} - fileTypes={ - t.data.node.template[n] - .fileTypes - } - suffixes={ - t.data.node.template[n] - .suffixes - } - onFileChange={(k: any) => { - }} - > -
- - - ) - : t.data.node.template[n] + {}} + fileTypes={ + t.data.node.template[n] + .fileTypes + } + suffixes={ + t.data.node.template[n] + .suffixes + } + onFileChange={( + k: any + ) => {}} + > + + + ) : t.data.node.template[n] .type === "float" ? (
{ buildTweakObject( t["data"]["id"], @@ -500,22 +524,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .options } - onSelect={(k) =>{ - - - + onSelect={(k) => { buildTweakObject( t["data"]["id"], k, t.data.node.template[n] - ) - } - - } - value={ - getValue(t.data.node.template[n] - .value, t.data, t.data.node.template[n]) - } + ); + }} + value={getValue( + t.data.node.template[n] + .value, + t.data, + t.data.node.template[n] + )} >
) : t.data.node.template[n] @@ -524,10 +545,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) { { buildTweakObject( t["data"]["id"], @@ -542,19 +565,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{ + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); }} />
@@ -564,19 +600,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{ + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); }} />
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index f6e4b8e1c..0f9a26f33 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -34,13 +34,15 @@ export default function CodeAreaModal({ const [code, setCode] = useState(value); const { dark } = useContext(darkContext); const { setErrorData, setSuccessData } = useContext(alertContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp,setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { setTimeout(() => { closePopUp(); + setCloseEdit("editcode"); + }, 300); } } diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx index 8a3ce4185..f051de427 100644 --- a/src/frontend/src/modals/promptModal/index.tsx +++ b/src/frontend/src/modals/promptModal/index.tsx @@ -16,12 +16,13 @@ export default function PromptAreaModal({ const [myValue, setMyValue] = useState(value); const { dark } = useContext(darkContext); const { setErrorData, setSuccessData } = useContext(alertContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { setTimeout(() => { + setCloseEdit("prompt"); closePopUp(); }, 300); } diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx index a72f74643..4dee61385 100644 --- a/src/frontend/src/modals/textAreaModal/index.tsx +++ b/src/frontend/src/modals/textAreaModal/index.tsx @@ -15,12 +15,13 @@ export default function TextAreaModal({ }) { const [open, setOpen] = useState(true); const [myValue, setMyValue] = useState(value); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { setTimeout(() => { + setCloseEdit("textarea"); closePopUp(); }, 300); } diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 0adbdc1d3..4c936cabe 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -121,6 +121,6 @@ export type RadialProgressType = { export type AccordionComponentType = { children?: ReactElement; - value?: string; + open?: boolean; trigger?: string; }; \ No newline at end of file