Merge pull request #65 from toyamarinyon/improve-debounce

refactor(graph): Inline debounce logic in GraphProvider

app/(playground)/p/[agentId]/beta-proto/graph/provider.tsx

@@ -11,7 +11,6 @@ import { type EnhancedDispatch, GraphContext } from "./context";
 import { graphReducer } from "./reducer";
 import { setGraphToDb } from "./server-actions";
 import type { Graph } from "./types";
-import { useDebounce } from "./use-debounce";
 
 const initialState = {
 	graph: {
@@ -34,25 +33,32 @@ export const GraphProvider: FC<PropsWithChildren<GraphProviderProps>> = ({
 	const isInitialMount = useRef(true);
 	const stateRef = useRef({ graph: defaultGraph });
 	const [state, setState] = useState(stateRef.current);
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-	const deboucedSetGraphToDb = useDebounce(async (graph: Graph) => {
-		setGraphToDb(agentId, graph);
-	}, 500);
-	const enhancedDispatch: EnhancedDispatch = useCallback(async (action) => {
-		if (typeof action === "function") {
-			await action(enhancedDispatch, () => stateRef.current);
-		} else {
-			stateRef.current = graphReducer(stateRef.current, action);
-		}
-		setState(stateRef.current);
-	}, []);
+	const enhancedDispatch: EnhancedDispatch = useCallback(
+		async (action) => {
+			if (typeof action === "function") {
+				await action(enhancedDispatch, () => stateRef.current);
+			} else {
+				stateRef.current = graphReducer(stateRef.current, action);
+				if (timeoutRef.current) {
+					clearTimeout(timeoutRef.current);
+				}
+				timeoutRef.current = setTimeout(async () => {
+					await setGraphToDb(agentId, stateRef.current.graph);
+				}, 500);
+			}
+			setState(stateRef.current);
+		},
+		[agentId],
+	);
 	useEffect(() => {
-		if (isInitialMount.current) {
-			isInitialMount.current = false;
-		} else {
-			deboucedSetGraphToDb(stateRef.current.graph);
-		}
-	}, [deboucedSetGraphToDb]);
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+		};
+	}, []);
 	return (
 		<GraphContext.Provider value={{ state, dispatch: enhancedDispatch }}>
 			{children}