diff --git a/app/soapbox/actions/chats.js b/app/soapbox/actions/chats.js index 35543ca8c..0391a6e08 100644 --- a/app/soapbox/actions/chats.js +++ b/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']); diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js index 7997bca2e..072aa0f5c 100644 --- a/app/soapbox/features/chats/components/chat_window.js +++ b/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 { ))}