102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { connect } from 'react-redux'
|
|
import {
|
|
fetchChatConversationAccountSuggestions,
|
|
clearChatConversationAccountSuggestions,
|
|
} from '../actions/chats'
|
|
import { createChatConversation } from '../actions/chat_conversations'
|
|
import Account from '../components/account'
|
|
import Button from '../components/button'
|
|
import Input from '../components/input'
|
|
import Form from '../components/form'
|
|
import Text from '../components/text'
|
|
|
|
class ChatConversationCreate extends React.PureComponent {
|
|
|
|
static contextTypes = {
|
|
router: PropTypes.object
|
|
}
|
|
|
|
state = {
|
|
query: '',
|
|
}
|
|
|
|
onChange = (query) => {
|
|
this.setState({ query })
|
|
this.props.onChange(query)
|
|
}
|
|
|
|
handleOnCreateChatConversation = (accountId) => {
|
|
this.props.onCreateChatConversation(accountId, this.context.router.history)
|
|
this.props.onClearChatConversationAccountSuggestions()
|
|
|
|
if (this.props.isModal && !!this.props.onCloseModal) {
|
|
this.props.onCloseModal()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { query, suggestionsIds } = this.props
|
|
|
|
return (
|
|
<Form>
|
|
<div className={[_s.d, _s.bgPrimary, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
|
<div className={[_s.d, _s.px15, _s.pt10].join(' ')}>
|
|
<Input
|
|
title='Search for a user'
|
|
value={query}
|
|
onChange={this.onChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className={[_s.d, _s.pt10].join(' ')}>
|
|
<div className={[_s.d].join(' ')}>
|
|
<Text weight='bold' size='small' color='secondary' className={[_s.d, _s.px15, _s.ml15, _s.mt5, _s.mb15].join(' ')}>
|
|
Search results ({suggestionsIds.size})
|
|
</Text>
|
|
{
|
|
suggestionsIds &&
|
|
suggestionsIds.map((accountId) => (
|
|
<Account
|
|
compact
|
|
noClick
|
|
key={`chat-conversation-account-create-${accountId}`}
|
|
id={accountId}
|
|
onActionClick={() => this.handleOnCreateChatConversation(accountId)}
|
|
actionIcon='add'
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
suggestionsIds: state.getIn(['chats', 'createChatConversationSuggestionIds']),
|
|
})
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
onChange(value) {
|
|
dispatch(fetchChatConversationAccountSuggestions(value))
|
|
},
|
|
onCreateChatConversation(accountId, routerHistory) {
|
|
dispatch(createChatConversation(accountId, routerHistory))
|
|
},
|
|
onClearChatConversationAccountSuggestions() {
|
|
dispatch(clearChatConversationAccountSuggestions())
|
|
}
|
|
})
|
|
|
|
ChatConversationCreate.propTypes = {
|
|
onChange: PropTypes.func.isRequired,
|
|
onCreateChatConversation: PropTypes.func.isRequired,
|
|
isModal: PropTypes.bool,
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationCreate) |