From c6fb1d08e744f3772a9ed93e850c2cbaaa75cacf Mon Sep 17 00:00:00 2001 From: "Scott E. Graves" Date: Tue, 4 May 2021 01:15:06 -0500 Subject: [PATCH] Refactor dialogs --- src/components/YesNo/YesNo.js | 10 +- src/containers/AddEditHost/AddEditHost.js | 6 +- src/containers/AddMount/AddMount.js | 544 +++++++++++----------- src/containers/HostList/Host/Host.js | 16 +- src/containers/HostList/HostList.js | 12 +- src/redux/actions/common_actions.js | 43 +- src/redux/actions/host_actions.js | 42 +- src/redux/actions/install_actions.js | 8 +- src/redux/actions/mount_actions.js | 20 +- src/redux/reducers/common_reducer.js | 10 +- src/redux/reducers/host_reducer.js | 10 +- src/redux/utils.js | 47 ++ 12 files changed, 371 insertions(+), 397 deletions(-) create mode 100644 src/redux/utils.js diff --git a/src/components/YesNo/YesNo.js b/src/components/YesNo/YesNo.js index a47857f..221ff68 100644 --- a/src/components/YesNo/YesNo.js +++ b/src/components/YesNo/YesNo.js @@ -3,7 +3,7 @@ import Button from '../UI/Button/Button'; import Box from '../UI/Box/Box'; import React from 'react'; import './YesNo.css'; -import { hideConfirmYesNo } from '../../redux/actions/common_actions'; +import { confirmYesNoAction } from '../../redux/actions/common_actions'; const mapStateToProps = (state) => { return { @@ -13,7 +13,7 @@ const mapStateToProps = (state) => { const mapDispatchToProps = (dispatch) => { return { - hideConfirmYesNo: (confirmed) => dispatch(hideConfirmYesNo(confirmed)), + confirm: (confirmed) => dispatch(confirmYesNoAction.complete(confirmed)), }; }; @@ -35,14 +35,12 @@ export default connect( - - diff --git a/src/containers/AddEditHost/AddEditHost.js b/src/containers/AddEditHost/AddEditHost.js index 57c0d02..3a4396b 100644 --- a/src/containers/AddEditHost/AddEditHost.js +++ b/src/containers/AddEditHost/AddEditHost.js @@ -5,7 +5,7 @@ import DropDown from '../../components/UI/DropDown/DropDown'; import PropTypes from 'prop-types'; import Text from '../../components/UI/Text/Text'; import { Component } from 'react'; -import { addEditHost, completeAddEditHost } from '../../redux/actions/host_actions'; +import { addEditHostAction } from '../../redux/actions/host_actions'; import { connect } from 'react-redux'; import { createDismissDisplay } from '../../utils.jsx'; import { notifyError } from '../../redux/actions/error_actions'; @@ -217,8 +217,8 @@ const mapStateToProps = (state) => { const mapDispatchToProps = (dispatch) => { return { - Close: () => dispatch(addEditHost(false)), - completeAddEditHost: (host_data) => dispatch(completeAddEditHost(true, host_data)), + Close: () => dispatch(addEditHostAction.complete(false)), + completeAddEditHost: (host_data) => dispatch(addEditHostAction.complete(true, { host_data })), notifyError: (msg) => dispatch(notifyError(msg)), }; }; diff --git a/src/containers/AddMount/AddMount.js b/src/containers/AddMount/AddMount.js index 1f59ec3..061dd88 100644 --- a/src/containers/AddMount/AddMount.js +++ b/src/containers/AddMount/AddMount.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Component } from 'react'; import './AddMount.css'; import { connect } from 'react-redux'; @@ -11,6 +12,272 @@ import { createModalConditionally } from '../../utils.jsx'; import DropDown from '../../components/UI/DropDown/DropDown'; import * as Constants from '../../constants'; +const default_state = { + AccessKey: '', + BucketName: '', + DisplayRemote: false, + DisplayS3: false, + HostNameOrIp: '', + Name: '', + Port: 20000, + Provider: Constants.S3_PROVIDER_LIST[0], + Region: Constants.S3_REGION_PROVIDER_REGION[0], + SecretKey: '', + Token: '', +}; + +class AddMount extends Component { + state = { + ...default_state, + }; + + addRemoteMount = () => { + if (this.state.HostNameOrIp.length === 0) { + this.props.notifyError('Hostname or IP cannot be empty.'); + } else { + const provider = 'Remote' + this.state.HostNameOrIp + ':' + this.state.Port; + if (this.props.RemoteMounts.includes(provider)) { + this.props.notifyError('Remote host already exists'); + } else { + this.setState( + { + DisplayRemote: false, + }, + () => { + this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token); + this.setState({ + ...default_state, + }); + } + ); + } + } + }; + + addS3Mount = () => { + if (this.state.Name.length === 0) { + this.props.notifyError('Name cannot be empty.'); + } else if (this.state.AccessKey.length === 0) { + this.props.notifyError('AccessKey cannot be empty.'); + } else if (this.state.SecretKey.length === 0) { + this.props.notifyError('SecretKey cannot be empty.'); + } else { + const provider = 'S3' + this.state.Name; + if (this.props.S3Mounts.includes(provider)) { + this.props.notifyError('Remote host already exists'); + } else { + this.setState( + { + DisplayS3: false, + }, + () => { + this.props.addS3Mount( + this.state.Name, + this.state.AccessKey, + this.state.SecretKey, + this.state.Region, + this.state.BucketName, + Constants.S3_PROVIDER_URL[this.state.Provider] + ); + this.setState({ + ...default_state, + }); + } + ); + } + } + }; + + handleAddS3Mount = () => { + this.setState({ + DisplayRemote: false, + DisplayS3: true, + }); + }; + + handleAddRemoteMount = () => { + this.setState({ + DisplayRemote: true, + DisplayS3: false, + }); + }; + + render() { + const displayAddRemote = createModalConditionally( + this.state.DisplayRemote, + +

+ Add Remote Mount +

+ + this.setState({ HostNameOrIp: e.target.value.trim() })} + className={'ConfigurationItemInput'} + type={'text'} + value={this.state.HostNameOrIp} + /> +
+ + this.setState({ Port: e.target.value })} + className={'ConfigurationItemInput'} + type={'number'} + value={this.state.Port} + /> +
+ + this.setState({ Token: e.target.value })} + className={'ConfigurationItemInput'} + type={'text'} + value={this.state.Token} + /> +
+
+ +
+ +
+ + ); + + const displayAddS3 = createModalConditionally( + this.state.DisplayS3, + +

+ Add S3 Mount +

+
+ +
+ +
+
+ this.setState({ Name: e.target.value.trim() })} + className={'ConfigurationItemInput'} + style={{ width: '100%' }} + type={'text'} + value={this.state.Name} + /> +
+ this.setState({ Provider: e.target.value })} + items={Constants.S3_PROVIDER_LIST} + selected={this.state.Provider} + /> +
+
+
+ +
+ +
+
+ this.setState({ BucketName: e.target.value })} + className={'ConfigurationItemInput'} + style={{ width: '100%' }} + type={'text'} + value={this.state.BucketName} + /> +
+ this.setState({ Region: e.target.value })} + className={'ConfigurationItemInput'} + type={'text'} + value={this.state.Region} + /> +
+
+
+ +
+ +
+
+ this.setState({ AccessKey: e.target.value })} + className={'ConfigurationItemInput'} + type={'text'} + value={this.state.AccessKey} + /> +
+ this.setState({ SecretKey: e.target.value })} + className={'ConfigurationItemInput'} + type={'text'} + value={this.state.SecretKey} + /> +
+
+
+
+ +
+ +
+ + ); + + return ( +
+ {displayAddRemote} + {displayAddS3} +
+ {this.props.remoteSupported ? ( + + ) : null} + {this.props.remoteSupported && this.props.s3Supported ? ( +
+ ) : null} + {this.props.s3Supported ? ( + + ) : null} +
+
+ ); + } +} + const mapStateToProps = (state) => { return { RemoteMounts: state.mounts.RemoteMounts, @@ -28,273 +295,14 @@ const mapDispatchToProps = (dispatch) => { }; }; -const default_state = { - AccessKey: '', - BucketName: '', - DisplayRemote: false, - DisplayS3: false, - HostNameOrIp: '', - Name: '', - Port: 2000, - Provider: Constants.S3_PROVIDER_LIST[0], - Region: Constants.S3_REGION_PROVIDER_REGION[0], - SecretKey: '', - Token: '', +AddMount.propTypes = { + RemoteMounts: PropTypes.array.isRequired, + S3Mounts: PropTypes.array.isRequired, + addRemoteMount: PropTypes.func.isRequired, + addS3Mount: PropTypes.func.isRequired, + notifyError: PropTypes.func.isRequired, + remoteSupported: PropTypes.bool, + s3Supported: PropTypes.bool, }; -export default connect( - mapStateToProps, - mapDispatchToProps -)( - class AddMount extends Component { - state = { - ...default_state, - }; - - addRemoteMount = () => { - if (this.state.HostNameOrIp.length === 0) { - this.props.notifyError('Hostname or IP cannot be empty.'); - } else { - const provider = 'Remote' + this.state.HostNameOrIp + ':' + this.state.Port; - if (this.props.RemoteMounts.includes(provider)) { - this.props.notifyError('Remote host already exists'); - } else { - this.setState( - { - DisplayRemote: false, - }, - () => { - this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token); - this.setState({ - ...default_state, - }); - } - ); - } - } - }; - - addS3Mount = () => { - if (this.state.Name.length === 0) { - this.props.notifyError('Name cannot be empty.'); - } else if (this.state.AccessKey.length === 0) { - this.props.notifyError('AccessKey cannot be empty.'); - } else if (this.state.SecretKey.length === 0) { - this.props.notifyError('SecretKey cannot be empty.'); - } else { - const provider = 'S3' + this.state.Name; - if (this.props.S3Mounts.includes(provider)) { - this.props.notifyError('Remote host already exists'); - } else { - this.setState( - { - DisplayS3: false, - }, - () => { - this.props.addS3Mount( - this.state.Name, - this.state.AccessKey, - this.state.SecretKey, - this.state.Region, - this.state.BucketName, - Constants.S3_PROVIDER_URL[this.state.Provider] - ); - this.setState({ - ...default_state, - }); - } - ); - } - } - }; - - handleAddS3Mount = () => { - this.setState({ - DisplayRemote: false, - DisplayS3: true, - }); - }; - - handleAddRemoteMount = () => { - this.setState({ - DisplayRemote: true, - DisplayS3: false, - }); - }; - - render() { - const displayAddRemote = createModalConditionally( - this.state.DisplayRemote, - -

- Add Remote Mount -

- - this.setState({ HostNameOrIp: e.target.value.trim() })} - className={'ConfigurationItemInput'} - type={'text'} - value={this.state.HostNameOrIp} - /> -
- - this.setState({ Port: e.target.value })} - className={'ConfigurationItemInput'} - type={'number'} - value={this.state.Port} - /> -
- - this.setState({ Token: e.target.value })} - className={'ConfigurationItemInput'} - type={'text'} - value={this.state.Token} - /> -
-
- -
- -
- - ); - - const displayAddS3 = createModalConditionally( - this.state.DisplayS3, - -

- Add S3 Mount -

-
- -
- -
-
- this.setState({ Name: e.target.value.trim() })} - className={'ConfigurationItemInput'} - style={{ width: '100%' }} - type={'text'} - value={this.state.Name} - /> -
- this.setState({ Provider: e.target.value })} - items={Constants.S3_PROVIDER_LIST} - selected={this.state.Provider} - /> -
-
-
- -
- -
-
- this.setState({ BucketName: e.target.value })} - className={'ConfigurationItemInput'} - style={{ width: '100%' }} - type={'text'} - value={this.state.BucketName} - /> -
- this.setState({ Region: e.target.value })} - className={'ConfigurationItemInput'} - type={'text'} - value={this.state.Region} - /> -
-
-
- -
- -
-
- this.setState({ AccessKey: e.target.value })} - className={'ConfigurationItemInput'} - type={'text'} - value={this.state.AccessKey} - /> -
- this.setState({ SecretKey: e.target.value })} - className={'ConfigurationItemInput'} - type={'text'} - value={this.state.SecretKey} - /> -
-
-
-
- -
- -
- - ); - - return ( -
- {displayAddRemote} - {displayAddS3} -
- {this.props.remoteSupported ? ( - - ) : null} - {this.props.remoteSupported && this.props.s3Supported ? ( -
- ) : null} - {this.props.s3Supported ? ( - - ) : null} -
-
- ); - } - } -); +export default connect(mapStateToProps, mapDispatchToProps)(AddMount); diff --git a/src/containers/HostList/Host/Host.js b/src/containers/HostList/Host/Host.js index 08147e7..6fb755b 100644 --- a/src/containers/HostList/Host/Host.js +++ b/src/containers/HostList/Host/Host.js @@ -1,24 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { addEditHost } from '../../../redux/actions/host_actions'; +import { addEditHostAction } from '../../../redux/actions/host_actions'; import { connect } from 'react-redux'; import { faTrashAlt, faEdit } from '@fortawesome/free-solid-svg-icons'; -// const mapStateToProps = (state) => { -// return {}; -// }; -// const mapDispatchToProps = (dispatch) => { return { - addEditHost: (host_list, host_data, cb) => - dispatch(addEditHost(true, host_list, host_data, cb)), + editHost: (host_list, host_data, cb) => + dispatch(addEditHostAction.display(true, cb, { host_list, host_data })), }; }; -const Host = ({ allowDelete, addEditHost, host_list, host_data, onChange, onDelete }) => { +const Host = ({ allowDelete, editHost, host_list, host_data, onChange, onDelete }) => { const handleEditHost = () => { - addEditHost(host_list, host_data, (changed, host_data) => { + editHost(host_list, host_data, (changed, { host_data }) => { if (changed) { onChange(host_data); } @@ -74,7 +70,7 @@ const Host = ({ allowDelete, addEditHost, host_list, host_data, onChange, onDele Host.propTypes = { allowDelete: PropTypes.bool.isRequired, - addEditHost: PropTypes.func.isRequired, + editHost: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired, host_data: PropTypes.object.isRequired, diff --git a/src/containers/HostList/HostList.js b/src/containers/HostList/HostList.js index 0130cd5..e2ed5c9 100644 --- a/src/containers/HostList/HostList.js +++ b/src/containers/HostList/HostList.js @@ -4,9 +4,9 @@ import Host from './Host/Host'; import PropTypes from 'prop-types'; import { Component } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { confirmYesNo } from '../../redux/actions/common_actions'; +import { confirmYesNoAction } from '../../redux/actions/common_actions'; import { connect } from 'react-redux'; -import { addEditHost } from '../../redux/actions/host_actions'; +import { addEditHostAction } from '../../redux/actions/host_actions'; import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'; class HostList extends Component { @@ -24,7 +24,7 @@ class HostList extends Component { componentWillUnmount() {} handleAddHost = () => { - this.props.addEditHost(this.state.items, (changed, host_data) => { + this.props.AddHost(this.state.items, (changed, host_data) => { if (changed) { const items = [...this.state.items, host_data]; this.updateItems(items); @@ -104,13 +104,13 @@ class HostList extends Component { const mapDispatchToProps = (dispatch) => { return { - addEditHost: (list, cb) => dispatch(addEditHost(true, list, null, cb)), - ConfirmRemoveHost: (title, cb) => dispatch(confirmYesNo(title, cb)), + AddHost: (host_list, cb) => dispatch(addEditHostAction.display(true, cb, { host_list })), + ConfirmRemoveHost: (title, cb) => dispatch(confirmYesNoAction.display(true, cb, { title })), }; }; HostList.propTypes = { - addEditHost: PropTypes.func.isRequired, + AddHost: PropTypes.func.isRequired, ConfirmRemoveHost: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, value: PropTypes.array.isRequired, diff --git a/src/redux/actions/common_actions.js b/src/redux/actions/common_actions.js index 9d61d0f..c3557f5 100644 --- a/src/redux/actions/common_actions.js +++ b/src/redux/actions/common_actions.js @@ -1,30 +1,12 @@ import { createAction } from '@reduxjs/toolkit'; +import { createResponseDialogAction } from '../utils'; + +export const confirmYesNoAction = createResponseDialogAction('common', 'confirmYesNo'); import * as Constants from '../../constants'; import { getIPCRenderer } from '../../utils.jsx'; const ipcRenderer = getIPCRenderer(); -let yesNoResolvers = []; - -export const confirmYesNo = (title, cb) => { - return (dispatch) => { - if (cb) { - dispatch(confirmYesNo(title)).then((confirmed) => cb(confirmed)); - } else { - return new Promise((resolve) => { - dispatch(handleConfirmYesNo(true, title, resolve)); - }); - } - }; -}; - -export const DISPLAY_CONFIRM_YES_NO = 'common/displayConfirmYesNo'; -const displayConfirmYesNo = (show, title) => { - return { - type: DISPLAY_CONFIRM_YES_NO, - payload: { show, title }, - }; -}; export const displaySelectAppPlatform = (display) => { return (dispatch) => { @@ -36,25 +18,6 @@ export const displaySelectAppPlatform = (display) => { }; }; -export const hideConfirmYesNo = (confirmed) => { - return (dispatch) => { - dispatch(handleConfirmYesNo(false, confirmed)); - }; -}; - -const handleConfirmYesNo = (show, titleOrConfirmed, resolve) => { - return (dispatch) => { - if (show) { - yesNoResolvers.push(resolve); - dispatch(displayConfirmYesNo(show, titleOrConfirmed)); - } else { - yesNoResolvers[0](titleOrConfirmed); - yesNoResolvers.splice(0, 1); - dispatch(displayConfirmYesNo(false)); - } - }; -}; - export const NOTIFY_APPLICATION_BUSY = 'common/notifyApplicationBusy'; export const notifyApplicationBusy = (busy, transparent) => { return { diff --git a/src/redux/actions/host_actions.js b/src/redux/actions/host_actions.js index 066f898..5ec5186 100644 --- a/src/redux/actions/host_actions.js +++ b/src/redux/actions/host_actions.js @@ -1,41 +1,3 @@ -let addEditHostResolvers = []; +import { createResponseDialogAction } from '../utils'; -export const addEditHost = (display, host_list, host_data, cb) => { - return (dispatch) => { - if (cb) { - dispatch(addEditHost(display, host_list, host_data)).then(({ changed, host_data }) => - cb(changed, host_data) - ); - } else { - return new Promise((resolve) => { - dispatch(handleDisplayAddEditHost(display, host_list, host_data, resolve)); - }); - } - }; -}; - -const handleDisplayAddEditHost = (display, host_list, host_data, resolve) => { - return (dispatch) => { - if (display) { - addEditHostResolvers.push(resolve); - dispatch(displayAddEditHost(display, host_list, host_data)); - } else { - dispatch(completeAddEditHost(false)); - } - }; -}; - -export const completeAddEditHost = (changed, host_data) => { - return (dispatch) => { - if (changed) { - addEditHostResolvers[0]({ changed, host_data }); - } - addEditHostResolvers.splice(0, 1); - dispatch(displayAddEditHost(false)); - }; -}; - -export const DISPLAY_ADD_EDIT_HOST = 'host/displayAddEditHost'; -export const displayAddEditHost = (display, host_list, host_data) => { - return { type: DISPLAY_ADD_EDIT_HOST, payload: { display, host_data, host_list } }; -}; +export const addEditHostAction = createResponseDialogAction('host', 'displayAddEditHost'); diff --git a/src/redux/actions/install_actions.js b/src/redux/actions/install_actions.js index 4ce1f2b..b605d4d 100644 --- a/src/redux/actions/install_actions.js +++ b/src/redux/actions/install_actions.js @@ -4,7 +4,7 @@ import * as Constants from '../../constants'; import { getIPCRenderer, getSelectedVersionFromState } from '../../utils.jsx'; import { - confirmYesNo, + confirmYesNoAction, displaySelectAppPlatform, setAllowMount, setApplicationReady, @@ -206,9 +206,9 @@ export const installReleaseByVersion = (release, version) => { }; if (getState().mounts.MountsBusy) { - dispatch(confirmYesNo('Unmount all drives?')) - .then((confirmed) => { - if (confirmed) { + dispatch(confirmYesNoAction.display(true, null, { title: 'Unmount all drives?' })) + .then(({ changed }) => { + if (changed) { dispatch(unmountAll(install)); } }) diff --git a/src/redux/actions/mount_actions.js b/src/redux/actions/mount_actions.js index 7912869..d07e0cc 100644 --- a/src/redux/actions/mount_actions.js +++ b/src/redux/actions/mount_actions.js @@ -3,7 +3,7 @@ import { createAction } from '@reduxjs/toolkit'; import * as Constants from '../../constants'; import { getIPCRenderer } from '../../utils.jsx'; -import { confirmYesNo, saveState } from './common_actions'; +import { confirmYesNoAction, saveState } from './common_actions'; import { notifyError } from './error_actions'; export const addRemoteMount = (hostNameOrIp, port, token) => { @@ -23,7 +23,7 @@ export const addRemoteMount = (hostNameOrIp, port, token) => { Version: getState().relver.InstalledVersion, }); } else { - dispatch(notifyError('Failed to create S3 instance: ' + arg.data.Error)); + dispatch(notifyError('Failed to create remote mount: ' + arg.data.Error)); dispatch(setBusy(false)); } }); @@ -32,7 +32,7 @@ export const addRemoteMount = (hostNameOrIp, port, token) => { Items: [ { Name: 'RemoteMount.RemoteHostNameOrIp', Value: hostNameOrIp }, { Name: 'RemoteMount.RemoteToken', Value: token }, - { Name: 'RemoteMount.RemotePort', Value: port }, + { Name: 'RemoteMount.RemotePort', Value: port.toString() }, { Name: 'RemoteMount.IsRemoteMount', Value: 'true' }, ], Provider: provider, @@ -96,13 +96,15 @@ export const displayConfiguration = (provider, remote, s3) => { export const removeMount = (provider) => { return (dispatch) => { const isRemote = provider.startsWith('Remote'); - dispatch(confirmYesNo('Delete [' + provider.substr(isRemote ? 6 : 2) + ']?')).then( - (confirmed) => { - if (confirmed) { - dispatch(removeMount2(provider)); - } + dispatch( + confirmYesNoAction.display(true, null, { + title: 'Delete [' + provider.substr(isRemote ? 6 : 2) + ']?', + }) + ).then(({ changed }) => { + if (changed) { + dispatch(removeMount2(provider)); } - ); + }); }; }; diff --git a/src/redux/reducers/common_reducer.js b/src/redux/reducers/common_reducer.js index decd86c..6efc45a 100644 --- a/src/redux/reducers/common_reducer.js +++ b/src/redux/reducers/common_reducer.js @@ -1,7 +1,6 @@ import { createReducer } from '@reduxjs/toolkit'; - import { - DISPLAY_CONFIRM_YES_NO, + confirmYesNoAction, NOTIFY_APPLICATION_BUSY, notifyRebootRequired, SET_DISPLAY_SELECT_APPPLATFORM, @@ -26,11 +25,12 @@ export const createCommonReducer = (platformInfo, version) => { Version: version, }, { - [DISPLAY_CONFIRM_YES_NO]: (state, action) => { + [confirmYesNoAction.action_type]: (state, action) => { return { ...state, - DisplayConfirmYesNo: action.payload.show, - ConfirmTitle: action.payload.show ? action.payload.title : null, + DisplayConfirmYesNo: action.payload.display, + ConfirmTitle: + action.payload.display && action.payload.data ? action.payload.data.title : null, }; }, [SET_DISPLAY_SELECT_APPPLATFORM]: (state, action) => { diff --git a/src/redux/reducers/host_reducer.js b/src/redux/reducers/host_reducer.js index c52ebae..ce3eccd 100644 --- a/src/redux/reducers/host_reducer.js +++ b/src/redux/reducers/host_reducer.js @@ -1,21 +1,19 @@ import { createReducer } from '@reduxjs/toolkit'; -import * as Actions from '../actions/host_actions'; +import { addEditHostAction } from '../actions/host_actions'; export const hostReducer = createReducer( { DisplayAddEditHost: false, - Edit: false, HostData: {}, HostList: [], }, { - [Actions.DISPLAY_ADD_EDIT_HOST]: (state, action) => { + [addEditHostAction.action_type]: (state, action) => { return { ...state, DisplayAddEditHost: action.payload.display, - Edit: !!action.payload.host_data, - HostData: action.payload.host_data || {}, - HostList: action.payload.host_list || [], + HostData: action.payload.data ? action.payload.data.host_data || {} : {}, + HostList: action.payload.data ? action.payload.data.host_list || [] : [], }; }, } diff --git a/src/redux/utils.js b/src/redux/utils.js new file mode 100644 index 0000000..10a1cf5 --- /dev/null +++ b/src/redux/utils.js @@ -0,0 +1,47 @@ +export const createResponseDialogAction = (type, name) => { + let resolverList = []; + + const display = (show, cb, data) => { + return (dispatch) => { + if (cb) { + dispatch(display(show, null, data)).then(({ changed, data }) => cb(changed, data)); + } else { + return new Promise((resolve) => { + dispatch(handleDisplay(show, data, resolve)); + }); + } + }; + }; + + const handleDisplay = (show, data, resolve) => { + return (dispatch) => { + if (show) { + resolverList.push(resolve); + dispatch(displayAction(show, data)); + } else { + dispatch(complete(false)); + } + }; + }; + + const complete = (changed, data) => { + return (dispatch) => { + if (changed) { + resolverList[0]({ changed, data }); + } + resolverList.splice(0, 1); + dispatch(displayAction(false)); + }; + }; + + const DISPLAY_ACTION = type + '/' + name; + const displayAction = (display, data) => { + return { type: DISPLAY_ACTION, payload: { display, data } }; + }; + + return { + action_type: DISPLAY_ACTION, + complete, + display, + }; +};