import React, { Component } from 'react';
import { database, storage } from '../modules/Firebase';
import Post from '../components/Layouts/Post';


export default class Feed extends Component {

    constructor(props) {

        super(props);
        this.state = { posts: [] };

    }

    componentDidMount( ) {

        database.ref('posts').orderByKey().limitToLast(100).on('child_added', snapshot => {

            let content = null;
            storage.ref().child(snapshot.val().content).getDownloadURL().then(url => content = url ); // setting value

            console.log('content', content); // returns initial value, in my case, null. why?

            let post = {

                key: snapshot.key,
                author: snapshot.val().author,
                uid: snapshot.val().uid,
                content,
                description: snapshot.val().description,
                date: snapshot.val().date

            };

            this.setState({ posts: [post].concat(this.state.posts) });

        });
    }

    render( ) {

        console.log('state',this.state.posts);

        return (
            <div className="container">
                <div className="col-md-4 col-md-offset-4 mt-md">
                    {this.state.posts.map( post => <Post key={post.key} author={post.author} uid={post.uid} content={post.content} description={post.description} date={post.date} /> )}
               </div>
            </div>
        );
    }
}