import React, {Component} from 'react';
import {Redirect} from 'react-router-dom';
import LoginForm from "./LoginForm";


class HomePage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            news: [],
            news_topics: [],
            topics: [],
            isLoaded: false
        };

    }

    componentDidMount() {
        Promise.all([fetch('api/news'), fetch('api/newsTopic'), fetch('api/topic')])

            .then(([res1, res2, res3]) =>{
                return Promise.all([res1.json(), res2.json(), res3.json()])
            })

            .then(([res1, res2, res3]) => {
                this.setState({
                    isLoaded: true,
                    news: res1,
                    news_topics: res2,
                    topics: res3
                })
            }) ;

    }

    render() {
        var {isLoaded, news, news_topics, topics} = this.state;

        if (!isLoaded) {
            return <div>Loading...</div>
        } else {
            const show_news=[];
            //var i = -1;
            return (
                <ul>
                    {news.data.reverse().map((value) => {
                        //i++;
                        //console.log(i);
                        show_news.push(value);

                        news_topics.data.reverse().map((value2) => {

                            if(value.id == value2.news_id) {
                                //show_news.topicos = value2.topic_id;
                                topics.data.reverse().map((value3) => {
                                    if(value2.topic_id == value3.id){
                                        //{console.log(show_news.indexOf(i))}
                                        show_news.push(value3.topic);

                                    }
                                })

                            }
                        })

                    })}
                    {console.log(show_news)}

                    {show_news.map((value4) => {
                            return (
                                <li key={value4.id}>
                                    <p> {value4.title}</p>
                                    <p> {value4.image}</p>
                                    <p> {value4.url}</p>
                                    <p> {value4.subtitle}</p>
                                </li>
                            )

                        })
                         }

                </ul>
            )
        }
        //}
    }

}


export default HomePage;