import React, { Component } from 'react';
import fire from './config/Fire';

import './App.css';

class Conversations extends Component{
    constructor(props){
        super(props);
        this.state = {
            thisUser: props.username
        }
    }

    loadConversations = () =>{
        let collectionRef = fire.firestore().collection('messages');
        collectionRef.get().then(function(collection){
            collection.forEach(function(doc){
                console.log(doc.id, " => ", doc.data());
            })

        }).catch((error)=>{
            let errorMessage = error;
            console.log(errorMessage);
        })
    }


    render(){
        return(
            <div>
                <button type = "submit" onClick = {this.loadConversations}>Load</button>
            </div>
        )
    }
}

class Messages extends Component{
    constructor(props){
        super(props);
        this.state = {
            msg: "",
            otherUser: "",
            thisUser: props.username
        }
    }

    loadMessages = (other) =>{

    }

    writeMessage = (other) =>{

    }

    handleChange = (e) =>{
        this.setState({[e.target.name]: e.target.value});
    }

    render(){
        return(
            //html
            <div>

                <form>
                    <label>Type a message:
                        <input type = "text" name = "msg" id= "msg" value = {this.state.msg} onChange = {this.handleChange}/>
                        <button type = "submit" onClick = {this.loadMessages}>Send</button>
                    </label>

                </form>


            </div>

        )
    }



}

export default Conversations;