Child class:
interface Props {
name: string;
mac: string;
}
export const BluetoothDeviceItem = (Props, { }) => {
const [connectingState, setConnectingState] = useState('not_connected');
useEffect(() => {
stateChangeCallback();
}, [connectingState]);
const { onClick } = Props;
const stateChangeCallback = () => {
switch (connectingState) {
case 'not_connected':
console.log("not_connected!");
break;
case 'connecting':
console.log("connecting!");
break;
case 'connected':
console.log("connected!");
break;
}
}
const wait = async () => {
setConnectingState('connecting');
let ret = await onClick(Props.mac);
}
return (
<IonItem lines="none" class="item-container" onClick={wait} id={Props.mac} >
</IonItem>
);
}
"Parent" class (not technically the parent because the elements are rendered in a different class)
class Bluetooth extends React.Component<{}, {}}> {
scan() {
for(let i = 0; i < 5; i++) { //using a for loop to pretend bluetooth devices are being found
let a = <BluetoothDeviceItem key={i} mac={i.toString()} name={"device_"+i} onClick={this.connect}></BluetoothDeviceItem>
bluetoothDevices.push(a); //bluetoothDevices is a *global*
}
}
connect = (id) => {
bluetoothDevices.forEach(element => {
//access the state of each element
});
}
}
I posted my code first to make it a bit easier to explain hopefully.
I have two classes. One is a child class (BlueoothDeviceItem). Within this class there is a state. It can have 3 values not_connected
, connecting
and connected
. This code is stripped down but these states would change some icons and colours.
Then there's the "parent" class. This is everything to do with the bluetooth code. As I mention in the comment I use a for loop to pretend about devices being found. This simplifies the code a lot.
When scan
is called, every time a device is found, a new child (BluetoothDeviceItem) is created with a name and a MAC address. Every one of these devices will default to not connected.
When you click on one, it uses that on click event to call the parent's function (connect
).
I believe the best practise for Bluetooth code is to do everything yourself. That includes disconnecting the devices and so on, so as not to rely on the device to do so (at least according to the documentation it is good practise for some parts). Bluetooth also only allows for 1 connection at a time. That of course means I need to disconnect any currently connected Bluetooth devices when a user tries to connect to one.
Since I have 3 states in my child class I thought these would be the best things to use. When a user connects to a device, I loop through all devices. If any have the states connecting
or connected
then you disconnect those devices.
However the issue with that is you can't access states since they are private to that class. I also tried props but props are read-only so I wouldn't be able to modify them.
The last thing I tried was refs
:
class Bluetooth extends React.Component<{}, {}> {
ref: any;
constructor({}) {
super({});
this.ref = React.createRef();
}
scan() {
for(let i = 0; i < 5; i++) { //using a for loop to pretend bluetooth devices are being found
let a = <BluetoothDeviceItem key={i} mac={i.toString()} name={"device_"+i} onClick={this.connect} elRef={this.ref}></BluetoothDeviceItem>
bluetoothDevices.push(a); //bluetoothDevices is a *global*
}
}
connect = (id) => {
bluetoothDevices.forEach(element => {
this.ref.current.state //doesn't work since it's a DOM element.
this.ref.current.getState() //also doesnt work
});
}
}
While also changing the interface to:
interface Props {
name: string;
mac: string;
elRef: any;
}
and the IonItem to:
<IonItem lines="none" class="item-container" onClick={wait} id={Props.mac} ref={Props.elRef} >
Due to it being a DOM element, I can't use this.ref.current.state
. The last thing I tried was:
<IonItem lines="none" class="item-container" onClick={wait} id={Props.mac} ref={Props.elRef} key={Props.mac} {...{"getState": () => console.log(connectingState)}}>
creating a getter function to return the state. This was the closest to what I needed and it did in fact return the state however it relied on all of the devices being the same state to change. I.E. If any 1 of the devices had the state not_connected
then the function would return not_connected
. It would only return connecting
once all of the devices had the state connecting