diff --git a/app/soapbox/actions/chats.js b/app/soapbox/actions/chats.js index 5529da6f6..5fa6811ee 100644 --- a/app/soapbox/actions/chats.js +++ b/app/soapbox/actions/chats.js @@ -167,13 +167,13 @@ export function deleteChatMessage(chatId, messageId) { } /** Start a chat and launch it in the UI */ -export function launchChat(account, router) { +export function launchChat(accountId, router, forceNavigate = false) { const isMobile = width => width <= 1190; return (dispatch, getState) => { // TODO: make this faster - return dispatch(startChat(account.get('id'))).then(chat => { - if (isMobile(window.innerWidth)) { + return dispatch(startChat(accountId)).then(chat => { + if (forceNavigate || isMobile(window.innerWidth)) { router.push(`/chats/${chat.id}`); } else { dispatch(openChat(chat.id)); diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js index 0df68e5f9..95c59b4b2 100644 --- a/app/soapbox/containers/status_container.js +++ b/app/soapbox/containers/status_container.js @@ -153,7 +153,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ }, onChat(account, router) { - dispatch(launchChat(account, router)); + dispatch(launchChat(account.get('id'), router)); }, onMention(account, router) { diff --git a/app/soapbox/features/account_timeline/containers/header_container.js b/app/soapbox/features/account_timeline/containers/header_container.js index 6cf505e56..7ce9f8e9a 100644 --- a/app/soapbox/features/account_timeline/containers/header_container.js +++ b/app/soapbox/features/account_timeline/containers/header_container.js @@ -162,7 +162,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ }, onChat(account, router) { - dispatch(launchChat(account, router)); + dispatch(launchChat(account.get('id'), router)); }, onDeactivateUser(account) { diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js index ddd0338c7..e6362e5b2 100644 --- a/app/soapbox/features/chats/components/chat_panes.js +++ b/app/soapbox/features/chats/components/chat_panes.js @@ -6,12 +6,18 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { getSettings } from 'soapbox/actions/settings'; import ChatList from './chat_list'; import { FormattedMessage } from 'react-intl'; -import { openChat, toggleMainWindow } from 'soapbox/actions/chats'; +import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats'; import ChatWindow from './chat_window'; import { shortNumberFormat } from 'soapbox/utils/numbers'; import AudioToggle from 'soapbox/features/chats/components/audio_toggle'; import { List as ImmutableList } from 'immutable'; import { createSelector } from 'reselect'; +import AccountSearch from 'soapbox/components/account_search'; +import { injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' }, +}); const getChatsUnreadCount = state => { const chats = state.get('chats'); @@ -43,9 +49,15 @@ const makeMapStateToProps = () => { }; export default @connect(makeMapStateToProps) +@injectIntl class ChatPanes extends ImmutablePureComponent { + static contextTypes = { + router: PropTypes.object, + }; + static propTypes = { + intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, mainWindowState: PropTypes.string, panes: ImmutablePropTypes.list, @@ -55,12 +67,16 @@ class ChatPanes extends ImmutablePureComponent { this.props.dispatch(openChat(chat.get('id'))); } + handleSuggestion = accountId => { + this.props.dispatch(launchChat(accountId, this.context.router.history)); + } + handleMainWindowToggle = () => { this.props.dispatch(toggleMainWindow()); } render() { - const { panes, mainWindowState, unreadCount } = this.props; + const { intl, panes, mainWindowState, unreadCount } = this.props; const open = mainWindowState === 'open'; const mainWindowPane = ( @@ -73,10 +89,18 @@ class ChatPanes extends ImmutablePureComponent {
- {open && } - />} + {open && ( + <> + } + /> + + + )}
); diff --git a/app/soapbox/features/chats/index.js b/app/soapbox/features/chats/index.js index 888df5a43..73f2630bd 100644 --- a/app/soapbox/features/chats/index.js +++ b/app/soapbox/features/chats/index.js @@ -1,26 +1,36 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; import Column from '../../components/column'; import ColumnHeader from '../../components/column_header'; +import { launchChat } from 'soapbox/actions/chats'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ChatList from './components/chat_list'; import AudioToggle from 'soapbox/features/chats/components/audio_toggle'; +import AccountSearch from 'soapbox/components/account_search'; const messages = defineMessages({ title: { id: 'column.chats', defaultMessage: 'Chats' }, + searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' }, }); -export default @injectIntl +export default @connect() +@injectIntl class ChatIndex extends React.PureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - }; - static contextTypes = { router: PropTypes.object, }; + static propTypes = { + intl: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, + }; + + handleSuggestion = accountId => { + this.props.dispatch(launchChat(accountId, this.context.router.history, true)); + } + handleClickChat = (chat) => { this.context.router.history.push(`/chats/${chat.get('id')}`); } @@ -34,7 +44,15 @@ class ChatIndex extends React.PureComponent { icon='comment' title={intl.formatMessage(messages.title)} /> -
+ +
+ +
+ + ({ }, onChat(account, router) { - dispatch(launchChat(account, router)); + dispatch(launchChat(account.get('id'), router)); }, onMention(account, router) { diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index 27049b79e..79c5d32d1 100644 --- a/app/soapbox/features/status/index.js +++ b/app/soapbox/features/status/index.js @@ -257,7 +257,7 @@ class Status extends ImmutablePureComponent { } handleChatClick = (account, router) => { - this.props.dispatch(launchChat(account, router)); + this.props.dispatch(launchChat(account.get('id'), router)); } handleMentionClick = (account, router) => { diff --git a/app/styles/chats.scss b/app/styles/chats.scss index d241c63da..9266a43e5 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -24,6 +24,15 @@ height: 31px; } + .search--account { + border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2); + + .autosuggest-textarea__suggestions { + top: auto; + bottom: 100%; + } + } + &__header { box-sizing: border-box; background: var(--brand-color);