Redux changes and refactoring

2019-06-06 18:17:35 -05:00
parent 4fa1c89df8
commit 3e612f1497
6 changed files with 190 additions and 122 deletions
--- a/public/electron.js
+++ b/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) => {
--- a/src/App.js
+++ b/src/App.js
@@ -352,7 +352,7 @@ class App extends IPCContainer {

      console.log(state);
      this.sendRequest(Constants.IPC_Save_State, {
-        State: state
+        PState: state
      });
    }
  };
--- a/src/components/MountItem/MountItem.js
+++ b/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,
-    State: state.mounts.ProviderState[ownProps.provider]
+    PState: 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}
-                              items={props.items}
+                              disabled={!props.MState.AllowMount || props.MState.Mounted}
+                              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 ?
-    (props.mounted ? 'Unmount' : 'Mount') :
+  const buttonDisplay = props.MState.AllowMount ?
+    (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}
--- a/src/containers/MountItems/MountItems.js
+++ b/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';

@@ -18,14 +21,6 @@ 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,16 +135,9 @@ class MountItems extends IPCContainer {
      }

      if (allowAction) {
-        const storageState = {
-          ...this.state[provider],
-          AllowMount: false,
-        };
-
        this.props.setMountsBusy(true);
+        this.props.setAllowMount(provider, false);

-        this.setState({
-          [provider]: storageState,
-        }, () => {
        if (mount) {
          this.sendRequest(Constants.IPC_Mount_Drive, {
            Location: location,
@@ -164,27 +152,26 @@ class MountItems extends IPCContainer {
            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] = {
-          ...this.state[provider],
+        const mountState = {
          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 providerState = this.props.ProviderState[provider];
        let location = data.Locations[provider];
@@ -193,32 +180,32 @@ class MountItems extends IPCContainer {
            providerState.MountLocation || data.DriveLetters[provider][0] :
            providerState.MountLocation;
        }
+
        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.performAutoMount();
-      });
+      this.props.setAutoMountProcessed(true);
    } else {
      this.props.errorHandler(arg.data.Error);
    }
  };

  onMountDriveReply = (event, arg) => {
-    const state = {
-      ...this.state[arg.data.Provider],
-      Mounted: arg.data.Success,
-    };
-    this.setState({
-      [arg.data.Provider]: state,
-    }, ()=> {
+    this.props.setMounted(arg.data.ProviderState, arg.data.Success);
    this.detectMounts();
-    });
  };

  onUnmountDriveReply = (event, arg) => {
@@ -231,13 +218,14 @@ class MountItems extends IPCContainer {
        retryItems[provider] = {
          RetrySeconds: 10,
        };
-        const storageState = {
-          ...this.state[arg.data.Provider],
+        const mountState = {
+          ...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}
-                   mounted={this.state[provider].Mounted}
-                   title={provider} />
+                   provider={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)),
  }
 };
--- a/src/redux/actions/mount_actions.js
+++ b/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 {
--- a/src/redux/reducers/mount_reducer.js
+++ b/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
+        },
      }
+    };
  }
 });