Load message texts from server

FolderList.js

@@ -33,7 +33,7 @@ var FolderList = module.exports = React.createClass({
     {
         var acc = this.props.accounts[accIndex];
         var folder = this.props.accounts[accIndex].folders[folderIndex];
-        if (folder.folderId)
+        if (folder.folderId && (this.state.selectedAccount != accIndex || this.state.selectedFolder != folderIndex))
             Store.loadFolder(folder.folderId);
         this.setState({ selectedAccount: accIndex, selectedFolder: folderIndex });
     },

MessageList.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const DropDownButton = require('./DropDownButton.js');
 const ListWithSelection = require('./ListWithSelection.js');
+const Store = require('./Store.js');
 const StoreListener = require('./StoreListener.js');
 const Util = require('./Util.js');
 
@@ -92,14 +93,29 @@ var MessageList = React.createClass({
     },
     onSelectCurrent: function(index)
     {
-        var total = 0, p;
+        var self = this;
-        for (var i = 0; i < this.props.groups.length; i++)
+        var total = 0, p, msg, idx;
+        for (var i = 0; i < self.props.groups.length; i++)
         {
             p = total;
-            total += (i > 0 ? 1 : 0)+this.props.groups[i].messageCount;
+            total += (i > 0 ? 1 : 0)+self.props.groups[i].messageCount;
             if (index < total)
             {
-                Store.set('msg', this.props.groups[i].messages[index-p-(i > 0 ? 1 : 0)]);
+                idx = index-p-(i > 0 ? 1 : 0);
+                msg = self.props.groups[i].messages[idx];
+                if (!msg.body_text && !msg.body_html)
+                {
+                    Store.loadMessage(msg.id, function(newMsg)
+                    {
+                        Store.set('msg', newMsg);
+                        if (self.props.groups[i] && self.props.groups[i].messages[idx] == msg)
+                        {
+                            self.props.groups[i].messages[idx] = newMsg;
+                        }
+                    });
+                }
+                else
+                    Store.set('msg', msg);
                 break;
             }
         }

MessageView.js

@@ -69,23 +69,27 @@ var MessageView = React.createClass({
                     : null}
                 </div>
             </div>,
-            (msg.blockedImages ?
+            (msg.blockedImages
-            <div className="blocked-images">
+                ? <div className="blocked-images">
-                <img src="icons/block.png" /> This message contains blocked images.
+                    <img src="icons/block.png" /> This message contains blocked images.
-                <a className="button raised">Load Images</a>
+                    <a className="button raised">Load Images</a>
-                <label><input type="checkbox" /> Always load from {msg.from}</label>
+                    <label><input type="checkbox" /> Always load from {msg.from}</label>
-            </div>
-            : null),
-            <div className="text" dangerouslySetInnerHTML={{ __html: msg.body_html }}></div>,
-            this.props.quickReply ?
-            <div className="quick-reply">
-                <textarea></textarea>
-                <div className="btns">
-                    <a className="button"><img src="icons/mail_send.png" /> Quick Reply</a>
-                    <a className="button"><img src="icons/mail_reply_all.png" /> Quick Reply All</a>
                 </div>
-            </div>
+                : null),
-            : null
+            (msg.body_html
+                ? <div className="text" dangerouslySetInnerHTML={{ __html: msg.body_html }}></div>
+                : <div className="text plain">{msg.body_text}</div>
+            ),
+            (this.props.quickReply
+                ? <div className="quick-reply">
+                    <textarea></textarea>
+                    <div className="btns">
+                        <a className="button"><img src="icons/mail_send.png" /> Quick Reply</a>
+                        <a className="button"><img src="icons/mail_reply_all.png" /> Quick Reply All</a>
+                    </div>
+                </div>
+                : null
+            )
             ] : null}
         </div>
     }

Store.js

@@ -112,5 +112,13 @@ var Store = module.exports = {
                 messages: msgs
             } ]);
         });
+    },
+
+    loadMessage: function(msgId, callback)
+    {
+        superagent.get('backend/message').query({ msgId: msgId }).end(function(err, res)
+        {
+            callback(res.body.msg);
+        });
     }
 };

mail.css

@@ -1231,6 +1231,11 @@ div
 	margin: 0 0 .5em 0;
 }
 
+.message-view .text.plain
+{
+	white-space: pre-wrap;
+}
+
 .message-view .blocked-images
 {
 	flex: none;