jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Refactor CollectionCardComponent to improve code readability and fix loadingPlayground state handling

Browse source
This commit is contained in:
anovazzi1 2024-04-26 13:40:54 -03:00
commit 2474cd348e
1 changed files with 26 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/frontend/src/components/cardComponent/index.tsx
View file

@ -20,6 +20,10 @@ import {
} from "../ui/card"; } from "../ui/card";
import IOModal from "../../modals/IOModal"; import IOModal from "../../modals/IOModal";
import useFlowStore from "../../stores/flowStore"; 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({ export default function CollectionCardComponent({
data, data,
@ -59,20 +63,21 @@ export default function CollectionCardComponent({
const setEdges = useFlowStore((state) => state.setEdges); const setEdges = useFlowStore((state) => state.setEdges);
const [openPlayground, setOpenPlayground] = useState(false); 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"; const name = data.is_component ? "Component" : "Flow";
async function getFlowData(){ 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); const newFlow = cloneFLowWithParent(res, res.id, data.is_component, true);
return newFlow; return newFlow;
} }
useEffect(() => { useEffect(() => {
if (currentFlowId && playground) { if (currentFlowId && playground) {
setNodes(currentFlow?.data?.nodes ?? [],true); setNodes(currentFlow?.data?.nodes ?? [], true);
setEdges(currentFlow?.data?.edges ?? [],true); setEdges(currentFlow?.data?.edges ?? [], true);
cleanFlowPool(); cleanFlowPool();
} }
}, [currentFlowId]); }, [currentFlowId]);
@ -373,6 +378,7 @@ export default function CollectionCardComponent({
{button && button} {button && button}
{playground && {playground &&
<Button <Button
disabled={loadingPlayground}
key={data.id} key={data.id}
tabIndex={-1} tabIndex={-1}
variant="outline" variant="outline"
@ -382,24 +388,32 @@ export default function CollectionCardComponent({
"playground-flow-button-" + data.id "playground-flow-button-" + data.id
} }
onClick={() => { onClick={() => {
if(getFlowById(data.id)){ setLoadingPlayground(true);
if (getFlowById(data.id)) {
setCurrentFlowId(data.id); setCurrentFlowId(data.id);
setOpenPlayground(true); setOpenPlayground(true);
setLoadingPlayground(false);
} }
else{ else {
getFlowData().then((res) => { getFlowData().then((res) => {
setCurrentFlow(res); setCurrentFlow(res);
setOpenPlayground(true); setOpenPlayground(true);
setLoadingPlayground(false);
}); });
} }
}} }}
> >
<IconComponent {!loadingPlayground ?
name="ExternalLink" <>
className="main-page-nav-button select-none" <IconComponent
/> name="ExternalLink"
Playground className="main-page-nav-button select-none"
/>
Playground
</>:
<Loading />
}
{openPlayground && < IOModal cleanOnClose={true} open={openPlayground} setOpen={setOpenPlayground}> {openPlayground && < IOModal cleanOnClose={true} open={openPlayground} setOpen={setOpenPlayground}>
<></> <></>
</IOModal>} </IOModal>}