12966103330

Committed 25 Jan 2025 03:13PM UTC coverage: 90.002%. Remained the same

Build # 12966103330

Build Type

push

github

Committed by

lazToum

Commit Message

update package.json

Run Details

2784 of 3068 branches covered (90.74%)

Branch coverage included in aggregate %.

15634 of 17396 relevant lines covered (89.87%)

249.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.46

/src/waldiez/containers/sidebar/modals/editFlowModal/hooks/useEditFlowModal.ts

/**
 * SPDX-License-Identifier: Apache-2.0
 * Copyright 2024 - 2025 Waldiez & contributors
 */
import { useEffect, useState } from "react";
import isEqual from "react-fast-compare";

import { SingleValue } from "@waldiez/components";
import {
    EditFlowModalData,
    EditFlowModalProps,
} from "@waldiez/containers/sidebar/modals/editFlowModal/types";
import { WaldiezEdge } from "@waldiez/models";
import { useWaldiez } from "@waldiez/store";

export const useEditFlowModal = (props: EditFlowModalProps) => {
    const { isOpen, onClose } = props;
    const getFlowInfo = useWaldiez(s => s.getFlowInfo);
    const updateFlowInfo = useWaldiez(s => s.updateFlowInfo);
    const updateFlowOrder = useWaldiez(s => s.updateFlowOrder);
    const flowInfo = getFlowInfo();
    const { name, description, requirements, tags, isAsync } = flowInfo;
    const [flowData, setFlowData] = useState<EditFlowModalData>({
        name,
        description,
        requirements,
        tags,
        isAsync,
    });
    const [selectedNewEdge, setSelectedNewEdge] = useState<WaldiezEdge | null>(null);
    const getFlowEdges = useWaldiez(s => s.getFlowEdges);
    const { used: sortedEdges, remaining: remainingEdges } = getFlowEdges(true);
    const onFlowChanged = useWaldiez(s => s.onFlowChanged);
    // tmp state (to save onSubmit, discard onCancel)
    const [sortedEdgesState, setSortedEdgesState] = useState<WaldiezEdge[]>(sortedEdges);
    const [remainingEdgesState, setRemainingEdgeState] = useState<WaldiezEdge[]>(remainingEdges);
    const isDataDirty = !isEqual(flowData, { name, description, requirements, tags });
    const isEdgesDirty = !isEqual(sortedEdgesState, sortedEdges);
    const [isDirty, setIsDirty] = useState<boolean>(isDataDirty || isEdgesDirty);
    useEffect(() => {
        reset();
    }, [isOpen]);
    const onSubmit = () => {
        const edgeOrders = sortedEdgesState
            .map((edge, index) => ({
                id: edge.id,
                order: index + 1,
            }))
            .concat(
                remainingEdgesState.map(edge => ({
                    id: edge.id,
                    order: -1,
                })),
            );
        updateFlowInfo(flowData);
        updateFlowOrder(edgeOrders);
        onFlowChanged();
        setIsDirty(false);
    };
    const reset = () => {
        const { name, description, requirements, tags, isAsync } = getFlowInfo();
        setFlowData({ name, description, requirements, tags, isAsync });
        const { used, remaining } = getFlowEdges(true);
        setSortedEdgesState(used);
        setRemainingEdgeState(remaining);
        setIsDirty(false);
    };
    const onCancel = () => {
        reset();
        onClose();
    };
    const onDataChange = (partialData: Partial<EditFlowModalData>) => {
        setFlowData({ ...flowData, ...partialData });
        const isDataDirty = !isEqual(
            { ...flowData, ...partialData },
            { name, description, requirements, tags },
        );
        const isEdgesDirty = !isEqual(sortedEdgesState, sortedEdges);
        setIsDirty(isDataDirty || isEdgesDirty);
    };
    const onSelectedNewEdgeChange = (option: SingleValue<{ label: string; value: WaldiezEdge }>) => {
        if (option) {
            setSelectedNewEdge(option.value);
        }
    };
    const getNewEdgeOrder = () => {
        // find the last order
        let lastOrder = sortedEdgesState[sortedEdgesState.length - 1]?.data?.order;
        if (lastOrder === undefined) {
            lastOrder = sortedEdgesState.length;
        } else {
            lastOrder++;
        }
        if (lastOrder < 0) {
            lastOrder = 0;
        }
        return lastOrder;
    };
    const onAddEdge = () => {
        if (!selectedNewEdge) {
            return;
        }
        // it should be in the 'remaining' list
        if (remainingEdgesState.find(e => e.id === selectedNewEdge.id)) {
            const lastOrder = getNewEdgeOrder();
            const newSelectedEdge = {
                ...selectedNewEdge,
                data: { ...selectedNewEdge.data, order: lastOrder } as any,
            };
            setSortedEdgesState([...sortedEdgesState, newSelectedEdge]);
            setRemainingEdgeState(remainingEdgesState.filter(e => e.id !== selectedNewEdge.id));
            setSelectedNewEdge(null);
            setIsDirty(true);
        }
    };
    const onRemoveEdge = (edge: WaldiezEdge) => {
        // avoid having zero edges/chats in the flow
        if (sortedEdgesState.length === 1) {
            return;
        }
        // it should be in the 'sorted' list
        if (sortedEdgesState.find(e => e.id === edge.id)) {
            // set the order to -1
            // edge.data = { ...edge.data, order: -1 } as any;
            setSortedEdgesState(sortedEdgesState.filter(e => e.id !== edge.id));
            setRemainingEdgeState([
                ...remainingEdgesState,
                { ...edge, data: { ...edge.data, order: -1 } as any },
            ]);
            setIsDirty(true);
        }
    };
    const onMoveEdgeUp = (index: number) => {
        // it should be in the 'sorted' list
        if (sortedEdgesState.find(e => e.id === sortedEdgesState[index].id)) {
            // swap the order between the current and the previous edge
            const previousEdge = sortedEdgesState[index - 1];
            const previousOrder = previousEdge.data?.order;
            const currentEdge = sortedEdgesState[index];
            const currentOrder = currentEdge.data?.order;
            const newSortedEdges = sortedEdgesState.slice();
            newSortedEdges[index - 1] = {
                ...currentEdge,
                data: { ...currentEdge.data, order: previousOrder },
            } as WaldiezEdge;
            newSortedEdges[index] = {
                ...previousEdge,
                data: { ...previousEdge.data, order: currentOrder },
            } as WaldiezEdge;
            setSortedEdgesState(newSortedEdges);
            setIsDirty(true);
        }
    };
    const onMoveEdgeDown = (index: number) => {
        // it should be in the 'sorted' list
        if (sortedEdgesState.find(e => e.id === sortedEdgesState[index].id)) {
            // swap the order between the current and the next edge
            const nextEdge = sortedEdgesState[index + 1];
            const nextOrder = nextEdge.data?.order;
            const currentEdge = sortedEdgesState[index];
            const currentOrder = currentEdge.data?.order;
            const newSortedEdges = sortedEdgesState.slice();
            newSortedEdges[index + 1] = {
                ...currentEdge,
                data: { ...currentEdge.data, order: nextOrder },
            } as WaldiezEdge;
            newSortedEdges[index] = {
                ...nextEdge,
                data: { ...nextEdge.data, order: currentOrder },
            } as WaldiezEdge;
            setSortedEdgesState(newSortedEdges);
            setIsDirty(true);
        }
    };
    return {
        flowData,
        isOpen,
        sortedEdgesState,
        remainingEdgesState,
        selectedNewEdge,
        isDirty,
        onClose,
        onSubmit,
        onCancel,
        onDataChange,
        onSelectedNewEdgeChange,
        onAddEdge,
        onRemoveEdge,
        onMoveEdgeUp,
        onMoveEdgeDown,
    };
};

