Chats: display chat message content
This commit is contained in:
parent
5518959531
commit
cab490e1d3
6 changed files with 120 additions and 57 deletions
|
@ -7,6 +7,10 @@ export const CHATS_FETCH_REQUEST = 'CHATS_FETCH_REQUEST';
|
|||
export const CHATS_FETCH_SUCCESS = 'CHATS_FETCH_SUCCESS';
|
||||
export const CHATS_FETCH_FAIL = 'CHATS_FETCH_FAIL';
|
||||
|
||||
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 function fetchChats() {
|
||||
return (dispatch, getState) => {
|
||||
dispatch({ type: CHATS_FETCH_REQUEST });
|
||||
|
@ -19,6 +23,17 @@ export function fetchChats() {
|
|||
};
|
||||
}
|
||||
|
||||
export function fetchChatMessages(chatId) {
|
||||
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, data });
|
||||
}).catch(error => {
|
||||
dispatch({ type: CHAT_MESSAGES_FETCH_FAIL, chatId, error });
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function openChat(chatId) {
|
||||
return (dispatch, getState) => {
|
||||
const panes = getSettings(getState()).getIn(['chats', 'panes']);
|
||||
|
|
|
@ -8,15 +8,8 @@ import { getSettings } from 'soapbox/actions/settings';
|
|||
import ChatList from './chat_list';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { makeGetChat } from 'soapbox/selectors';
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import { acctFull } from 'soapbox/utils/accounts';
|
||||
import {
|
||||
openChat,
|
||||
closeChat,
|
||||
toggleChat,
|
||||
toggleMainWindow,
|
||||
} from 'soapbox/actions/chats';
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
import { openChat, toggleMainWindow } from 'soapbox/actions/chats';
|
||||
import ChatWindow from './chat_window';
|
||||
|
||||
const addChatsToPanes = (state, panesData) => {
|
||||
const getChat = makeGetChat();
|
||||
|
@ -52,56 +45,10 @@ class ChatPanes extends ImmutablePureComponent {
|
|||
// TODO: Focus chat input
|
||||
}
|
||||
|
||||
handleChatClose = (chatId) => {
|
||||
return (e) => {
|
||||
this.props.dispatch(closeChat(chatId));
|
||||
};
|
||||
}
|
||||
|
||||
handleChatToggle = (chatId) => {
|
||||
return (e) => {
|
||||
this.props.dispatch(toggleChat(chatId));
|
||||
};
|
||||
}
|
||||
|
||||
handleMainWindowToggle = () => {
|
||||
this.props.dispatch(toggleMainWindow());
|
||||
}
|
||||
|
||||
renderChatPane = (pane, i) => {
|
||||
const chat = pane.get('chat');
|
||||
const account = pane.getIn(['chat', 'account']);
|
||||
if (!chat || !account) return null;
|
||||
|
||||
const right = (285 * (i + 1)) + 20;
|
||||
|
||||
return (
|
||||
<div key={i} className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
|
||||
<div className='pane__header'>
|
||||
<Avatar account={account} size={18} />
|
||||
<button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
|
||||
@{acctFull(account)}
|
||||
</button>
|
||||
<div className='pane__close'>
|
||||
<IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='pane__content'>
|
||||
<div style={{ padding: '10px' }}>TODO: Show the chat messages</div>
|
||||
<div className='pane__actions'>
|
||||
<input type='text' placeholder='Send a message...' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderChatPanes = (panes) => (
|
||||
panes.map((pane, i) =>
|
||||
this.renderChatPane(pane, i)
|
||||
)
|
||||
)
|
||||
|
||||
render() {
|
||||
const { panesData } = this.props;
|
||||
const panes = panesData.get('panes');
|
||||
|
@ -119,7 +66,9 @@ class ChatPanes extends ImmutablePureComponent {
|
|||
<ChatList onClickChat={this.handleClickChat} />
|
||||
</div>
|
||||
</div>
|
||||
{this.renderChatPanes(panes)}
|
||||
{panes.map((pane, i) =>
|
||||
<ChatWindow idx={i} pane={pane} key={pane.get('chat_id')} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
84
app/soapbox/features/chats/components/chat_window.js
Normal file
84
app/soapbox/features/chats/components/chat_window.js
Normal file
|
@ -0,0 +1,84 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
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 IconButton from 'soapbox/components/icon_button';
|
||||
import { closeChat, toggleChat, fetchChatMessages } from 'soapbox/actions/chats';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
|
||||
const mapStateToProps = (state, { pane }) => ({
|
||||
chatMessages: state.getIn(['chat_messages', pane.get('chat_id')], ImmutableList()),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class ChatWindow extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
pane: ImmutablePropTypes.map.isRequired,
|
||||
idx: PropTypes.number,
|
||||
chatMessages: ImmutablePropTypes.list,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
chatMessages: ImmutableList(),
|
||||
}
|
||||
|
||||
handleChatClose = (chatId) => {
|
||||
return (e) => {
|
||||
this.props.dispatch(closeChat(chatId));
|
||||
};
|
||||
}
|
||||
|
||||
handleChatToggle = (chatId) => {
|
||||
return (e) => {
|
||||
this.props.dispatch(toggleChat(chatId));
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch, pane, chatMessages } = this.props;
|
||||
if (chatMessages && chatMessages.count() < 1)
|
||||
dispatch(fetchChatMessages(pane.get('chat_id')));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { pane, idx, chatMessages } = this.props;
|
||||
const chat = pane.get('chat');
|
||||
const account = pane.getIn(['chat', 'account']);
|
||||
if (!chat || !account) return null;
|
||||
|
||||
const right = (285 * (idx + 1)) + 20;
|
||||
|
||||
return (
|
||||
<div className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
|
||||
<div className='pane__header'>
|
||||
<Avatar account={account} size={18} />
|
||||
<button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
|
||||
@{acctFull(account)}
|
||||
</button>
|
||||
<div className='pane__close'>
|
||||
<IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='pane__content'>
|
||||
<div className='chat-messages'>
|
||||
{chatMessages.map(chatMessage =>
|
||||
<div class='chat-message'>{chatMessage.get('content')}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='pane__actions'>
|
||||
<input type='text' placeholder='Send a message...' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
13
app/soapbox/reducers/chat_messages.js
Normal file
13
app/soapbox/reducers/chat_messages.js
Normal file
|
@ -0,0 +1,13 @@
|
|||
import { CHAT_MESSAGES_FETCH_SUCCESS } from 'soapbox/actions/chats';
|
||||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
export default function chatMessages(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case CHAT_MESSAGES_FETCH_SUCCESS:
|
||||
return state.set(action.chatId, fromJS(action.data));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
|
@ -8,7 +8,7 @@ const importChats = (state, chats) =>
|
|||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
export default function admin(state = initialState, action) {
|
||||
export default function chats(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case CHAT_IMPORT:
|
||||
return importChat(state, action.chat);
|
||||
|
|
|
@ -44,6 +44,7 @@ import me from './me';
|
|||
import auth from './auth';
|
||||
import admin from './admin';
|
||||
import chats from './chats';
|
||||
import chat_messages from './chat_messages';
|
||||
|
||||
const reducers = {
|
||||
dropdown_menu,
|
||||
|
@ -91,6 +92,7 @@ const reducers = {
|
|||
auth,
|
||||
admin,
|
||||
chats,
|
||||
chat_messages,
|
||||
};
|
||||
|
||||
export default combineReducers(reducers);
|
||||
|
|
Loading…
Reference in a new issue