lib/carte/client/views/cards.cjsx in carte-server-0.0.11 vs lib/carte/client/views/cards.cjsx in carte-server-0.0.12

@@ -3,33 +3,39 @@
 Card = require('./card')
 
 module.exports = React.createClass
   displayName: 'Cards'
 
+  getInitialState: ()->
+    error: false
+
   componentDidMount: ()->
     console.log 'component did mount'
     @props.cards.on 'sync', @forceUpdate.bind(@, null)
+    @props.card.on 'sync', @forceUpdate.bind(@, null)
+    @props.card.on 'error', (model, response)=>
+      @setState error: response
+      @forceUpdate.bind(@, null)
 
   render: ->
-    console.log 'render cards', @props.cards
-    if !@props.cards.fetching
-      console.log 'cards loaded'
-      cards = @props.cards.map (card)-> <Card key={card.get("title")} card={card} />
-      <div className='row'>{cards}</div>
-    else if @props.cards.error
+    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' />
-                  {@props.cards.error}
+                  <i className='glyphicon glyphicon-alert' /> {@state.error.status} {@state.error.statusText}
                 </div>
               </div>
             </div>
         }
       </div>
+    else if !@props.cards.fetching
+      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]