Merge pull request #32 from wildlifeai/improvements

Various bugfixes and improvements

ios/WildlifeWatcher.xcodeproj/project.pbxproj

@@ -313,8 +313,13 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.wildlife.wildlifewatcher;
 				PRODUCT_NAME = WildlifeWatcher;
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
+				SUPPORTS_MACCATALYST = NO;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
+				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = 1;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -347,7 +352,12 @@
 				PRODUCT_NAME = WildlifeWatcher;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "Wildlife Watcher App Store";
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
+				SUPPORTS_MACCATALYST = NO;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
+				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = 1;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

ios/WildlifeWatcher/Info.plist

@@ -65,11 +65,17 @@
 	<array>
 		<string>armv7</string>
 	</array>
+	<key>UIStatusBarStyle</key>
+	<string></string>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortrait</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>

src/ble/types.ts

@@ -68,7 +68,6 @@ export const COMMANDS: {
 	[CommandNames.ID]: {
 		name: CommandNames.ID,
 		readCommand: "id",
-		readRegex: /\bDevEui:\s*([0-9A-Fa-f:]+)\b/,
 	},
 	[CommandNames.VERSION]: {
 		name: CommandNames.VERSION,
@@ -77,7 +76,7 @@ export const COMMANDS: {
 	[CommandNames.BATTERY]: {
 		name: CommandNames.BATTERY,
 		readCommand: "battery",
-		readRegex: /\bBattery\s=\s([0-9.]+V)\b/,
+		readRegex: /\bBattery\s=\s(100|\d{1,3})%/,
 	},
 	[CommandNames.SENSOR]: {
 		name: CommandNames.SENSOR,
@@ -146,3 +145,61 @@ export const COMMANDS: {
 		readRegex: /(Device will enter DFU mode after disconnecting.)\s*/,
 	},
 }
+
+type CharacteristicProperty =
+	| "Read"
+	| "Write"
+	| "WriteWithoutResponse"
+	| "Notify"
+
+type CharacteristicProperties = {
+	[key in CharacteristicProperty]?: CharacteristicProperty
+}
+
+type Descriptor = {
+	value: any
+	uuid: string
+}
+
+type Characteristic = {
+	properties: CharacteristicProperties
+	characteristic: string
+	service: string
+	descriptors?: Descriptor[]
+}
+
+type Service = {
+	uuid: string
+}
+
+type ManufacturerRawData = {
+	bytes: number[]
+	data: string
+	CDVType: string
+}
+
+type RawData = {
+	bytes: number[]
+	data: string
+	CDVType: string
+}
+
+type Advertising = {
+	manufacturerData: any
+	txPowerLevel: number
+	isConnectable: boolean
+	serviceData: any
+	localName: string
+	serviceUUIDs: string[]
+	manufacturerRawData: ManufacturerRawData
+	rawData: RawData
+}
+
+export type Services = {
+	characteristics: Characteristic[]
+	services: Service[]
+	advertising: Advertising
+	name: string
+	rssi: number
+	id: string
+}

src/components/AppDrawer.tsx

@@ -24,7 +24,7 @@ export const useAppDrawer = () => useContext(DrawerContext)
 
 export const AppDrawer = ({ children }: PropsWithChildren<unknown>) => {
 	const [isOpen, setIsOpen] = useState(false)
-	const { padding, spacing } = useExtendedTheme()
+	const { appPadding, spacing } = useExtendedTheme()
 	const { setIsLoggedIn, isLoggedIn } = useAuth()
 	const { top } = useSafeAreaInsets()
 
@@ -43,7 +43,10 @@ export const AppDrawer = ({ children }: PropsWithChildren<unknown>) => {
 			renderDrawerContent={() => {
 				return (
 					<Surface
-						style={[{ padding, paddingTop: padding + top }, styles.view]}
+						style={[
+							{ padding: appPadding, paddingTop: appPadding + top },
+							styles.view,
+						]}
 					>
 						<Avatar.Image source={require("../assets/avatar.png")} />
 						<WWText variant="bodyLarge">I'm empty at the moment.</WWText>

src/components/CustomKeyboardAvoidingView.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-native"
 
 import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { useExtendedTheme } from "../theme"
 
 type Props = {
 	style?: StyleProp<ViewStyle>
@@ -22,10 +23,11 @@ export const CustomKeyboardAvoidingView = ({
 }: PropsWithChildren<Props>) => {
 	const insets = useSafeAreaInsets()
 	const [bottomPadding, setBottomPadding] = useState(insets.bottom)
+	const { spacing } = useExtendedTheme()
 
 	useEffect(() => {
-		setBottomPadding(insets.bottom)
-	}, [insets.bottom, insets.top])
+		setBottomPadding(insets.bottom + spacing)
+	}, [insets.bottom, insets.top, spacing])
 
 	return (
 		<KeyboardAvoidingView

src/components/ui/WWScreenView.tsx

@@ -7,15 +7,11 @@ export const WWScreenView = ({
 	children,
 	...props
 }: PropsWithChildren<SafeAreaViewProps>) => {
-	const { padding } = useExtendedTheme()
+	const { appPadding } = useExtendedTheme()
 
 	return (
-		<TouchableWithoutFeedback
-			style={styles.view}
-			onPress={Keyboard.dismiss}
-			accessible={false}
-		>
-			<SafeAreaView style={[{ padding }, styles.view, props.style]}>
+		<TouchableWithoutFeedback style={styles.view} onPress={Keyboard.dismiss}>
+			<SafeAreaView style={[{ padding: appPadding }, styles.view, props.style]}>
 				{children}
 			</SafeAreaView>
 		</TouchableWithoutFeedback>

src/components/ui/WWScrollView.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react"
+import {
+	ScrollViewProps,
+	StyleProp,
+	StyleSheet,
+	View,
+	ViewStyle,
+} from "react-native"
+import { ScrollView } from "react-native-gesture-handler"
+
+type Props = ScrollViewProps & {
+	containerStyle?: StyleProp<ViewStyle>
+}
+
+export const WWScrollView = forwardRef<ScrollView, Props>(
+	({ children, containerStyle, ...props }, ref) => {
+		return (
+			<ScrollView ref={ref} {...props} style={[styles.view, props.style]}>
+				<View onStartShouldSetResponder={() => true} style={containerStyle}>
+					{children}
+				</View>
+			</ScrollView>
+		)
+	},
+)
+
+const styles = StyleSheet.create({
+	view: {
+		flex: 1,
+	},
+})

src/hooks/useBle.ts

@@ -1,15 +1,16 @@
-import React, { useCallback, useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 
 import { Platform } from "react-native"
 
 import BleManager from "react-native-ble-manager"
 import { Peripheral } from "react-native-ble-manager"
 
+import { BLE_SERVICE_UUID } from "../utils/constants"
 import {
-	BLE_CHARACTERISTIC_READ_UUID,
-	BLE_SERVICE_UUID,
-} from "../utils/constants"
-import { invokeWithTimeout, sleep } from "../utils/helpers"
+	extractServiceAndCharacteristic,
+	invokeWithTimeout,
+	sleep,
+} from "../utils/helpers"
 import { guard, log, logError } from "../utils/logger"
 import { useAppDispatch, useAppSelector } from "../redux"
 import {
@@ -30,6 +31,7 @@ import {
 	CommandConstructOptions,
 	CommandControlTypes,
 	CommandNames,
+	Services,
 } from "../ble/types"
 import { constructCommandString } from "../ble/parser"
 
@@ -73,6 +75,8 @@ const PING_REQUEST: string[] = []
 export const useBle = (): ReturnType => {
 	const { initialized } = useAppSelector((state) => state.bleLibrary)
 
+	const [isBleConnecting, setIsBleConnecting] = useState(false)
+
 	const devices = useAppSelector((state) => state.devices)
 	const scanning = useAppSelector((state) => state.scanning)
 
@@ -232,9 +236,7 @@ export const useBle = (): ReturnType => {
 	)
 
 	const isDeviceReconnecting = useRef<{ [x: string]: boolean }>({})
-	const isBleConnecting = Object.values(isDeviceReconnecting.current).find(
-		(isConnected) => isConnected,
-	)
+
 	const connectDevice = useCallback(
 		async (peripheral: ExtendedPeripheral, timeout?: number) => {
 			if (!initialized || peripheral.loading) return peripheral
@@ -261,6 +263,8 @@ export const useBle = (): ReturnType => {
 
 			isDeviceReconnecting.current[peripheral.id] = true
 
+			setIsBleConnecting(true)
+
 			const newPeripheral = { ...peripheral }
 
 			dispatch(deviceLoading({ id: newPeripheral.id, loading: true }))
@@ -286,18 +290,22 @@ export const useBle = (): ReturnType => {
 
 					log(`Device ${deviceIdentification} connected`)
 
-					await invokeWithTimeout(
+					const services = (await invokeWithTimeout(
 						() => BleManager.retrieveServices(newPeripheral.id),
 						"BleManager.retrieveServices",
 						timeout,
-					)
+					)) as Services
 
 					log(`Device ${deviceIdentification} services retireved`)
 
+					const extractedServices = extractServiceAndCharacteristic(services)
+
+					newPeripheral.services = extractedServices
+
 					await BleManager.startNotification(
 						newPeripheral.id,
-						BLE_SERVICE_UUID,
-						BLE_CHARACTERISTIC_READ_UUID,
+						extractedServices.serviceCharacteristic,
+						extractedServices.readCharacteristic,
 					)
 
 					log(`Device ${deviceIdentification} notifications started`)
@@ -313,7 +321,6 @@ export const useBle = (): ReturnType => {
 					await ping()
 
 					newPeripheral.connected = true
-
 					newPeripheral.intervals = {
 						ping: setInterval(async () => await ping(), 20000),
 					}
@@ -329,6 +336,7 @@ export const useBle = (): ReturnType => {
 			dispatch(deviceLoading({ id: newPeripheral.id, loading: false }))
 
 			if (isDeviceReconnecting.current[peripheral.id]) {
+				setIsBleConnecting(false)
 				isDeviceReconnecting.current[peripheral.id] = false
 			}
 

src/hooks/useBleListeners.tsx

@@ -186,7 +186,6 @@ export const useBleListeners = () => {
 			console.debug(JSON.stringify(text))
 
 			const currentConfiguration = configRef.current[peripheral] || {}
-			// const currentPeripheral = devicesRef.current[peripheral]
 			const currentLog = allLogs.current[peripheral] || ""
 
 			if (allLogs.current[peripheral]) {

src/hooks/useCommand.tsx

@@ -26,7 +26,9 @@ const TIMEOUT = 1000 * 10
 export const useCommand = ({ deviceId, command }: Props) => {
 	const requestRef = useRef<NodeJS.Timeout>()
 	const timeoutRef = useRef<NodeJS.Timeout>()
+
 	const [goal, setGoal] = useState<number | string>()
+	const [commandLoading, setCommandLoading] = useState(true)
 
 	const { write } = useBleActions()
 	const devices = useAppSelector((state) => state.devices)
@@ -71,6 +73,7 @@ export const useCommand = ({ deviceId, command }: Props) => {
 	const set = useCallback(
 		(data?: string) => {
 			clearTimers()
+			setCommandLoading(true)
 
 			sendCommand(CommandControlTypes.WRITE, data)
 
@@ -86,6 +89,8 @@ export const useCommand = ({ deviceId, command }: Props) => {
 					clearInterval(requestRef.current)
 				}
 
+				setCommandLoading(false)
+
 				dispatch(
 					deviceConfigChanged({
 						id: deviceId,
@@ -122,6 +127,8 @@ export const useCommand = ({ deviceId, command }: Props) => {
 		// Means its a set only command in reality
 		if (!command.readCommand) return
 
+		setCommandLoading(true)
+
 		sendCommand(CommandControlTypes.READ)
 
 		requestRef.current = setInterval(
@@ -133,6 +140,8 @@ export const useCommand = ({ deviceId, command }: Props) => {
 				clearInterval(requestRef.current)
 			}
 
+			setCommandLoading(false)
+
 			dispatch(
 				deviceConfigChanged({
 					id: deviceId,
@@ -170,7 +179,7 @@ export const useCommand = ({ deviceId, command }: Props) => {
 			})
 		) {
 			clearTimers()
-
+			setCommandLoading(false)
 			/**
 			 * If the hook already detects the correct configuration
 			 * when it first renders, the get() method isn't even
@@ -209,6 +218,7 @@ export const useCommand = ({ deviceId, command }: Props) => {
 	return {
 		set,
 		get,
+		commandLoading,
 	}
 }
 
@@ -221,6 +231,8 @@ const isCommandCompleted = ({
 }) => {
 	if (!config) return false
 
+	if (config.loading) return false
+
 	if (goal) {
 		return config.value === goal
 	}