added toasts

package.json

@@ -20,6 +20,7 @@
     "react-router-redux": "^4.0.8",
     "react-scripts": "1.1.1",
     "react-sidebar": "^2.3.2",
+    "react-toastify": "^3.4.3",
     "reactstrap": "^5.0.0",
     "redux": "^3.7.2",
     "redux-batched-actions": "^0.2.1",

src/actions/mqtt.js

 import _ from "lodash";
+import * as toast from '../modules/UIKit/utils/toast';
 
 export const MQTT_CONNECT = 'mqtt_connect';
 export const MQTT_CONNECTED = 'mqtt_connected';
@@ -17,13 +18,19 @@ export const connect = (url, topic) => ({
     }
 });
 
-export const connected = () => ({
-    type: MQTT_CONNECTED,
-});
+export const connected = () => {
+    toast.success('Connected to MQTT');
+    return {
+        type: MQTT_CONNECTED,
+    };
+};
 
-export const disconnected = () => ({
-    type: MQTT_DISCONNECTED,
-});
+export const disconnected = () => {
+    toast.error('MQTT connection is closed');
+    return {
+        type: MQTT_DISCONNECTED,
+    };
+};
 
 export const pushMessage = (topic, message) => (dispatch, getState) => {
     const maxMessageCapture = _.get(getState(), 'form.mqtt.values.maxMessageCapture');

src/middlewares/mqtt.js

@@ -2,8 +2,6 @@ import mqtt from 'mqtt';
 import {MQTT_CONNECT} from '../actions/mqtt';
 import {connected, disconnected, pushMessage, pushMessages} from '../actions/mqtt';
 import _ from 'lodash';
-// import { notifyConnected } from '../actions/device';
-// import { pushData } from '../actions/data';
 import config from '../config';
 
 const mqttMiddleware = (function () {
@@ -18,7 +16,7 @@ const mqttMiddleware = (function () {
         if (interval) clearInterval(interval);
         interval = setInterval(() => {
             if (messages.length) {
-                // if (config.debug) console.log('MQTT: dispatch batch update');
+                if (config.debug) console.log('MQTT: dispatch batch update');
                 store.dispatch(pushMessages(messages));
                 messages = [];
             }

src/modules/MQTT/components/SubscribeForm/index.js

 import React from 'react';
 import PropTypes from 'prop-types'
 import styled from 'styled-components';
+import _ from 'lodash';
 import classNames from 'classnames'
 import {Field, reduxForm} from 'redux-form'
 import {Collapse} from 'reactstrap';

src/modules/MQTT/containers/SubscribeToTopic/index.js

 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import _ from 'lodash';
 import {connect as mqttConnect, toggleMqttForm} from '../../../../actions/mqtt';
-import { batchActions } from 'redux-batched-actions';
 
 import SubscribeToTopicView from '../../components/SubscribeForm';
 
-
 const mapStateToProps = ({mqtt, form}, ownProps) => {
     return ({
         displayForm: mqtt.displayForm,
@@ -20,7 +17,6 @@ const mapStateToProps = ({mqtt, form}, ownProps) => {
     })
 };
 
-
 const mapDispatchToProps = dispatch => ({
     startListeningTopic: (url, topic) => {
         dispatch(mqttConnect(url, topic));

src/modules/MQTT/containers/SubscriptionView/index.js

 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import _ from 'lodash';
-import {connect as mqttConnect} from '../../../../actions/mqtt';
-
 import SubscriptionView from '../../components/SubscriptionView';
 
-
 const mapStateToProps = ({mqtt, form}, ownProps) => {
     return ({
         displayType: _.get(form, 'mqtt.values.displayType'),
@@ -15,11 +11,4 @@ const mapStateToProps = ({mqtt, form}, ownProps) => {
 };
 
 
-const mapDispatchToProps = dispatch => ({
-    startListeningTopic: (url, topic) => {
-        dispatch(mqttConnect(url, topic));
-    }
-});
-
-
-export default connect(mapStateToProps, mapDispatchToProps)(SubscriptionView);
+export default connect(mapStateToProps)(SubscriptionView);

src/modules/UIKit/components/Header/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types'
 import styled from 'styled-components';
 
-
 const Header = ({className, children}) => (
     <header className={className}>
         <img src="/images/RigadoLogo.png"/>

src/modules/UIKit/containers/Main.js

@@ -5,7 +5,7 @@ import Sidebar from '../components/Sidebar';
 import Link from '../components/Sidebar/Link';
 import Header from '../components/Header';
 import classNames from 'classnames'
-
+import { ToastContainer, toast } from 'react-toastify';
 import styled from "styled-components";
 
 class Main extends React.Component {
@@ -15,7 +15,8 @@ class Main extends React.Component {
 
 
         return (
-            <div className={classNames('Layout-Main container-fluid', this.props.className)}>
+            <div className={classNames('UIKit-Main container-fluid', this.props.className)}>
+                <ToastContainer hideProgressBar newestOnTop closeButton={false} toastClassName="UIKit-Toast" bodyClassName="UIKit-Toast-Body" position="bottom-right"/>
                 <div className="row">
                     <Header/>
                 </div>
@@ -41,18 +42,18 @@ export default styled(Main)`
 
   height: 100%;
   
-  > .row:first-child{
-    height: 50px;
-  }
+  > .row  > ${Header} {
+     height: 50px;
+  } 
   
-  > .row:nth-child(2){
+  > .row:last-child {
     height: calc(100% - 50px);
     
-    > ${Sidebar}{
+    > ${Sidebar} {
       width: 200px;
     }
     
-    > .content{
+    > .content {
       padding: 20px 50px 20px 50px;
       width: calc(100%);
     }

src/modules/UIKit/utils/toast.js

+import React from 'react';
+import { toast } from 'react-toastify';
+
+
+export const success = (text) => {
+    return toast(<div className="bg-success text-white">{text}</div>)
+};
+
+export const error = (text) => {
+    return toast(<div className="bg-warning text-white">{text}</div>)
+};
\ No newline at end of file

src/styles.js

-import { injectGlobal } from 'styled-components';
+import {injectGlobal} from 'styled-components';
 
 injectGlobal`
   html {
@@ -18,5 +18,30 @@ injectGlobal`
     height: 100%;
     width: 100%;
   }
-
+  
+  &&& {
+    .UIKit-Toast-Body{
+    
+    }
+    
+    .UIKit-Toast{
+      //box-shadow: none !important;
+      padding: 0 !important;
+      > .UIKit-Toast-Body {
+        margin: 0 !important;
+        height: 100%;
+        width: 100%;
+        
+        > div {
+          padding: 5px 10px;
+          min-height: 64px;
+          text-align: center;
+          vertical-align: center;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
 `;
\ No newline at end of file

yarn.lock

@@ -1247,6 +1247,10 @@ bootstrap@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
 
+bowser@^1.7.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162"
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -2008,6 +2012,13 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-loader@0.28.7:
   version "0.28.7"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
@@ -3015,7 +3026,7 @@ fbemitter@^2.0.0:
   dependencies:
     fbjs "^0.8.4"
 
-fbjs@^0.8.0, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3283,6 +3294,16 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+glamor@^2.20.40:
+  version "2.20.40"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
+  dependencies:
+    fbjs "^0.8.12"
+    inline-style-prefixer "^3.0.6"
+    object-assign "^4.1.1"
+    prop-types "^15.5.10"
+    through "^2.3.8"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -3768,6 +3789,10 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
 iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -3846,6 +3871,13 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
+inline-style-prefixer@^3.0.6:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
+  dependencies:
+    bowser "^1.7.3"
+    css-in-js-utils "^2.0.0"
+
 inquirer@3.3.0, inquirer@^3.0.6:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@@ -6503,6 +6535,14 @@ react-textarea-autosize@^5.1.0:
   dependencies:
     prop-types "^15.6.0"
 
+react-toastify@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-3.4.3.tgz#c0454834c403682729e3f616112427cfb1c723cd"
+  dependencies:
+    glamor "^2.20.40"
+    prop-types "^15.6.0"
+    react-transition-group "^2.2.1"
+
 react-transition-group@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.0.tgz#8dd1af58f6af284b19fd057f512e74f20438ad31"
@@ -7744,7 +7784,7 @@ through2@^2.0.1, through2@^2.0.2, through2@~2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@^2.3.6:
+through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"