From a25b59b3184c8b8e77b05c7defbe7301565dd60b Mon Sep 17 00:00:00 2001
From: Johannes Eder <ederj@cip.ifi.lmu.de>
Date: Fri, 25 Jun 2021 13:20:21 +0200
Subject: [PATCH] chore(asidenav): implemented destroy in asidenav.js

---
 .../src/lib/event-manager/event-manager.js    | 11 ++++++++--
 frontend/src/utils/asidenav/asidenav.js       | 22 ++++++++++++++-----
 frontend/src/utils/asidenav/asidenav.spec.js  |  8 ++++++-
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/event-manager/event-manager.js b/frontend/src/lib/event-manager/event-manager.js
index e133ce018..a73a30fc2 100644
--- a/frontend/src/lib/event-manager/event-manager.js
+++ b/frontend/src/lib/event-manager/event-manager.js
@@ -4,6 +4,7 @@ export const EVENT_TYPE = {
     KEYDOWN : 'keydown',
     INVALID : 'invalid',
     CHANGE : 'change',
+    MOUSE_OVER : 'mouseover',
     //more to be added
 };
 
@@ -20,7 +21,7 @@ export class EventManager {
     registerNewListener(eventWrapper) {
         this._debugLog('registerNewListener', eventWrapper);
         let element = eventWrapper.element;
-        element.addEventListener(eventWrapper.eventType, eventWrapper.eventHandler);
+        element.addEventListener(eventWrapper.eventType, eventWrapper.eventHandler, eventWrapper.options);
         this._registeredListeners.push(eventWrapper);
     }
 
@@ -45,14 +46,16 @@ export class EventWrapper {
     _eventType;
     _eventHandler;
     _element;
+    _options
 
-    constructor(_eventType, _eventHandler, _element) {
+    constructor(_eventType, _eventHandler, _element, _options) {
         if(!_eventType || !_eventHandler || !_element) {
             throw new Error('Not enough arguments!');
         }
         this._eventType = _eventType;
         this._eventHandler = _eventHandler;
         this._element = _element;
+        this._options = _options;
     }
 
     get eventType() {
@@ -66,4 +69,8 @@ export class EventWrapper {
     get element() {
         return this._element;
     }
+
+    get options() {
+        return this._options;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/utils/asidenav/asidenav.js b/frontend/src/utils/asidenav/asidenav.js
index 6bf425ffa..560183e8c 100644
--- a/frontend/src/utils/asidenav/asidenav.js
+++ b/frontend/src/utils/asidenav/asidenav.js
@@ -1,4 +1,5 @@
 import { Utility } from '../../core/utility';
+import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager';
 import './asidenav.sass';
 
 const FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
@@ -15,6 +16,7 @@ export class Asidenav {
 
   _element;
   _asidenavSubmenus;
+  _eventManager;
 
   constructor(element) {
     if (!element) {
@@ -23,6 +25,8 @@ export class Asidenav {
 
     this._element = element;
 
+    this._eventManager = new EventManager();
+
     if (this._element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) {
       return false;
     }
@@ -35,19 +39,24 @@ export class Asidenav {
   }
 
   destroy() {
-    this._asidenavSubmenus.forEach((union) => {
-      union.listItem.removeEventListener(union.hoverHandler);
-    });
+    
+    this._eventManager.removeAllEventListenersFromUtil();
+
+    if(this._element.classList.contains(ASIDENAV_INITIALIZED_CLASS))
+      this._element.classList.remove(ASIDENAV_INITIALIZED_CLASS);
   }
 
   _initFavoritesButton() {
     const favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
     if (favoritesBtn) {
-      favoritesBtn.addEventListener('click', (event) => {
+
+      const favoritesButtonEvent = new EventWrapper(EVENT_TYPE.CLICK, (event) => {
         favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
         this._element.classList.toggle(ASIDENAV_EXPANDED_CLASS);
         event.preventDefault();
-      }, true);
+      }, favoritesBtn, true);
+
+      this._eventManager.registerNewListener(favoritesButtonEvent);
     }
   }
 
@@ -62,7 +71,8 @@ export class Asidenav {
 
     this._asidenavSubmenus.forEach((union) => {
       union.hoverHandler = this._createMouseoverHandler(union);
-      union.listItem.addEventListener('mouseover', union.hoverHandler);
+      let currentHoverEvent = new EventWrapper(EVENT_TYPE.MOUSE_OVER, union.hoverHandler, union.listItem);
+      this._eventManager.registerNewListener(currentHoverEvent);
     });
   }
 
diff --git a/frontend/src/utils/asidenav/asidenav.spec.js b/frontend/src/utils/asidenav/asidenav.spec.js
index bdc7aee68..3bd468b28 100644
--- a/frontend/src/utils/asidenav/asidenav.spec.js
+++ b/frontend/src/utils/asidenav/asidenav.spec.js
@@ -1,4 +1,4 @@
-import { Asidenav } from './asidenav';
+import { Asidenav, ASIDENAV_INITIALIZED_CLASS } from './asidenav';
 
 describe('Asidenav', () => {
 
@@ -13,6 +13,12 @@ describe('Asidenav', () => {
     expect(asidenav).toBeTruthy();
   });
 
+  it('should destory asidenav', () => {
+    asidenav.destroy();
+    expect(asidenav._eventManager._registeredListeners.length).toBe(0);
+    expect(asidenav._element.classList).not.toContain(ASIDENAV_INITIALIZED_CLASS);
+  });
+
   it('should throw if called without an element', () => {
     expect(() => {
       new Asidenav();