162 lines
4.3 KiB
JavaScript
162 lines
4.3 KiB
JavaScript
// IMPORT MODULES
|
|
import React, { useState, useEffect } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import axios from "axios";
|
|
import i18n from '../i18n';
|
|
import '../i18n';
|
|
import { withTranslation } from 'react-i18next';
|
|
// IMPORT COMPONENTS
|
|
import Breadcrumb from "../components/Global/Breadcrumb";
|
|
|
|
// TAB_1
|
|
// import RightArrowBlue from "../svg/rightArrowBlue.svg";
|
|
// import TabIMG1 from "../img/tabImg_1.jpg";
|
|
|
|
|
|
class News extends React.Component {
|
|
_isMounted = false;
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
items: [],
|
|
DataisLoaded: false
|
|
};
|
|
}
|
|
// useEffect(() => {
|
|
// window.scrollTo(0, 0);
|
|
// }, []);
|
|
// STATE
|
|
// const [pageIndex, setPageIndex] = useState(1);
|
|
|
|
componentDidMount() {
|
|
this.getTodos();
|
|
}
|
|
|
|
async getTodos() {
|
|
this._isMounted = true;
|
|
await axios.get('http://127.0.0.1:8000/api/v1/categories/2')
|
|
.then(res => {
|
|
const items = res.data;
|
|
if (this._isMounted) {
|
|
this.setState({
|
|
items: items,
|
|
DataisLoaded: true
|
|
});
|
|
this._isMounted = false;
|
|
console.log(this.state.items['data'][0]['posts']);
|
|
|
|
}
|
|
|
|
})
|
|
// console.log('salam');
|
|
// console.log(this.state.items['data']);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
console.log("novosti gutardy");
|
|
}
|
|
|
|
render() {
|
|
const { DataisLoaded, items } = this.state;
|
|
if (!DataisLoaded) return <div>
|
|
<h1> Pleses wait some time.... </h1> </div> ;
|
|
|
|
if(i18n.language == 'en')
|
|
{
|
|
this.componentDidMount();
|
|
console.log('salam-en');
|
|
|
|
}
|
|
else
|
|
{
|
|
this.componentDidMount();
|
|
console.log('salam-ru');
|
|
}
|
|
|
|
|
|
// console.log(this.state.item['data']);
|
|
return (
|
|
<section className="news">
|
|
<Breadcrumb path_1="Новости" currentUrl="./news" />;
|
|
<div className="container">
|
|
<div className="news-inner">
|
|
<div className="news-tab">
|
|
<div className="tab-header">
|
|
<h4 className="tab-header-text" id="tab-header-text">
|
|
Новости
|
|
</h4>
|
|
<div className="tab-header-line"></div>
|
|
</div>
|
|
<div className="tab-wrapper">
|
|
|
|
|
|
|
|
{items['data'][0]['posts'].map((item) => (
|
|
|
|
|
|
<div className="tab" key={item.id}>
|
|
<div className="tab-top">
|
|
<div>
|
|
<img src={ item['featured_images'][0]['path'] } alt="Turkmen carpets" />
|
|
</div>
|
|
</div>
|
|
<div className="tab-bottom">
|
|
<span className="tab-date">30.05.2021</span>
|
|
<h2 className="tab-name">
|
|
{/* {item.id} */}
|
|
{
|
|
(() => {
|
|
if(i18n.language == 'en')
|
|
{
|
|
return (
|
|
JSON.parse(item['translations'][0]['attribute_data']).title
|
|
)
|
|
}
|
|
else if (i18n.language == 'ru')
|
|
{
|
|
return (
|
|
item.title
|
|
)
|
|
}
|
|
else {
|
|
return (
|
|
JSON.parse(item['translations'][1]['attribute_data']).title
|
|
)
|
|
}
|
|
})
|
|
}
|
|
|
|
</h2>
|
|
<div className="tab-header-link tab-link">
|
|
<Link to={`/blog/${item.slug}`}>
|
|
<span>Подробнее</span>
|
|
<div>
|
|
<img src={ item.featured_images.path } alt="RIGHTARROW" />
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
// )
|
|
|
|
|
|
|
|
|
|
))}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default withTranslation()(News);
|
|
|
|
// { JSON.parse(item['translations'][0]['attribute_data']).title }
|
|
// elem.innerHTML= JSON.parse(this.state.items['data'][0]['posts'][0]['translations'][0]['attribute_data']).title;
|