daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ client: Move "Blocked services" to a separate page under "Filters" menu: Merge pull request #649 in DNS/adguard-home from feature/1744 to master

Browse Source 
Close #1744

Squashed commit of the following:

commit 912a80b8ff42c927a97d33ccb3eebf8c3ca188d9
Merge: bb5a77ff 5ce98bd2
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jun 5 12:47:21 2020 +0300

    Merge branch 'master' into feature/1744

commit bb5a77ff6b66743bf23c9582c523280bdf9ef63a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 4 18:07:26 2020 +0300

    + client: Move "Blocked services" to a separate page under "Filters" menu
This commit is contained in:
Artem Baskal
2020-06-05 13:03:48 +03:00
parent 5ce98bd2a4
commit 4a81abb922
8 changed files with 89 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
client/src/components/Settings/Services/Form.js
View File

@@ -1,90 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { toggleAllServices } from '../../../helpers/helpers';
import { renderServiceField } from '../../../helpers/form';
import { SERVICES } from '../../../helpers/constants';
const Form = (props) => {
const {
handleSubmit,
change,
pristine,
submitting,
processing,
processingSet,
} = props;
return (
<form onSubmit={handleSubmit}>
<div className="form__group">
<div className="row mb-4">
<div className="col-6">
<button
type="button"
className="btn btn-secondary btn-block"
disabled={processing || processingSet}
onClick={() => toggleAllServices(SERVICES, change, true)}
>
<Trans>block_all</Trans>
</button>
</div>
<div className="col-6">
<button
type="button"
className="btn btn-secondary btn-block"
disabled={processing || processingSet}
onClick={() => toggleAllServices(SERVICES, change, false)}
>
<Trans>unblock_all</Trans>
</button>
</div>
</div>
<div className="services">
{SERVICES.map((service) => (
<Field
key={service.id}
icon={`service_${service.id}`}
name={`blocked_services.${service.id}`}
type="checkbox"
component={renderServiceField}
placeholder={service.name}
disabled={processing || processingSet}
/>
))}
</div>
</div>
<div className="btn-list">
<button
type="submit"
className="btn btn-success btn-standard btn-large"
disabled={submitting || pristine || processing || processingSet}
>
<Trans>save_btn</Trans>
</button>
</div>
</form>
);
};
Form.propTypes = {
pristine: PropTypes.bool.isRequired,
handleSubmit: PropTypes.func.isRequired,
change: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired,
processing: PropTypes.bool.isRequired,
processingSet: PropTypes.bool.isRequired,
t: PropTypes.func.isRequired,
};
export default flow([
withTranslation(),
reduxForm({
form: 'servicesForm',
enableReinitialize: true,
}),
])(Form);

69
client/src/components/Settings/Services/index.js
View File

@@ -1,69 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import Form from './Form';
import Card from '../../ui/Card';
class Services extends Component {
handleSubmit = (values) => {
let config = values;
if (values && values.blocked_services) {
const blocked_services = Object
.keys(values.blocked_services)
.filter((service) => values.blocked_services[service]);
config = blocked_services;
}
this.props.setBlockedServices(config);
};
getInitialDataForServices = (initial) => {
if (initial) {
const blocked = {};
initial.forEach((service) => {
blocked[service] = true;
});
return {
blocked_services: blocked,
};
}
return initial;
};
render() {
const { services, t } = this.props;
const initialData = this.getInitialDataForServices(services.list);
return (
<Card
title={t('blocked_services')}
subtitle={t('blocked_services_desc')}
bodyType="card-body box-body--settings"
>
<div className="form">
<Form
initialValues={{ ...initialData }}
processing={services.processing}
processingSet={services.processingSet}
onSubmit={this.handleSubmit}
/>
</div>
</Card>
);
}
}
Services.propTypes = {
t: PropTypes.func.isRequired,
services: PropTypes.object.isRequired,
setBlockedServices: PropTypes.func.isRequired,
};
export default withTranslation()(Services);

16
client/src/components/Settings/index.js
View File

@@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import Services from './Services';
import StatsConfig from './StatsConfig';
import LogsConfig from './LogsConfig';
import FiltersConfig from './FiltersConfig';
@@ -35,7 +34,6 @@ class Settings extends Component {
componentDidMount() {
this.props.initSettings(this.settings);
this.props.getBlockedServices();
this.props.getStatsConfig();
this.props.getLogsConfig();
this.props.getFilteringStatus();
@@ -63,8 +61,6 @@ class Settings extends Component {
render() {
const {
settings,
services,
setBlockedServices,
setStatsConfig,
resetStats,
stats,
@@ -77,7 +73,6 @@ class Settings extends Component {
} = this.props;
const isDataReady = !settings.processing
&& !services.processing
&& !stats.processingGetConfig
&& !queryLogs.processingGetConfig;
@@ -123,12 +118,6 @@ class Settings extends Component {
resetStats={resetStats}
/>
</div>
<div className="col-md-12">
<Services
services={services}
setBlockedServices={setBlockedServices}
/>
</div>
</div>
</div>
)}
@@ -147,14 +136,9 @@ Settings.propTypes = {
setFiltersConfig: PropTypes.func.isRequired,
getFilteringStatus: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
getBlockedServices: PropTypes.func,
getLogsConfig: PropTypes.func,
setBlockedServices: PropTypes.func,
setLogsConfig: PropTypes.func,
clearLogs: PropTypes.func,
services: PropTypes.shape({
processing: PropTypes.bool,
}),
stats: PropTypes.shape({
processingGetConfig: PropTypes.bool,
interval: PropTypes.number,