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) => {
<button
type="submit"
className="btn btn-success btn-standard"
- disabled={submitting || invalid}
+ disabled={submitting || invalid || processingConfig}
>
{t('save_config')}
</button>
@@ -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}
>
<Trans>dhcp_disable</Trans>
</button>
@@ -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
+ }
>
<Trans>dhcp_enable</Trans>
</button>
@@ -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 (
<Fragment>
@@ -102,17 +120,17 @@ class Dhcp extends Component {
{!dhcp.processing &&
<Fragment>
<Interface
- onChange={this.handleFormChange}
- initialValues={dhcp.config}
+ onChange={this.handleFormSubmit}
+ initialValues={initialSelect}
interfaces={dhcp.interfaces}
processing={dhcp.processingInterfaces}
enabled={dhcp.config.enabled}
/>
<Form
onSubmit={this.handleFormSubmit}
- initialValues={dhcp.config}
+ initialValues={initialForm}
interfaces={dhcp.interfaces}
- processing={dhcp.processingInterfaces}
+ processingConfig={dhcp.processingConfig}
/>
<hr/>
<div className="card-actions mb-3">
@@ -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}
>
<Trans>check_dhcp_servers</Trans>
</button>
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,
},