client: move to new safe search api

AdguardTeam · Mar 21, 2023 · 95f9fd3 · 95f9fd3
1 parent ac823a9
commit 95f9fd3
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 34 deletions.
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
@@ -167,6 +167,7 @@
     "enabled_parental_toast": "Enabled Parental Control",
     "disabled_safe_search_toast": "Disabled Safe Search",
     "enabled_save_search_toast": "Enabled Safe Search",
+    "updated_save_search_toast": "Safe Search settings updated",
     "enabled_table_header": "Enabled",
     "name_table_header": "Name",
     "list_url_table_header": "List URL",

diff --git a/client/src/__locales/ru.json b/client/src/__locales/ru.json
@@ -167,6 +167,7 @@
     "enabled_parental_toast": "Родительский контроль вкл.",
     "disabled_safe_search_toast": "Безопасный поиск выкл.",
     "enabled_save_search_toast": "Безопасный поиск вкл.",
+    "updated_save_search_toast": "Настройки Безопасного поиска обновлены",
     "enabled_table_header": "Вкл.",
     "name_table_header": "Имя",
     "list_url_table_header": "URL-адрес списка",

diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -24,6 +24,12 @@ import { getFilteringStatus, setRules } from './filtering';
 export const toggleSettingStatus = createAction('SETTING_STATUS_TOGGLE');
 export const showSettingsFailure = createAction('SETTINGS_FAILURE_SHOW');
 
