import React, { Component } from 'react'
import firebase, { reference, signIn } from '../firebase';
import { pick, map, extend } from 'lodash';
import Messages from './Messages';
import Utilities, { loggedInMessage, displayFirstName } from './Utilities';
import NavBar from './NavBar';
import UserList from './UserList';

export default class Application extends Component {
  constructor() {
    super();
    this.state = {
      draftMsg: '',
      user: null,
      activeUsers: [],
      msgs: [],
      filterText: null,
      sortChron: true,
    }
  }

  componentDidMount() {
    reference.limitToLast(100).on('value', (snapshot) => {
      const msgs = snapshot.val() || {};
      this.setState({
        msgs: map(msgs, (val, key) => extend(val, { key })),
      });
    });

    firebase.auth().onAuthStateChanged(user => this.setState({ user }));
  }

  addNewMessage() {
    const { user, draftMsg } = this.state;
      reference.push({
        user: pick(user, 'displayName', 'email', 'uid'),
        content: draftMsg,
        createdAt: Date.now(),
        filterValue: 'hi',
      });
    this.setState({ draftMsg: '' });
  }

  filterMsgs(value) {
    console.log(value);
  }

  sortMsgs(sortDirect) {
    let { msgs, sortChron } = this.state;
    if (sortDirect === 'up' && sortChron) {
      let newArray = msgs.reverse();
      this.setState({
        msgs: newArray,
        sortChron: false
      });
    } else if (sortDirect === 'down' && !sortChron) {
      let newArray = msgs.reverse();
      this.setState({
        msgs: newArray,
        sortChron: true
      })
    }
  }

  render() {
    let { user, msgs, draftMsg } = this.state;
    return (
      <div className="Application">
        <NavBar filterMsgs={this.filterMsgs.bind(this)} sortMsgs={this.sortMsgs.bind(this)} />
        <div className="message-section">
          {this.state.msgs.map((m, index) => {
            return <Messages key={index} {...m} />;
          })}
        </div>
        <UserList />
        {this.state.user && loggedInMessage(user)}
        <section className="message-input">
          <aside>
            <input
              className="msg-field"
              placeholder="Message…"
              maxLength="140"
              value={this.state.draftMsg}
              onChange={(e) => this.setState({ draftMsg: e.target.value })}
            />
            <p className="character-count"> {this.state.draftMsg.length} (max 140) </p>
          </aside>
          <aside>
            <button className="submit-btn" onClick={() => this.addNewMessage()}> Submit </button>
            <button className="clear-btn" onClick={()=> {this.setState({draftMsg: ''})} }> Clear </button>
          </aside>
        </section>
      </div>

    )
  }
}

@@ -542,16 +542,37 @@
 : true,%0A
+      disabled: true%0A
     %7D%0A  
@@ -1148,16 +1148,32 @@
 tMsg: ''
+, disabled: true
  %7D);%0A  %7D
@@ -2378,21 +2378,38 @@
 et.value
+, disabled: false
  %7D)%7D%0A
-
         
@@ -2551,32 +2551,63 @@
          %3Cbutton
+ disabled=%7Bthis.state.disabled%7D
  className=%22subm
@@ -2688,16 +2688,47 @@
  %3Cbutton
+ disabled=%7Bthis.state.disabled%7D
  classNa

Disable submit and clear when appropirate