Fixed page reload on settings change

client/.eslintrc

@@ -45,9 +45,7 @@
         }],
         "class-methods-use-this": "off",
         "no-shadow": "off",
-        "camelcase": ["error", {
+        "camelcase": "off",
-            "properties": "never"
-        }],
         "no-console": ["warn", { "allow": ["warn", "error"] }],
         "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
         "import/prefer-default-export": "off"

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 (values.interface_name) {
-    if (config.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);
+                try {
-                dispatch(addSuccessToast('dhcp_config_saved'));
+                    await apiClient.setDhcpConfig(updatedConfig);
-                dispatch(setDhcpConfigSuccess());
+                    dispatch(setDhcpConfigSuccess(updatedConfig));
-                dispatch(getDhcpStatus());
+                    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' }));
             }

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,
 };
 

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}
+                                    onChange={this.handleFormSubmit}
-                                    initialValues={dhcp.config}
+                                    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>

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,
     },