refactor: replace precompiled mqtt for mqtt browser

Author: wallace-sf

package.json

@@ -104,8 +104,8 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.3",
+    "mqtt-browser": "^4.3.7",
     "mqtt-pattern": "^2.0.0",
-    "precompiled-mqtt": "^4.3.14-beta",
     "react-redux": "^8.0.5",
     "tiny-warning": "^1.0.3"
   },

src/WorkflowManager.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { MqttClient, connect } from 'precompiled-mqtt';
+import { MqttClient, connect } from 'mqtt-browser';
 import invariant from 'tiny-warning';
 
 import { MqttProvider, IMqttContext } from './contexts';

src/WorkflowManagerConfig.ts

@@ -1,6 +1,6 @@
 import { Store } from '@reduxjs/toolkit';
+import { MqttClient, IClientSubscribeOptions } from 'mqtt-browser';
 import { matches, exec } from 'mqtt-pattern';
-import { MqttClient, IClientSubscribeOptions } from 'precompiled-mqtt';
 import invariant from 'tiny-warning';
 
 import { createWorkflowAction } from './ducks/utils';

src/__tests__/WorkflowManager.test.tsx

@@ -6,7 +6,7 @@ import { WorkflowManager } from '../WorkflowManager';
 
 describe('WorkflowManager component', () => {
   beforeEach(() => {
-    const props = { brokerUrl: 'http://localhost:8080' };
+    const props = { brokerUrl: 'ws://broker.mqttdashboard.com:8000/mqtt' };
 
     render(<WorkflowManager {...props} />);
   });

src/contexts/types.ts

@@ -1,4 +1,4 @@
-import { MqttClient } from 'precompiled-mqtt';
+import { MqttClient } from 'mqtt-browser';
 
 export interface IMqttContext {
   client: MqttClient | null;

src/types.ts

@@ -5,7 +5,7 @@ import {
   IClientOptions,
   IClientSubscribeOptions,
   MqttClient,
-} from 'precompiled-mqtt';
+} from 'mqtt-browser';
 
 type Topic = string | string[];
 

src/utils/shouldSubscribeOrUnsubscribe.util.ts

@@ -1,5 +1,5 @@
 import { Store } from '@reduxjs/toolkit';
-import { MqttClient } from 'precompiled-mqtt';
+import { MqttClient } from 'mqtt-browser';
 import invariant from 'tiny-warning';
 
 import { ERROR_MESSAGES } from './constants.util';