From 9863c1f1acf2a1977bdc825b11bc5301de915619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ho=C3=A0ng=20Rio?= <donghoang.nguyen@outlook.com>
Date: Mon, 29 Oct 2018 11:58:25 +0700
Subject: [PATCH] Fix i18n in setting page not update when click change
 language button at footer

---
 client/src/components/Settings/index.js | 16 ++++++++--------
 client/src/components/ui/Checkbox.js    |  9 ++++++---
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js
index fd0588b1..363cf578 100644
--- a/client/src/components/Settings/index.js
+++ b/client/src/components/Settings/index.js
@@ -12,23 +12,23 @@ class Settings extends Component {
     settings = {
         filtering: {
             enabled: false,
-            title: this.props.t('Block domains using filters and hosts files'),
-            subtitle: this.props.t('You can setup blocking rules in the <a href="#filters">Filters</a> settings.'),
+            title: 'Block domains using filters and hosts files',
+            subtitle: 'You can setup blocking rules in the <a href="#filters">Filters</a> settings.',
         },
         safebrowsing: {
             enabled: false,
-            title: this.props.t('Use AdGuard browsing security web service'),
-            subtitle: this.props.t('AdGuard Home will check if domain is blacklisted by the browsing security web service. It will use privacy-friendly lookup API to perform the check: only a short prefix of the domain name SHA256 hash is sent to the server.'),
+            title: 'Use AdGuard browsing security web service',
+            subtitle: 'AdGuard Home will check if domain is blacklisted by the browsing security web service. It will use privacy-friendly lookup API to perform the check: only a short prefix of the domain name SHA256 hash is sent to the server.',
         },
         parental: {
             enabled: false,
-            title: this.props.t('Use AdGuard parental control web service'),
-            subtitle: this.props.t('AdGuard Home will check if domain contains adult materials. It uses the same privacy-friendly API as the browsing security web service.'),
+            title: 'Use AdGuard parental control web service',
+            subtitle: 'AdGuard Home will check if domain contains adult materials. It uses the same privacy-friendly API as the browsing security web service.',
         },
         safesearch: {
             enabled: false,
-            title: this.props.t('Enforce safe search'),
-            subtitle: this.props.t('AdGuard Home can enforce safe search in the following search engines: Google, Bing, Yandex.'),
+            title: 'Enforce safe search',
+            subtitle: 'AdGuard Home can enforce safe search in the following search engines: Google, Bing, Yandex.',
         },
     };
 
diff --git a/client/src/components/ui/Checkbox.js b/client/src/components/ui/Checkbox.js
index e37ccc8e..79051457 100644
--- a/client/src/components/ui/Checkbox.js
+++ b/client/src/components/ui/Checkbox.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { withNamespaces } from 'react-i18next';
 
 import './Checkbox.css';
 
@@ -10,6 +11,7 @@ class Checkbox extends Component {
             subtitle,
             enabled,
             handleChange,
+            t,
         } = this.props;
         return (
             <div className="form__group">
@@ -18,8 +20,8 @@ class Checkbox extends Component {
                 <input type="checkbox" className="checkbox__input" onChange={handleChange} checked={enabled}/>
                 <span className="checkbox__label">
                     <span className="checkbox__label-text">
-                    <span className="checkbox__label-title">{title}</span>
-                    <span className="checkbox__label-subtitle" dangerouslySetInnerHTML={{ __html: subtitle }}/>
+                    <span className="checkbox__label-title">{ t(title) }</span>
+                    <span className="checkbox__label-subtitle" dangerouslySetInnerHTML={{ __html: t(subtitle) }}/>
                     </span>
                 </span>
                 </label>
@@ -33,6 +35,7 @@ Checkbox.propTypes = {
     subtitle: PropTypes.string.isRequired,
     enabled: PropTypes.bool.isRequired,
     handleChange: PropTypes.func.isRequired,
+    t: PropTypes.func,
 };
 
-export default Checkbox;
+export default withNamespaces()(Checkbox);