Refactoring

src/containers/Configuration/Configuration.js

@@ -5,28 +5,22 @@ import Button from '../../components/UI/Button/Button';
 import ConfigurationItem from '../../components/ConfigurationItem/ConfigurationItem';
 import CSSModules from 'react-css-modules';
 import Modal from '../../components/UI/Modal/Modal';
+import IPCContainer from '../IPCContainer/IPCContainer';
 
 const Constants = require('../../constants');
 
-let ipcRenderer = null;
-if (!process.versions.hasOwnProperty('electron')) {
-  ipcRenderer = ((window && window.require) ? window.require('electron').ipcRenderer : null);
-}
-
-class Configuration extends Component {
+class Configuration extends IPCContainer {
   constructor(props) {
     super(props);
-    if (ipcRenderer) {
-      ipcRenderer.on(Constants.IPC_Get_Config_Template_Reply, this.onGetConfigTemplateReply);
-      ipcRenderer.on(Constants.IPC_Get_Config_Reply, this.onGetConfigReply);
-      ipcRenderer.on(Constants.IPC_Set_Config_Values_Reply, this.onSetConfigValuesReply);
+    this.setRequestHandler(Constants.IPC_Get_Config_Template_Reply, this.onGetConfigTemplateReply);
+    this.setRequestHandler(Constants.IPC_Get_Config_Reply, this.onGetConfigReply);
+    this.setRequestHandler(Constants.IPC_Set_Config_Values_Reply, this.onSetConfigValuesReply);
 
-      ipcRenderer.send(Constants.IPC_Get_Config_Template, {
-        Directory: this.props.directory,
-        StorageType: this.props.storageType,
-        Version: this.props.version,
-      });
-    }
+    this.sendRequest(Constants.IPC_Get_Config_Template, {
+      Directory: this.props.directory,
+      StorageType: this.props.storageType,
+      Version: this.props.version,
+    });
   }
 
   state = {
@@ -78,14 +72,6 @@ class Configuration extends Component {
     }
   };
 
-  componentWillUnmount = () => {
-    if (ipcRenderer) {
-      ipcRenderer.removeListener(Constants.IPC_Get_Config_Reply, this.onGetConfigReply);
-      ipcRenderer.removeListener(Constants.IPC_Get_Config_Template_Reply, this.onGetConfigTemplateReply);
-      ipcRenderer.removeListener(Constants.IPC_Set_Config_Values_Reply, this.onSetConfigValuesReply);
-    }
-  };
-
   createItemList = (config, template) => {
     const objectList = [];
     const itemList = Object
@@ -165,7 +151,7 @@ class Configuration extends Component {
       this.setState({
         Template: arg.data.Template,
       }, ()=> {
-        ipcRenderer.send(Constants.IPC_Get_Config, {
+        this.sendRequest(Constants.IPC_Get_Config, {
           Directory: this.props.directory,
           StorageType: this.props.storageType,
           Version: this.props.version,
@@ -183,37 +169,35 @@ class Configuration extends Component {
   };
 
   saveAndClose = () => {
-    if (ipcRenderer) {
-      this.setState({
-        Saving: true,
-      }, ()=> {
-        const changedItems = [];
-        for (const item of this.state.ChangedItems) {
-          changedItems.push({
-            Name: item.label,
-            Value: item.value,
-          });
-        }
+    this.setState({
+      Saving: true,
+    }, ()=> {
+      const changedItems = [];
+      for (const item of this.state.ChangedItems) {
+        changedItems.push({
+          Name: item.label,
+          Value: item.value,
+        });
+      }
 
-        if (this.state.ChangedObjectLookup) {
-          for (const key of Object.keys(this.state.ChangedObjectLookup)) {
-            for (const item of this.state.ChangedObjectLookup[key]) {
-              changedItems.push({
-                Name: key + '.' + item.label,
-                Value: item.value,
-              });
-            }
+      if (this.state.ChangedObjectLookup) {
+        for (const key of Object.keys(this.state.ChangedObjectLookup)) {
+          for (const item of this.state.ChangedObjectLookup[key]) {
+            changedItems.push({
+              Name: key + '.' + item.label,
+              Value: item.value,
+            });
           }
         }
+      }
 
-        ipcRenderer.send(Constants.IPC_Set_Config_Values, {
-          Directory: this.props.directory,
-          Items: changedItems,
-          StorageType: this.props.storageType,
-          Version: this.props.version,
-        });
+      this.sendRequest(Constants.IPC_Set_Config_Values, {
+        Directory: this.props.directory,
+        Items: changedItems,
+        StorageType: this.props.storageType,
+        Version: this.props.version,
       });
-    }
+    });
   };
 
   render() {

src/containers/IPCContainer/IPCContainer.js

@@ -0,0 +1,51 @@
+import {Component} from 'react';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    if (!process.versions.hasOwnProperty('electron')) {
+      this.ipcRenderer = ((window && window.require) ? window.require('electron').ipcRenderer : null);
+    }
+  }
+
+  handlerList = {};
+  ipcRenderer;
+
+  componentWillUnmount() {
+    if (this.ipcRenderer) {
+      for (let name in this.handlerList) {
+        if (this.handlerList.hasOwnProperty(name)) {
+          this.ipcRenderer.removeListener(name, this.handlerList[name]);
+        }
+      }
+    }
+
+    this.handlerList = {};
+  };
+
+  sendRequest = (name, data) => {
+    if (this.ipcRenderer) {
+      this.ipcRenderer.send(name, data);
+    }
+  };
+
+  sendSyncRequest = (name, data) => {
+    if (this.ipcRenderer) {
+      return this.ipcRenderer.sendSync(name + '_sync', data);
+    } else {
+      return {
+        Success: false,
+        Error: 'IPC not available. Running in browser?',
+      };
+    }
+  };
+
+  setRequestHandler = (name, callback) => {
+    if (this.ipcRenderer) {
+      this.handlerList[name] = callback;
+      this.ipcRenderer.on(name, callback);
+    }
+  };
+
+};

src/containers/MountItems/MountItems.js

@@ -1,20 +1,15 @@
 import React from 'react';
-import {Component} from 'react';
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
 import CSSModules from 'react-css-modules';
 import styles from './MountItems.css';
 import Modal from '../../components/UI/Modal/Modal';
 import MountItem from '../../components/MountItem/MountItem';
+import IPCContainer from '../IPCContainer/IPCContainer';
 
 const Constants = require('../../constants');
 
-let ipcRenderer = null;
-if (!process.versions.hasOwnProperty('electron')) {
-  ipcRenderer = ((window && window.require) ? window.require('electron').ipcRenderer : null);
-}
-
-class MountItems extends Component {
+class MountItems extends IPCContainer {
   constructor(props) {
     super(props);
 
@@ -26,13 +21,11 @@ class MountItems extends Component {
       };
     }
 
-    if (ipcRenderer) {
-      ipcRenderer.on(Constants.IPC_Detect_Mounts_Reply, this.onDetectMountsReply);
-      ipcRenderer.on(Constants.IPC_Mount_Drive_Reply, this.onMountDriveReply);
-      ipcRenderer.on(Constants.IPC_Unmount_Drive_Reply, this.onUnmountDriveReply);
+    this.setRequestHandler(Constants.IPC_Detect_Mounts_Reply, this.onDetectMountsReply);
+    this.setRequestHandler(Constants.IPC_Mount_Drive_Reply, this.onMountDriveReply);
+    this.setRequestHandler(Constants.IPC_Unmount_Drive_Reply, this.onUnmountDriveReply);
 
-      this.detectMounts();
-    }
+    this.detectMounts();
   }
 
   retryIntervals = {};
@@ -58,24 +51,20 @@ class MountItems extends Component {
     }
   };
 
-  componentWillUnmount = () => {
+  componentWillUnmount() {
     for (const storageType in this.state.RetryItems) {
       if (this.state.RetryItems.hasOwnProperty(storageType)) {
         this.cancelRetryMount(storageType);
       }
     }
 
-    if (ipcRenderer) {
-      ipcRenderer.removeListener(Constants.IPC_Detect_Mounts_Reply, this.onDetectMountsReply);
-      ipcRenderer.removeListener(Constants.IPC_Mount_Drive_Reply, this.onMountDriveReply);
-      ipcRenderer.removeListener(Constants.IPC_Unmount_Drive_Reply, this.onUnmountDriveReply);
-    }
+    super.componentWillUnmount();
   };
 
   detectMounts = ()=> {
     if (!this.state.DisplayRetry) {
       this.props.mountsBusy(true);
-      ipcRenderer.send(Constants.IPC_Detect_Mounts, {
+      this.sendRequest(Constants.IPC_Detect_Mounts, {
         Directory: this.props.directory,
         Version: this.props.version,
       });
@@ -83,7 +72,7 @@ class MountItems extends Component {
   };
 
   handleBrowseLocation = (storageType, location) => {
-    location = ipcRenderer.sendSync(Constants.IPC_Browse_Directory, {
+    location = this.sendSyncRequest(Constants.IPC_Browse_Directory, {
       Title: storageType + ' Mount Location',
       Location: location,
     });
@@ -103,10 +92,10 @@ class MountItems extends Component {
   handleMountUnMount = (storageType, mount, location) => {
     if (!location || (location.trim().length === 0)) {
       this.props.errorHandler('Mount location is not set');
-    } else if (ipcRenderer) {
+    } else {
       let allowAction = true;
       if (mount && (this.props.platform !== 'win32')) {
-        const result = ipcRenderer.sendSync(Constants.IPC_Check_Mount_Location, {
+        const result = this.sendSyncRequest(Constants.IPC_Check_Mount_Location, {
           Location: location,
         });
         if (!result.Success) {
@@ -127,7 +116,7 @@ class MountItems extends Component {
           [storageType]: storageState,
         }, () => {
           if (mount) {
-            ipcRenderer.send(Constants.IPC_Mount_Drive, {
+            this.sendRequest(Constants.IPC_Mount_Drive, {
               Directory: this.props.directory,
               Location: location,
               NoConsoleSupported: this.props.noConsoleSupported,
@@ -135,7 +124,7 @@ class MountItems extends Component {
               Version: this.props.version,
             });
           } else {
-            ipcRenderer.send(Constants.IPC_Unmount_Drive, {
+            this.sendRequest(Constants.IPC_Unmount_Drive, {
               Directory: this.props.directory,
               Location: location,
               StorageType: storageType,