From fc48c9c0db50576fb8033ce854c912526cbbdc65 Mon Sep 17 00:00:00 2001 From: "Scott E. Graves" Date: Tue, 4 Jun 2019 22:08:21 -0500 Subject: [PATCH] Begin move to redux --- package.json | 4 ++++ src/App.js | 19 ++++++++++--------- src/containers/MountItems/MountItems.js | 16 ++++++++++++---- src/index.js | 9 ++++++++- src/redux/actions/mount_actions.js | 3 +++ src/redux/reducers/mount_reducer.js | 10 ++++++++++ src/redux/store/createAppStore.js | 17 +++++++++++++++++ 7 files changed, 64 insertions(+), 14 deletions(-) create mode 100644 src/redux/actions/mount_actions.js create mode 100644 src/redux/reducers/mount_reducer.js create mode 100644 src/redux/store/createAppStore.js diff --git a/package.json b/package.json index 26e8f81..57803aa 100644 --- a/package.json +++ b/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" }, diff --git a/src/App.js b/src/App.js index caabd49..bb41f94 100644 --- a/src/App.js +++ b/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((
- @@ -755,4 +750,10 @@ class App extends IPCContainer { } } -export default App; +const mapStateToProps = state =>{ + return { + MountsBusy: state.mounts.MountsBusy + }; +}; + +export default connect(mapStateToProps)(App); diff --git a/src/containers/MountItems/MountItems.js b/src/containers/MountItems/MountItems.js index 612feae..e90b3e4 100644 --- a/src/containers/MountItems/MountItems.js +++ b/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; \ No newline at end of file +const mapDispatchToProps = dispatch => { + return { + setMountsBusy: busy => dispatch(setBusy(busy)) + } +}; + +export default connect(null, mapDispatchToProps)(MountItems); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 17b4867..5a68ab2 100644 --- a/src/index.js +++ b/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(, document.getElementById('root')); + ReactDOM.render(( + + + ), document.getElementById('root')); serviceWorker.unregister(); }); ipcRenderer.send(Constants.IPC_Get_Platform); diff --git a/src/redux/actions/mount_actions.js b/src/redux/actions/mount_actions.js new file mode 100644 index 0000000..71fbbf8 --- /dev/null +++ b/src/redux/actions/mount_actions.js @@ -0,0 +1,3 @@ +import {createAction} from "redux-starter-kit"; + +export const setBusy = createAction('mounts/setBusy'); \ No newline at end of file diff --git a/src/redux/reducers/mount_reducer.js b/src/redux/reducers/mount_reducer.js new file mode 100644 index 0000000..da15e2a --- /dev/null +++ b/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}; + } +}); \ No newline at end of file diff --git a/src/redux/store/createAppStore.js b/src/redux/store/createAppStore.js new file mode 100644 index 0000000..0cb8565 --- /dev/null +++ b/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 + }); +} \ No newline at end of file