 URL_REGISTER_IDS = "/lib/register-ids"
 URL_REGISTERED_IDS = "/lib/registered-ids"
 
+VideoIDManager = React.createClass
+
+  getInitialState: ->
+    registeredIDs: []
+
+  componentDidMount: ->
+    @loadRegisteredIDs()
+
+  handleRegister: (ids) ->
+    console.log ids
+    request
+      .post URL_REGISTER_IDS
+      .send ids
+      .end (err, res) =>
+        @loadRegisteredIDs()
+
+  loadRegisteredIDs: ->
+    request
+      .get URL_REGISTERED_IDS
+      .end (err, res) =>
+        @setState
+          registeredIDs: res.body
+
+  render: ->
+    <div>
+      <RegisterVideoID onRegister={@handleRegister}/>
+      <RegisteredVideoIDs ids={@state.registeredIDs}/>
+    </div>
+
+
 RegisterVideoID = React.createClass
+
+  propTypes:
+    onRegister: React.PropTypes.func
 
   getInitialState: ->
     videoIDs: ""

    @setState
      videoIDs: e.target.value

  onClickRegister: (e) ->
    request
      .post URL_REGISTER_IDS
      .send [1,2,3,4,5]
      .end (err, res) =>

  render: ->
    <div className="container">

            value={@state.videoIDs} onChange={@handleVideoidsChange}
            placeholder="Comma-separated video IDs"/>
        </div>
        <input type="text" name="dummy" style={{"display": "none"}}/>
        <button
          className="btn btn-default" type="button"
          onClick={@handleRegisterButton}>Register</button>
      </form>
    </div>


RegisteredVideoIDs = React.createClass

  propTypes:
    ids: React.PropTypes.array

  render: ->
    <div className="container">
      <h2>Registered Video IDs</h2>
      <ul>
        {@props.ids.map (v) ->
          <li key={v.key}>{v.value}</li>
        }
      </ul>
    </div>


ReactDOM.render <VideoIDManager />, document.getElementById("react")
