re-upload when flow changes while uploading already

apps/electron-app/src/render/hooks/useBoard.tsx

@@ -24,7 +24,6 @@ export function useCelebrateFirstUpload() {
 
 export function useCheckBoard() {
 	const { setBoardResult, setUploadResult } = useBoardStore();
-	const uploadCode = useCodeUploader();
 	const [{ ip }] = useLocalStorage<AdvancedConfig>('advanced-config', {
 		ip: undefined,
 	});
@@ -58,10 +57,7 @@ export function useCheckBoard() {
 					console.debug(`[CHECK] >>>`, { ip });
 					window.electron.ipcRenderer.send('ipc-check-board', { ip });
 					break;
-				case 'ready':
-					uploadCode();
-					break;
 			}
 		});
-	}, [ip, setUploadResult, uploadCode]);
+	}, [ip, setUploadResult]);
 }

apps/electron-app/src/render/hooks/useCodeUploader.ts

@@ -1,7 +1,7 @@
 import { useReactFlow } from '@xyflow/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { isNodeTypeACodeType } from '../../utils/generateCode';
-import { useBoardPort, useBoardStore, useUploadResult } from '../stores/board';
+import { useBoardCheckResult, useBoardPort, useBoardStore, useUploadResult } from '../stores/board';
 import { UploadRequest, UploadResponse } from '../../common/types';
 import { toast } from '@ui/index';
 import { useClearNodeData } from '../stores/node-data';
@@ -90,47 +90,28 @@ export function useUploadResultListener() {
 	}, [config.ip]);
 }
 
-function useHasChangesToUpload() {
+export function useAutoUploadCode() {
 	const nodeToAdd = useNewNodeStore(useShallow(state => state.nodeToAdd));
-	const uploadResult = useUploadResult();
-
-	const [hasChangesToUpload, setHasChangesToUpload] = useState(false);
+	const checkResult = useBoardCheckResult();
+	const uploadCode = useCodeUploader();
 
 	const lastNodesCount = useRef(-1);
 	const lastEdgesCount = useRef(-1);
 	const { nodesCount, edgesCount } = useNodeAndEdgeCount();
 
 	useEffect(() => {
-		// We do not want to probe the user to upload code while they are adding a new node
+		if (checkResult !== 'ready') return;
+
+		// We do not want to upload code while they are adding a new node
 		if (nodeToAdd?.length) return;
 
 		// Nothing changed
 		if (lastNodesCount.current === nodesCount && lastEdgesCount.current === edgesCount) return;
 
-		const shouldUpload = lastNodesCount.current !== -1 || lastEdgesCount.current !== -1;
 		lastNodesCount.current = nodesCount;
 		lastEdgesCount.current = edgesCount;
 
-		if (!shouldUpload) return;
-		setHasChangesToUpload(true);
-	}, [nodesCount, edgesCount, nodeToAdd]);
-
-	useEffect(() => {
-		if (uploadResult !== 'ready') return;
-
-		// We have just uploaded the code, so we can reset the flag
-		setHasChangesToUpload(false);
-	}, [uploadResult]);
-
-	return hasChangesToUpload;
-}
-
-export function useAutoUploadCode() {
-	const hasChangesToUpload = useHasChangesToUpload();
-	const uploadCode = useCodeUploader();
-
-	useEffect(() => {
-		if (!hasChangesToUpload) return;
+		console.debug(`[UPLOAD] trigger`);
 		uploadCode();
-	}, [hasChangesToUpload, uploadCode]);
+	}, [nodesCount, edgesCount, nodeToAdd, uploadCode, checkResult]);
 }

apps/electron-app/src/render/providers/CelebrationProvider.tsx

@@ -7,7 +7,6 @@ import {
 	useCallback,
 	useContext,
 	useEffect,
-	useMemo,
 	useRef,
 	useState,
 } from 'react';
