WebSerial driver attempts to open the serial port twice

[alexrudd2]

(I've added a few print statements). Notice how the code tries to open an already-opened serial port. First the onClick() handler connects, and then useEffect() attempts again.

saxi/src/ui.tsx

Lines 1137 to 1170 in 80cfa1b

	function PortSelector({ driver, setDriver, hardware }: PortSelectorProps) {
	const [initializing, setInitializing] = useState(false);
	useEffect(() => {
	(async() => {
	try {
	const ports = await navigator.serial.getPorts();
	const port = ports[0];
	if (port) {
	console.log('connecting to', port);
	// get the first
	setDriver(await WebSerialDriver.connect(port, hardware));
	}
	} finally {
	setInitializing(false);
	}
	})();
	});
	return <>
	{driver ? `Connected: ${driver.name()}` : null}
	{!driver ?
	<button
	type="button"
	disabled={initializing}
	onClick={async() => {
	try {
	const port = await navigator.serial.requestPort({ filters: [{ usbVendorId: 0x04D8, usbProductId: 0xFD92 }] });
	// TODO: describe why we close if we already checked that driver is null
	// await driver?.close()
	setDriver(await WebSerialDriver.connect(port, hardware));
	} catch (e) {
	alert(`Failed to connect to serial device: ${e.message}`);
	console.error(e);
	}
	}}

@jedahan