Tweetbox with React and Mobservable

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="//rawgit.com/mweststrate/mobservable/master/dist/mobservable.min.js"></script>
<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}

Babel + JSX

let {render} = ReactDOM
let {observable, autorun} = mobservable
var Model = observable({
  text: "",
  disableBtn(){
    return this.text === ""
  },
  remainingChars(){
    return 140 - this.text.length - 23*this.photoAdded
  },
  photoAdded: false,
  photoBtnText(){
    return this.photoAdded ? 'Photo Added' : 'Add Photo'
  }    
})


var View = (model) => {
  return(
    <div className="well clearfix">
      <textarea className="form-control" 
        style={{marginBottom: 20, resize: "vertical"}}
        onInput={(e) => {
          model.text = e.target.value
          console.log(model.disableBtn)
        }}
      />
      <div className="pull-right">
        <button className="btn btn-default btn-sm"
          onClick={(e) => {model.photoAdded = !model.photoAdded}}>
           {model.photoBtnText}
        </button>
        <button className="btn btn-primary btn-sm" 
          disabled={model.disableBtn}>
         Tweet
        </button>
      </div>
      <span>{model.remainingChars}</span>
    </div>
  )
}

autorun(() => render(
  View(Model),
  document.getElementById("app") 
))