+/**
+ *
+ * @param {*} settingKey = SETTINGS_NAMES
+ * @param {*} status: boolean | SafeSearchConfig
+ * @returns
+ */
 export const toggleSetting = (settingKey, status) => async (dispatch) => {
     let successMessage = '';
     try {
@@ -49,14 +55,9 @@ export const toggleSetting = (settingKey, status) => async (dispatch) => {
                 dispatch(toggleSettingStatus({ settingKey }));
                 break;
             case SETTINGS_NAMES.safesearch:
-                if (status) {
-                    successMessage = 'disabled_safe_search_toast';
-                    await apiClient.disableSafesearch();
-                } else {
-                    successMessage = 'enabled_save_search_toast';
-                    await apiClient.enableSafesearch();
-                }
-                dispatch(toggleSettingStatus({ settingKey }));
+                successMessage = 'updated_save_search_toast';
+                await apiClient.updateSafesearch(status);
+                dispatch(toggleSettingStatus({ settingKey, value: status }));
                 break;
             default:
                 break;
@@ -80,7 +81,6 @@ export const initSettings = (settingsList) => async (dispatch) => {
         const {
             safebrowsing,
             parental,
-            safesearch,
         } = settingsList;
         const newSettingsList = {
             safebrowsing: {
@@ -92,8 +92,7 @@ export const initSettings = (settingsList) => async (dispatch) => {
                 enabled: parentalStatus.enabled,
             },
             safesearch: {
-                ...safesearch,
-                enabled: safesearchStatus.enabled,
+                ...safesearchStatus,
             },
         };
         dispatch(initSettingsSuccess({ settingsList: newSettingsList }));

diff --git a/client/src/api/Api.js b/client/src/api/Api.js
@@ -208,24 +208,40 @@ class Api {
     // Safesearch
     SAFESEARCH_STATUS = { path: 'safesearch/status', method: 'GET' };
 
-    SAFESEARCH_ENABLE = { path: 'safesearch/enable', method: 'POST' };
-
-    SAFESEARCH_DISABLE = { path: 'safesearch/disable', method: 'POST' };
+    SAFESEARCH_UPDATE = { path: 'safesearch/settings', method: 'PUT' };
 
     getSafesearchStatus() {
         const { path, method } = this.SAFESEARCH_STATUS;
         return this.makeRequest(path, method);
     }
 
-    enableSafesearch() {
-        const { path, method } = this.SAFESEARCH_ENABLE;
-        return this.makeRequest(path, method);
-    }
-
-    disableSafesearch() {
-        const { path, method } = this.SAFESEARCH_DISABLE;
-        return this.makeRequest(path, method);
-    }
+    /**
+     * interface SafeSearchConfig {
+        "enabled": boolean,
+        "bing": boolean,
+        "duckduckgo": boolean,
+        "google": boolean,
+        "pixabay": boolean,
+        "yandex": boolean,
+        "youtube": boolean
+     * }
+     * @param {*} data - SafeSearchConfig
+     * @returns 200 ok
+     */
+    updateSafesearch(data) {
+        const { path, method } = this.SAFESEARCH_UPDATE;
+        return this.makeRequest(path, method, { data });
+    }
+
+    // enableSafesearch() {
+    //     const { path, method } = this.SAFESEARCH_ENABLE;
+    //     return this.makeRequest(path, method);
+    // }
+
+    // disableSafesearch() {
+    //     const { path, method } = this.SAFESEARCH_DISABLE;
+    //     return this.makeRequest(path, method);
+    // }
 
     // Language
 

diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js
@@ -10,7 +10,7 @@ import Checkbox from '../ui/Checkbox';
 import Loading from '../ui/Loading';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
-import { getObjectKeysSorted } from '../../helpers/helpers';
+import { getObjectKeysSorted, captitalizeWords } from '../../helpers/helpers';
 import './Settings.css';
 
 const ORDER_KEY = 'order';
@@ -28,12 +28,6 @@ const SETTINGS = {
         subtitle: 'use_adguard_parental_hint',
         [ORDER_KEY]: 1,
     },
-    safesearch: {
-        enabled: false,
-        title: 'enforce_safe_search',
-        subtitle: 'enforce_save_search_hint',
-        [ORDER_KEY]: 2,
-    },
 };
 
 class Settings extends Component {
@@ -44,7 +38,7 @@ class Settings extends Component {
         this.props.getFilteringStatus();
     }
 
-    renderSettings = (settings) => getObjectKeysSorted(settings, ORDER_KEY)
+    renderSettings = (settings) => getObjectKeysSorted(SETTINGS, ORDER_KEY)
         .map((key) => {
             const setting = settings[key];
             const { enabled } = setting;
@@ -55,6 +49,35 @@ class Settings extends Component {
             />;
         });
 
+    renderSafeSearch = () => {
+        const { settings: { settingsList: { safesearch } } } = this.props;
+        const { enabled } = safesearch || {};
+        const searches = { ...(safesearch || {}) };
+        delete searches.enabled;
+        return (
+            <>
+                <Checkbox
+                    enabled={enabled}
+                    title='enforce_safe_search'
+                    subtitle='enforce_save_search_hint'
+                    handleChange={({ target: { checked: enabled } }) => this.props.toggleSetting('safesearch', { ...safesearch, enabled })}
+                />
+                <div className='form__group--inner'>
+                    {Object.keys(searches).map((searchKey) => (
+                        <Checkbox
+                            key={searchKey}
+                            enabled={searches[searchKey]}
+                            title={captitalizeWords(searchKey)}
+                            subtitle=''
+                            disabled={!safesearch.enabled}
+                            handleChange={({ target: { checked } }) => this.props.toggleSetting('safesearch', { ...safesearch, [searchKey]: checked })}
+                        />
+                    ))}
+                </div>
+            </>
+        );
+    };
+
     render() {
         const {
             settings,
@@ -92,6 +115,7 @@ class Settings extends Component {
                                             setFiltersConfig={setFiltersConfig}
                                         />
                                         {this.renderSettings(settings.settingsList)}
+                                        {this.renderSafeSearch()}
                                     </div>
                                 </Card>
                             </div>

diff --git a/client/src/components/ui/Checkbox.js b/client/src/components/ui/Checkbox.js
@@ -11,13 +11,14 @@ class Checkbox extends Component {
             subtitle,
             enabled,
             handleChange,
+            disabled,
             t,
         } = this.props;
         return (
             <div className="form__group form__group--checkbox">
                 <label className="checkbox checkbox--settings">
                 <span className="checkbox__marker"/>
-                <input type="checkbox" className="checkbox__input" onChange={handleChange} checked={enabled}/>
+                <input type="checkbox" className="checkbox__input" onChange={handleChange} checked={enabled} disabled={disabled}/>
                 <span className="checkbox__label">
                     <span className="checkbox__label-text">
                     <span className="checkbox__label-title">{ t(title) }</span>
@@ -35,6 +36,7 @@ Checkbox.propTypes = {
     subtitle: PropTypes.string.isRequired,
     enabled: PropTypes.bool.isRequired,
     handleChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
     t: PropTypes.func,
 };
 

diff --git a/client/src/reducers/settings.js b/client/src/reducers/settings.js
@@ -22,11 +22,11 @@ const settings = handleActions(
         },
         [actions.toggleSettingStatus]: (state, { payload }) => {
             const { settingsList } = state;
-            const { settingKey } = payload;
+            const { settingKey, value } = payload;
 
             const setting = settingsList[settingKey];
 
-            const newSetting = {
+            const newSetting = value || {
                 ...setting,
                 enabled: !setting.enabled,
             };