mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed page reload on settings change

This commit is contained in:
Ildar Kamalov 2019-01-23 17:22:04 +03:00 committed by Eugene Bujak
parent 6e41897323
commit 24be7ce4ed
5 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/.eslintrc vendored
View File

@ -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"

34
client/src/actions/index.js
View File

@ -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' }));
}

5
client/src/components/Settings/Dhcp/Form.js
View File

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

44
client/src/components/Settings/Dhcp/index.js
View File

@ -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>

10
client/src/reducers/index.js
View File

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