Chats: mark chats as read

app/soapbox/actions/chats.js

@@ -19,6 +19,10 @@ export const CHAT_FETCH_REQUEST = 'CHAT_FETCH_REQUEST';
 export const CHAT_FETCH_SUCCESS = 'CHAT_FETCH_SUCCESS';
 export const CHAT_FETCH_FAIL    = 'CHAT_FETCH_FAIL';
 
+export const CHAT_READ_REQUEST = 'CHAT_READ_REQUEST';
+export const CHAT_READ_SUCCESS = 'CHAT_READ_SUCCESS';
+export const CHAT_READ_FAIL    = 'CHAT_READ_FAIL';
+
 export function fetchChats() {
   return (dispatch, getState) => {
     dispatch({ type: CHATS_FETCH_REQUEST });
@@ -56,9 +60,12 @@ export function sendChatMessage(chatId, params) {
 
 export function openChat(chatId) {
   return (dispatch, getState) => {
-    const panes = getSettings(getState()).getIn(['chats', 'panes']);
+    const state = getState();
+    const panes = getSettings(state).getIn(['chats', 'panes']);
     const idx = panes.findIndex(pane => pane.get('chat_id') === chatId);
 
+    dispatch(markChatRead(chatId));
+
     if (idx > -1) {
       return dispatch(changeSetting(['chats', 'panes', idx, 'state'], 'open'));
     } else {
@@ -88,6 +95,7 @@ export function toggleChat(chatId) {
 
     if (idx > -1) {
       const state = pane.get('state') === 'minimized' ? 'open' : 'minimized';
+      if (state === 'open') dispatch(markChatRead(chatId));
       return dispatch(changeSetting(['chats', 'panes', idx, 'state'], state));
     } else {
       return false;
@@ -114,3 +122,20 @@ export function startChat(accountId) {
     });
   };
 }
+
+export function markChatRead(chatId, lastReadId) {
+  return (dispatch, getState) => {
+    const chat = getState().getIn(['chats', chatId]);
+    if (!lastReadId) lastReadId = chat.get('last_message');
+
+    if (chat.get('unread') < 1) return;
+    if (!lastReadId) return;
+
+    dispatch({ type: CHAT_READ_REQUEST, chatId, lastReadId });
+    api(getState).post(`/api/v1/pleroma/chats/${chatId}/read`, { last_read_id: lastReadId }).then(({ data }) => {
+      dispatch({ type: CHAT_READ_SUCCESS, chat: data, lastReadId });
+    }).catch(error => {
+      dispatch({ type: CHAT_READ_FAIL, chatId, error, lastReadId });
+    });
+  };
+}

app/soapbox/features/chats/components/chat_window.js

@@ -7,7 +7,13 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Avatar from 'soapbox/components/avatar';
 import { acctFull } from 'soapbox/utils/accounts';
 import IconButton from 'soapbox/components/icon_button';
-import { closeChat, toggleChat, fetchChatMessages, sendChatMessage } from 'soapbox/actions/chats';
+import {
+  closeChat,
+  toggleChat,
+  fetchChatMessages,
+  sendChatMessage,
+  markChatRead,
+} from 'soapbox/actions/chats';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ChatMessageList from './chat_message_list';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
@@ -65,6 +71,11 @@ class ChatWindow extends ImmutablePureComponent {
     this.setState({ content: e.target.value });
   }
 
+  handleReadChat = (e) => {
+    const { dispatch, chat } = this.props;
+    dispatch(markChatRead(chat.get('id')));
+  }
+
   focusInput = () => {
     if (!this.inputElem) return;
     this.inputElem.focus();
@@ -99,7 +110,7 @@ class ChatWindow extends ImmutablePureComponent {
     const unreadCount = chat.get('unread');
 
     return (
-      <div className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
+      <div className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }} onMouseOver={this.handleReadChat}>
         <div className='pane__header'>
           <Avatar account={account} size={18} />
           <button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>

app/soapbox/reducers/chats.js

@@ -1,4 +1,9 @@
-import { CHATS_FETCH_SUCCESS, CHAT_FETCH_SUCCESS } from 'soapbox/actions/chats';
+import {
+  CHATS_FETCH_SUCCESS,
+  CHAT_FETCH_SUCCESS,
+  CHAT_READ_SUCCESS,
+  CHAT_READ_REQUEST,
+} from 'soapbox/actions/chats';
 import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
 import { normalizeChat } from 'soapbox/actions/importer/normalizer';
 import { Map as ImmutableMap, fromJS } from 'immutable';
@@ -18,6 +23,10 @@ export default function chats(state = initialState, action) {
     return importChats(state, [action.chat]);
   case CHAT_FETCH_SUCCESS:
     return importChats(state, [action.chat]);
+  case CHAT_READ_REQUEST:
+    return state.setIn([action.chatId, 'unread'], 0);
+  case CHAT_READ_SUCCESS:
+    return importChats(state, [action.chat]);
   default:
     return state;
   }