Event App (Mobx + React)

by ramnathv

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]/index.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}
#root{margin-top: 30px;}
.form-control{margin-bottom: 10px;}
body{font-family: Helvetica;}
#app textarea{
  resize: vertical;
}

Babel + JSX

const {observable, computed, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const {render} = ReactDOM

//Dummy events data
const events = [
  {
    id: 1,
    name: 'TIFF',
    description: 'Toronto International Film Festival',
    date: '2015-09-10'
  },
  {
    id: 2,
    name: 'The Martian Premiere',
    description: 'The Martian comes to theatres.',
    date: '2015-10-02',
  },
  {
    id: 3,
    name: 'SXSW',
    description: 'Music, film and interactive festival in Austin, TX.',
    date: '2016-03-11'
  },
]

const EventItem = ({event, handleClick}) =>
    <a href="#" className="list-group-item">
      <h4 className="list-group-item-heading">
        <i className="glyphicon glyphicon-bullhorn" />
        {" " + event.name}
        <button className="btn btn-xs btn-danger pull-right"
          onClick={handleClick}
        >
          x
        </button>
      </h4>
      <h5>
         <i className="glyphicon glyphicon-calendar" />
         {" " + event.date}
      </h5>  
      <p className="list-group-item-text">
        {event.description}
      </p>
    </a>

const EventList = observer(({events}) => 
    <div className="list-group">
    {
      events.map((ev, i) => {
        return <EventItem 
          key={i} 
          event={ev} 
          handleClick={e => events.splice(i, 1)}
        />
      })
    }
    </div>
)

const EntryForm = observer(({store}) => 
  <form>
    <input type="text" className="form-control" 
      value={store.name}
      onChange={e => store.name = e.target.value}
    />
    <textarea rows={2} className="form-control" 
      value={store.description}
      onChange={e => store.description = e.target.value}
    />
    <input type="date" className="form-control" 
      value={store.date}
      onChange={e => store.date = e.target.value}
    />
    <button className="btn btn-sm btn-primary"
      disabled={store.name ? "" : "disabled"}
      onClick={e => {
        e.preventDefault()
       ...