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';

export default class ContactsList extends React.PureComponent {

  static propTypes = {
    // myAccount       : PropTypes.any,
    showList        : PropTypes.bool,
    contactList     : PropTypes.array,
    conversationList: PropTypes.array,
    following_count : PropTypes.number,
  };
  static defaultProps = {
    showList       : true,
    // myAccount      : '',
    userID         : me,
    following_count: 0,
    contactList    : ['machin', 'bidule', 'chuck norris'],
  };

  constructor(props) {
    super(props);
    console.log('me', me);
    console.log('account', accounts.accounts[me]);
    console.log('i follow accounts.accounts[me].followingCount', accounts.accounts[me].following_count);
    // this.props.myAccount = accounts.accounts[me];
    // this.props.following_count = accounts.accounts[me].following_count;

    this.state = {
      following_count : accounts.accounts[me].following_count,
      showList        : props.showList,
      contactList     : ['machin', 'bidule', 'chuck norris'],
      conversationList: ['machin', 'bidule', 'chuck norris'],
    };
    // fetchFollowing(1);
  }

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

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

  render() {

    // const renderedList = 'la liste';
    console.log('this.state.contactList', this.state.contactList);
    const renderedList = this.state.contactList.map(elem => {
      console.log('elem', elem);
      return (
        <li className='contact-item'> {elem}
        </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 >
    );
  }

}