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 './mocks/mockContactList';
import Contact from './Contact';
import classNames from 'classnames';

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,
    };
    // 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() {

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

    const showListClass = (this.state.showList ? 'active' : 'inactive');
    const classList = 'btn btn-primary toggle-list ' + showListClass;
    return (
      <div className='messaging-container'>
        <link
          rel='stylesheet'
          type='text/css'
          media='screen'
          href='https://cdn.conversejs.org/6.0.0/dist/converse.min.css'
        />
        {/*<script*/}
        {/*  src='https://cdn.conversejs.org/6.0.0/dist/converse.min.js'*/}
        {/*  charSet='utf-8'*/}
        {/*></script >*/}
        {/*<script >*/}
        {/*  converse.initialize({*/}
        {/*  bosh_service_url : 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes*/}
        {/*  show_controlbox_by_default: true*/}
        {/*});*/}
        {/*</script >*/}
        <div
          className={classNames('messaging-box ', {
            'active'  : this.state.showList,
            'inactive': !this.state.showList,
          })}
        >
          <div className='card-title '>
            <i
              role='img'
              className='fa fa-comment column-header__icon fa-fw'
            />
            {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 >
          </div >
          <div className='user-list'>

            {this.state.showList && (
              <div className='contact-list-container'>
                <ul className='contact-list'>
                  {renderedList}
                </ul >
              </div >
            )}
          </div >

        </div >
      </div >
    );
  };

}