mirror of https://framagit.org/tykayn/mastodon.git
118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ConversationStream from './conversation-stream';
|
|
|
|
/**
|
|
* a conversation between the current logged in user and one recipient
|
|
*/
|
|
export default class ConversationItem extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
messages : PropTypes.array, // our and their message sorted chronologically
|
|
recipient : PropTypes.any, // account of the person we talk to, not current logged in account
|
|
newMessages: PropTypes.number,
|
|
displayed : PropTypes.bool,
|
|
};
|
|
following = [];
|
|
|
|
static defaultProps = {
|
|
newMessages: 0,
|
|
displayed : true,
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
console.log('props', props);
|
|
this.state = {
|
|
composeMessage: '',
|
|
displayed : this.props.displayed,
|
|
newMessages : this.props.newMessages,
|
|
isFocused : false,
|
|
};
|
|
}
|
|
|
|
submitCompose = (e) => {
|
|
e.preventDefault();
|
|
|
|
console.log('submit');
|
|
};
|
|
|
|
toggleVisibility = () => {
|
|
this.setState({ 'displayed': !this.state.displayed });
|
|
};
|
|
toggleFocused = () => {
|
|
this.setState({ 'isFocused': !this.state.isFocused });
|
|
};
|
|
|
|
handleChange = (e) => {
|
|
e.preventDefault();
|
|
console.log('e', e);
|
|
};
|
|
|
|
render() {
|
|
const hasNewClass = this.state.newMessages ? 'has-new-message' : 'nothing-new';
|
|
const isVisible = this.state.displayed ? 'displayed' : 'hidden';
|
|
const isFocused = this.state.isFocused ? 'isFocused' : 'not-focused';
|
|
const list = (
|
|
<li className={'conversation-item ' + hasNewClass + ' ' + isVisible + ' ' + isFocused}>
|
|
<div className='top-title'>
|
|
<i
|
|
role='img'
|
|
className='fa fa-comment-o column-header__icon fa-fw'
|
|
/>
|
|
<span className='username'>
|
|
{this.props.recipient.username}
|
|
</span >
|
|
{/*<Contact account={this.props.recipient} />*/}
|
|
{this.props.newMessages > 0 && (
|
|
<span className='new-message-counter'>
|
|
({this.props.newMessages})
|
|
</span >
|
|
)}
|
|
<button
|
|
className='btn btn-small'
|
|
onClick={this.toggleVisibility}
|
|
>
|
|
<i
|
|
role='img'
|
|
className='fa fa-caret-down column-header__icon fa-fw'
|
|
/>
|
|
</button >
|
|
</div >
|
|
<ConversationStream messages={this.props.messages} />
|
|
<div className='conversation_input'>
|
|
<form
|
|
action='#'
|
|
onSubmit={this.submitCompose}
|
|
>
|
|
<textarea
|
|
name='messager'
|
|
id=''
|
|
cols='15'
|
|
rows='3'
|
|
className='messager-textarea'
|
|
placeholder='allez dis nous tout'
|
|
onFocusCapture={this.toggleFocused}
|
|
onBlurCapture={this.toggleFocused}
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
<input
|
|
type='submit'
|
|
name='submit'
|
|
value='Send'
|
|
/>
|
|
</form >
|
|
</div >
|
|
</li >
|
|
);
|
|
return (
|
|
<ul >
|
|
{list}
|
|
</ul >
|
|
);
|
|
|
|
}
|
|
|
|
}
|