Begin move to redux

package.json

@@ -17,8 +17,12 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-loader-spinner": "^2.3.0",
+    "react-redux": "^7.0.3",
     "react-scripts": "2.1.8",
     "react-tooltip": "^3.10.0",
+    "redux": "^4.0.1",
+    "redux-starter-kit": "^0.5.1",
+    "redux-thunk": "^2.3.0",
     "unzipper": "^0.9.11",
     "winreg": "^1.2.4"
   },

src/App.js

@@ -3,6 +3,7 @@ import axios from 'axios';
 import './App.css';
 import Box from './components/UI/Box/Box';
 import Configuration from './containers/Configuration/Configuration';
+import {connect} from 'react-redux';
 import DependencyList from './components/DependencyList/DependencyList';
 import DownloadProgress from './components/DownloadProgress/DownloadProgress';
 import ErrorDetails from './components/ErrorDetails/ErrorDetails';
@@ -63,7 +64,6 @@ class App extends IPCContainer {
     ExtractActive: false,
     LocationsLookup: {},
     MissingDependencies: [],
-    MountsBusy: false,
     Release: 2,
     ReleaseTypes: [
       'Release',   
@@ -317,10 +317,6 @@ class App extends IPCContainer {
     this.setState({AutoMountProcessed: true});
   };
 
-  notifyMountsBusy = (busy) => {
-    this.setState({MountsBusy: busy})
-  };
-
   onCheckInstalledReply = (event, arg) => {
     const action = () => {
       const installedVersion = arg.data.Success && arg.data.Exists ? arg.data.Version : 'none';
@@ -579,7 +575,7 @@ class App extends IPCContainer {
       this.getSelectedVersion();
 
     const downloadEnabled = this.state.AllowDownload &&
-      !this.state.MountsBusy &&
+      !this.props.MountsBusy &&
       !this.state.DownloadActive &&
       (selectedVersion !== 'unavailable') &&
       (selectedVersion !== this.state.InstalledVersion);
@@ -671,7 +667,7 @@ class App extends IPCContainer {
       mainContent.push((
         <div key={'rvd_' + key++}
              style={{height: '32%'}}>
-          <ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
+          <ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.props.MountsBusy}
                                  downloadClicked={this.handleReleaseDownload}
                                  downloadDisabled={!downloadEnabled}
                                  installedVersion={this.state.InstalledVersion}
@@ -705,7 +701,6 @@ class App extends IPCContainer {
                         configClicked={this.handleConfigClicked}
                         directory={Constants.DATA_LOCATIONS[this.props.platform]}
                         errorHandler={this.setErrorState}
-                        mountsBusy={this.notifyMountsBusy}
                         platform={this.props.platform}
                         processAutoMount={!this.state.AutoMountProcessed}
                         version={this.state.InstalledVersion}/>
@@ -755,4 +750,10 @@ class App extends IPCContainer {
   }
 }
 
-export default App;
+const mapStateToProps = state =>{
+  return {
+    MountsBusy: state.mounts.MountsBusy
+  };
+};
+
+export default connect(mapStateToProps)(App);

src/containers/MountItems/MountItems.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
+import {connect} from 'react-redux';
 import './MountItems.css';
 import Modal from '../../components/UI/Modal/Modal';
 import MountItem from '../../components/MountItem/MountItem';
 import IPCContainer from '../IPCContainer/IPCContainer';
+import {setBusy} from '../../redux/actions/mount_actions';
 
 const Constants = require('../../constants');
 
@@ -67,7 +69,7 @@ class MountItems extends IPCContainer {
 
   detectMounts = ()=> {
     if (!this.state.DisplayRetry) {
-      this.props.mountsBusy(true);
+      this.props.setMountsBusy(true);
       this.sendRequest(Constants.IPC_Detect_Mounts, {
         Directory: this.props.directory,
         Version: this.props.version,
@@ -131,7 +133,7 @@ class MountItems extends IPCContainer {
           AllowMount: false,
         };
 
-        this.props.mountsBusy(true);
+        this.props.setMountsBusy(true);
 
         this.setState({
           [storageType]: storageState,
@@ -170,7 +172,7 @@ class MountItems extends IPCContainer {
         };
         mountsBusy = mountsBusy || state[provider].Mounted;
       }
-      this.props.mountsBusy(mountsBusy);
+      this.props.setMountsBusy(mountsBusy);
 
       this.setState(state, () => {
         const updateMountLocation = (data, provider) => {
@@ -333,4 +335,10 @@ class MountItems extends IPCContainer {
   }
 }
 
-export default MountItems;
+const mapDispatchToProps = dispatch => {
+  return {
+    setMountsBusy: busy => dispatch(setBusy(busy))
+  }
+};
+
+export default connect(null, mapDispatchToProps)(MountItems);

src/index.js

@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import createAppStore from './redux/store/createAppStore';
 import * as serviceWorker from './serviceWorker';
 import packageJson from '../package.json';
+import {Provider} from 'react-redux';
 
 const Constants = require('./constants');
 
+const store = createAppStore({});
+
 if (!process.versions.hasOwnProperty('electron')) {
   const ipcRenderer = ((window && window.require) ? window.require('electron').ipcRenderer : null);
   if (ipcRenderer) {
@@ -16,7 +20,10 @@ if (!process.versions.hasOwnProperty('electron')) {
         root.style.setProperty('--default_font_size', '15px');
       }
 
-      ReactDOM.render(<App platform={arg.Platform} version={packageJson.version}/>, document.getElementById('root'));
+      ReactDOM.render((
+        <Provider store={store}>
+          <App platform={arg.Platform} version={packageJson.version}/>
+        </Provider>), document.getElementById('root'));
       serviceWorker.unregister();
     });
     ipcRenderer.send(Constants.IPC_Get_Platform);

src/redux/actions/mount_actions.js

@@ -0,0 +1,3 @@
+import {createAction} from "redux-starter-kit";
+
+export const setBusy = createAction('mounts/setBusy');

src/redux/reducers/mount_reducer.js

@@ -0,0 +1,10 @@
+import {createReducer} from 'redux-starter-kit';
+import {setBusy} from '../actions/mount_actions';
+
+export const mountReducer = createReducer({
+  MountsBusy: false,
+}, {
+  [setBusy]: (state, action) => {
+    return {...state, MountsBusy: action.payload};
+  }
+});

src/redux/store/createAppStore.js

@@ -0,0 +1,17 @@
+import { configureStore, getDefaultMiddleware } from 'redux-starter-kit';
+import {mountReducer} from '../reducers/mount_reducer';
+
+export default function createAppStore(preloadedState) {
+  const reducer = {
+    mounts: mountReducer,
+  };
+
+  const middleware = [...getDefaultMiddleware()];
+
+  return configureStore({
+    reducer,
+    middleware,
+    devTools: process.env.NODE_ENV !== 'production',
+    preloadedState
+  });
+}