         })
 
         messageList = if @state.messages
-            messageNodes = @state.messages.map((message) => FM.Message({
-                key: message.mUid
-                subject: message.mSubject
-                sender: message.mSender
-                date: message.mDate
-                mailbox: @safeID
-            }))
-            React.DOM.div(null,
-                React.DOM.table({className: "table table-striped table-hover"},
-                    React.DOM.thead(null,
-                        React.DOM.tr(null,
-                            React.DOM.th(null, "Subject"),
-                            React.DOM.th(null, "From"),
-                            React.DOM.th(null, "Date")
+            messageNodes = @state.messages.map((message) => @renderMessage(
+                message.mUid
+                message.mSubject
+                message.mSender
+                message.mDate
+                message.mContents
+            ))
+            React.DOM.div(null
+                React.DOM.table({className: 'table table-striped table-hover'}
+                    React.DOM.thead(null
+                        React.DOM.tr(null
+                            React.DOM.th(null, 'Subject')
+                            React.DOM.th(null, 'From')
+                            React.DOM.th(null, 'Date')
                         )
-                    ),
+                    )
                     React.DOM.tbody(null, messageNodes)
                 )
             )
-        else React.DOM.div({}, "Loading...")
-
-        return React.DOM.div({className: 'panel panel-default'},
-            React.DOM.div({className: 'panel-heading'},
-                React.DOM.h4({className: 'panel-title'},
+        else React.DOM.div({}, 'Loading...')
+
+        return React.DOM.div({className: 'panel panel-default'}
+            React.DOM.div({className: 'panel-heading'}
+                React.DOM.h4({className: 'panel-title'}
                     React.DOM.a({
                         'data-toggle': 'collapse'
                         href: "##{@safeID}"

    displayName: 'Alert'
    render: ->
        if @props.code && @props.message
            return React.DOM.div({className: "alert alert-danger", role: "alert"},
                React.DOM.strong(null, @props.code), ": ", @props.message
            );
})

    render: ->
        # TODO: loading
        if @props.currentPage == @props.target
            React.DOM.li({className: 'active'}, React.DOM.span({}, @props.text))
        else if 0 < @props.target <= @props.total
            React.DOM.li({onClick: @handleClick}, React.DOM.span({}, @props.text))
        else
            React.DOM.li({className: 'disabled'}, React.DOM.span({}, @props.text))
})


