Eev for communication between components

package.json

@@ -68,6 +68,7 @@
     "command-exists": "^1.2.9",
     "core-js": "^3.8.2",
     "d3-ng2-service": "^2.1.0",
+    "eev": "^0.1.5",
     "file-saver": "^2.0.5",
     "ini": "^1.3.8",
     "material-design-icons": "^3.0.1",

src/app/components/help/report-issue/issue-list.tsx

@@ -3,6 +3,7 @@ import Card from 'react-bootstrap/Card';
 import Spinner from 'react-bootstrap/Spinner';
 import IssueComponent from './issue';
 import FilterComponent from './filter';
+import e from '../../../event-bus';
 
 const wrapperStyle = { 
     justifyContent: 'center' as 'center', 
@@ -21,7 +22,7 @@ const cardStyle = {
 const cardTitleStyle = { 
     color: 'red' 
 };
-
+const message = 'Thank you for reporting the issue!';
 const apiUrl = 'https://api.github.com/repos/GNS3/gns3-web-ui/issues';
 const newIssueLink = 'https://github.com/GNS3/gns3-web-ui/issues/new';
 
@@ -45,8 +46,8 @@ class IssueListComponent extends Component<any, any> {
             }));
     }
 
-    handleChange = (e) => {
-        let filter = e.target.value;
+    handleChange = (event) => {
+        let filter = event.target.value;
         let filteredIssues = this.state.issues;
 
         filteredIssues = filteredIssues.filter((issue) => {
@@ -58,6 +59,10 @@ class IssueListComponent extends Component<any, any> {
         });
     }
 
+    newIssueOpened = (event) => {
+        e.emit('message', { text: message });
+    }
+
     render() {
         return (
             <div>
@@ -77,7 +82,7 @@ class IssueListComponent extends Component<any, any> {
                     <Card style={cardStyle}>
                         <Card.Body>
                             <Card.Title style={cardTitleStyle}>Don't see your issue here?</Card.Title>
-                            <Card.Link href={newIssueLink} target = "_blank">Open new issue</Card.Link>
+                            <Card.Link onClick={this.newIssueOpened} href={newIssueLink} target = "_blank">Open new issue</Card.Link>
                         </Card.Body>
                     </Card>
                     </div>

src/app/components/help/report-issue/report-issue.component.tsx

@@ -11,34 +11,35 @@ import {
     Output,
     SimpleChanges,
     ViewChild,
-    ViewEncapsulation
+    ViewEncapsulation,
+    AfterContentInit
   } from '@angular/core';
 import IssueListComponent from '../report-issue/issue-list';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import e from '../../../event-bus';
+import { ToasterService } from '../../../services/toaster.service';
 
 @Component({
 selector: 'app-report-issue',
 templateUrl: './report-issue.component.html',
 styleUrls: ['./report-issue.component.scss']
 })
-export class ReportIssueComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit  {
+export class ReportIssueComponent implements OnDestroy, AfterViewInit, AfterContentInit  {
     @ViewChild('issueListComponentContainer') containerRef: ElementRef;
 
-    constructor() {}
-
-    ngOnInit() {
-        //this.render();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        //this.render();
-    }
+    constructor(private toasterService: ToasterService) {}
 
     ngAfterViewInit() {
         this.render();
     }
 
+    ngAfterContentInit() {
+        e.on('message', message => {
+            this.toasterService.success(message.text);
+        });
+    }
+
     ngOnDestroy() {
         ReactDOM.unmountComponentAtNode(this.containerRef.nativeElement);
     }

src/app/event-bus/index.js

@@ -0,0 +1,5 @@
+import Eev from 'eev'
+
+export const e = new Eev()
+
+export default e

yarn.lock

@@ -5114,6 +5114,11 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+eev@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/eev/-/eev-0.1.5.tgz#800c04d450b31972b02660b97182cd28a3058e06"
+  integrity sha512-U7+up/+0JaC+ffyrMicGDzb+j2Q04Fy22tKK1Xh6hHFWdVtXwoBF8M2DwFofwsJzJcs3W3NPDvmxcMak5/iQaA==
+
 ejs@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.5.tgz#aed723844dc20acb4b170cd9ab1017e476a0d93b"