Skip to content

GitLab

Commit b7f6ae92 authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

added unsubscribe

parent 53f1faa2
Hide whitespace changes
Inline Side-by-side
src/actions/mqtt.js
View file @ b7f6ae92
......@@ -2,6 +2,7 @@ import _ from "lodash";
import * as toast from '../modules/UIKit/utils/toast';
export const MQTT_CONNECT = 'mqtt_connect';
export const MQTT_DISCONNECT = 'mqtt_disconnect';
export const MQTT_CONNECTED = 'mqtt_connected';
export const MQTT_DISCONNECTED = 'mqtt_disconnected';
export const MQTT_PUSH_MESSAGE = 'mqtt_push_message';
......@@ -18,6 +19,10 @@ export const connect = (url, topic) => ({
}
});
export const disconnect = () => ({
type: MQTT_DISCONNECT,
});
export const connected = () => {
toast.success('Connected to MQTT');
return {
......
src/middlewares/mqtt.js
View file @ b7f6ae92
import mqtt from 'mqtt';
import {MQTT_CONNECT} from '../actions/mqtt';
import {MQTT_CONNECT, MQTT_DISCONNECT} from '../actions/mqtt';
import {connected, disconnected, pushMessage, pushMessages} from '../actions/mqtt';
import _ from 'lodash';
import config from '../config';
......@@ -19,12 +19,11 @@ const mqttMiddleware = (function () {
store.dispatch(pushMessages(messages));
messages = [];
}
}, 1000);
}, 500);
const subscribe = (newUrl, newTopic, newReconnectPeriod) => {
if (client != null) {
client.end();
client = null;
}
setTimeout(() => {
url = newUrl;
......@@ -56,6 +55,13 @@ const mqttMiddleware = (function () {
};
const unsubscribe = () => {
if (client != null) {
client.end();
}
};
const isConnected = _.get(store.getState(), 'mqtt.isConnected');
const clientIsNull = client == null;
......@@ -69,6 +75,9 @@ const mqttMiddleware = (function () {
case MQTT_CONNECT:
subscribe(action.payload.url, action.payload.topic, action.payload.reconnectPeriod);
return next(action);
case MQTT_DISCONNECT:
unsubscribe();
return next(action);
default:
return next(action);
}
......
src/modules/MQTT/components/Chart/index.js
View file @ b7f6ae92
import React, {Component} from 'react';
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
import C3Chart from 'react-c3js';
......@@ -8,7 +8,7 @@ import moment from 'moment';
import _ from 'lodash';
import TextOverlay from '../../../UIKit/components/Overlay/TextOverlay';
class Chart extends Component {
class Chart extends PureComponent {
static propTypes = {
className: PropTypes.string,
......
src/modules/MQTT/components/SubscribeForm/index.js
View file @ b7f6ae92
......@@ -9,44 +9,21 @@ import LoaderOverlay from '../../../UIKit/components/Overlay/LoaderOverlay';
const SubscribeToTopic = ({
className, startListeningTopic, isConnected, reconnectPeriod,
className, startListeningTopic, disconnect, isConnected, reconnectPeriod,
topic, url, maxMessageCapture, displayType,
displayForm, toggleMqttForm, isConnectInProcess
}) => {
const DisplayType = ({input: {value, onChange}}) => {
const _onChange = (e) => {
onChange(e.target.name)
};
return (
<div>
<label className="font-weight-bold">MQTT payload display</label>
<div className="custom-control custom-radio">
<input type="radio" id="display-type-json" name="json" className="custom-control-input"
checked={"json" === value} onChange={_onChange}/>
<label className="custom-control-label" htmlFor="display-type-json">Auto-format JSON payloads
(improves readability)</label>
</div>
<div className="custom-control custom-radio">
<input type="radio" id="display-type-string" name="string" className="custom-control-input"
checked={"string" === value} onChange={_onChange}/>
<label className="custom-control-label" htmlFor="display-type-string">
Display payloads as strings(more accurate)</label>
</div>
</div>
);
};
DisplayType.propTypes = {
input: PropTypes.object
};
return (
<LoaderOverlay showLoader={isConnectInProcess}>
<div className={classNames('text-muted', className)}>
<button type="button" className="btn btn-link"
onClick={toggleMqttForm}>{displayForm ? 'Hide Subscribe form' : 'Show Subscribe form'}</button>
<button type="button" className="btn btn-link btn-sm"
onClick={toggleMqttForm}>{displayForm ? 'Hide Subscribe form ▴' : 'Show Subscribe form ▾'}</button>
{isConnected ? <button onClick={disconnect}
type="button"
className="btn btn-outline-secondary btn-sm">
Unsubscribe
</button> : null}
<Collapse isOpen={displayForm}>
<small className="form-text">
Devices publish MQTT messages on topics. You can use this client to subscribe to a topic
......@@ -77,14 +54,20 @@ const SubscribeToTopic = ({
</small>
</div>
<div className="col-12 col-md-2">
<button onClick={() => {
startListeningTopic(url, topic)
}}
type="button"
className="btn btn-outline-primary"
disabled={!(topic && url)}>
Subscribe to topic
</button>
{isConnected ?
<button onClick={disconnect}
type="button"
className="btn btn-outline-secondary">
Unsubscribe from topic
</button> :
<button onClick={() => {
startListeningTopic(url, topic)
}}
type="button"
className="btn btn-outline-primary"
disabled={!(topic && url)}>
Subscribe to topic
</button>}
</div>
</div>
</form>
......@@ -95,6 +78,8 @@ const SubscribeToTopic = ({
);
};
SubscribeToTopic.propTypes = {
className: PropTypes.string,
startListeningTopic: PropTypes.func,
......@@ -109,6 +94,32 @@ SubscribeToTopic.propTypes = {
toggleMqttForm: PropTypes.func
};
const DisplayType = ({input: {value, onChange}}) => {
const _onChange = (e) => {
onChange(e.target.name)
};
return (
<div>
<label className="font-weight-bold">MQTT payload display</label>
<div className="custom-control custom-radio">
<input type="radio" id="display-type-json" name="json" className="custom-control-input"
checked={"json" === value} onChange={_onChange}/>
<label className="custom-control-label" htmlFor="display-type-json">Auto-format JSON payloads
(improves readability)</label>
</div>
<div className="custom-control custom-radio">
<input type="radio" id="display-type-string" name="string" className="custom-control-input"
checked={"string" === value} onChange={_onChange}/>
<label className="custom-control-label" htmlFor="display-type-string">
Display payloads as strings(more accurate)</label>
</div>
</div>
);
};
DisplayType.propTypes = {
input: PropTypes.object
};
export default styled(reduxForm({
form: 'mqtt',
......@@ -122,8 +133,8 @@ export default styled(reduxForm({
margin-bottom: 15px;
> button {
padding: 0;
> button:first-child {
padding-left: 0;
}
form {
>.form-row {
......
src/modules/MQTT/containers/SubscribeToTopic/index.js
View file @ b7f6ae92
import React from 'react';
import {connect} from 'react-redux';
import _ from 'lodash';
import {connect as mqttConnect, toggleMqttForm} from '../../../../actions/mqtt';
import {connect as mqttConnect, disconnect, toggleMqttForm} from '../../../../actions/mqtt';
import SubscribeToTopicView from '../../components/SubscribeForm';
const mapStateToProps = ({mqtt, form}) => {
......@@ -20,6 +20,9 @@ const mapDispatchToProps = dispatch => ({
startListeningTopic: (url, topic) => {
dispatch(mqttConnect(url, topic));
},
disconnect: () => {
dispatch(disconnect());
},
toggleMqttForm: () => {
dispatch(toggleMqttForm());
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment