lib/carte/client/views/cards.cjsx in carte-server-0.0.14 vs lib/carte/client/views/cards.cjsx in carte-server-0.0.15

@@ -1,8 +1,9 @@
 # @cjsx React.DOM 
 React = require('react')
 Card = require('./card')
+Message = require('./message')
 
 module.exports = React.createClass
   displayName: 'Cards'
 
   getInitialState: ()->
@@ -14,38 +15,28 @@
     if @props.card
       @props.card.on 'error', (model, response)=>
         @setState error: response
         @forceUpdate.bind(@, null)
 
+  componentWillReceiveProps: (nextProps)->
+    console.log 'component did mount'
+    nextProps.cards.on 'sync', @forceUpdate.bind(@, null)
+    if nextProps.card
+      nextProps.card.on 'error', (model, response)=>
+        @setState error: response
+        @forceUpdate.bind(@, null)
+
   render: ->
     console.log 'render cards', @props.cards, @state
-    if @state.error
-      <div className='row'>
-        {
-          for i in [1..9]
-            <div className='col-sm-4' style={padding:'5px'} onMouseOver={@onMouseOver} onMouseLeave={@onMouseLeave}>
-              <div className='list-group'style={margin:'0px',padding:'0px'}>
-                <div className='list-group-item' style={height:'220px'}>
-                  <i className='glyphicon glyphicon-alert' /> {@state.error.status} {@state.error.statusText}
-                </div>
-              </div>
-            </div>
-        }
-      </div>
-    else if !@props.cards.fetching
+    if @props.cards.fetching
+      console.log 'cards loading'
+      <Message>
+        <i className='glyphicon glyphicon-refresh glyphicon-refresh-animate' /> Loading ...
+      </Message>
+    else if @state.error
+      <Message>
+        <i className='glyphicon glyphicon-alert' /> {@state.error.status} {@state.error.statusText}
+      </Message>
+    else
       console.log 'cards loaded'
       cards = @props.cards.map (card)-> <Card key={card.get("title")} card={card} />
       <div className='row'>{cards}</div>
-    else
-      console.log 'cards loading'
-      <div className='row'>
-        {
-          for i in [1..9]
-            <div className='col-sm-4' style={padding:'5px'} onMouseOver={@onMouseOver} onMouseLeave={@onMouseLeave}>
-              <div className='list-group'style={margin:'0px',padding:'0px'}>
-                <div className='list-group-item' style={height:'220px'}>
-                  <i className='glyphicon glyphicon-refresh glyphicon-refresh-animate' /> Loading ...
-                </div>
-              </div>
-            </div>
-        }
-      </div>