TPS
/
etalon_backend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

api lang worked

This commit is contained in:
gerchek 2022-01-07 14:35:24 +05:00
parent 2d122560d8
commit b96290f32c
10 changed files with 514 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
themes/tps react/package.json
View File

@ -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",

384
themes/tps react/public/bundle.js
View File

File diff suppressed because one or more lines are too long

14
themes/tps react/src/components/Global/Nav.js
View File

@ -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" />

33
themes/tps react/src/i18n.js Normal file
View File

@ -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;

1
themes/tps react/src/index.js
View File

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

3
themes/tps react/src/locales/en/translationEN.json Normal file
View File

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

3
themes/tps react/src/locales/ru/translationRU.json Normal file
View File

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

9
themes/tps react/src/pages/Main.js
View File

@ -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);

91
themes/tps react/src/pages/Novelty.js
View File

@ -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();
// console.log(this.state.items);
// this.mounted = true;
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
});
})
// console.log(this.state.items);
let elem = document.querySelector('.novelty-text');
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);

2
themes/tps react/src/styles/_novelty.scss
View File

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