Checked for memory leaks, event handlers cleanup #1071

metasfresh · Aug 16, 2017 · eeb2e0c · eeb2e0c
1 parent 2f8d47a
commit eeb2e0c
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 89 deletions.
diff --git a/src/components/app/Modal.js b/src/components/app/Modal.js
@@ -55,16 +55,11 @@ class Modal extends Component {
         // but we have to change scope of scrollbar
         document.body.style.overflow = 'hidden';
 
-        const modalContent = document.querySelector('.js-panel-modal-content')
-
-        modalContent &&
-            modalContent.addEventListener('scroll', this.handleScroll);
+        this.initEventListeners();
     }
 
     componentWillUnmount() {
-        const modalContent = document.querySelector('.js-panel-modal-content')
-        modalContent &&
-            modalContent.removeEventListener('scroll', this.handleScroll);
+        this.removeEventListeners();
     }
 
     componentDidUpdate (prevProps) {
@@ -102,6 +97,22 @@ class Modal extends Component {
         return { shortcuts: shortcutManager }
     }
 
+    initEventListeners = () => {
+        const modalContent = document.querySelector('.js-panel-modal-content');
+
+        if (modalContent) {
+            modalContent.addEventListener('scroll', this.handleScroll);
+        }
+    }
+
+    removeEventListeners = () => {
+        const modalContent = document.querySelector('.js-panel-modal-content')
+
+        if (modalContent) {
+            modalContent.removeEventListener('scroll', this.handleScroll);
+        }
+    }
+
     init = () => {
         const {
             dispatch, windowType, dataId, tabId, rowId, modalType, selected,
@@ -138,20 +149,6 @@ class Modal extends Component {
         }
     }
 
-    handleClose = () => {
-        const {
-            modalSaveStatus, modalType
-        } = this.props;
-
-        if(modalType === 'process') {
-            return this.closeModal();
-        }
-
-        if(modalSaveStatus || window.confirm('Do you really want to leave?')){
-            this.closeModal();
-        }
-    }
-
     closeModal = () => {
         const {
             dispatch, closeCallback, dataId, windowType, relativeType,
@@ -176,6 +173,30 @@ class Modal extends Component {
         }
     }
 
+    removeModal = () => {
+        const {dispatch, rawModalVisible} = this.props;
+
+        dispatch(closeModal());
+
+        if (!rawModalVisible){
+            document.body.style.overflow = 'auto';
+        }
+    }
+
+    handleClose = () => {
+        const {
+            modalSaveStatus, modalType
+        } = this.props;
+
+        if(modalType === 'process') {
+            return this.closeModal();
+        }
+
+        if(modalSaveStatus || window.confirm('Do you really want to leave?')){
+            this.closeModal();
+        }
+    }
+
     handleScroll = (event) => {
         const target = event.srcElement;
         let scrollTop = target && target.body.scrollTop;
@@ -229,16 +250,6 @@ class Modal extends Component {
         });
     }
 
-    removeModal = () => {
-        const {dispatch, rawModalVisible} = this.props;
-
-        dispatch(closeModal());
-
-        if (!rawModalVisible){
-            document.body.style.overflow = 'auto';
-        }
-    }
-
     renderModalBody = () => {
         const {
             data, layout, tabId, rowId, dataId, modalType, windowType,

diff --git a/src/components/app/QuickActions.js b/src/components/app/QuickActions.js
@@ -25,12 +25,7 @@ class QuickActions extends Component {
     constructor(props){
         super(props);
 
-        this.state = {
-            actions: [],
-            isDropdownOpen: false,
-            isTooltip: false,
-            loading: false
-        }
+        this.clearComponentState();
 
         const {fetchOnInit} = this.props;
 
@@ -40,6 +35,8 @@ class QuickActions extends Component {
     }
 
     componentDidMount = () => {
+        this.clearComponentState();
+
         this.mounted = true;
     }
 
@@ -94,6 +91,15 @@ class QuickActions extends Component {
         }
     }
 
+    clearComponentState = () => {
+        this.state = {
+            actions: [],
+            isDropdownOpen: false,
+            isTooltip: false,
+            loading: false
+        }
+    }
+
     getChildContext = () => {
         return { shortcuts: shortcutManager }
     }

diff --git a/src/components/app/RawModal.js b/src/components/app/RawModal.js
@@ -37,17 +37,11 @@ class RawModal extends Component {
         // but we have to change scope of scrollbar
         document.body.style.overflow = 'hidden';
 
-        const modalContent = document.querySelector('.js-panel-modal-content')
-
-        modalContent &&
-            modalContent.addEventListener('scroll', this.handleScroll);
+        this.initEventListeners();
     }
 
     componentWillUnmount() {
-        const modalContent = document.querySelector('.js-panel-modal-content');
-
-        modalContent &&
-            modalContent.removeEventListener('scroll', this.handleScroll);
+        this.removeEventListeners();
     }
 
     toggleTooltip = (visible) => {
@@ -60,6 +54,22 @@ class RawModal extends Component {
         return { shortcuts: shortcutManager }
     }
 
+    initEventListeners = () => {
+        const modalContent = document.querySelector('.js-panel-modal-content')
+
+        if (modalContent) {
+            modalContent.addEventListener('scroll', this.handleScroll);
+        }
+    }
+
+    removeEventListeners = () => {
+        const modalContent = document.querySelector('.js-panel-modal-content');
+
+        if (modalContent) {
+            modalContent.removeEventListener('scroll', this.handleScroll);
+        }
+    }
+
     handleScroll = (event) => {
         const scrollTop = event.srcElement.scrollTop;
 

diff --git a/src/components/dashboard/DraggableWrapper.js b/src/components/dashboard/DraggableWrapper.js
@@ -37,34 +37,24 @@ import {
 export class DraggableWrapper extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            cards: [],
-            indicators: [],
-            idMaximized: null,
-            websocketEndpoint: null,
-            chartOptions: false,
-            captionHandler: '',
-            when: '',
-            interval: '',
-            currentId: '',
-            isIndicator: ''
-        };
+
+        this.clearComponentState();
     }
-    
+
     componentDidMount = () => {
         this.getDashboard();
         this.getIndicators();
     }
-    
+
     componentDidUpdate = (prevProps, prevState) => {
         const {websocketEndpoint} = this.state;
-        if(
+        if (
             websocketEndpoint !== null &&
             prevState.websocketEndpoint !== websocketEndpoint
-        ){
+        ) {
             connectWS.call(this, websocketEndpoint, msg => {
                 msg.events.map(event => {
-                    switch(event.widgetType){
+                    switch (event.widgetType) {
                         case 'TargetIndicator':
                             this.getIndicators();
                             break;
@@ -76,11 +66,27 @@ export class DraggableWrapper extends Component {
             })
         }
     }
-    
+
     componentWillUnmount = () => {
+        this.clearComponentState();
         disconnectWS.call(this);
     }
-
+
+    clearComponentState = () => {
+        this.state = {
+            cards: [],
+            indicators: [],
+            idMaximized: null,
+            websocketEndpoint: null,
+            chartOptions: false,
+            captionHandler: '',
+            when: '',
+            interval: '',
+            currentId: '',
+            isIndicator: ''
+        };
+    }
+
     getType = (entity) => entity === 'cards' ? 'kpis' : 'targetIndicators';
 
     getIndicators = () => {

diff --git a/src/components/header/Header.js b/src/components/header/Header.js
@@ -54,12 +54,12 @@ class Header extends Component {
     }
 
     componentDidMount() {
-        document.addEventListener('scroll', this.handleScroll);
+        this.initEventListeners();
     }
 
     componentWillUnmount() {
-        document.removeEventListener('scroll', this.handleScroll);
         this.toggleScrollScope(false);
+        this.removeEventListeners();
     }
 
     componentWillUpdate = (nextProps) => {
@@ -92,6 +92,14 @@ class Header extends Component {
         return { shortcuts: shortcutManager }
     }
 
+    initEventListeners = () => {
+        document.addEventListener('scroll', this.handleScroll);
+    }
+
+    removeEventListeners = () => {
+        document.removeEventListener('scroll', this.handleScroll);
+    }
+
     handleInboxOpen = (state) => {
         this.setState({
             isInboxOpen: !!state

diff --git a/src/components/header/MenuOverlay.js b/src/components/header/MenuOverlay.js
@@ -22,15 +22,9 @@ import {
 } from '../../actions/WindowActions';
 
 class MenuOverlay extends Component {
-    constructor(props){
+    constructor(props) {
         super(props);
-        this.state = {
-            queriedResults: [],
-            query: '',
-            deepSubNode: null,
-            path: '',
-            data: {}
-        };
+        this.clearComponentState();
     }
 
     componentDidMount = () => {
@@ -39,7 +33,7 @@ class MenuOverlay extends Component {
             nodeId
         } = this.props;
 
-        if (nodeId == 0){
+        if (nodeId == 0) {
             getRootBreadcrumb().then(response => {
                 this.setState({
                     data: response
@@ -63,6 +57,20 @@ class MenuOverlay extends Component {
 
     }
 
+    componentWillUnmount = () => {
+        this.clearComponentState();
+    }
+
+    clearComponentState = () => {
+        this.state = {
+            queriedResults: [],
+            query: '',
+            deepSubNode: null,
+            path: '',
+            data: {}
+        };
+    }
+
     handleClickOutside = (e) => this.props.onClickOutside(e);
 
     handleQuery = (e) => {

diff --git a/src/components/widget/List/List.js b/src/components/widget/List/List.js
@@ -12,11 +12,7 @@ class List extends Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            list: null,
-            loading: false,
-            selectedItem: ''
-        }
+        this.clearComponentState();
 
         this.previousValue = '';
     }
@@ -37,6 +33,18 @@ class List extends Component {
         }
     }
 
+    componentWillUnmount() {
+        this.clearComponentState();
+    }
+
+    clearComponentState = () => {
+        this.state = {
+            list: null,
+            loading: false,
+            selectedItem: ''
+        }
+    }
+
     requestListData = (forceSelection = false, forceFocus = false) => {
         const {
             properties, dataId, rowId, tabId, windowType,