2019-12-21 15:16:13 +01:00
|
|
|
import React from 'react';
|
2019-12-23 17:00:57 +01:00
|
|
|
import PropTypes from 'prop-types';
|
2020-01-06 20:50:36 +01:00
|
|
|
import accounts, { me } from '../../../../initial_state';
|
2020-01-07 11:11:16 +01:00
|
|
|
import api from '../../../../api';
|
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
2020-01-08 10:12:38 +01:00
|
|
|
import { mockContactList } from './mocks/mockContactList';
|
2020-01-07 11:11:16 +01:00
|
|
|
import Contact from './Contact';
|
2020-01-16 17:10:18 +01:00
|
|
|
import classNames from 'classnames';
|
2019-12-18 16:16:08 +01:00
|
|
|
|
2020-01-07 11:11:16 +01:00
|
|
|
export default class ContactsList extends ImmutablePureComponent {
|
2019-12-18 16:16:08 +01:00
|
|
|
|
2019-12-23 17:00:57 +01:00
|
|
|
static propTypes = {
|
2020-01-07 11:11:16 +01:00
|
|
|
myAccount : PropTypes.array,
|
2019-12-23 17:00:57 +01:00
|
|
|
showList : PropTypes.bool,
|
|
|
|
contactList : PropTypes.array,
|
|
|
|
conversationList: PropTypes.array,
|
2020-01-06 20:50:36 +01:00
|
|
|
following_count : PropTypes.number,
|
2019-12-23 17:00:57 +01:00
|
|
|
};
|
|
|
|
static defaultProps = {
|
2020-01-07 11:11:16 +01:00
|
|
|
showList : true,
|
|
|
|
myAccount : null,
|
|
|
|
userID : me,
|
|
|
|
following_count : 0,
|
|
|
|
contactList : mockContactList,
|
|
|
|
conversationList: mockContactList,
|
2019-12-23 17:00:57 +01:00
|
|
|
};
|
2019-12-18 16:16:08 +01:00
|
|
|
|
2019-12-23 17:00:57 +01:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-01-06 20:50:36 +01:00
|
|
|
|
2019-12-23 17:00:57 +01:00
|
|
|
this.state = {
|
2020-01-06 20:50:36 +01:00
|
|
|
following_count : accounts.accounts[me].following_count,
|
|
|
|
showList : props.showList,
|
2020-01-07 11:11:16 +01:00
|
|
|
myAccount : accounts.accounts[me],
|
|
|
|
contactList : mockContactList,
|
|
|
|
conversationList: mockContactList,
|
2019-12-23 17:00:57 +01:00
|
|
|
};
|
2020-01-07 11:11:16 +01:00
|
|
|
// this.fetchContacts(1);
|
2019-12-18 16:16:08 +01:00
|
|
|
}
|
|
|
|
|
2019-12-23 17:00:57 +01:00
|
|
|
submitCompose() {
|
|
|
|
console.log('submit message');
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleList = () => {
|
|
|
|
this.setState((state) => {
|
|
|
|
return {
|
|
|
|
showList: !state.showList,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-01-07 11:11:16 +01:00
|
|
|
/**
|
|
|
|
* find followed accounts
|
|
|
|
* @param AccountID
|
|
|
|
* @returns {Promise<AxiosResponse<T> | void>}
|
|
|
|
*/
|
|
|
|
fetchContacts = (AccountID = me) => {
|
|
|
|
return api(this.getState()).get('/api/v1/accounts/' + AccountID + '/following').then(resp => {
|
|
|
|
console.log('resp', resp);
|
|
|
|
}).catch(err => console.error('err', err));
|
|
|
|
};
|
|
|
|
|
2019-12-18 16:16:08 +01:00
|
|
|
render() {
|
2019-12-21 17:03:26 +01:00
|
|
|
|
2020-01-07 11:11:16 +01:00
|
|
|
let renderedList = (
|
|
|
|
<span >no contacts</span >
|
|
|
|
);
|
|
|
|
if (this.props.contactList) {
|
|
|
|
renderedList = this.props.contactList.map(account => {
|
|
|
|
return (
|
|
|
|
<li
|
|
|
|
className='contact-item'
|
|
|
|
key={account.id}
|
|
|
|
>
|
|
|
|
<Contact account={account} />
|
|
|
|
</li >
|
|
|
|
);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-01-07 12:21:34 +01:00
|
|
|
const showListClass = (this.state.showList ? 'active' : 'inactive');
|
|
|
|
const classList = 'btn btn-primary toggle-list ' + showListClass;
|
2019-12-21 15:16:13 +01:00
|
|
|
return (
|
|
|
|
<div className='messaging-container'>
|
2020-01-16 17:10:18 +01:00
|
|
|
<div
|
|
|
|
className={classNames('messaging-box ', {
|
|
|
|
'active' : this.state.showList,
|
|
|
|
'inactive': !this.state.showList,
|
|
|
|
})}
|
|
|
|
>
|
2020-01-08 10:12:38 +01:00
|
|
|
<div className='card-title '>
|
2019-12-21 15:16:13 +01:00
|
|
|
<i
|
|
|
|
role='img'
|
2020-01-08 10:12:38 +01:00
|
|
|
className='fa fa-comment column-header__icon fa-fw'
|
2019-12-21 15:16:13 +01:00
|
|
|
/>
|
2020-01-07 12:21:34 +01:00
|
|
|
{this.state.following_count} contacts
|
|
|
|
<button
|
|
|
|
className={classList}
|
|
|
|
onClick={this.toggleList}
|
|
|
|
>
|
|
|
|
{this.state.showList && (
|
|
|
|
<i className='fa fa-caret-up' />
|
|
|
|
)}
|
|
|
|
{!this.state.showList && (
|
|
|
|
<i className='fa fa-caret-left' />
|
|
|
|
)}
|
|
|
|
</button >
|
2019-12-21 15:16:13 +01:00
|
|
|
</div >
|
2020-01-06 20:50:36 +01:00
|
|
|
<div className='user-list'>
|
2019-12-21 15:16:13 +01:00
|
|
|
|
2019-12-23 17:00:57 +01:00
|
|
|
{this.state.showList && (
|
|
|
|
<div className='contact-list-container'>
|
|
|
|
<ul className='contact-list'>
|
|
|
|
{renderedList}
|
|
|
|
</ul >
|
|
|
|
</div >
|
|
|
|
)}
|
|
|
|
</div >
|
2019-12-21 15:16:13 +01:00
|
|
|
|
|
|
|
</div >
|
|
|
|
</div >
|
|
|
|
);
|
2019-12-18 16:16:08 +01:00
|
|
|
}
|
|
|
|
|
2019-12-21 17:03:26 +01:00
|
|
|
}
|