Chats: rudimentary sending a message

app/soapbox/actions/chats.js

@@ -11,6 +11,10 @@ export const CHAT_MESSAGES_FETCH_REQUEST = 'CHAT_MESSAGES_FETCH_REQUEST';
 export const CHAT_MESSAGES_FETCH_SUCCESS = 'CHAT_MESSAGES_FETCH_SUCCESS';
 export const CHAT_MESSAGES_FETCH_FAIL    = 'CHAT_MESSAGES_FETCH_FAIL';
 
+export const CHAT_MESSAGE_SEND_REQUEST = 'CHAT_MESSAGE_SEND_REQUEST';
+export const CHAT_MESSAGE_SEND_SUCCESS = 'CHAT_MESSAGE_SEND_SUCCESS';
+export const CHAT_MESSAGE_SEND_FAIL    = 'CHAT_MESSAGE_SEND_FAIL';
+
 export function fetchChats() {
   return (dispatch, getState) => {
     dispatch({ type: CHATS_FETCH_REQUEST });
@@ -34,6 +38,17 @@ export function fetchChatMessages(chatId) {
   };
 }
 
+export function sendChatMessage(chatId, params) {
+  return (dispatch, getState) => {
+    dispatch({ type: CHAT_MESSAGE_SEND_REQUEST, chatId, params });
+    return api(getState).post(`/api/v1/pleroma/chats/${chatId}/messages`, params).then(({ data }) => {
+      dispatch({ type: CHAT_MESSAGE_SEND_SUCCESS, chatId, data });
+    }).catch(error => {
+      dispatch({ type: CHAT_MESSAGE_SEND_FAIL, chatId, error });
+    });
+  };
+}
+
 export function openChat(chatId) {
   return (dispatch, getState) => {
     const panes = getSettings(getState()).getIn(['chats', 'panes']);

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

@@ -7,11 +7,11 @@ 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 } from 'soapbox/actions/chats';
+import { closeChat, toggleChat, fetchChatMessages, sendChatMessage } from 'soapbox/actions/chats';
 import { List as ImmutableList } from 'immutable';
 
 const mapStateToProps = (state, { pane }) => ({
-  chatMessages: state.getIn(['chat_messages', pane.get('chat_id')], ImmutableList()),
+  chatMessages: state.getIn(['chat_messages', pane.get('chat_id')], ImmutableList()).reverse(),
 });
 
 export default @connect(mapStateToProps)
@@ -30,6 +30,10 @@ class ChatWindow extends ImmutablePureComponent {
     chatMessages: ImmutableList(),
   }
 
+  state = {
+    content: '',
+  }
+
   handleChatClose = (chatId) => {
     return (e) => {
       this.props.dispatch(closeChat(chatId));
@@ -42,6 +46,19 @@ class ChatWindow extends ImmutablePureComponent {
     };
   }
 
+  handleKeyDown = (chatId) => {
+    return (e) => {
+      if (e.key === 'Enter') {
+        this.props.dispatch(sendChatMessage(chatId, this.state));
+        this.setState({ content: '' });
+      }
+    };
+  }
+
+  handleContentChange = (e) => {
+    this.setState({ content: e.target.value });
+  }
+
   componentDidMount() {
     const { dispatch, pane, chatMessages } = this.props;
     if (chatMessages && chatMessages.count() < 1)
@@ -78,7 +95,13 @@ class ChatWindow extends ImmutablePureComponent {
             ))}
           </div>
           <div className='pane__actions'>
-            <input type='text' placeholder='Send a message...' />
+            <input
+              type='text'
+              placeholder='Send a message...'
+              onKeyDown={this.handleKeyDown(chat.get('id'))}
+              onChange={this.handleContentChange}
+              value={this.state.content}
+            />
           </div>
         </div>
       </div>

app/soapbox/reducers/chat_messages.js

@@ -1,4 +1,7 @@
-import { CHAT_MESSAGES_FETCH_SUCCESS } from 'soapbox/actions/chats';
+import {
+  CHAT_MESSAGES_FETCH_SUCCESS,
+  CHAT_MESSAGE_SEND_SUCCESS,
+} from 'soapbox/actions/chats';
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
 const initialState = ImmutableMap();
@@ -7,6 +10,8 @@ export default function chatMessages(state = initialState, action) {
   switch(action.type) {
   case CHAT_MESSAGES_FETCH_SUCCESS:
     return state.set(action.chatId, fromJS(action.data));
+  case CHAT_MESSAGE_SEND_SUCCESS:
+    return state.set(action.chatId, state.get(action.chatId).insert(0, fromJS(action.data)));
   default:
     return state;
   }