Reload pluggable widget from Javascript

0
We have made a pluggable widget to connect to a serial port and read data from an RFID reader.   The widget works fine. We made a Javascript action to connect to a serial port.   When the serial port is connected, the user has to refresh the page, otherwise the widget doesn't listen to the serial port.   Is there a way to only refresh the widget from the Javascript action?
asked
2 answers
0

i think i might need to see some snipt in order to help , for example what react component are using functional or class component , cause i think we can handle the issue from playing around with either react life cycle components like componentDidMount() or componentWillMount() or if you’re using react functional component useEffect() would be the key solution for your problem 

answered
0

Here's the widget code in reply to Hasan Baidoun

 

import { Component, createElement } from "react";
import "./ui/ChromeSerialAPI.css";

export default class ChromeSerialAPI extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rfidCode: "",
    };
    this.reader;
    this.logStart = 'ChromeSerialAPI:';
    this.keepReading = true;
    this.closedPromise;
  }

  componentDidMount() {
    console.log(this.logStart, 'componentDidMount()');

    const listenForRFID = async () => {
      // get an array of all connected serial ports
      const ports = await navigator.serial.getPorts();
      let port;

      // if there are connected ports, use the first one
      if (ports && ports.length > 0) {
        port = ports[0];
      } else {
        // if there are no connected ports, return because there are no ports available.
        return;
      }

      // options for opening the port
      const options = {
        baudRate: 9600,
        dataBits: 8,
        parity: "none",
        stopBits: 1,
      };

      try {
        // try to open the port with the given options
        await port.open(options);
        console.log(this.logStart, "Serial port connected.");
      } catch (err) {
        // if the port is already open, catch the error and log a message
        console.log(this.logStart, "Serial port already connected.");
      }

      while (port.readable && this.keepReading) {
        if(this.reader == undefined || this.reader == null) {
          this.reader = port.readable.getReader();
        }

        let data = "";

        try {
          while (true) {
            const { value, done } = await this.reader.read();
            if (done) {
              break;
            }

            // decode the received data and add it to the buffer
            data += new TextDecoder().decode(value);

            if (data.includes("\n")) {
              // if a complete message has been received, trim it and remove any non-alphanumeric characters
              const code = data.trim().replace(/[^a-zA-Z0-9]/g, "");

              this.setState({ rfidCode: code });
              this.runMicroflow(this.props.actionOnScan, code);

              console.log(this.logStart, code);
              data = "";
            }
          }
        } catch (err) {

        } finally {
          console.log(this.logStart, 'releaseLock()')
          this.reader.releaseLock();
          return;
        }
      }
    }

    // give widget 1 second to unmount before mounting a new one.
    setTimeout(() => {
      listenForRFID()
    }, 1000)
  }

  componentWillUnmount() {
    console.log(this.logStart, "componentWillUnmount()");

    this.keepReading = false;
    // Force reader.read() to resolve immediately and subsequently
    // call reader.releaseLock() in the loop example above.
    this.reader.cancel();
  }

  runMicroflow(microflowName, rfidCode) {
    this.props.scannedAttribute.setTextValue(rfidCode)

    if (microflowName.canExecute && !microflowName.isExecuting) {
      microflowName.execute();
      console.log(this.logStart, 'microflow executed.');
    }
  }

  render() {
    return (
      <div className="hidden">
        <p>RFID Code: {this.state.rfidCode}</p>
      </div>
    );
  }
}

 

answered