From 9c0ae350bf16c858d1d9017f5d42dddf222f78c7 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> Date: Tue, 30 Apr 2024 09:39:50 -0300 Subject: [PATCH] Fix modal opening bug when not supposed to (#1795) * fix opening modal error * Fix cleanOnClose behavior in IOModal component * Refactor useEffect dependency in CollectionCardComponent * remove console * add console.log for debugging --------- Co-authored-by: anovazzi1 --- .../src/components/cardComponent/index.tsx | 482 +++++++++--------- src/frontend/src/modals/IOModal/index.tsx | 15 - src/frontend/src/pages/Playground/index.tsx | 6 + 3 files changed, 257 insertions(+), 246 deletions(-) diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index f342960ab..b6c7af538 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -1,7 +1,9 @@ import { useEffect, useState } from "react"; import { getComponent, postLikeComponent } from "../../controllers/API"; import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal"; +import IOModal from "../../modals/IOModal"; import useAlertStore from "../../stores/alertStore"; +import useFlowStore from "../../stores/flowStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; import { useStoreStore } from "../../stores/storeStore"; import { storeComponent } from "../../types/store"; @@ -18,11 +20,6 @@ import { CardHeader, CardTitle, } from "../ui/card"; -import IOModal from "../../modals/IOModal"; -import useFlowStore from "../../stores/flowStore"; -import { set } from "lodash"; -import LoadingComponent from "../loadingComponent"; -import { f } from "million/dist/shared/million.9d4df3c1"; import Loading from "../ui/loading"; export default function CollectionCardComponent({ @@ -31,7 +28,7 @@ export default function CollectionCardComponent({ disabled = false, button, onDelete, - playground + playground, }: { data: storeComponent; authorized?: boolean; @@ -62,25 +59,32 @@ export default function CollectionCardComponent({ const setNodes = useFlowStore((state) => state.setNodes); const setEdges = useFlowStore((state) => state.setEdges); const [openPlayground, setOpenPlayground] = useState(false); - const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId); + const setCurrentFlowId = useFlowsManagerStore( + (state) => state.setCurrentFlowId + ); const [loadingPlayground, setLoadingPlayground] = useState(false); - const name = data.is_component ? "Component" : "Flow"; async function getFlowData() { - const res = await getComponent(data.id) + const res = await getComponent(data.id); const newFlow = cloneFLowWithParent(res, res.id, data.is_component, true); return newFlow; } useEffect(() => { if (currentFlowId && playground) { - setNodes(currentFlow?.data?.nodes ?? [], true); - setEdges(currentFlow?.data?.edges ?? [], true); - cleanFlowPool(); + if(openPlayground){ + setNodes(currentFlow?.data?.nodes ?? [], true); + setEdges(currentFlow?.data?.edges ?? [], true); + } + else{ + setNodes([], true); + setEdges([], true); + cleanFlowPool(); + } } - }, [currentFlowId]); + }, [openPlayground]); useEffect(() => { if (data) { @@ -100,16 +104,18 @@ export default function CollectionCardComponent({ addFlow(true, newFlow) .then((id) => { setSuccessData({ - title: `${name} ${isStore ? "Downloaded" : "Installed" - } Successfully.`, + title: `${name} ${ + isStore ? "Downloaded" : "Installed" + } Successfully.`, }); setLoading(false); }) .catch((error) => { setLoading(false); setErrorData({ - title: `Error ${isStore ? "downloading" : "installing" - } the ${name}`, + title: `Error ${ + isStore ? "downloading" : "installing" + } the ${name}`, list: [error["response"]["data"]["detail"]], }); }); @@ -159,269 +165,283 @@ export default function CollectionCardComponent({ } return ( - -
- -
- - - -
{data.name}
- - {data?.metadata !== undefined && ( -
- {data.private && ( - - - - - + <> + +
+ +
+ + + name={data.is_component ? "ToyBrick" : "Group"} + /> + +
{data.name}
+ + {data?.metadata !== undefined && ( +
+ {data.private && ( + + + + + + )} + {!data.is_component && ( + + + + + {data?.metadata?.total ?? 0} + + + + )} + - - - {data?.metadata?.total ?? 0} + + + {likes_count ?? 0} - )} - - - - - {likes_count ?? 0} + + + + + {downloads_count ?? 0} + - - - - - - - {downloads_count ?? 0} - - - -
- )} + +
+ )} - {onDelete && data?.metadata === undefined && ( - { - onDelete(); - }} - > - - - )} - -
- {data.user_created && data.user_created.username && ( - - by {data.user_created.username} - {data.last_tested_version && ( - <> - {" "} - |{" "} - - {" "} - ⛓︎ v{data.last_tested_version} - - - )} - - )} - - -
{data.description}
- - -
- - -
-
-
- {data.tags && - data.tags.length > 0 && - data.tags.map((tag, index) => ( - { + onDelete(); + }} > - {tag.name} - - ))} + + + )} +
- {data.liked_by_count != undefined && ( -
- {onDelete && data?.metadata !== undefined ? ( - - { - onDelete(); - }} + {data.user_created && data.user_created.username && ( + + by {data.user_created.username} + {data.last_tested_version && ( + <> + {" "} + |{" "} + + {" "} + ⛓︎ v{data.last_tested_version} + + + )} + + )} + + +
{data.description}
+ + +
+ + +
+
+
+ {data.tags && + data.tags.length > 0 && + data.tags.map((tag, index) => ( + + {tag.name} + + ))} +
+ {data.liked_by_count != undefined && ( +
+ {onDelete && data?.metadata !== undefined ? ( + + { + onDelete(); + }} + > + + + + ) : ( + - - - ) : ( + + )} - )} - - - -
- )} - {button && button} - {playground && -
+ )} + {button && button} + {playground && ( + - } + } else { + getFlowData().then((res) => { + setCurrentFlow(res); + setOpenPlayground(true); + setLoadingPlayground(false); + }); + } + }} + > + {!loadingPlayground ? ( + <> + + Playground + + ) : ( + + )} + + )} +
-
- - + + + + {openPlayground && ( + + <> + + )} + ); } diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 86c9d6591..463d7ce1e 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -31,10 +31,8 @@ export default function IOModal({ open, setOpen, disable, - cleanOnClose=false, }: IOModalPropsType): JSX.Element { const allNodes = useFlowStore((state) => state.nodes); - const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool); const inputs = useFlowStore((state) => state.inputs).filter( (input) => input.type !== "ChatInput" ); @@ -85,12 +83,6 @@ export default function IOModal({ return updateVerticesOrder(currentFlow!.id, null); } - // useEffect(() => { - // if (open) { - // updateVertices(); - // } - // }, [open, currentFlow]); - async function sendMessage(count = 1): Promise { if (isBuilding) return; setIsBuilding(true); @@ -129,13 +121,6 @@ export default function IOModal({ open={open} setOpen={setOpen} disable={disable} - onChangeOpenModal={(open)=>{ - if(!open && cleanOnClose){ - console.log("cleaning flow pool") - cleanFlowPool(); - } - - }} > {children} {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */} diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx index 170690581..9d538494b 100644 --- a/src/frontend/src/pages/Playground/index.tsx +++ b/src/frontend/src/pages/Playground/index.tsx @@ -27,6 +27,7 @@ export default function PlaygroundPage() { // Set flow tab id useEffect(() => { + console.log("id", id); if (getFlowById(id!)) { setCurrentFlowId(id!); } @@ -44,6 +45,11 @@ export default function PlaygroundPage() { cleanFlowPool(); setLoading(false); } + return () => { + setNodes([], true); + setEdges([], true); + cleanFlowPool(); + }; }, [currentFlow]);