From 4812db6c8756a52e7f9db26b8e620c0f38a4546f Mon Sep 17 00:00:00 2001
From: Johannes Eder <ederj@cip.ifi.lmu.de>
Date: Fri, 25 Jun 2021 12:19:13 +0200
Subject: [PATCH] chore(alerts): implemented destroy method in alerts.js

---
 frontend/src/utils/alerts/alerts.js      | 29 +++++++++++++++++++-----
 frontend/src/utils/alerts/alerts.spec.js |  8 ++++++-
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/utils/alerts/alerts.js b/frontend/src/utils/alerts/alerts.js
index dcecc915b..4f84d8aac 100644
--- a/frontend/src/utils/alerts/alerts.js
+++ b/frontend/src/utils/alerts/alerts.js
@@ -1,4 +1,5 @@
 import { Utility } from '../../core/utility';
+import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager';
 import './alerts.sass';
 
 const ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
@@ -32,6 +33,8 @@ export class Alerts {
   _element;
   _app;
 
+  _eventManager;
+
   constructor(element, app) {
     if (!element) {
       throw new Error('Alerts util has to be called with an element!');
@@ -40,6 +43,8 @@ export class Alerts {
     this._element = element;
     this._app = app;
 
+    this._eventManager = new EventManager();
+
     if (this._element.classList.contains(ALERTS_INITIALIZED_CLASS)) {
       return false;
     }
@@ -48,6 +53,7 @@ export class Alerts {
     this._alertElements = this._gatherAlertElements();
 
     if (this._togglerElement) {
+      //should there be a start method, to initialize the listeners in initToggler and initAlerts or is this wanted?
       this._initToggler();
     }
 
@@ -61,7 +67,14 @@ export class Alerts {
   }
 
   destroy() {
-    console.log('TBD: Destroy Alert');
+    this._eventManager.removeAllEventListenersFromUtil();
+
+    if(this._alertElements) {
+      this._alertElements.forEach(element => element.remove() );
+    }
+
+    if(this._element.classList.contains(ALERTS_INITIALIZED_CLASS))
+      this._element.classList.remove(ALERTS_INITIALIZED_CLASS);
   }
 
   _gatherAlertElements() {
@@ -71,10 +84,12 @@ export class Alerts {
   }
 
   _initToggler() {
-    this._togglerElement.addEventListener('click', () => {
+    let clickListenerToggler = new EventWrapper(EVENT_TYPE.CLICK, () => {
       this._alertElements.forEach((alertEl) => this._toggleAlert(alertEl, true));
       this._togglerElement.classList.remove(ALERTS_TOGGLER_VISIBLE_CLASS);
-    });
+    }, this._togglerElement);
+
+    this._eventManager.registerNewListener(clickListenerToggler);
   }
 
   _initAlerts() {
@@ -88,9 +103,11 @@ export class Alerts {
     }
 
     const closeEl = alertElement.querySelector('.' + ALERT_CLOSER_CLASS);
-    closeEl.addEventListener('click', () => {
-      this._toggleAlert(alertElement);
-    });
+    const closeAlertEvent = new EventWrapper(EVENT_TYPE.CLICK, () => {
+      this._toggleAlert(alertElement).bind(this);
+    }, closeEl);
+
+    this._eventManager.registerNewListener(closeAlertEvent);
 
     if (autoHideDelay > 0 && alertElement.matches(ALERT_AUTOCLOSING_MATCHER)) {
       window.setTimeout(() => this._toggleAlert(alertElement), autoHideDelay * 1000);
diff --git a/frontend/src/utils/alerts/alerts.spec.js b/frontend/src/utils/alerts/alerts.spec.js
index 0b4749e97..889229f7c 100644
--- a/frontend/src/utils/alerts/alerts.spec.js
+++ b/frontend/src/utils/alerts/alerts.spec.js
@@ -1,4 +1,4 @@
-import { Alerts } from './alerts';
+import { Alerts, ALERTS_INITIALIZED_CLASS } from './alerts';
 
 const MOCK_APP = {
   httpClient: {
@@ -19,6 +19,12 @@ describe('Alerts', () => {
     expect(alerts).toBeTruthy();
   });
 
+  it('should destory alerts', () => {
+    alerts.destroy();
+    expect(alerts._eventManager._registeredListeners.length).toBe(0);
+    expect(alerts._element.classList).not.toContain(ALERTS_INITIALIZED_CLASS);
+  });
+
   it('should throw if called without an element', () => {
     expect(() => {
       new Alerts();