function MQTTDisplay()

in src/MQTTDisplay.js [25:163]

• 66 lines of code
• 2 McCabe index (conditional complexity)

function MQTTDisplay(props) {
  // ALLOW USER TO SUBSCRIBE TO MQTT TOPICS

  const [desiredSubscriptionTopic, setDesiredSubscriptionTopic] = useState("#");
  const [desiredPublishTopic,   setDesiredPublishTopic]   = useState("test");
  const [desiredPublishMessage, setDesiredPublishMessage] = useState(`{ "message": "Hello, world!" }`);
  const [subscribedTopics, setSubscribedTopics]           = useState([]);
  
  // isConnected and mqttClient strictly used for publishing;
  // Subscriptions are instead handled in child MQTTSubscription components
  const [isConnected, setIsConnected]   = useState(false);
  const [mqttClient, setMqttClient]     = useState();

  useEffect(() => {
    
    connectToAwsIot();
  
  },[]);  // the empty [] ensures only run once

  async function connectToAwsIot() {
    // This connection/function is only for publishing messages;
    // Subscriptions each get their own child object with separate connections.

    // mqtt clients require a unique clientId; we generate one below
    var clientId = 'ayesha-sampleapp-' + (Math.floor((Math.random() * 100000) + 1));

    // get credentials and, from them, extract key, secret key, and session token
    // Amplify's auth functionality makes this easy for us...
    var currentCredentials = await Auth.currentCredentials();
    var essentialCredentials = Auth.essentialCredentials(currentCredentials);

    // Create an MQTT client
    var newMqttClient = AWSIoTData.device({
      region: AWSConfiguration.region,
      host:AWSConfiguration.host,
      clientId: clientId,
      protocol: 'wss',
      maximumReconnectTimeMs: 8000,
      debug: true,
      accessKeyId:  essentialCredentials.accessKeyId,
      secretKey:    essentialCredentials.secretAccessKey,
      sessionToken: essentialCredentials.sessionToken
    });

    console.log('Publisher trying to connect to AWS IoT for clientId:', clientId);
    // On connect, update status
    newMqttClient.on('connect', function() {
      setIsConnected(true);
      console.log('Publisher connected to AWS IoT for clientId:', clientId);
    });

    // update state to track mqtt client
    setMqttClient(newMqttClient);

  }

  function removeSubscription(topic) {
    // This function is passed to child components
    setSubscribedTopics(arrayRemove(subscribedTopics,topic));
  }

  function handleSubscriptionRequest(e) {
    // stop submit button from refreshing entire page
    e.preventDefault();

    if (subscribedTopics.includes(desiredSubscriptionTopic)) {
      console.log(`You are already subscribed to topic '${desiredSubscriptionTopic}'!`);
    }
    else {
      setSubscribedTopics(prevTopics => [...prevTopics, desiredSubscriptionTopic]);
      console.log(`Subscribed to topic '${desiredSubscriptionTopic}'!`);
    }
  }

  function handlePublishRequest(e) {
    // stop submit button from refreshing entire page
    e.preventDefault();
  
    mqttClient.publish(desiredPublishTopic, desiredPublishMessage);
  
  }

    return (
      <div className="MQTTDisplay">
        <div className="thin-border">
          <b>Publisher status:</b> {isConnected ? "connected" : "Not connected"}
          <br/><br/> 
          <form onSubmit={handlePublishRequest}>
          <b>Publish to Topic:</b>
            <br/>
            <input
              value={desiredPublishTopic}
              onChange={e => setDesiredPublishTopic(e.target.value)}
              placeholder="IoT Topic"
              type="text"
              name="desiredPublishTopic"
              required
            />
            <br/><br/>
            <b>Publish Message:</b>
            <br/>
            <input
              value={desiredPublishMessage}
              onChange={e => setDesiredPublishMessage(e.target.value)}
              placeholder="IoT Topic"
              type="text"
              name="desiredPublishTopic"
              required
            />
            <br/><br/>
            <button type="submit">Publish</button>   
            <br/>
          </form>
        </div>
        <br/>
        <div className="thin-border">
          <form onSubmit={handleSubscriptionRequest}>
            <b>Subscribe to Topic:</b>
            <br/>
            <input
              value={desiredSubscriptionTopic}
              onChange={e => setDesiredSubscriptionTopic(e.target.value)}
              placeholder="IoT Topic"
              type="text"
              name="desiredSubscriptionTopic"
              required
            />
            <button type="submit">Subscribe</button>   
            <br/><br/>
          </form>
  
          <b>Subscriptions:</b> <br/>
          {subscribedTopics.map(topic => {
            return (<MQTTSubscription key={topic} topic={topic} removeSubscription={removeSubscription}/>)
          })}
        </div>
      </div>
    );
  }