Fix. Settings. React components are translate-ready now. (#426)

* Fix. Settings. React components refactored to the functional-based components. * Fix. Settings. React components is translate-ready now. * Fix. Code. React bundle rebuild.
CleanTalk · Oct 8, 2024 · e5f72ae · e5f72ae
1 parent 6eb93e6
commit e5f72ae
Show file tree

Hide file tree

Showing 7 changed files with 595 additions and 298 deletions.
diff --git a/inc/spbc-admin.php b/inc/spbc-admin.php
@@ -416,6 +416,7 @@ function spbc_enqueue_scripts($hook)
     wp_enqueue_script('spbc-common-js', SPBC_PATH . '/js/spbc-common.min.js', array('jquery'), SPBC_VERSION, false);
     wp_enqueue_script('spbc-admin-js', SPBC_PATH . '/js/spbc-admin.min.js', array('jquery'), SPBC_VERSION, false);
     wp_enqueue_script('spbc-react-bundle-js', SPBC_PATH . '/js/spbc-react-bundle.js', array('wp-i18n'), SPBC_VERSION, ['in_footer']);
+    wp_set_script_translations('spbc-react-bundle-js', 'security-malware-firewall');
 
     $vulnerability_show_install = (
         isset($spbc->settings['vulnerability_check__test_before_install']) &&

diff --git a/js/spbc-react-bundle.js b/js/spbc-react-bundle.js
diff --git a/js/src/react/components/SpbctAboutCT.js b/js/src/react/components/SpbctAboutCT.js
@@ -1,50 +1,48 @@
 import React from 'react';
+import {useI18n} from '@wordpress/react-i18n';
 
-class SpbctAboutCT extends React.Component{
-    constructor(props) {
-        super(props);
-        this.state = {date: new Date()};
-    }
+export function SpbctAboutCT(props) {
 
-    render() {
-        const data = this.props.data;
-        return (
-            <div className="spbc_page_header_info__about_block">
-                <label htmlFor="spbc_page_header_about_block" className="spbc_page_header_info__block_label">About CleanTalk</label>
-                <div id="spbc_page_header_about_block" className="spbc_page_header_info__block_body"
-                    style={{height: "100%"}}>
-                    <div className="spbc_page_header_info__about_block__divider">
-                        <div className="spbc_page_header_info__block_row"
-                            dangerouslySetInnerHTML={{__html: data.supportLink}}></div>
-                        <div className="spbc_page_header_info__block_row"
-                            dangerouslySetInnerHTML={{__html: data.homepage}}>
-                        </div>
-                        <div className="spbc_page_header_info__block_row"
-                            dangerouslySetInnerHTML={{__html: data.malwareCleaning}}>
-                        </div>
-                        <div className="spbc_page_header_info__block_row"
-                            dangerouslySetInnerHTML={{__html: data.gdprComplianceLink}}>
-                        </div>
+    const {__} = useI18n();
+
+    // @ToDO Need to set state 'data'?
+    //this.state = {date: new Date()};
+    const data = props.data;
+
+    return (
+        <div className="spbc_page_header_info__about_block">
+            <label htmlFor="spbc_page_header_about_block" className="spbc_page_header_info__block_label">{__('About CleanTalk', 'security-malware-firewall')}</label>
+            <div id="spbc_page_header_about_block" className="spbc_page_header_info__block_body"
+                style={{height: "100%"}}>
+                <div className="spbc_page_header_info__about_block__divider">
+                    <div className="spbc_page_header_info__block_row"
+                        dangerouslySetInnerHTML={{__html: data.supportLink}}></div>
+                    <div className="spbc_page_header_info__block_row"
+                        dangerouslySetInnerHTML={{__html: data.homepage}}>
+                    </div>
+                    <div className="spbc_page_header_info__block_row"
+                        dangerouslySetInnerHTML={{__html: data.malwareCleaning}}>
+                    </div>
+                    <div className="spbc_page_header_info__block_row"
+                        dangerouslySetInnerHTML={{__html: data.gdprComplianceLink}}>
                     </div>
-                    <div className="spbc_page_header_info__about_block__divider">
-                        <div className="spbc_page_header_info__block_row"
-                            dangerouslySetInnerHTML={{__html: data.trademark}}>
-                        </div>
+                </div>
+                <div className="spbc_page_header_info__about_block__divider">
+                    <div className="spbc_page_header_info__block_row"
+                        dangerouslySetInnerHTML={{__html: data.trademark}}>
                     </div>
-                    <div className="spbc_page_header_info__about_block__divider">
-                        <div className="spbc_page_header_info__block_row"
-                            dangerouslySetInnerHTML={{__html: data.feedback}}>
-                        </div>
+                </div>
+                <div className="spbc_page_header_info__about_block__divider">
+                    <div className="spbc_page_header_info__block_row"
+                        dangerouslySetInnerHTML={{__html: data.feedback}}>
                     </div>
-                    <div className="spbc_page_header_info__about_block__divider">
-                        <div className="spbc_page_header_info__block_row"
-                            dangerouslySetInnerHTML={{__html: data.premium}}>
-                        </div>
+                </div>
+                <div className="spbc_page_header_info__about_block__divider">
+                    <div className="spbc_page_header_info__block_row"
+                        dangerouslySetInnerHTML={{__html: data.premium}}>
                     </div>
                 </div>
             </div>
-        );
-    }
-}
-
-export default SpbctAboutCT;
+        </div>
+    );
+}