Guard device status UI before project load

Author: dedicatedbroadcastsolutions

apps/app/src/react/components/headerBar/deviceStatuses/DeviceStatuses.tsx

@@ -41,6 +41,9 @@ export const DeviceStatuses: React.FC = observer(function DeviceStatuses() {
 	}, [])
 
 	const allDevices = useMemoComputedObject(() => {
+		if (!project?.bridges) {
+			return []
+		}
 		const newAllDevices: {
 			bridgeId: BridgeId
 			bridgeStatus: BridgeStatus
@@ -68,6 +71,9 @@ export const DeviceStatuses: React.FC = observer(function DeviceStatuses() {
 		return Array.from(appStore.peripherals.entries()).sort(sortOn((x) => x[0]))
 	}, [appStore.peripherals])
 	const disabledPeripherals = useMemoComputedObject(() => {
+		if (!project?.bridges) {
+			return []
+		}
 		const newDisabledPeripherals: DisabledPeripheralInfo[] = []
 		for (const [bridgeId, bridgeStatus] of appStore.bridgeStatuses.entries()) {
 			const bridgeSettings = project.bridges[unprotectString<BridgeId>(bridgeId)] as Bridge | undefined

apps/app/src/react/components/headerBar/deviceStatuses/DisabledPeripherals/DisabledPeripheralsSettings.tsx

@@ -26,6 +26,7 @@ export const DisabledPeripheralsSettings: React.FC<{
 	const toggleManualConnect = useCallback(
 		(peripheral?: DisabledPeripheralInfo) => {
 			if (!peripheral) return
+			if (!project?.bridges) return
 			const peripheralSettings =
 				project.bridges[unprotectString<BridgeId>(peripheral.bridgeId)].settings.peripherals[
 					unprotectString<PeripheralId>(peripheral.deviceId)

apps/app/src/react/components/headerBar/deviceStatuses/PeripheralSettings/PeripheralSettings.tsx

@@ -55,13 +55,20 @@ export const PeripheralSettings: React.FC<{
 		serverAPI.finishDefiningArea().catch(handleError)
 	}, [handleError, serverAPI])
 
-	const bridge = project.bridges[unprotectString<BridgeId>(bridgeId)]
-
 	const disconnect = useCallback(() => {
+		if (!project?.bridges) return
+		const bridge = project.bridges[unprotectString<BridgeId>(bridgeId)]
+		if (!bridge) return
 		bridge.settings.peripherals[unprotectString<PeripheralId>(deviceId)].manualConnect = false
 		serverAPI.updateProject({ id: project.id, project }).catch(handleError)
 		onDisconnect()
-	}, [bridge.settings.peripherals, deviceId, handleError, onDisconnect, project, serverAPI])
+	}, [bridgeId, deviceId, handleError, onDisconnect, project, serverAPI])
+
+	if (!project?.bridges) {
+		return null
+	}
+
+	const bridge = project.bridges[unprotectString<BridgeId>(bridgeId)]
 
 	if (!bridge) return null