Add toast if topic copy to clipboard

Author: blavka

package-lock.json

@@ -173,6 +173,7 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-select": "1.2.1",
+    "react-toastify": "^6.0.8",
     "reactstrap": "^8.5.1",
     "request": "^2.88.2",
     "request-progress": "^3.0.0",

package.json

@@ -67,7 +67,7 @@ function setup() {
             const sourceDir = path.join(__dirname, "..", "assets", "node-red");
 
             copyFolderRecursiveSync(sourceDir, app.getPath("userData") );
-            var settings = {
+            var config = {
                 uiPort: listenPort,
                 verbose: true,
                 httpAdminRoot: "/",
@@ -107,9 +107,9 @@ function setup() {
 
             let http_app = express();
             let server = http.createServer(http_app);
-            RED.init(server, settings);
-            http_app.use(settings.httpAdminRoot, RED.httpAdmin);
-            http_app.use(settings.httpNodeRoot, RED.httpNode);
+            RED.init(server, config);
+            http_app.use(config.httpAdminRoot, RED.httpAdmin);
+            http_app.use(config.httpNodeRoot, RED.httpNode);
 
             RED.start().then(function () {
                 server.listen(listenPort, settings.get("node-red-bind"), ()=>{

src/background/NodeREDWorker.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { HashRouter, Route, Switch, NavLink } from "react-router-dom";
 import { ipcRenderer, shell } from "electron";
-
+import { ToastContainer, toast } from 'react-toastify';
 import { RouteIframe, RouteWithProps } from "./components/Route";
 
 import RadioManagerModel from "./model/RadioManager";
@@ -20,6 +20,7 @@ import Bridge from "./components/Bridge";
 
 // Import SCSS
 import "../assets/scss/index.scss";
+import 'react-toastify/dist/ReactToastify.css';
 
 // Import language files
 const i18n = require("../utils/i18n");
@@ -133,6 +134,8 @@ export default class extends Component {
                         <RouteWithProps path="/bridge" component={Bridge} model={this.bridge}/>
                         <Route path="/firmware" component={Firmware} />
                     </main>
+
+                    <ToastContainer position="top-right" autoClose={2000} closeOnClick/>
                 </div>
             </HashRouter>
         )

src/render/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import copy from 'copy-to-clipboard';
+import { ToastContainer, toast } from 'react-toastify';
 
 function formatTime(time) {
     return  time.toTimeString().split(' ')[0];
@@ -112,6 +113,7 @@ export default class extends Component {
         copy(message.topic, {
             debug: true,
             message: 'Press #{key} to copy',
+            onCopy: () => { toast.success("Copied to clipboard: " + message.topic) }
           });
     }
 
@@ -143,7 +145,11 @@ export default class extends Component {
                             this.state.messages.map((item, index) => {
                                 return (
                                     <li key={item.key}>
-                                        <div>{formatTime(item.time)}&nbsp;<i title="Copy topic to Clipboard" onClick={() => this.onClickCopyTopic(item)} className="fa fa-clipboard" aria-hidden="true"></i>&nbsp;<span style={{ fontWeight: "bold" }}>{item.topic}&nbsp;</span></div>
+                                        <div>
+                                            {formatTime(item.time)}&nbsp;
+                                            <i title="Copy topic to Clipboard" onClick={() => this.onClickCopyTopic(item)} className="fa fa-clipboard" aria-hidden="true"></i>&nbsp;
+                                            <span onClick={() => this.onClickCopyTopic(item)} style={{ fontWeight: "bold" }}>{item.topic}&nbsp;</span>
+                                        </div>
                                         <div>{item.payload}</div>
                                         <div className="ConsoleButton">
                                             {isHighlightedMessages(item.topic) ? null :<i title="pinned topic" onClick={() => this.onClickAdd(item)} className="fa fa-thumb-tack" aria-hidden="true"></i>}