From 9b55f813bb3a3604dd7c32fd15ce923c08be27d4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 3 Sep 2020 14:47:04 -0500
Subject: [PATCH] Chats: mark read more aggresively on mobile, fixes #367

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

diff --git a/app/soapbox/features/chats/chat_room.js b/app/soapbox/features/chats/chat_room.js
index e6df1953d..4a8c480ea 100644
--- a/app/soapbox/features/chats/chat_room.js
+++ b/app/soapbox/features/chats/chat_room.js
@@ -6,18 +6,20 @@ import { injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Avatar from 'soapbox/components/avatar';
 import { acctFull } from 'soapbox/utils/accounts';
-import { fetchChat } from 'soapbox/actions/chats';
+import { fetchChat, markChatRead } from 'soapbox/actions/chats';
 import ChatBox from './components/chat_box';
 import Column from 'soapbox/components/column';
 import ColumnBackButton from 'soapbox/components/column_back_button';
+import { Map as ImmutableMap } from 'immutable';
 import { makeGetChat } from 'soapbox/selectors';
 
 const mapStateToProps = (state, { params }) => {
   const getChat = makeGetChat();
+  const chat = state.getIn(['chats', params.chatId], ImmutableMap()).toJS();
 
   return {
     me: state.get('me'),
-    chat: getChat(state, { id: params.chatId }),
+    chat: getChat(state, chat),
   };
 };
 
@@ -42,9 +44,26 @@ class ChatRoom extends ImmutablePureComponent {
     this.inputElem.focus();
   }
 
+  markRead = () => {
+    const { dispatch, chat } = this.props;
+    if (!chat) return;
+    dispatch(markChatRead(chat.get('id')));
+  }
+
   componentDidMount() {
     const { dispatch, params } = this.props;
     dispatch(fetchChat(params.chatId));
+    this.markRead();
+  }
+
+  componentDidUpdate(prevProps) {
+    const markReadConditions = [
+      () => this.props.chat !== undefined,
+      () => this.props.chat.get('unread') > 0,
+    ];
+
+    if (markReadConditions.every(c => c() === true))
+      this.markRead();
   }
 
   render() {