From 243599601c73d49bc5e7c0490c3f937334e65f48 Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Sun, 2 Oct 2016 02:04:16 +0300
Subject: [PATCH] Remove test data, load messages from backend

---
 AccountFolders.js |  2 +-
 FolderList.js     | 15 ++++++++++-----
 MessageList.js    | 20 ++++++++++----------
 MessageView.js    | 14 +++++++-------
 Store.js          | 14 ++++++++++++++
 mail.js           | 42 ------------------------------------------
 6 files changed, 42 insertions(+), 65 deletions(-)

diff --git a/AccountFolders.js b/AccountFolders.js
index 48c2450..d417a49 100644
--- a/AccountFolders.js
+++ b/AccountFolders.js
@@ -38,7 +38,7 @@ var AccountFolders = module.exports = React.createClass({
         {
             var i = t.getAttribute('data-i');
             this.setState({ selected: i });
-            this.props.onSelect(this, i);
+            this.props.onSelect(this.props.accountIndex, i);
         }
         // FIXME: send select event + switch focus to message list if folder changed
     },
diff --git a/FolderList.js b/FolderList.js
index 205ee62..a273114 100644
--- a/FolderList.js
+++ b/FolderList.js
@@ -1,6 +1,7 @@
 const React = require('react');
 const AccountFolders = require('./AccountFolders.js');
 const DropDownButton = require('./DropDownButton.js');
+const Store = require('./Store.js');
 
 var FolderList = module.exports = React.createClass({
     render: function()
@@ -15,8 +16,8 @@ var FolderList = module.exports = React.createClass({
             </div>
             // TODO: keyboard navigation
             <div className="listview" tabIndex="1">
-                {this.props.accounts.map(function(account) {
-                    return <AccountFolders key={'a'+account.accountId} onSelect={self.onSelectFolder} {...account} />
+                {this.props.accounts.map(function(account, i) {
+                    return <AccountFolders key={'a'+account.accountId} accountIndex={i} onSelect={self.onSelectFolder} {...account} />
                 })}
             </div>
             <div className="progress-bar" ref="pbar">
@@ -27,11 +28,15 @@ var FolderList = module.exports = React.createClass({
             </div>
         </div>
     },
-    onSelectFolder: function(folders, i)
+    onSelectFolder: function(accIndex, folderIndex)
     {
-        if (this.prevSelected && this.prevSelected != folders)
+        var acc = this.props.accounts[accIndex];
+        var folder = this.props.accounts[accIndex].folders[folderIndex];
+        if (folder.folderId)
+            Store.loadFolder(folder.folderId);
+        if (this.prevSelected && this.prevSelected != accIndex)
             this.prevSelected.setState({ selected: -1 });
-        this.prevSelected = folders;
+        this.prevSelected = accIndex;
     },
     getInitialState: function()
     {
diff --git a/MessageList.js b/MessageList.js
index f383ae7..c5b019f 100644
--- a/MessageList.js
+++ b/MessageList.js
@@ -15,8 +15,8 @@ var MessageInList = React.createClass({
             <div className="subject" style={{ paddingLeft: (20+10*(msg.level||0)) }}>{msg.subject}</div>
             {msg.thread && this.props.threads ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null}
             <div className="bullet"></div>
-            <div className="from" style={{ left: (21+10*(msg.level||0)) }}>{(msg.sent || msg.outgoing ? 'To '+msg.to : msg.from)}</div>
-            <div className="size">{Util.formatBytes(msg.size)}</div>
+            <div className="from" style={{ left: (21+10*(msg.level||0)) }}>{(msg.sent || msg.outgoing ? 'To '+(msg.to_name||msg.to_email) : (msg.from_name||msg.from_email))}</div>
+            <div className="size">{Util.formatBytes(msg.size||0)}</div>
             <div className="attach" style={msg.attach ? null : { display: 'none' }}></div>
             <div className="time">{Util.formatDate(msg.time)}</div>
         </div>
@@ -157,15 +157,15 @@ var MessageList = React.createClass({
                 </div>
                 <DropDownButton dropdownId="threads" className="threads"
                     title="Show Message Thread" checkedTitle="Hide Message Thread" icon="thread" checkedIcon="thread_selected" checkable="1" />
-                <DropDownButton dropdownId="settings" className="settings" whole="1" hidden={this.props.layout == 'message-on-right'}
-                    title="Settings for this folder" icon="config" />
+                <DropDownButton dropdownId="settings" className="settings" whole="1" hidden={self.props.layout == 'message-on-right'}
+                    title="Settings for self folder" icon="config" />
                 <DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
                     title="Sorting settings" icon="list_sort" />
                 <div className="clear"></div>
             </div>
-            <div ref="scroll" className="listview" tabIndex="1" onScroll={this.changeFirstDay} onKeyDown={this.onListKeyDown}>
-                <div ref="title" className="day first-day" style={{ top: this.state.firstDayTop }}>{this.state.firstDay}</div>
-                {(this.props.groups||[]).map(function(grp, i) {
+            <div ref="scroll" className="listview" tabIndex="1" onScroll={self.changeFirstDay} onKeyDown={self.onListKeyDown}>
+                <div ref="title" className="day first-day" style={{ top: self.state.firstDayTop }}>{self.state.firstDay}</div>
+                {(self.props.groups||[]).map(function(grp, i) {
                     if (i > 0)
                         total++;
                     var start = total+(self.state.firstGrp == i ? self.state.firstMsg : 0);
@@ -181,9 +181,9 @@ var MessageList = React.createClass({
                                 self.getMessages(grp,
                                     self.state.firstGrp == i ? self.state.firstMsg : 0,
                                     self.state.lastGrp == i ? self.state.lastMsg+1 : grp.messageCount
-                                ).map((msg, j) => (msg
+                                ).map(function(msg, j) { return (msg
                                     ? [
-                                        <MessageInList threads={this.props.threads} msg={msg} i={start+j} selected={self.isSelected(start+j)} onClick={self.onListItemClick} />,
+                                        <MessageInList threads={self.props.threads} msg={msg} i={start+j} selected={self.isSelected(start+j)} onClick={self.onListItemClick} />,
                                         /*(msg.thread && Store.threads ?
                                             <div className="thread">
                                                 {msg.thread.map(reply => <MessageInList msg={reply} i={0} onClick={self.onListItemClick} />)}
@@ -191,7 +191,7 @@ var MessageList = React.createClass({
                                         : null)*/
                                     ]
                                     : <div data-i={start+j} className={'message'+(self.isSelected(start+j) ? ' selected' : '')} onMouseDown={self.onListItemClick}></div>
-                                )),
+                                ); }),
                                 (self.state.lastGrp == i
                                     ? <div className="placeholder" style={{ height: itemH*(grp.messageCount-self.state.lastMsg-1) }}></div>
                                     : null)
diff --git a/MessageView.js b/MessageView.js
index 90f8df2..dbe6944 100644
--- a/MessageView.js
+++ b/MessageView.js
@@ -47,24 +47,24 @@ var MessageView = React.createClass({
                 <div className="header-table">
                     <div className="header">
                         <div className="field">From</div>
-                        <div className="value"><a className="button">{msg.from+' <'+msg.fromEmail+'>'}</a></div>
+                        <div className="value"><a className="button">{msg.from_name+' <'+msg.from_email+'>'}</a></div>
                     </div>
                     <div className="header">
                         <div className="field">To</div>
-                        <div className="value"><a className="button">{msg.to}</a></div>
+                        <div className="value"><a className="button">{msg.to_list}</a></div>
                     </div>
-                    {msg.cc ?
+                    {msg.cc_list ?
                     <div className="header">
                         <div className="field">Cc</div>
                         <div className="value">
-                            {msg.cc.map(cc => <a className="button">{cc}</a>)}
+                            {[ msg.cc_list ].map(cc => <a className="button">{cc}</a>)}
                         </div>
                     </div>
                     : null}
-                    {msg.replyto ?
+                    {msg.replyto_email ?
                     <div className="header">
                         <div className="field">Reply-to</div>
-                        <div className="value"><a className="button">{msg.replyto}</a></div>
+                        <div className="value"><a className="button">{msg.replyto_name+' <'+msg.replyto_email+'>'}</a></div>
                     </div>
                     : null}
                 </div>
@@ -76,7 +76,7 @@ var MessageView = React.createClass({
                 <label><input type="checkbox" /> Always load from {msg.from}</label>
             </div>
             : null),
-            <div className="text" dangerouslySetInnerHTML={{ __html: msg.body }}></div>,
+            <div className="text" dangerouslySetInnerHTML={{ __html: msg.body_html }}></div>,
             this.props.quickReply ?
             <div className="quick-reply">
                 <textarea></textarea>
diff --git a/Store.js b/Store.js
index eef9bc6..064304f 100644
--- a/Store.js
+++ b/Store.js
@@ -8,6 +8,7 @@ var Store = module.exports = {
         msg: null,
         threads: false,
         accounts: [],
+        messages: []
     },
 
     listeners: [],
@@ -98,5 +99,18 @@ var Store = module.exports = {
             }
             Store.set('accounts', accounts);
         });
+    },
+
+    loadFolder: function(folderId)
+    {
+        superagent.get('backend/messages').query({ folderId: folderId, limit: 50, offset: 0 }).end(function(err, res)
+        {
+            var msgs = res.body.messages;
+            Store.set('listGroups', [ {
+                name: 'TODAY',
+                messageCount: msgs.length,
+                messages: msgs
+            } ]);
+        });
     }
 };
diff --git a/mail.js b/mail.js
index 88f296f..d03398d 100644
--- a/mail.js
+++ b/mail.js
@@ -11,48 +11,6 @@ const AllDropdowns = require('./AllDropdowns.js');
 
 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame;
 
-var msg2 = [];
-msg2[5] = {
-    subject: 'кошку хочешь?))',
-    sent: true,
-    from: 'Виталий Филиппов',
-    fromEmail: 'vitalif@mail.ru',
-    to: 'Margarita Philippova',
-    time: '2016-06-14 21:24',
-    body: 'к нам тут пришла какая-то и к нам в дом рвётся, симпатишная) потеряшка какая-то, но явно домашняя, не боится людей))',
-    thread: [ {
-        subject: 'Re: кошку хочешь?))',
-        from: 'Margarita Philippova',
-        fromEmail: 'philippova.marga@gmail.com',
-        to: 'Виталий Филиппов',
-        time: '2016-06-14 22:31',
-        level: 1,
-        body: 'Нет, конечно, не хочу. Я уеду в Баку, а кошка как? Уеду в Астану - а кошка как? Наташа меня Сухорукова приглашает в Барселону - а кошку куда? Я только испытала радость облегчения от того, что у меня больше нет горшочных цветов - и кошку мне? НЕт! Папику предложи - у него уже много зверья, одной кошкой больше - одной меньше - какая разница?'
-    } ]
-};
-
-Store.listGroups = [ {
-    name: 'TODAY',
-    messageCount: 10,
-    messages: [ {
-        subject: 'The Glossary of Happiness  By Emily Anthes , May 12, 2016',
-        from: 'Margarita Philippova',
-        fromEmail: 'philippova.marga@gmail.com',
-        to: 'Виталий Филиппов',
-        time: '2016-06-20 00:11:18',
-        unread: true,
-        body: '<pre><a href="http://www.newyorker.com/tech/elements/the-glossary-of-happiness">http://www.newyorker.com/tech/elements/the-glossary-of-happiness</a><br />\
-<br />\
---<br />\
-Best regards,<br />\
-  Margarita Philippova</pre>'
-    } ]
-}, {
-    name: 'LAST WEEK',
-    messageCount: 15,
-    messages: msg2
-} ];
-
 var AllTabs = StoreListener(TabPanel, function(data)
 {
     return { tabs: [