@@ -26,128 +25,6 @@ export function CelebrationProvider(props: PropsWithChildren) {
 
 	const container = useRef<Container | undefined>(undefined);
 
-	const options = useMemo(
-		(): ISourceOptions => ({
-			autoPlay: false,
-			fpsLimit: 120,
-			pauseOnBlur: false,
-			pauseOnOutsideViewport: false,
-			emitters: {
-				life: {
-					count: 20,
-					duration: 0.05,
-					delay: 0.2,
-				},
-				position: {
-					x: 50,
-					y: 100,
-				},
-				rate: {
-					quantity: 12,
-					delay: 0.15,
-				},
-			},
-			particles: {
-				color: {
-					value: ['#eab308', '#3b82f6'],
-				},
-				move: {
-					decay: 0.05,
-					direction: 'top',
-					enable: true,
-					gravity: {
-						enable: true,
-					},
-					outModes: {
-						top: 'none',
-						default: 'destroy',
-					},
-					speed: {
-						min: 50,
-						max: 100,
-					},
-				},
-				number: {
-					value: 0,
-				},
-				opacity: {
-					value: 1,
-				},
-				rotate: {
-					value: {
-						min: 0,
-						max: 360,
-					},
-					direction: 'random',
-					animation: {
-						enable: true,
-						speed: 30,
-					},
-				},
-				tilt: {
-					direction: 'random',
-					enable: true,
-					value: {
-						min: 0,
-						max: 360,
-					},
-					animation: {
-						enable: true,
-						speed: 30,
-					},
-				},
-				size: {
-					value: 3,
-					animation: {
-						enable: true,
-						startValue: 'min',
-						count: 1,
-						speed: 16,
-						sync: true,
-					},
-				},
-				roll: {
-					darken: {
-						enable: true,
-						value: 25,
-					},
-					enlighten: {
-						enable: true,
-						value: 25,
-					},
-					enable: true,
-					speed: {
-						min: 5,
-						max: 15,
-					},
-				},
-				wobble: {
-					distance: 30,
-					enable: true,
-					speed: {
-						min: -7,
-						max: 7,
-					},
-				},
-				shape: {
-					type: ['circle', 'square', 'polygon'],
-					options: {
-						polygon: [
-							{
-								sides: 5,
-							},
-							{
-								sides: 6,
-							},
-						],
-					},
-				},
-			},
-			detectRetina: true,
-		}),
-		[],
-	);
-
 	async function particlesLoaded(loadedContainer: Container | undefined) {
 		container.current = loadedContainer;
 	}
@@ -181,10 +58,129 @@ export function CelebrationProvider(props: PropsWithChildren) {
 					className="z-10 pointer-events-none"
 					id="tsparticles"
 					particlesLoaded={particlesLoaded}
-					options={options}
+					options={PARTICLE_OPTIONS}
 				/>
 			)}
 			{props.children}
 		</CelebrationContext.Provider>
 	);
 }
+
+const PARTICLE_OPTIONS: ISourceOptions = {
+	autoPlay: false,
+	fpsLimit: 120,
+	pauseOnBlur: false,
+	pauseOnOutsideViewport: false,
+	emitters: {
+		life: {
+			count: 20,
+			duration: 0.05,
+			delay: 0.2,
+		},
+		position: {
+			x: 50,
+			y: 100,
+		},
+		rate: {
+			quantity: 12,
+			delay: 0.15,
+		},
+	},
+	particles: {
+		color: {
+			value: ['#eab308', '#3b82f6'],
+		},
+		move: {
+			decay: 0.05,
+			direction: 'top',
+			enable: true,
+			gravity: {
+				enable: true,
+			},
+			outModes: {
+				top: 'none',
+				default: 'destroy',
+			},
+			speed: {
+				min: 50,
+				max: 100,
+			},
+		},
+		number: {
+			value: 0,
+		},
+		opacity: {
+			value: 1,
+		},
+		rotate: {
+			value: {
+				min: 0,
+				max: 360,
+			},
+			direction: 'random',
+			animation: {
+				enable: true,
+				speed: 30,
+			},
+		},
+		tilt: {
+			direction: 'random',
+			enable: true,
+			value: {
+				min: 0,
+				max: 360,
+			},
+			animation: {
+				enable: true,
+				speed: 30,
+			},
+		},
+		size: {
+			value: 3,
+			animation: {
+				enable: true,
+				startValue: 'min',
+				count: 1,
+				speed: 16,
+				sync: true,
+			},
+		},
+		roll: {
+			darken: {
+				enable: true,
+				value: 25,
+			},
+			enlighten: {
+				enable: true,
+				value: 25,
+			},
+			enable: true,
+			speed: {
+				min: 5,
+				max: 15,
+			},
+		},
+		wobble: {
+			distance: 30,
+			enable: true,
+			speed: {
+				min: -7,
+				max: 7,
+			},
+		},
+		shape: {
+			type: ['circle', 'square', 'polygon'],
+			options: {
+				polygon: [
+					{
+						sides: 5,
+					},
+					{
+						sides: 6,
+					},
+				],
+			},
+		},
+	},
+	detectRetina: true,
+};