From 24be7ce4edd724993b4031dfbd85c197bddb07a1 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Wed, 23 Jan 2019 17:22:04 +0300 Subject: [PATCH] Fixed page reload on settings change --- client/.eslintrc | 4 +- client/src/actions/index.js | 34 +++++++-------- client/src/components/Settings/Dhcp/Form.js | 5 ++- client/src/components/Settings/Dhcp/index.js | 44 ++++++++++++++------ client/src/reducers/index.js | 10 +++++ 5 files changed, 62 insertions(+), 35 deletions(-) diff --git a/client/.eslintrc b/client/.eslintrc index 98799db6..aa104244 100644 --- a/client/.eslintrc +++ b/client/.eslintrc @@ -45,9 +45,7 @@ }], "class-methods-use-this": "off", "no-shadow": "off", - "camelcase": ["error", { - "properties": "never" - }], + "camelcase": "off", "no-console": ["warn", { "allow": ["warn", "error"] }], "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], "import/prefer-default-export": "off" diff --git a/client/src/actions/index.js b/client/src/actions/index.js index aa7f539c..1bb99064 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -572,34 +572,36 @@ export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS'); export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE'); // TODO rewrite findActiveDhcp part -export const setDhcpConfig = config => async (dispatch) => { +export const setDhcpConfig = values => async (dispatch, getState) => { + const { config } = getState().dhcp; + const updatedConfig = { ...config, ...values }; dispatch(setDhcpConfigRequest()); - - if (config.interface_name) { + if (values.interface_name) { dispatch(findActiveDhcpRequest()); try { - const activeDhcp = await apiClient.findActiveDhcp(config.interface_name); + const activeDhcp = await apiClient.findActiveDhcp(values.interface_name); dispatch(findActiveDhcpSuccess(activeDhcp)); - if (!activeDhcp.found) { - await apiClient.setDhcpConfig(config); - dispatch(addSuccessToast('dhcp_config_saved')); - dispatch(setDhcpConfigSuccess()); - dispatch(getDhcpStatus()); + try { + await apiClient.setDhcpConfig(updatedConfig); + dispatch(setDhcpConfigSuccess(updatedConfig)); + dispatch(addSuccessToast('dhcp_config_saved')); + } catch (error) { + dispatch(addErrorToast({ error })); + dispatch(setDhcpConfigFailure()); + } } else { dispatch(addErrorToast({ error: 'dhcp_found' })); } } catch (error) { dispatch(addErrorToast({ error })); dispatch(findActiveDhcpFailure()); - dispatch(setDhcpConfigFailure()); } } else { try { - await apiClient.setDhcpConfig(config); + await apiClient.setDhcpConfig(updatedConfig); + dispatch(setDhcpConfigSuccess(updatedConfig)); dispatch(addSuccessToast('dhcp_config_saved')); - dispatch(setDhcpConfigSuccess()); - dispatch(getDhcpStatus()); } catch (error) { dispatch(addErrorToast({ error })); dispatch(setDhcpConfigFailure()); @@ -616,11 +618,10 @@ export const toggleDhcp = config => async (dispatch) => { dispatch(toggleDhcpRequest()); if (config.enabled) { - dispatch(addSuccessToast('disabled_dhcp')); try { await apiClient.setDhcpConfig({ ...config, enabled: false }); dispatch(toggleDhcpSuccess()); - dispatch(getDhcpStatus()); + dispatch(addSuccessToast('disabled_dhcp')); } catch (error) { dispatch(addErrorToast({ error })); dispatch(toggleDhcpFailure()); @@ -635,12 +636,11 @@ export const toggleDhcp = config => async (dispatch) => { try { await apiClient.setDhcpConfig({ ...config, enabled: true }); dispatch(toggleDhcpSuccess()); - dispatch(getDhcpStatus()); + dispatch(addSuccessToast('enabled_dhcp')); } catch (error) { dispatch(addErrorToast({ error })); dispatch(toggleDhcpFailure()); } - dispatch(addSuccessToast('enabled_dhcp')); } else { dispatch(addErrorToast({ error: 'dhcp_found' })); } diff --git a/client/src/components/Settings/Dhcp/Form.js b/client/src/components/Settings/Dhcp/Form.js index 33eb6ca2..5b810c7b 100644 --- a/client/src/components/Settings/Dhcp/Form.js +++ b/client/src/components/Settings/Dhcp/Form.js @@ -50,6 +50,7 @@ const Form = (props) => { handleSubmit, submitting, invalid, + processingConfig, } = props; return ( @@ -125,7 +126,7 @@ const Form = (props) => { @@ -138,8 +139,8 @@ Form.propTypes = { submitting: PropTypes.bool, invalid: PropTypes.bool, interfaces: PropTypes.object, - processing: PropTypes.bool, initialValues: PropTypes.object, + processingConfig: PropTypes.bool, t: PropTypes.func, }; diff --git a/client/src/components/Settings/Dhcp/index.js b/client/src/components/Settings/Dhcp/index.js index d46d8551..6597fead 100644 --- a/client/src/components/Settings/Dhcp/index.js +++ b/client/src/components/Settings/Dhcp/index.js @@ -13,17 +13,14 @@ class Dhcp extends Component { this.props.setDhcpConfig(values); }; - handleFormChange = (value) => { - this.props.setDhcpConfig(value); - } - handleToggle = (config) => { this.props.toggleDhcp(config); - this.props.findActiveDhcp(config.interface_name); } getToggleDhcpButton = () => { - const { config, active, processingDhcp } = this.props.dhcp; + const { + config, active, processingDhcp, processingConfig, + } = this.props.dhcp; const activeDhcpFound = active && active.found; const filledConfig = Object.keys(config).every((key) => { if (key === 'enabled') { @@ -39,7 +36,7 @@ class Dhcp extends Component { type="button" className="btn btn-standard mr-2 btn-gray" onClick={() => this.props.toggleDhcp(config)} - disabled={processingDhcp} + disabled={processingDhcp || processingConfig} > dhcp_disable @@ -51,7 +48,12 @@ class Dhcp extends Component { type="button" className="btn btn-standard mr-2 btn-success" onClick={() => this.handleToggle(config)} - disabled={!filledConfig || activeDhcpFound || processingDhcp} + disabled={ + !filledConfig + || activeDhcpFound + || processingDhcp + || processingConfig + } > dhcp_enable @@ -94,6 +96,22 @@ class Dhcp extends Component { 'btn btn-primary btn-standard': true, 'btn btn-primary btn-standard btn-loading': dhcp.processingStatus, }); + const { + gateway_ip, + interface_name, + lease_duration, + range_end, + range_start, + subnet_mask, + } = dhcp.config; + const initialForm = { + gateway_ip, + lease_duration, + range_end, + range_start, + subnet_mask, + }; + const initialSelect = { interface_name }; return ( @@ -102,17 +120,17 @@ class Dhcp extends Component { {!dhcp.processing &&
@@ -123,7 +141,7 @@ class Dhcp extends Component { onClick={() => this.props.findActiveDhcp(dhcp.config.interface_name) } - disabled={!dhcp.config.interface_name} + disabled={!dhcp.config.interface_name || dhcp.processingConfig} > check_dhcp_servers diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js index 1b770adc..f2e450ba 100644 --- a/client/src/reducers/index.js +++ b/client/src/reducers/index.js @@ -308,11 +308,21 @@ const dhcp = handleActions({ const newState = { ...state, config: newConfig, processingDhcp: false }; return newState; }, + + [actions.setDhcpConfigRequest]: state => ({ ...state, processingConfig: true }), + [actions.setDhcpConfigFailure]: state => ({ ...state, processingConfig: false }), + [actions.setDhcpConfigSuccess]: (state, { payload }) => { + const { config } = state; + const newConfig = { ...config, ...payload }; + const newState = { ...state, config: newConfig, processingConfig: false }; + return newState; + }, }, { processing: true, processingStatus: false, processingInterfaces: false, processingDhcp: false, + processingConfig: false, config: { enabled: false, },