mastodon/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js

import React from 'react';
import PropTypes from 'prop-types';
import accounts, { me } from '../../../../initial_state';
import api from '../../../../api';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { mockContactList } from './mockContactList';
import Contact from './Contact';

export default class ContactsList extends ImmutablePureComponent {

  static propTypes = {
    myAccount       : PropTypes.array,
    showList        : PropTypes.bool,
    contactList     : PropTypes.array,
    conversationList: PropTypes.array,
    following_count : PropTypes.number,
  };
  static defaultProps = {
    showList        : true,
    myAccount       : null,
    userID          : me,
    following_count : 0,
    contactList     : mockContactList,
    conversationList: mockContactList,
  };

  constructor(props) {
    super(props);

    this.state = {
      following_count : accounts.accounts[me].following_count,
      showList        : props.showList,
      myAccount       : accounts.accounts[me],
      contactList     : mockContactList,
      conversationList: mockContactList,
    };
    console.log('this.state', this.state);
    // this.fetchContacts(1);
  }

  submitCompose() {
    console.log('submit message');
  }

  toggleList = () => {
    this.setState((state) => {
      return {
        showList: !state.showList,
      };
    });
  };

  /**
   * 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));
  };

  render() {

    console.log('this.state', this.state);
    let renderedList = (
      <span >no contacts</span >
    );
    if (this.props.contactList) {
      renderedList = this.props.contactList.map(account => {
        console.log('elem', account);
        return (
          <li
            className='contact-item'
            key={account.id}
          >
            <Contact account={account} />
          </li >
        );
      });
    }

    const classList = 'btn btn-primary toggle-list ' + (this.state.showList ? 'active' : 'inactive');
    return (
      <div className='messaging-container'>
        <div className='messaging-box'>
          <div className='title column-header'>
            <i
              role='img'
              className='fa fa-envelope column-header__icon fa-fw'
            />
            Messaging box
          </div >
          <div className='user-list'>
            <h2 className='title'>
              la liste de {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 >
            </h2 >
            {this.state.showList && (
              <div className='contact-list-container'>
                <h3 >show list</h3 >
                <ul className='contact-list'>
                  {renderedList}
                </ul >
              </div >
            )}
          </div >

        </div >
      </div >
    );
  }

}