From 29e434c17a04c7a27d4ab2bee2b2fb87ca1c2e9f Mon Sep 17 00:00:00 2001
From: "K. Shankari" <shankari@eecs.berkeley.edu>
Date: Thu, 28 Mar 2024 20:41:25 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Display=20the=20result=20of=20the?=
 =?UTF-8?q?=20callback=20in=20the=20list=20+=20test=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We don't know what the result will look like when there are multiple beacons with the same UUID, so we just stringify and display the result.
We cannot test this without having an actual BLE beacon, so I have added a "fake callback button to simulate a callback"

Changes:
- stringify the result in `didDetermineStateForRegion` and pass it in to
  `setRangeStatus`
- Change the BluetoothCard to display the `device.result` as Card.Content
- Add a new button to fake a callback for a device by getting the delegate and
  invoking the `didDetermineStateForRegion` method on it with the device
- Remove the existing result in the device before invoking the callback to
  avoid nested results

Testing done:
https://github.com/e-mission/e-mission-docs/issues/1062#issuecomment-2026576418
---
 www/js/bluetooth/BluetoothCard.tsx     | 23 ++++++++++++++++++++++-
 www/js/bluetooth/BluetoothScanPage.tsx | 14 ++++++++------
 www/js/types/BluetoothDevices.ts       |  2 +-
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/www/js/bluetooth/BluetoothCard.tsx b/www/js/bluetooth/BluetoothCard.tsx
index 75d27095b..825b47f6f 100644
--- a/www/js/bluetooth/BluetoothCard.tsx
+++ b/www/js/bluetooth/BluetoothCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, List, useTheme } from 'react-native-paper';
+import { Card, List, Text, Button, useTheme } from 'react-native-paper';
 import { StyleSheet } from 'react-native';
 
 type Props = any;
@@ -23,6 +23,19 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => {
     bgColor = device.in_range ? `rgba(200,250,200,1)` : `rgba(250,200,200,1)`;
   }
 
+  async function fakeCallback() {
+    // If we don't do this, the results start accumulating in the device object
+    // first call, we put a result into the device
+    // second call, the device already has a result, so we put another one in...
+    const deviceWithoutResult = {...device};
+    deviceWithoutResult.result = undefined;
+    window['cordova'].plugins.locationManager.getDelegate().didDetermineStateForRegion({
+      region: deviceWithoutResult,
+      eventType: "didDetermineStateForRegion",
+      state: "CLRegionStateInside"
+    });
+  }
+
   return (
     <Card style={{ backgroundColor: bgColor, ...cardStyles.card }}>
       <Card.Title
@@ -31,6 +44,14 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => {
         subtitle={`Configured major ${device.major} and minor ${device.minor}`} // e.g.,
         left={() => <List.Icon icon={device.in_range ? 'access-point' : 'access-point-off'} />}
       />
+      <Card.Content>
+	<Text style={{ borderColor: colors.primary }} variant="bodyMedium">{device.result}</Text>
+	<Button
+                mode="elevated"
+                onPress={fakeCallback}>
+		        Fake callback
+		    </Button>
+      </Card.Content>
     </Card>
   );
 };
diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx
index f9287d211..69a982cdf 100644
--- a/www/js/bluetooth/BluetoothScanPage.tsx
+++ b/www/js/bluetooth/BluetoothScanPage.tsx
@@ -85,11 +85,12 @@ const BluetoothScanPage = ({ ...props }: any) => {
     }
   }
 
-  function setRangeStatus(uuid: string, status: boolean) {
+  function setRangeStatus(uuid: string, result: string, status: boolean) {
     setSampleBLEDevices((prevDevices) => ({
       ...prevDevices,
       [uuid]: {
         ...prevDevices[uuid],
+	result: result,
         in_range: status,
       },
     }));
@@ -104,16 +105,17 @@ const BluetoothScanPage = ({ ...props }: any) => {
     delegate.didDetermineStateForRegion = function (pluginResult: BLEPluginCallback) {
       // `stateInside`is returned when the user enters the beacon region
       // `StateOutside` is either (i) left region, or (ii) started scanner (outside region)
+      const pluginResultStr = JSON.stringify(pluginResult, null, 2);
       if (pluginResult.state == 'CLRegionStateInside') {
         // need toUpperCase(), b/c callback returns with only lowercase values...
-        setRangeStatus(pluginResult.region.uuid.toUpperCase(), true);
+        setRangeStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, true);
       } else if (pluginResult.state == 'CLRegionStateOutside') {
-        setRangeStatus(pluginResult.region.uuid.toUpperCase(), false);
+        setRangeStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, false);
       }
       logDebug('[BLE] didDetermineStateForRegion');
-      logDebug(JSON.stringify(pluginResult, null, 2));
+      logDebug(pluginResultStr);
       window['cordova'].plugins.locationManager.appendToDeviceLog(
-        '[DOM] didDetermineStateForRegion: ' + JSON.stringify(pluginResult, null, 2),
+        '[DOM] didDetermineStateForRegion: ' + pluginResultStr,
       );
     };
 
@@ -287,7 +289,7 @@ const BluetoothScanPage = ({ ...props }: any) => {
 		    <TextInput
 			  label="New UUID (mandatory)"
 			  value={newUUID || ''}
-			  onChangeText={(t) => setNewUUID(t)}
+			  onChangeText={(t) => setNewUUID(t.toUpperCase())}
 		    />
 		    <TextInput
 			  label="Major (optional)"
diff --git a/www/js/types/BluetoothDevices.ts b/www/js/types/BluetoothDevices.ts
index e628731e2..1e7f7a3f2 100644
--- a/www/js/types/BluetoothDevices.ts
+++ b/www/js/types/BluetoothDevices.ts
@@ -22,7 +22,7 @@ export type BLEBeaconDevice = {
   type_name?: string; // e.g., "BeaconRegion"; used for callback
 };
 export type BLEDeviceList = {
-  [key: string]: { identifier: string; minor: number; major: number; in_range: boolean };
+  [key: string]: { identifier: string; minor: number; major: number; result: string, in_range: boolean };
 };
 
 export type BLEPluginCallback = {