Redux changes and refactoring

public/electron.js

@@ -837,7 +837,7 @@ ipcMain.on(Constants.IPC_Mount_Drive, (event, data) => {
 ipcMain.on(Constants.IPC_Save_State, (event, data) => {
   helpers.mkDirByPathSync(helpers.getDataDirectory());
   const configFile = path.join(helpers.getDataDirectory(), 'settings.json');
-  fs.writeFileSync(configFile, JSON.stringify(data.State), 'utf8');
+  fs.writeFileSync(configFile, JSON.stringify(data.PState), 'utf8');
 });
 
 ipcMain.on(Constants.IPC_Set_Config_Values, (event, data) => {

src/App.js

@@ -352,7 +352,7 @@ class App extends IPCContainer {
 
       console.log(state);
       this.sendRequest(Constants.IPC_Save_State, {
-        State: state
+        PState: state
       });
     }
   };

src/components/MountItem/MountItem.js

@@ -12,9 +12,9 @@ import {displayConfiguration, setProviderState} from '../../redux/actions/mount_
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    MState: state.mounts.MountState[ownProps.provider],
     Platform: state.common.Platform,
-    ProviderState: state.mounts.ProviderState,
+    PState: state.mounts.ProviderState[ownProps.provider]
-    State: state.mounts.ProviderState[ownProps.provider]
   };
 };
 
@@ -28,7 +28,7 @@ const mapDispatchToProps = dispatch => {
 export default connect(mapStateToProps, mapDispatchToProps)(props => {
   const handleAutoMountChanged = e => {
     const state = {
-      ...props.ProviderState[props.provider],
+      ...props.PState,
       AutoMount: e.target.checked,
     };
     props.setProviderState(props.provider, state);
@@ -36,7 +36,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
 
   const handleAutoRestartChanged = e => {
     const state = {
-      ...props.ProviderState[props.provider],
+      ...props.PState,
       AutoRestart: e.target.checked,
     };
     props.setProviderState(props.provider, state);
@@ -45,13 +45,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
   let configButton = null;
   let secondRow = 6;
   if (props.allowConfig) {
-    const pointer = {cursor: props.allowMount ? 'pointer' : 'no-drop'};
+    const pointer = {cursor: props.MState.AllowMount ? 'pointer' : 'no-drop'};
     configButton = (
       <RootElem colSpan={4}
                 rowSpan={6}>
         <img alt=''
              height={'16px'}
-             onClick={props.allowMount ? ()=>props.displayConfiguration(props.provider) : e=>{e.preventDefault();}}
+             onClick={props.MState.AllowMount ? ()=>props.displayConfiguration(props.provider) : e=>{e.preventDefault();}}
              src={configureImage}
              style={{padding: 0, border: 0, margin: 0, ...pointer}}
              width={'16px'}/>
@@ -65,11 +65,11 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
     inputColumnSpan = 20;
     inputControls = <DropDown changed={props.changed}
                               colSpan={inputColumnSpan}
-                              disabled={!props.allowMount || props.mounted}
+                              disabled={!props.MState.AllowMount || props.MState.Mounted}
-                              items={props.items}
+                              items={props.MState.DriveLetters}
                               row={secondRow}
                               rowSpan={7}
-                              selected={props.items.indexOf(props.State.MountLocation)}/>;
+                              selected={props.MState.DriveLetters.indexOf(props.PState.MountLocation)}/>;
 
   } else {
     inputColumnSpan = 58;
@@ -80,38 +80,38 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
                 key={'i' + key++}
                 row={secondRow}
                 rowSpan={7}>
-        <input disabled={!props.allowMount || props.mounted}
+        <input disabled={!props.MState.AllowMount || props.MState.Mounted}
                maxLength={4096}
                onChange={props.changed}
                size={4096}
                className={'MountItemInput'}
                type={'text'}
-               value={props.State.MountLocation}/>
+               value={props.PState.MountLocation}/>
       </RootElem>
     ));
     inputControls.push((
-      <Button clicked={()=>props.browseClicked(props.title, props.State.MountLocation)}
+      <Button clicked={()=>props.browseClicked(props.provider, props.PState.MountLocation)}
               col={inputColumnSpan - 7}
               colSpan={7}
-              disabled={props.mounted || !props.allowMount}
+              disabled={props.MState.Mounted || !props.MState.AllowMount}
               key={'b' + key++}
               row={secondRow}
               rowSpan={7}>...</Button>
     ));
   }
 
-  const buttonDisplay = props.allowMount ?
+  const buttonDisplay = props.MState.AllowMount ?
-    (props.mounted ? 'Unmount' : 'Mount') :
+    (props.MState.Mounted ? 'Unmount' : 'Mount') :
     <Loader color={'var(--heading_text_color)'}
             height='19px'
             type='Circles'
             width='19px'/>;
 
   const actionsDisplay = (
-    <Button clicked={()=>props.clicked(props.title, !props.mounted, props.State.MountLocation)}
+    <Button clicked={()=>props.clicked(props.provider, !props.MState.Mounted, props.PState.MountLocation)}
             col={inputColumnSpan + 2}
             colSpan={21}
-            disabled={!props.allowMount}
+            disabled={!props.MState.AllowMount}
             row={secondRow}
             rowSpan={7}>
       {buttonDisplay}
@@ -122,7 +122,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
               colSpan={28}
               row={secondRow}
               rowSpan={7}>
-      <input checked={props.State.AutoMount}
+      <input checked={props.PState.AutoMount}
              onChange={handleAutoMountChanged}
              type='checkbox'/>Auto-mount
     </RootElem>
@@ -133,7 +133,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
               colSpan={24}
               row={secondRow}
               rowSpan={7}>
-      <input checked={props.State.AutoRestart}
+      <input checked={props.PState.AutoRestart}
              onChange={handleAutoRestartChanged}
              type='checkbox'/>Restart
     </RootElem>
@@ -145,7 +145,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
       <Text
         col={configButton ? 6 : 0}
         rowSpan={5}
-        text={props.title}
+        text={props.provider}
         type={'Heading1'}/>
       {inputControls}
       {actionsDisplay}

src/containers/MountItems/MountItems.js

@@ -7,8 +7,11 @@ import Modal from '../../components/UI/Modal/Modal';
 import MountItem from '../../components/MountItem/MountItem';
 import IPCContainer from '../IPCContainer/IPCContainer';
 import {
+  setAllowMount,
   setAutoMountProcessed,
   setBusy,
+  setMountState,
+  setMounted,
   setProviderState
 } from '../../redux/actions/mount_actions';
 
@@ -17,15 +20,7 @@ const Constants = require('../../constants');
 class MountItems extends IPCContainer {
   constructor(props) {
     super(props);
-
+    
-    for (const provider of Constants.PROVIDER_LIST) {
-      this.state[provider] = {
-        AllowMount: false,
-        DriveLetters: [],
-        Mounted: false,
-      };
-    }
-
     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);
@@ -92,7 +87,7 @@ class MountItems extends IPCContainer {
 
   handleMountLocationChanged = (provider, value) => {
     const location = (this.props.Platform === 'win32') ?
-      this.state[provider].DriveLetters[value] :
+      this.props.MountState[provider].DriveLetters[value] :
       value;
 
     const state = {
@@ -140,85 +135,77 @@ class MountItems extends IPCContainer {
       }
 
       if (allowAction) {
-        const storageState = {
-          ...this.state[provider],
-          AllowMount: false,
-        };
-
         this.props.setMountsBusy(true);
+        this.props.setAllowMount(provider, false);
 
-        this.setState({
+        if (mount) {
-          [provider]: storageState,
+          this.sendRequest(Constants.IPC_Mount_Drive, {
-        }, () => {
+            Location: location,
-          if (mount) {
+            NoConsoleSupported: this.props.noConsoleSupported,
-            this.sendRequest(Constants.IPC_Mount_Drive, {
+            Provider: provider,
-              Location: location,
+            Version: this.props.version,
-              NoConsoleSupported: this.props.noConsoleSupported,
+          });
-              Provider: provider,
+        } else {
-              Version: this.props.version,
+          this.sendRequest(Constants.IPC_Unmount_Drive, {
-            });
+            Location: location,
-          } else {
+            Provider: provider,
-            this.sendRequest(Constants.IPC_Unmount_Drive, {
+            Version: this.props.version,
-              Location: location,
+          });
-              Provider: provider,
+        }
-              Version: this.props.version,
-            });
-          }
-        });
       }
     }
   };
 
   onDetectMountsReply = (event, arg) => {
     if (!this.state.DisplayRetry && arg.data.Success) {
-      let state = {};
       let mountsBusy = false;
+      let mountStates = {};
       for (const provider of Constants.PROVIDER_LIST) {
-        state[provider] = {
+        const mountState = {
-          ...this.state[provider],
           AllowMount: true,
           DriveLetters: (arg.data.DriveLetters[provider]),
           Mounted: (arg.data.Locations[provider].length > 0),
         };
-        mountsBusy = mountsBusy || state[provider].Mounted;
+        this.props.setMountState(provider, mountState);
+        mountsBusy = mountsBusy || mountState.Mounted;
+        mountStates[provider] = mountState;
       }
       this.props.setMountsBusy(mountsBusy);
-
+      
-      this.setState(state, () => {
+      const updateMountLocation = (data, provider) => {
-        const updateMountLocation = (data, provider) => {
+        const providerState = this.props.ProviderState[provider];
-          const providerState = this.props.ProviderState[provider];
+        let location = data.Locations[provider];
-          let location = data.Locations[provider];
+        if (location.length === 0) {
-          if (location.length === 0) {
+          location = (this.props.Platform === 'win32') ?
-            location = (this.props.Platform === 'win32') ?
+            providerState.MountLocation || data.DriveLetters[provider][0] :
-              providerState.MountLocation || data.DriveLetters[provider][0] :
+            providerState.MountLocation;
-              providerState.MountLocation;
-          }
-          if (location !== providerState.MountLocation) {
-            this.handleMountLocationChanged(provider, location);
-          }
-        };
-        
-        for (const provider of Constants.PROVIDER_LIST) {
-          updateMountLocation(arg.data, provider);
         }
 
-        this.performAutoMount();
+        if (location !== providerState.MountLocation) {
-      });
+          this.handleMountLocationChanged(provider, location);
+        }
+
+        if (!this.props.AutoMountProcessed &&
+          this.props.ProviderState[provider].AutoMount &&
+          !mountStates[provider].Mounted &&
+          (location.length > 0)) {
+          this.handleMountUnMount(provider, true, location);
+        }
+      };
+      
+      for (const provider of Constants.PROVIDER_LIST) {
+        updateMountLocation(arg.data, provider);
+      }
+
+      this.props.setAutoMountProcessed(true);
     } else {
       this.props.errorHandler(arg.data.Error);
     }
   };
 
   onMountDriveReply = (event, arg) => {
-    const state = {
+    this.props.setMounted(arg.data.ProviderState, arg.data.Success);
-      ...this.state[arg.data.Provider],
+    this.detectMounts();
-      Mounted: arg.data.Success,
-    };
-    this.setState({
-      [arg.data.Provider]: state,
-    }, ()=> {
-      this.detectMounts();
-    });
   };
 
   onUnmountDriveReply = (event, arg) => {
@@ -231,13 +218,14 @@ class MountItems extends IPCContainer {
         retryItems[provider] = {
           RetrySeconds: 10,
         };
-        const storageState = {
+        const mountState = {
-          ...this.state[arg.data.Provider],
+          ...this.props.MountState[provider],
           AllowMount: false,
           Mounted: false,
         };
+        this.setMountState(provider, mountState);
+
         this.setState({
-          [provider]: storageState,
           DisplayRetry: true,
           RetryItems: retryItems,
         }, () => {
@@ -265,25 +253,6 @@ class MountItems extends IPCContainer {
     }
   };
 
-  performAutoMount = ()=> {
-    if (!this.props.AutoMountProcessed) {
-      this.props.setAutoMountProcessed(true);
-
-      const processAutoMount = (provider) => {
-        const providerState = this.props.ProviderState[provider];
-        if (providerState.AutoMount &&
-          !this.state[provider].Mounted &&
-          (providerState.MountLocation.length > 0)) {
-          this.handleMountUnMount(provider, true, providerState.MountLocation);
-        }
-      };
-
-      for (const provider of Constants.PROVIDER_LIST) {
-        processAutoMount(provider);
-      }
-    }
-  };
-
   render() {
     let retryDisplay;
     if (this.state.DisplayRetry) {
@@ -315,15 +284,11 @@ class MountItems extends IPCContainer {
     for (const provider of Constants.PROVIDER_LIST) {
       items.push((
         <MountItem allowConfig={this.props.allowConfig}
-                   allowMount={this.state[provider].AllowMount}
                    browseClicked={this.handleBrowseLocation}
                    changed={e => this.handleMountLocationChanged(provider, e.target.value)}
                    clicked={this.handleMountUnMount}
-                   items={this.state[provider].DriveLetters}
                    key={'mi_' + items.length}
-                   provider={provider}
+                   provider={provider}/>
-                   mounted={this.state[provider].Mounted}
-                   title={provider} />
       ));
       if (items.length !== this.state.length) {
         items.push(<div key={'di_' + items.length}
@@ -342,6 +307,7 @@ class MountItems extends IPCContainer {
 const mapStateToProps = state => {
   return {
     AutoMountProcessed: state.mounts.AutoMountProcessed,
+    MountState: state.mounts.MountState,
     Platform: state.common.Platform,
     ProviderState: state.mounts.ProviderState,
   }
@@ -349,8 +315,11 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    setAllowMount: (provider, allow) => dispatch(setAllowMount(provider, allow)),
     setAutoMountProcessed: processed => dispatch(setAutoMountProcessed(processed)),
+    setMounted: (provider, mounted) => dispatch(setMounted(provider, mounted)),
     setMountsBusy: busy => dispatch(setBusy(busy)),
+    setMountState: (provider, state) => dispatch(setMountState(provider, state)),
     setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
   }
 };

src/redux/actions/mount_actions.js

@@ -1,8 +1,43 @@
 import {createAction} from 'redux-starter-kit';
 
 export const displayConfiguration = createAction('mounts/displayConfiguration');
+
+export const SET_ALLOW_MOUNT = 'mounts/setAllowMount';
+export const setAllowMount = (provider, allow) => {
+  return {
+    type: SET_ALLOW_MOUNT,
+    payload: {
+      provider,
+      allow
+    }
+  };
+};
+
 export const setAutoMountProcessed = createAction('mounts/setAutoMountProcessed');
 export const setBusy = createAction('mounts/setBusy');
+
+export const SET_MOUNT_STATE = 'mounts/setMountState';
+export const setMountState = (provider, state) => {
+  return {
+    type: SET_MOUNT_STATE,
+    payload: {
+      provider,
+      state
+    }
+  };
+};
+
+export const SET_MOUNTED = 'mounts/setMounted';
+export const setMounted = (provider, mounted) => {
+  return {
+    type: SET_MOUNTED,
+    payload: {
+      provider,
+      mounted
+    }
+  };
+};
+
 export const SET_PROVIDER_STATE = 'mounts/setProviderState';
 export const setProviderState = (provider, state) => {
   return {

src/redux/reducers/mount_reducer.js

@@ -1,10 +1,10 @@
 import * as Constants from '../../constants';
 import {createReducer} from 'redux-starter-kit';
-import {displayConfiguration, setAutoMountProcessed, setBusy, SET_PROVIDER_STATE} from '../actions/mount_actions';
+import {displayConfiguration, SET_ALLOW_MOUNT, setAutoMountProcessed, setBusy, SET_MOUNT_STATE, SET_MOUNTED, SET_PROVIDER_STATE} from '../actions/mount_actions';
 
-const providerState = Constants.PROVIDER_LIST.map(p=> {
+const providerState = Constants.PROVIDER_LIST.map(provider=> {
   return {
-    [p]: {
+    [provider]: {
       AutoMount: false,
       AutoRestart: false,
       MountLocation: '',
@@ -17,28 +17,92 @@ const providerState = Constants.PROVIDER_LIST.map(p=> {
   }
 });
 
+const mountState = Constants.PROVIDER_LIST.map(provider => {
+  return {
+    [provider]: {
+      AllowMount: false,
+      DriveLetters: [],
+      Mounted: false,
+    }
+  }
+}).reduce((map, obj) => {
+  return {
+    ...map,
+    ...obj
+  }
+});
+
 export const mountReducer = createReducer({
   AutoMountProcessed: false,
   DisplayConfiguration: null,
   MountsBusy: false,
+  MountState: mountState,
   ProviderState: providerState,
 }, {
   [displayConfiguration]: (state, action) => {
-    return {...state, DisplayConfiguration: action.payload};
+    return {
+      ...state,
+      DisplayConfiguration: action.payload
+    };
   },
   [setAutoMountProcessed]: (state, action) => {
-    return {...state, AutoMountProcessed: action.payload};
+    return {
+      ...state,
+      AutoMountProcessed: action.payload
+    };
+  },
+  [SET_ALLOW_MOUNT]: (state, action) => {
+    return {
+      ...state,
+      MountState: {
+        ...state.MountState,
+        [action.payload.provider]: {
+          ...state.MountState[action.payload.provider],
+          AllowMount: action.payload.allow,
+        }
+      }
+    };
   },
   [setBusy]: (state, action) => {
-    return {...state, MountsBusy: action.payload};
+    return {
+      ...state,
+      MountsBusy: action.payload
+    };
+  },
+  [SET_MOUNT_STATE]: (state, action) => {
+    return {
+      ...state,
+      MountState: {
+        ...state.MountState,
+        [action.payload.provider]: {
+          ...state.MountState[action.payload.provider],
+          ...action.payload.state
+        },
+      }
+    };
+  },
+  [SET_MOUNTED]: (state, action) => {
+    return {
+      ...state,
+      MountState: {
+        ...state.MountState,
+        [action.payload.provider]: {
+          ...state.MountState[action.payload.provider],
+          Mounted: action.payload.mounted,
+        }
+      }
+    };
   },
   [SET_PROVIDER_STATE]: (state, action) => {
     return {
       ...state,
       ProviderState: {
         ...state.ProviderState,
-        [action.payload.provider]: action.payload.state,
+        [action.payload.provider]: {
+          ...state.ProviderState[action.payload.provider],
+          ...action.payload.state
+        },
       }
-    }
+    };
   }
 });