From 1511beeb7be24b348bebfed2776e3c7ae6f268ee Mon Sep 17 00:00:00 2001
From: tsikerdekis <tsikerdekis@gmail.com>
Date: Sun, 25 Jun 2017 21:07:58 -0400
Subject: [PATCH] Displaying conversation in a descending chronological order
 (#25)

* Implementing a descending order view of the message list

* Moved the option under the reading section in preferences and changed the wording of the option

* Forgot to update .gitignore
---
 .../message-list/lib/message-list.jsx         | 21 ++++++++++++++-----
 .../message-list/styles/message-list.less     |  2 +-
 app/src/config-schema.es6                     |  5 +++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/internal_packages/message-list/lib/message-list.jsx b/app/internal_packages/message-list/lib/message-list.jsx
index 71a20bc8cb..ee7b569a6f 100644
--- a/app/internal_packages/message-list/lib/message-list.jsx
+++ b/app/internal_packages/message-list/lib/message-list.jsx
@@ -238,11 +238,22 @@ class MessageList extends React.Component {
 
   _messageElements() {
     const {messagesExpandedState, currentThread} = this.state;
-    const elements = []
+    const elements = [];
+    let lastMessageIdx;
 
-    const lastItem = this.state.messages[this.state.messages.length - 1];
+    const descendingOrderMessageList = NylasEnv.config.get('core.reading.descendingOrderMessageList');
+    let messages = this._messagesWithMinification(this.state.messages);
+
+    // Check on whether to display items in descending order
+    if (descendingOrderMessageList) {
+      messages = messages.reverse();
+      lastMessageIdx = 0;
+    } else {
+      lastMessageIdx = messages.length - 1;
+    }
+
+    const lastItem = this.state.messages[descendingOrderMessageList ? 0 : this.state.messages.length - 1];
     const hasReplyArea = lastItem && !lastItem.draft;
-    const messages = this._messagesWithMinification(this.state.messages)
 
     messages.forEach((message, idx) => {
       if (message.type === "minifiedBundle") {
@@ -251,7 +262,7 @@ class MessageList extends React.Component {
       }
 
       const collapsed = !messagesExpandedState[message.id];
-      const isLastItem = (messages.length - 1 === idx);
+      const isLastItem = (lastMessageIdx === idx);
       const isBeforeReplyArea = isLastItem && hasReplyArea;
 
       elements.push(
@@ -268,7 +279,7 @@ class MessageList extends React.Component {
         />
       );
     });
-    if (hasReplyArea) {
+    if (hasReplyArea && lastItem) {
       elements.push(this._renderReplyArea());
     }
     return elements;
diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index de6d6a61e1..f0b1cde43d 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -504,7 +504,7 @@ body.platform-win32 {
     overflow: hidden;
 
     max-width: @message-max-width;
-    margin: -3px auto 0 auto;
+    margin: -3px auto 10px auto;
 
     position: relative;
     z-index: 2;
diff --git a/app/src/config-schema.es6 b/app/src/config-schema.es6
index d987544bcf..039643c5fc 100644
--- a/app/src/config-schema.es6
+++ b/app/src/config-schema.es6
@@ -94,6 +94,11 @@ export default {
             'default': false,
             'title': "Swipe gesture and backspace / delete move messages to trash",
           },
+          descendingOrderMessageList: {
+            'type': 'boolean',
+            'default': false,
+            'title': "Display conversations in descending chronological order",
+          },
         },
       },
       composing: {