From 529cb0d4172bc05c53dd2864d42f1328a3c81189 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 3 Sep 2020 17:04:34 -0600
Subject: [PATCH 01/10] Fix theme toggle CSS on dark

---
 app/styles/components/tabs-bar.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 76920534b..7da26b28c 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -143,6 +143,10 @@
     .setting-toggle {
       margin-left: 10px;
 
+      .react-toggle-track {
+        background-color: rgba(0,0,0,0.2);
+      }
+
       .react-toggle--checked {
         .react-toggle-track {
           background-color: var(--accent-color);

From 0e7132d25e34ddd0aa737f4795f6d83981f2b6d2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 3 Sep 2020 19:23:00 -0500
Subject: [PATCH 02/10] Chats: add the building blocks for pagination

---
 app/soapbox/actions/chats.js                  | 10 +++---
 .../features/chats/components/chat_box.js     |  4 +--
 .../chats/components/chat_message_list.js     | 34 ++++++++++++++++---
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/actions/chats.js b/app/soapbox/actions/chats.js
index a3e743c87..935efc9a6 100644
--- a/app/soapbox/actions/chats.js
+++ b/app/soapbox/actions/chats.js
@@ -34,13 +34,13 @@ export function fetchChats() {
   };
 }
 
-export function fetchChatMessages(chatId) {
+export function fetchChatMessages(chatId, maxId = null) {
   return (dispatch, getState) => {
-    dispatch({ type: CHAT_MESSAGES_FETCH_REQUEST, chatId });
-    return api(getState).get(`/api/v1/pleroma/chats/${chatId}/messages`).then(({ data }) => {
-      dispatch({ type: CHAT_MESSAGES_FETCH_SUCCESS, chatId, chatMessages: data });
+    dispatch({ type: CHAT_MESSAGES_FETCH_REQUEST, chatId, maxId });
+    return api(getState).get(`/api/v1/pleroma/chats/${chatId}/messages`, { params: { max_id: maxId } }).then(({ data }) => {
+      dispatch({ type: CHAT_MESSAGES_FETCH_SUCCESS, chatId, maxId, chatMessages: data });
     }).catch(error => {
-      dispatch({ type: CHAT_MESSAGES_FETCH_FAIL, chatId, error });
+      dispatch({ type: CHAT_MESSAGES_FETCH_FAIL, chatId, maxId, error });
     });
   };
 }
diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 40123ca25..387a0f944 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -98,12 +98,12 @@ class ChatBox extends ImmutablePureComponent {
   }
 
   render() {
-    const { chatMessageIds, intl } = this.props;
+    const { chatMessageIds, chatId, intl } = this.props;
     if (!chatMessageIds) return null;
 
     return (
       <div className='chat-box' onMouseOver={this.handleHover}>
-        <ChatMessageList chatMessageIds={chatMessageIds} />
+        <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
         <div className='chat-box__actions simple_form'>
           <textarea
             rows={1}
diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index e2fe305bd..4c86677a4 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -5,9 +5,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { fetchChatMessages } from 'soapbox/actions/chats';
 import emojify from 'soapbox/features/emoji/emoji';
 import classNames from 'classnames';
-import { escape } from 'lodash';
+import { escape, throttle } from 'lodash';
 
 const makeEmojiMap = record => record.get('emojis', ImmutableList()).reduce((map, emoji) => {
   return map.set(`:${emoji.get('shortcode')}:`, emoji);
@@ -28,6 +29,7 @@ class ChatMessageList extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    chatId: PropTypes.string,
     chatMessages: ImmutablePropTypes.list,
     chatMessageIds: ImmutablePropTypes.orderedSet,
     me: PropTypes.node,
@@ -61,7 +63,7 @@ class ChatMessageList extends ImmutablePureComponent {
     );
   };
 
-  setRef = (c) => {
+  setBubbleRef = (c) => {
     if (!c) return;
     const links = c.querySelectorAll('a[rel="ugc"]');
 
@@ -72,11 +74,30 @@ class ChatMessageList extends ImmutablePureComponent {
     });
   }
 
+  componentDidMount() {
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.chatMessages !== this.props.chatMessages)
       this.scrollToBottom();
   }
 
+  componentWillUnmount() {
+    this.node.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleLoadMore = () => {
+    const { dispatch, chatId, chatMessageIds } = this.props;
+    const maxId = chatMessageIds.last();
+    dispatch(fetchChatMessages(chatId, maxId));
+  }
+
+  handleScroll = throttle(() => {
+    if (this.node.scrollTop < 100) this.handleLoadMore();
+  }, 150, {
+    trailing: true,
+  });
+
   parsePendingContent = content => {
     return escape(content).replace(/(?:\r\n|\r|\n)/g, '<br>');
   }
@@ -89,11 +110,16 @@ class ChatMessageList extends ImmutablePureComponent {
     return emojify(formatted, emojiMap.toJS());
   }
 
+  setRef = (c) => {
+    this.node = c;
+    this.node.addEventListener('scroll', this.handleScroll);
+  }
+
   render() {
     const { chatMessages, me } = this.props;
 
     return (
-      <div className='chat-messages'>
+      <div className='chat-messages' ref={this.setRef}>
         {chatMessages.map(chatMessage => (
           <div
             className={classNames('chat-message', {
@@ -106,7 +132,7 @@ class ChatMessageList extends ImmutablePureComponent {
               title={this.getFormattedTimestamp(chatMessage)}
               className='chat-message__bubble'
               dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
-              ref={this.setRef}
+              ref={this.setBubbleRef}
             />
           </div>
         ))}

From f89f4e08fe6614c982e999df06a14f03691132da Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 3 Sep 2020 23:51:16 -0500
Subject: [PATCH 03/10] Theme toggle: use dark bg in tabs-bar again

---
 app/styles/components/tabs-bar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 7da26b28c..a9cf3b1d4 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -144,7 +144,7 @@
       margin-left: 10px;
 
       .react-toggle-track {
-        background-color: rgba(0,0,0,0.2);
+        background-color: var(--foreground-color);
       }
 
       .react-toggle--checked {

From d464d53a92f237e8a07e168a739d076a1b3dbf91 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 3 Sep 2020 23:52:16 -0500
Subject: [PATCH 04/10] Composer: change globe icon to globe-w

---
 app/soapbox/features/compose/components/privacy_dropdown.js | 2 +-
 app/soapbox/features/compose/index.js                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
index d024b68e5..8a6cdcc9a 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.js
+++ b/app/soapbox/features/compose/components/privacy_dropdown.js
@@ -173,7 +173,7 @@ class PrivacyDropdown extends React.PureComponent {
     const { intl: { formatMessage } } = props;
 
     this.options = [
-      { icon: 'globe', value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
+      { icon: 'globe-w', value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
       { icon: 'unlock', value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long) },
       { icon: 'lock', value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) },
       { icon: 'envelope', value: 'direct', text: formatMessage(messages.direct_short), meta: formatMessage(messages.direct_long) },
diff --git a/app/soapbox/features/compose/index.js b/app/soapbox/features/compose/index.js
index a7e177d2a..c66c5b82a 100644
--- a/app/soapbox/features/compose/index.js
+++ b/app/soapbox/features/compose/index.js
@@ -88,7 +88,7 @@ class Compose extends React.PureComponent {
             <Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><Icon id='users' fixedWidth /></Link>
           )}
           {!columns.some(column => column.get('id') === 'PUBLIC') && (
-            <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><Icon id='globe' fixedWidth /></Link>
+            <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><Icon id='globe-w' fixedWidth /></Link>
           )}
           <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><Icon id='cog' fixedWidth /></a>
           <a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><Icon id='sign-out' fixedWidth /></a>

From cf8f5fde60229f1b7aa005d2ebd2061564e363e4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 4 Sep 2020 00:11:27 -0500
Subject: [PATCH 05/10] Composer: use paperclip for uploads icon

---
 app/soapbox/features/compose/components/upload_button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js
index 04d2c74cd..79a13c4a0 100644
--- a/app/soapbox/features/compose/components/upload_button.js
+++ b/app/soapbox/features/compose/components/upload_button.js
@@ -60,7 +60,7 @@ class UploadButton extends ImmutablePureComponent {
 
     return (
       <div className='compose-form__upload-button'>
-        <IconButton icon='upload' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
+        <IconButton icon='paperclip' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
         <label>
           <span style={{ display: 'none' }}>{intl.formatMessage(messages.upload)}</span>
           <input

From 57b2a120e5d0f21122a76f1ff6e418f00a38e013 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 4 Sep 2020 00:15:10 -0500
Subject: [PATCH 06/10] Composer: allow attaching any type of file

---
 app/soapbox/features/compose/components/upload_button.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js
index 79a13c4a0..32472d9a2 100644
--- a/app/soapbox/features/compose/components/upload_button.js
+++ b/app/soapbox/features/compose/components/upload_button.js
@@ -52,7 +52,7 @@ class UploadButton extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props;
+    const { intl, resetFileKey, unavailable, disabled } = this.props;
 
     if (unavailable) {
       return null;
@@ -68,7 +68,8 @@ class UploadButton extends ImmutablePureComponent {
             ref={this.setRef}
             type='file'
             multiple
-            accept={acceptContentTypes.toArray().join(',')}
+            // Accept all types for now.
+            // accept={acceptContentTypes.toArray().join(',')}
             onChange={this.handleChange}
             disabled={disabled}
             style={{ display: 'none' }}

From 8e6a662fbb9084f591a95b367f584bd0ba64ff78 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 4 Sep 2020 17:16:23 -0500
Subject: [PATCH 07/10] Chats: fix error loading chatroom page

---
 app/soapbox/features/chats/chat_room.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/chat_room.js b/app/soapbox/features/chats/chat_room.js
index 4a8c480ea..f3e81cc12 100644
--- a/app/soapbox/features/chats/chat_room.js
+++ b/app/soapbox/features/chats/chat_room.js
@@ -58,11 +58,11 @@ class ChatRoom extends ImmutablePureComponent {
 
   componentDidUpdate(prevProps) {
     const markReadConditions = [
-      () => this.props.chat !== undefined,
+      () => this.props.chat,
       () => this.props.chat.get('unread') > 0,
     ];
 
-    if (markReadConditions.every(c => c() === true))
+    if (markReadConditions.every(c => c()))
       this.markRead();
   }
 

From c595e393da8e9465a84b7e1bcf39b6bc22ba7225 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 4 Sep 2020 17:19:26 -0500
Subject: [PATCH 08/10] Chats: fix pagination bugs, use flex column-reverse

---
 .../chats/components/chat_message_list.js     | 31 +++++++++++++------
 app/styles/chats.scss                         |  8 ++++-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index 4c86677a4..a0e645856 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -10,6 +10,8 @@ import emojify from 'soapbox/features/emoji/emoji';
 import classNames from 'classnames';
 import { escape, throttle } from 'lodash';
 
+const scrollBottom = (elem) => elem.scrollHeight - elem.offsetHeight - elem.scrollTop;
+
 const makeEmojiMap = record => record.get('emojis', ImmutableList()).reduce((map, emoji) => {
   return map.set(`:${emoji.get('shortcode')}:`, emoji);
 }, ImmutableMap());
@@ -19,7 +21,7 @@ const mapStateToProps = (state, { chatMessageIds }) => ({
   chatMessages: chatMessageIds.reduce((acc, curr) => {
     const chatMessage = state.getIn(['chat_messages', curr]);
     return chatMessage ? acc.push(chatMessage) : acc;
-  }, ImmutableList()).sort(),
+  }, ImmutableList()).sort().reverse(),
 });
 
 export default @connect(mapStateToProps)
@@ -39,6 +41,10 @@ class ChatMessageList extends ImmutablePureComponent {
     chatMessages: ImmutableList(),
   }
 
+  state = {
+    isLoading: false,
+  }
+
   scrollToBottom = () => {
     if (!this.messagesEnd) return;
     this.messagesEnd.scrollIntoView();
@@ -46,7 +52,6 @@ class ChatMessageList extends ImmutablePureComponent {
 
   setMessageEndRef = (el) => {
     this.messagesEnd = el;
-    this.scrollToBottom();
   };
 
   getFormattedTimestamp = (chatMessage) => {
@@ -75,11 +80,19 @@ class ChatMessageList extends ImmutablePureComponent {
   }
 
   componentDidMount() {
+    this.node.addEventListener('scroll', this.handleScroll);
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.chatMessages !== this.props.chatMessages)
-      this.scrollToBottom();
+    const oldCount = prevProps.chatMessages.count();
+    const newCount = this.props.chatMessages.count();
+    const isNearBottom = scrollBottom(this.node) < 150;
+    const historyAdded = prevProps.chatMessages.getIn([-1, 'id']) !== this.props.chatMessages.getIn([-1, 'id']);
+
+    if (oldCount !== newCount) {
+      if (isNearBottom) this.scrollToBottom();
+      if (historyAdded) this.setState({ isLoading: false });
+    }
   }
 
   componentWillUnmount() {
@@ -87,13 +100,14 @@ class ChatMessageList extends ImmutablePureComponent {
   }
 
   handleLoadMore = () => {
-    const { dispatch, chatId, chatMessageIds } = this.props;
-    const maxId = chatMessageIds.last();
+    const { dispatch, chatId, chatMessages } = this.props;
+    const maxId = chatMessages.getIn([-1, 'id']);
     dispatch(fetchChatMessages(chatId, maxId));
+    this.setState({ isLoading: true });
   }
 
   handleScroll = throttle(() => {
-    if (this.node.scrollTop < 100) this.handleLoadMore();
+    if (this.node.scrollTop < 150 && !this.state.isLoading) this.handleLoadMore();
   }, 150, {
     trailing: true,
   });
@@ -112,7 +126,6 @@ class ChatMessageList extends ImmutablePureComponent {
 
   setRef = (c) => {
     this.node = c;
-    this.node.addEventListener('scroll', this.handleScroll);
   }
 
   render() {
@@ -120,6 +133,7 @@ class ChatMessageList extends ImmutablePureComponent {
 
     return (
       <div className='chat-messages' ref={this.setRef}>
+        <div style={{ float: 'left', clear: 'both' }} ref={this.setMessageEndRef} />
         {chatMessages.map(chatMessage => (
           <div
             className={classNames('chat-message', {
@@ -136,7 +150,6 @@ class ChatMessageList extends ImmutablePureComponent {
             />
           </div>
         ))}
-        <div style={{ float: 'left', clear: 'both' }} ref={this.setMessageEndRef} />
       </div>
     );
   }
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 011543ca3..38550ac3b 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -99,12 +99,18 @@
 .chat-messages {
   overflow-y: scroll;
   flex: 1;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 .chat-message {
-  margin: 14px 10px;
+  padding: 7px 10px;
   display: flex;
 
+  &:last-child {
+    padding-top: 14px;
+  }
+
   &__bubble {
     font-size: 15px;
     padding: 4px 10px;

From 9da87405f8dccddade4bede7dcee676eb63ee8f8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 4 Sep 2020 18:03:38 -0500
Subject: [PATCH 09/10] Chats: improve the way messageIds are sorted

---
 app/soapbox/actions/chats.js                  |  2 +-
 .../chats/components/chat_message_list.js     |  2 +-
 app/soapbox/reducers/chat_message_lists.js    | 24 ++++++++++++++-----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/actions/chats.js b/app/soapbox/actions/chats.js
index 935efc9a6..729dc128e 100644
--- a/app/soapbox/actions/chats.js
+++ b/app/soapbox/actions/chats.js
@@ -47,7 +47,7 @@ export function fetchChatMessages(chatId, maxId = null) {
 
 export function sendChatMessage(chatId, params) {
   return (dispatch, getState) => {
-    const uuid = uuidv4();
+    const uuid = `末_${Date.now()}_${uuidv4()}`;
     const me = getState().get('me');
     dispatch({ type: CHAT_MESSAGE_SEND_REQUEST, chatId, params, uuid, me });
     return api(getState).post(`/api/v1/pleroma/chats/${chatId}/messages`, params).then(({ data }) => {
diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index a0e645856..45b597577 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -21,7 +21,7 @@ const mapStateToProps = (state, { chatMessageIds }) => ({
   chatMessages: chatMessageIds.reduce((acc, curr) => {
     const chatMessage = state.getIn(['chat_messages', curr]);
     return chatMessage ? acc.push(chatMessage) : acc;
-  }, ImmutableList()).sort().reverse(),
+  }, ImmutableList()),
 });
 
 export default @connect(mapStateToProps)
diff --git a/app/soapbox/reducers/chat_message_lists.js b/app/soapbox/reducers/chat_message_lists.js
index 0d635070f..b584dca72 100644
--- a/app/soapbox/reducers/chat_message_lists.js
+++ b/app/soapbox/reducers/chat_message_lists.js
@@ -9,9 +9,15 @@ import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutabl
 
 const initialState = ImmutableMap();
 
+const idComparator = (a, b) => {
+  if (a < b) return 1;
+  if (a > b) return -1;
+  return 0;
+};
+
 const updateList = (state, chatId, messageIds) => {
   const ids = state.get(chatId, ImmutableOrderedSet());
-  const newIds = ids.union(messageIds);
+  const newIds = ids.union(messageIds).sort(idComparator);
   return state.set(chatId, newIds);
 };
 
@@ -31,22 +37,28 @@ const importLastMessages = (state, chats) =>
       if (chat.last_message) importMessage(mutable, chat.last_message);
     }));
 
+const replaceMessage = (state, chatId, oldId, newId) => {
+  const ids = state.get(chatId, ImmutableOrderedSet());
+  const newIds = ids.delete(oldId).add(newId).sort(idComparator);
+  return state.set(chatId, newIds);
+};
+
 export default function chatMessageLists(state = initialState, action) {
   switch(action.type) {
   case CHAT_MESSAGE_SEND_REQUEST:
-    return updateList(state, action.chatId, [action.uuid]).sort();
+    return updateList(state, action.chatId, [action.uuid]);
   case CHATS_FETCH_SUCCESS:
-    return importLastMessages(state, action.chats).sort();
+    return importLastMessages(state, action.chats);
   case STREAMING_CHAT_UPDATE:
     if (action.chat.last_message &&
         action.chat.last_message.account_id !== action.me)
-      return importMessages(state, [action.chat.last_message]).sort();
+      return importMessages(state, [action.chat.last_message]);
     else
       return state;
   case CHAT_MESSAGES_FETCH_SUCCESS:
-    return updateList(state, action.chatId, action.chatMessages.map(chat => chat.id).reverse()).sort();
+    return updateList(state, action.chatId, action.chatMessages.map(chat => chat.id));
   case CHAT_MESSAGE_SEND_SUCCESS:
-    return updateList(state, action.chatId, [action.chatMessage.id]).sort();
+    return replaceMessage(state, action.chatId, action.uuid, action.chatMessage.id);
   default:
     return state;
   }

From 8f1b11a3947ee7f6eb85234518763e06580a63f2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 4 Sep 2020 18:08:53 -0500
Subject: [PATCH 10/10] Chats: move messages fetch logic into ChatMessageList

---
 app/soapbox/features/chats/components/chat_box.js          | 6 ------
 app/soapbox/features/chats/components/chat_message_list.js | 3 +++
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 387a0f944..12b28d513 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -5,7 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl, defineMessages } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import {
-  fetchChatMessages,
   sendChatMessage,
   markChatRead,
 } from 'soapbox/actions/chats';
@@ -81,11 +80,6 @@ class ChatBox extends ImmutablePureComponent {
     onSetInputRef(el);
   };
 
-  componentDidMount() {
-    const { dispatch, chatId } = this.props;
-    dispatch(fetchChatMessages(chatId));
-  }
-
   componentDidUpdate(prevProps) {
     const markReadConditions = [
       () => this.props.chat !== undefined,
diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index 45b597577..baa50a08f 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -80,6 +80,9 @@ class ChatMessageList extends ImmutablePureComponent {
   }
 
   componentDidMount() {
+    const { dispatch, chatId } = this.props;
+    dispatch(fetchChatMessages(chatId));
+
     this.node.addEventListener('scroll', this.handleScroll);
   }