1	/**
2	* SPDX-License-Identifier: Apache-2.0
3	* Copyright 2024 - 2025 Waldiez & contributors
4	*/
5	import { useEffect, useState } from "react";	1✔
6	import isEqual from "react-fast-compare";	1✔
7
8	import { SingleValue } from "@waldiez/components";
9	import {
10	EditFlowModalData,
11	EditFlowModalProps,
12	} from "@waldiez/containers/sidebar/modals/editFlowModal/types";
13	import { WaldiezEdge } from "@waldiez/models";
14	import { useWaldiez } from "@waldiez/store";	1✔
15
16	export const useEditFlowModal = (props: EditFlowModalProps) => {	1✔
17	const { isOpen, onClose } = props;	58✔
18	const getFlowInfo = useWaldiez(s => s.getFlowInfo);	58✔
19	const updateFlowInfo = useWaldiez(s => s.updateFlowInfo);	58✔
20	const updateFlowOrder = useWaldiez(s => s.updateFlowOrder);	58✔
21	const flowInfo = getFlowInfo();	58✔
22	const { name, description, requirements, tags, isAsync } = flowInfo;	58✔
23	const [flowData, setFlowData] = useState<EditFlowModalData>({	58✔
24	name,	58✔
25	description,	58✔
26	requirements,	58✔
27	tags,	58✔
28	isAsync,	58✔
29	});	58✔
30	const [selectedNewEdge, setSelectedNewEdge] = useState<WaldiezEdge \| null>(null);	58✔
31	const getFlowEdges = useWaldiez(s => s.getFlowEdges);	58✔
32	const { used: sortedEdges, remaining: remainingEdges } = getFlowEdges(true);	58✔
33	const onFlowChanged = useWaldiez(s => s.onFlowChanged);	58✔
34	// tmp state (to save onSubmit, discard onCancel)
35	const [sortedEdgesState, setSortedEdgesState] = useState<WaldiezEdge[]>(sortedEdges);	58✔
36	const [remainingEdgesState, setRemainingEdgeState] = useState<WaldiezEdge[]>(remainingEdges);	58✔
37	const isDataDirty = !isEqual(flowData, { name, description, requirements, tags });	58✔
38	const isEdgesDirty = !isEqual(sortedEdgesState, sortedEdges);	58✔
39	const [isDirty, setIsDirty] = useState<boolean>(isDataDirty \|\| isEdgesDirty);	58!
40	useEffect(() => {	58✔
41	reset();	19✔
42	}, [isOpen]);	58✔
43	const onSubmit = () => {	58✔
44	const edgeOrders = sortedEdgesState	1✔
45	.map((edge, index) => ({	1✔
46	id: edge.id,	10✔
47	order: index + 1,	10✔
48	}))	1✔
49	.concat(	1✔
50	remainingEdgesState.map(edge => ({	1✔
51	id: edge.id,	×
52	order: -1,	×
53	})),	1✔
54	);	1✔
55	updateFlowInfo(flowData);	1✔
56	updateFlowOrder(edgeOrders);	1✔
57	onFlowChanged();	1✔
58	setIsDirty(false);	1✔
59	};	1✔
60	const reset = () => {	58✔
61	const { name, description, requirements, tags, isAsync } = getFlowInfo();	20✔
62	setFlowData({ name, description, requirements, tags, isAsync });	20✔
63	const { used, remaining } = getFlowEdges(true);	20✔
64	setSortedEdgesState(used);	20✔
65	setRemainingEdgeState(remaining);	20✔
66	setIsDirty(false);	20✔
67	};	20✔
68	const onCancel = () => {	58✔
69	reset();	1✔
70	onClose();	1✔
71	};	1✔
72	const onDataChange = (partialData: Partial<EditFlowModalData>) => {	58✔
73	setFlowData({ ...flowData, ...partialData });	12✔
74	const isDataDirty = !isEqual(	12✔
75	{ ...flowData, ...partialData },	12✔
76	{ name, description, requirements, tags },	12✔
77	);	12✔
78	const isEdgesDirty = !isEqual(sortedEdgesState, sortedEdges);	12✔
79	setIsDirty(isDataDirty \|\| isEdgesDirty);	12!
80	};	12✔
81	const onSelectedNewEdgeChange = (option: SingleValue<{ label: string; value: WaldiezEdge }>) => {	58✔
82	if (option) {	1✔
83	setSelectedNewEdge(option.value);	1✔
84	}	1✔
85	};	1✔
86	const getNewEdgeOrder = () => {	58✔
87	// find the last order
88	let lastOrder = sortedEdgesState[sortedEdgesState.length - 1]?.data?.order;	1✔
89	if (lastOrder === undefined) {	1!
90	lastOrder = sortedEdgesState.length;	×
91	} else {	1✔
92	lastOrder++;	1✔
93	}	1✔
94	if (lastOrder < 0) {	1!
95	lastOrder = 0;	×
96	}	×
97	return lastOrder;	1✔
98	};	1✔
99	const onAddEdge = () => {	58✔
100	if (!selectedNewEdge) {	1!
101	return;	×
102	}	×
103	// it should be in the 'remaining' list
104	if (remainingEdgesState.find(e => e.id === selectedNewEdge.id)) {	1✔
105	const lastOrder = getNewEdgeOrder();	1✔
106	const newSelectedEdge = {	1✔
107	...selectedNewEdge,	1✔
108	data: { ...selectedNewEdge.data, order: lastOrder } as any,	1✔
109	};	1✔
110	setSortedEdgesState([...sortedEdgesState, newSelectedEdge]);	1✔
111	setRemainingEdgeState(remainingEdgesState.filter(e => e.id !== selectedNewEdge.id));	1✔
112	setSelectedNewEdge(null);	1✔
113	setIsDirty(true);	1✔
114	}	1✔
115	};	1✔
116	const onRemoveEdge = (edge: WaldiezEdge) => {	58✔
117	// avoid having zero edges/chats in the flow
118	if (sortedEdgesState.length === 1) {	1!
119	return;	×
120	}	×
121	// it should be in the 'sorted' list
122	if (sortedEdgesState.find(e => e.id === edge.id)) {	1✔
123	// set the order to -1
124	// edge.data = { ...edge.data, order: -1 } as any;
125	setSortedEdgesState(sortedEdgesState.filter(e => e.id !== edge.id));	1✔
126	setRemainingEdgeState([	1✔
127	...remainingEdgesState,	1✔
128	{ ...edge, data: { ...edge.data, order: -1 } as any },	1✔
129	]);	1✔
130	setIsDirty(true);	1✔
131	}	1✔
132	};	1✔
133	const onMoveEdgeUp = (index: number) => {	58✔
134	// it should be in the 'sorted' list
135	if (sortedEdgesState.find(e => e.id === sortedEdgesState[index].id)) {	1✔
136	// swap the order between the current and the previous edge
137	const previousEdge = sortedEdgesState[index - 1];	1✔
138	const previousOrder = previousEdge.data?.order;	1✔
139	const currentEdge = sortedEdgesState[index];	1✔
140	const currentOrder = currentEdge.data?.order;	1✔
141	const newSortedEdges = sortedEdgesState.slice();	1✔
142	newSortedEdges[index - 1] = {	1✔
143	...currentEdge,	1✔
144	data: { ...currentEdge.data, order: previousOrder },	1✔
145	} as WaldiezEdge;	1✔
146	newSortedEdges[index] = {	1✔
147	...previousEdge,	1✔
148	data: { ...previousEdge.data, order: currentOrder },	1✔
149	} as WaldiezEdge;	1✔
150	setSortedEdgesState(newSortedEdges);	1✔
151	setIsDirty(true);	1✔
152	}	1✔
153	};	1✔
154	const onMoveEdgeDown = (index: number) => {	58✔
155	// it should be in the 'sorted' list
156	if (sortedEdgesState.find(e => e.id === sortedEdgesState[index].id)) {	1✔
157	// swap the order between the current and the next edge
158	const nextEdge = sortedEdgesState[index + 1];	1✔
159	const nextOrder = nextEdge.data?.order;	1✔
160	const currentEdge = sortedEdgesState[index];	1✔
161	const currentOrder = currentEdge.data?.order;	1✔
162	const newSortedEdges = sortedEdgesState.slice();	1✔
163	newSortedEdges[index + 1] = {	1✔
164	...currentEdge,	1✔
165	data: { ...currentEdge.data, order: nextOrder },	1✔
166	} as WaldiezEdge;	1✔
167	newSortedEdges[index] = {	1✔
168	...nextEdge,	1✔
169	data: { ...nextEdge.data, order: currentOrder },	1✔
170	} as WaldiezEdge;	1✔
171	setSortedEdgesState(newSortedEdges);	1✔
172	setIsDirty(true);	1✔
173	}	1✔
174	};	1✔
175	return {	58✔
176	flowData,	58✔
177	isOpen,	58✔
178	sortedEdgesState,	58✔
179	remainingEdgesState,	58✔
180	selectedNewEdge,	58✔
181	isDirty,	58✔
182	onClose,	58✔
183	onSubmit,	58✔
184	onCancel,	58✔
185	onDataChange,	58✔
186	onSelectedNewEdgeChange,	58✔
187	onAddEdge,	58✔
188	onRemoveEdge,	58✔
189	onMoveEdgeUp,	58✔
190	onMoveEdgeDown,	58✔
191	};	58✔
192	};	58✔

waldiez / react / 12966103330

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous