news

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import Header from "../components/header/header";
import axios from 'axios';


// let newarr = [];

class News extends Component {


    constructor(props) {


        super();
        this.state = {
            item: [],
            NavPageCount: '',
            curPage: 1
        };

    }

    componentDidMount() {

        axios({

            method: 'post',
            url: 'http://военгарант.рф/api/news.php',
            data: 'PAGE=' + this.state.curPage,
            responseType: 'json',


        })
            .then(res => {
                const news = res.data.ITEM.map(res => res);


                this.setState(({item}) => ({item: item.concat(news)}));
                this.setState({NavPageCount: res.data.RES.NavPageCount});

                console.log('ok');
                console.log(res);
                // console.log(item);


            })
            .catch(function (er) {

                console.log('error');
                console.log(er);
            });

    }



    newsItem() {

        return (


            <div>
                {this.state.item.map((item, i) =>
                    <div key={i} className="news-item">
                        <div className="news-item__pic">
                            <img src={`http://военгарант.рф${item.IMAGE.src}`} alt=""/>
                        </div>
                        <div className="news-item-content">
                            <span className="news-item__category blue-font">{item.PROPERTIES.TEMA_NOVOSTI.VALUE}</span>
                            <span className="news-item__date">{`${item.PROPERTIES.DATA_NOVOSTI.VALUE}`}</span>
                            <a href="" className="l-title news-item__l-title">{`${item.NAME}`}</a>
                            <div className="news-item-desc">
                                {item.NEWS_DESC.TEXT}
                            </div>
                        </div>
                    </div>
                )}


            </div>



        );
    }


    countFunc() {


        this.setState(({curPage}) => ({curPage: this.state.curPage + 1}));

        this.componentDidMount();
        console.log(this.state.curPage);


    }

    ButtonMore() {


        if (this.state.NavPageCount > this.state.curPage) {

            return (

                <div className="for-center-btn">
                <span
                    onClick={() => this.countFunc()}
                    data-item={this.state.NavPageCount}
                    className="btn-more more-news">
                    <div className="btn-more__icon"/>
                    <span>Показать еще</span>
                </span>


                </div>



            );


        }


    }


    render() {


        return (
            <div>

                <Header headTitle={"Новости"}/>

                <div className="news">
                    <div className="container">
                        {this.newsItem()}
                        {this.ButtonMore()}

                    </div>
                </div>


            </div>

        );
    }


}


export default withRouter(News);