lab3

import React from 'react'
import firebase from 'firebase'

var myFirebase = firebase.initializeApp({
 /* Your connection settings. */
    apiKey: " AIzaSyCdoJ5Q10uHkmUHMOiI_l-q05CmraQ0yMc",
authDomain: "lab3-462d5.firebaseio.com",
databaseURL: "https://lab3-462d5.firebaseio.com/",
storageBucket: "gs://lab3-462d5.appspot.com",
// messagingSenderId: "564455499773"
})
// Use myFirebase.

export default class App extends React.Component{
	constructor(props){
		super(props)
		this.state = {page:"signIn"}
	}

    componentWillMount() {
        myFirebase.auth().onAuthStateChanged((user) => {
            if (user) {
                    this.setState({page:"chat"})
                }
            else {}
        })
}

	render(){
        var content = "signIn"

        if (this.state.page == "signUp")
            content = <SignUpComponent/>
        else if (this.state.page == "signIn")
            content = <SignInComponent/>
        else if (this.state.page == "chat")
            content = <ChatComponent/>

		return (
            <div>
		      {content}
                <br/>
                <button onClick={this.signup.bind(this)}>Sign up</button>
                <button onClick={this.signin.bind(this)}>Sign In</button>
                <button onClick={this.chat.bind(this)}>Chat</button>
                <button onClick={this.logOut.bind(this)}>Log Out</button>
            </div>
        )
	}

    logOut(e) {
        myFirebase.auth().signOut()
        this.setState({page: "signIn"})
    }

    signup(e) {
        this.setState({page: "signUp"})
    }

    signin(e) {
        this.setState({page: "signIn"})
    }

    chat(e) {
        this.setState({page: "chat"})
    }


}

class SignUpComponent extends React.Component{
    constructor(props){
		super(props)
        this.state = {mail:"", pass:""}
	}

    render(){

        return(
            <div>
                <h1>Sign Up</h1>
                <form>
                    <p>Email: <input type="text" onChange={this.handleEmailChange.bind(this)}></input></p>
                    <p>Pass: <input type="password" onChange={this.handlePassChange.bind(this)}></input></p>
                    <button type="submit" onClick={this.newUser.bind(this)}>Log in!</button><br/>
                </form>
            </div>
        )
    }

    handleEmailChange(e) {
        this.setState({mail: e.target.value})
    }

    handlePassChange(e) {
        this.setState({pass: e.target.value})
    }

    newUser(e) {
        e.preventDefault()
        myFirebase.auth().createUserWithEmailAndPassword(this.state.mail, this.state.pass).then(function(user) {
            alert(user.email)

        }).catch(function(error){
            alert(error.message)
        })

    }

}

class SignInComponent extends React.Component{
    constructor(props){
		super(props)
        this.state = {mail:"", pass:""}
	}

    render(){

        return(
            <div>
                <h1>Sign In</h1>
                <form>
                    <p>Email: <input type="text" name="signInMail"  onChange={this.handleEmailChange.bind(this)}></input></p>
                    <p>Password: <input type="password" name="signInPass" onChange={this.handlePassChange.bind(this)}></input></p>
                    <button type="submit" onClick={this.authVerif.bind(this)}>Submit</button><br/>
                </form>
            </div>
        )
    }

    handleEmailChange(e) {
        this.setState({mail: e.target.value})
    }

    handlePassChange(e) {
        this.setState({pass: e.target.value})
    }

    authVerif(e) {
        e.preventDefault()
        myFirebase.auth().signInWithEmailAndPassword(
            this.state.mail,
            this.state.pass
        ).then(function(user){
            alert("Signed in");
        }).catch(function(error){
            alert(error.message)})
    }
}

class ChatComponent extends React.Component{
    constructor(props){
		super(props)
        this.state = {message:[], value: ""}
	}

    componentWillMount(){
        this.db = myFirebase.database()
        var msgRef = this.db.ref('messages/')
        var self = this
        msgRef.on('value', function(snapshot){
          var msgArray = []
          snapshot.forEach(function(childSnapshot) {
            var childKey = childSnapshot.key
            var childData = childSnapshot.val()
            msgArray.push(childData)
          })
          self.setState({message: msgArray})
        })
    }

    render(){

        return(
      <div>
        <h1>Chat</h1>
        <input type="text" value={this.state.value} placeholder="message" onChange={this.handleMessage.bind(this)}/>
        <div>
          <button onClick={this.sendMessage.bind(this)}>Send</button>
        </div>
        <div>
          <ul style={this.listStyle}>
            {this.state.message.map(function(messageValue, index){
              return <li key={index}><b>{messageValue.name}</b>: {'\'' + messageValue.message + '\''}</li>
            })}
          </ul>
        </div>
      </div>
        )
    }

    handleMessage(e) {
        this.setState({value: e.target.value})
    }

    sendMessage(e) {
        var user = myFirebase.auth().currentUser;
        var data = {
            name: user.email,
            message: this.state.value
        }
        var newMsgKey = myFirebase.database().ref().child('messages').push().key
        var updates = {}
        updates['/messages/' + newMsgKey] = data
        this.db.ref().update(updates)
    }


}