Redux changes and refactoring

This commit is contained in:
Scott E. Graves
2019-06-06 15:52:56 -05:00
parent 6502657e3c
commit 0bbfddc17c
9 changed files with 233 additions and 211 deletions

View File

@@ -1,6 +1,6 @@
import React from 'react';
import './MountItem.css';
import {connect} from "react-redux";
import {connect} from 'react-redux';
import DropDown from '../UI/DropDown/DropDown';
import Button from '../UI/Button/Button';
import Loader from 'react-loader-spinner';
@@ -8,14 +8,40 @@ import Text from '../UI/Text/Text';
import Grid from '../UI/Grid/Grid';
import configureImage from '../../assets/images/configure.png';
import RootElem from '../../hoc/RootElem/RootElem';
import {displayConfiguration, setProviderState} from '../../redux/actions/mount_actions';
const mapStateToProps = state => {
const mapStateToProps = (state, ownProps) => {
return {
Platform: state.common.Platform,
ProviderState: state.mounts.ProviderState,
State: state.mounts.ProviderState[ownProps.provider]
};
};
export default connect(mapStateToProps)(props => {
const mapDispatchToProps = dispatch => {
return {
displayConfiguration: provider => dispatch(displayConfiguration(provider)),
setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(props => {
const handleAutoMountChanged = e => {
const state = {
...props.ProviderState[props.provider],
AutoMount: e.target.checked,
};
props.setProviderState(props.provider, state);
};
const handleAutoRestartChanged = e => {
const state = {
...props.ProviderState[props.provider],
AutoRestart: e.target.checked,
};
props.setProviderState(props.provider, state);
};
let configButton = null;
let secondRow = 6;
if (props.allowConfig) {
@@ -25,7 +51,7 @@ export default connect(mapStateToProps)(props => {
rowSpan={6}>
<img alt=''
height={'16px'}
onClick={props.allowMount ? props.configClicked : (e)=>{e.preventDefault();}}
onClick={props.allowMount ? ()=>props.displayConfiguration(props.provider) : e=>{e.preventDefault();}}
src={configureImage}
style={{padding: 0, border: 0, margin: 0, ...pointer}}
width={'16px'}/>
@@ -43,7 +69,7 @@ export default connect(mapStateToProps)(props => {
items={props.items}
row={secondRow}
rowSpan={7}
selected={props.items.indexOf(props.location)}/>;
selected={props.items.indexOf(props.State.MountLocation)}/>;
} else {
inputColumnSpan = 58;
@@ -60,11 +86,11 @@ export default connect(mapStateToProps)(props => {
size={4096}
className={'MountItemInput'}
type={'text'}
value={props.location}/>
value={props.State.MountLocation}/>
</RootElem>
));
inputControls.push((
<Button clicked={()=>props.browseClicked(props.title, props.location)}
<Button clicked={()=>props.browseClicked(props.title, props.State.MountLocation)}
col={inputColumnSpan - 7}
colSpan={7}
disabled={props.mounted || !props.allowMount}
@@ -82,7 +108,7 @@ export default connect(mapStateToProps)(props => {
width='19px'/>;
const actionsDisplay = (
<Button clicked={()=>props.clicked(props.title, !props.mounted, props.location)}
<Button clicked={()=>props.clicked(props.title, !props.mounted, props.State.MountLocation)}
col={inputColumnSpan + 2}
colSpan={21}
disabled={!props.allowMount}
@@ -96,8 +122,8 @@ export default connect(mapStateToProps)(props => {
colSpan={28}
row={secondRow}
rowSpan={7}>
<input checked={props.autoMount}
onChange={props.autoMountChanged}
<input checked={props.State.AutoMount}
onChange={handleAutoMountChanged}
type='checkbox'/>Auto-mount
</RootElem>
);
@@ -107,8 +133,8 @@ export default connect(mapStateToProps)(props => {
colSpan={24}
row={secondRow}
rowSpan={7}>
<input checked={props.autoRestart}
onChange={props.autoRestartChanged}
<input checked={props.State.AutoRestart}
onChange={handleAutoRestartChanged}
type='checkbox'/>Restart
</RootElem>
);

View File

@@ -7,6 +7,7 @@ import Grid from '../UI/Grid/Grid';
import Text from '../UI/Text/Text';
import Button from '../UI/Button/Button';
import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
import {setActiveRelease} from "../../redux/actions/release_version_actions";
const mapStateToProps = state => {
return {
@@ -17,7 +18,23 @@ const mapStateToProps = state => {
};
};
export default connect(mapStateToProps)(props => {
const mapDispatchToProps = dispatch => {
return {
setActiveRelease: (release, version) => dispatch(setActiveRelease(release, version)),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(props => {
const handleReleaseChanged = e => {
const release = parseInt(e.target.value, 10);
const releaseVersion = props.VersionLookup[Constants.RELEASE_TYPES[release]].length - 1;
props.setActiveRelease(release, releaseVersion);
};
const handleVersionChanged = e => {
props.setActiveRelease(props.Release, parseInt(e.target.value, 10));
};
let optionsDisplay = [];
let key = 0;
if (props.releaseExtracting) {
@@ -78,7 +95,7 @@ export default connect(mapStateToProps)(props => {
text={'Release'}
textAlign={'left'}
type={'Heading2'}/>
<DropDown changed={props.releaseChanged}
<DropDown changed={handleReleaseChanged}
colSpan={remain=>remain / 3 - 1}
disabled={props.disabled}
items={Constants.RELEASE_TYPES}
@@ -96,7 +113,7 @@ export default connect(mapStateToProps)(props => {
colSpan={4}
release
rowSpan={4}/>
<DropDown changed={props.versionChanged}
<DropDown changed={handleVersionChanged}
col={dimensions => dimensions.columns / 3}
colSpan={remain=>remain / 2 - 1}
disabled={props.disabled}