api lang worked

themes/tps react/package.json

@@ -8,10 +8,13 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
     "file-loader": "^6.2.0",
+    "i18next": "^21.6.5",
+    "i18next-browser-languagedetector": "^6.1.2",
     "node-sass": "^6.0.1",
     "postcss-loader": "^6.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-i18next": "^11.15.3",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

themes/tps react/src/components/Global/Nav.js

@@ -1,6 +1,8 @@
 // IMPORT MODULES
 import React, { useRef } from "react";
 import { Link } from "react-router-dom";
+import i18n from '../../i18n';
+import { withNamespaces  } from 'react-i18next';
 
 // IMPORT IMAGES
 import MainLogo from "../../svg/mainLogo.svg";
@@ -10,7 +12,11 @@ import flagOfRussia from "../../svg/flagOfRussia.svg";
 import flagOfUK from "../../svg/flagOfUK.svg";
 import flagOfTkm from "../../svg/flagOfTkm.svg";
 
-const Nav = () => {
+function  Nav  ({ t })  {
+  const changeLanguage = (lng) => {
+    i18n.changeLanguage(lng);
+    console.log(lng);
+  }
   // REF
   const navBtn = useRef();
   const mobileNavExpanded = useRef();
@@ -113,19 +119,19 @@ const Nav = () => {
               <li className="nav-link nav-select nav-lang">
                 <div className="nav-dropdown nav-dropdown-shifted">
                   <ul className="nav-dropdown-content">
-                    <li className="dropdown-content">
+                    <li className="dropdown-content" onClick={() => changeLanguage('ru')}>
                       <h4>Русский</h4>
                       <div className="flag-wrapper">
                         <img src={flagOfRussia} alt="RUSSIAN" />
                       </div>
                     </li>
-                    <li className="dropdown-content">
+                    <li className="dropdown-content" onClick={() => changeLanguage('tm')}>
                       <h4>Türkmençe</h4>
                       <div className="flag-wrapper">
                         <img src={flagOfTkm} alt="TURKMEN" />
                       </div>
                     </li>
-                    <li className="dropdown-content">
+                    <li className="dropdown-content" onClick={() => changeLanguage('en')}>
                       <h4>English</h4>
                       <div className="flag-wrapper">
                         <img src={flagOfUK} alt="ENGLISH" />

themes/tps react/src/i18n.js

@@ -0,0 +1,33 @@
+import i18n from "i18next";
+import { initReactI18next} from "react-i18next";
+
+
+import translationEN from "./locales/en/translationEN.json"; 
+import translationRU from "./locales/ru/translationRU.json";
+
+
+
+const resources = {
+    en: {
+        translation: translationEN
+    },
+    ru: {
+        translation: translationRU
+    }
+};
+
+
+i18n.use(initReactI18next).init({
+    resources,
+    lng: 'en', 
+
+    keySeparator: false,
+
+    interpolation: {
+        escapeValue: false
+    }
+});
+
+export default i18n;
+
+

themes/tps react/src/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+import './i18n';
 import ReactDOM from "react-dom";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";

themes/tps react/src/locales/en/translationEN.json

@@ -0,0 +1,3 @@
+{
+    "test":"test_en"
+}

themes/tps react/src/locales/ru/translationRU.json

@@ -0,0 +1,3 @@
+{
+    "test":"test_ru"
+}

themes/tps react/src/pages/Main.js

@@ -1,6 +1,8 @@
 // IMPORT MODULES
 import React from "react";
 import axios from "axios";
+import '../i18n';
+import { withTranslation } from 'react-i18next';
 
 // IMPORT COMPONENTS
 import NewsTab from "../components/Main/NewsTab";
@@ -54,7 +56,7 @@ class Main extends React.Component {
     }
 
   render() {
-
+    const { t } = this.props;
     const { DataisLoaded, items } = this.state;
       if (!DataisLoaded) return <div>
           <h1> Pleses wait some time.... </h1> </div> ;
@@ -89,7 +91,8 @@ class Main extends React.Component {
           <div className="second-slider">
             <div className="tab-header">
               <h4 className="tab-header-text" id="tab-header-text">
-                Объявления
+                {/* Объявления */}
+                {t('test')}
               </h4>
               <div className="tab-header-line"></div>
             </div>
@@ -135,4 +138,4 @@ class Main extends React.Component {
   }
 };
 
-export default Main;
+export default withTranslation()(Main);

themes/tps react/src/pages/Novelty.js

@@ -1,6 +1,9 @@
 // IMPORT MODULES
 import React, { useEffect } from "react";
 import axios from "axios";
+import i18n from '../i18n';
+import '../i18n';
+import { withTranslation } from 'react-i18next';
 
 // IMPORT COMPONENTS
 import Breadcrumb from "../components/Global/Breadcrumb";
@@ -9,45 +12,102 @@ import Breadcrumb from "../components/Global/Breadcrumb";
 import NoveltyIMG from "../img/noveltyImg.jpg"; 
 
 class Novelty extends React.Component {
+  
+
   constructor(props) {
     super(props);
-    // let { slug } = useParams();
+    
-    // const { slug } = this.props.match.params;
 
     this.state = {
         items: [],
-        DataisLoaded: false
+        DataisLoaded: false,
     };
 
   }
 
   componentDidMount() {
-    this.getTodos();
+    // this.mounted = true;
-    // console.log(this.state.items);
+      if(i18n.language == 'en')
+        {
+          this.getTodosEn();
+          
+        }
+        else
+        {
+          
+          this.getTodosRu();
         }
     
-  async getTodos() {
+  }
+
+  // componentWillUnmount(){
+  //   this.getTodosEn();
+  //   this.getTodosRu();
+  // }
+  
+
+   getTodosEn() {
     axios.get('http://127.0.0.1:8000/api/v1/posts/'+this.props.match.params.slug)
-      .then(res => {
+      .then(res => 
+        {
         const items = res.data;
         this.setState({
                         items: items,
                         DataisLoaded: true
                     });
-      })
+        let elem = document.querySelector('.novelty-text');
-      // console.log(this.state.items);
+        
+        if(elem)
+        {
+          elem.innerHTML= JSON.parse(this.state.items['data'][0][0]['translations'][0]['attribute_data']).content;
         }
     
-  // useEffect(() => {
+        }
-  //   window.scrollTo(0, 0);
+      )
-  // }, []);
+  }
+
+   getTodosRu() {
+      axios.get('http://127.0.0.1:8000/api/v1/posts/'+this.props.match.params.slug)
+      .then(res => 
+        {
+        const items = res.data;
+        this.setState({
+                        items: items,
+                        DataisLoaded: true
+                    });
+        let elem = document.querySelector('.novelty-text');
+        
+        if(elem)
+        {
+          elem.innerHTML= this.state.items['data'][0][0]['content'];
+        }
+        
+        }
+      )
+  }
+
+  
 
   render() {
     // console.log(this.state.items);
     // console.log(this.state.items.data);
+    // console.log(this.state.test+'salam');
+    const { t } = this.props;
     const { DataisLoaded, items } = this.state;
       if (!DataisLoaded) return <div>
           <h1> Pleses wait some time.... </h1> </div> ;
+
+        if(i18n.language == 'en')
+        {
+          this.componentDidMount();
+          
+        }
+        else
+        {
+         
+          this.componentDidMount();
+        }
+
   return (
     // {items['data'][0].map((item) => ( 
     <section className="novelty"> 
@@ -60,7 +120,6 @@ class Novelty extends React.Component {
       <div className="container">
 
       
-      
           {items['data'][0].map((item) => ( 
         <div className="novelty-inner" key={item.id}>
           <div className="novelty-head">
@@ -68,11 +127,11 @@ class Novelty extends React.Component {
               <img src={ item['featured_images'][0]['path'] } alt="Novelty" />
             </div>
             <h4 className="novelty-title">
-           { item.title }
+           { item.title }{t('test')}
             </h4>
           </div>
           <div className="novelty-text">
-            { item.created_at }
+            {/* { item.content } */}
           </div>
         </div>
        ))} 
@@ -82,4 +141,4 @@ class Novelty extends React.Component {
   }
 };
 
-export default Novelty;
+export default withTranslation()(Novelty);

themes/tps react/src/styles/_novelty.scss

@@ -20,7 +20,7 @@
 
 .novelty-img {
   max-width: 100rem;
-  max-height: 56.6rem;
+  max-height: unset;
 
   img {
     width: 100%;