105 lines
2.7 KiB
JavaScript
105 lines
2.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import styles from './styles.scss';
|
|
import { Link } from 'react-router';
|
|
import { withRouter } from 'react-router';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import UserListItem from './user-list-item/component.jsx';
|
|
import ChatListItem from './chat-list-item/component.jsx';
|
|
|
|
class UserList extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleMessageClick = this.handleMessageClick.bind(this);
|
|
this.handleParticipantDblClick = this.handleParticipantDblClick.bind(this);
|
|
}
|
|
|
|
handleMessageClick(chatID) {
|
|
this.props.router.push(`/users/chat/${chatID}`);
|
|
}
|
|
|
|
handleParticipantDblClick(userID) {
|
|
this.props.router.push(`/users/chat/${userID}`);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className={styles.userList}>
|
|
{this.renderHeader()}
|
|
{this.renderContent()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderHeader() {
|
|
return (
|
|
<div className={styles.header}>
|
|
<h2 className={styles.headerTitle}>
|
|
<FormattedMessage
|
|
id="app.userlist.participantsTitle"
|
|
description="Title for the Header"
|
|
defaultMessage="Participants"
|
|
/>
|
|
</h2>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderContent() {
|
|
return (
|
|
<div className={styles.content}>
|
|
{this.renderMessages()}
|
|
{this.renderParticipants()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderMessages() {
|
|
return (
|
|
<div className={styles.messages}>
|
|
<h3 className={styles.smallTitle}>
|
|
<FormattedMessage
|
|
id="app.userlist.messagesTitle"
|
|
description="Title for the messages list"
|
|
defaultMessage="Messages"
|
|
/>
|
|
</h3>
|
|
<ul className={styles.chatsList} tabIndex="1">
|
|
<ChatListItem onClick={() => this.handleMessageClick('public')} />
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderParticipants() {
|
|
return (
|
|
<div className={styles.participants}>
|
|
<h3 className={styles.smallTitle}>
|
|
<FormattedMessage
|
|
id="app.userlist.participantsTitle"
|
|
description="Title for the Participants list"
|
|
defaultMessage="Participants"
|
|
/>
|
|
({this.props.users.length})
|
|
</h3>
|
|
<div className={styles.scrollableList}>
|
|
<ul className={styles.participantsList} tabIndex="1">
|
|
{this.props.users.map(user => (
|
|
<UserListItem
|
|
onDoubleClick={() => this.handleParticipantDblClick(user.id)}
|
|
accessibilityLabel={'Status abc'}
|
|
accessible={true}
|
|
key={user.id}
|
|
user={user}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(UserList);
|