mastodon/app/javascript/mastodon/features/ui/components/messaging.js

import React from 'react';

import ImmutablePropTypes from 'react-immutable-proptypes';
import { isStaff } from '../../../initial_state';

export default class Messaging extends React.PureComponent {

  static propTypes = {
    following    : ImmutablePropTypes.list,
    conversations: ImmutablePropTypes.list,
  };
  const;
  newMessage = 'meh';

  openConversationWith(account) {
    let conversationFound = account;
    // if conversation exist, focus on it
    if (conversationFound) {

    } else {

    }
    // else, create conversation and focus on it
  };

  submitCompose() {

  };

  constructor() {
    super();

    this.props.conversations = [
      {
        withAccount: '@machin',
        messages   : [],
        opened     : true,
      },
      {
        withAccount: '@chuck',
        messages   : [],
        opened     : false,
      },
    ];
    this.props.following = [
      { username: 'wulfila', handle: '@wulfila' },
      { username: 'machin', handle: '@machin' },
      { username: 'chuck norris', handle: '@chuck' },
    ];

  }

  render() {
    const contactlist = null;
    // return (
    //   <div >
    //     messagerie todo
    //
    //
    //   </div >
    // );
    // const contactlist = this.props.following.foreEach(elem => (
    //   <li className='user-item'>
    //     <div
    //       className='username'
    //       onClick={this.openConversationWith(elem.username)}
    //     >
    //       Machin
    //     </div >
    //     <div className='last-active'>3 min</div >
    //   </li >
    // ));
    return (
      <div className='messaging-container'>
        <div className='messaging-box'>
          <div className='title'>
            <i
              role='img'
              className='fa fa-envelope column-header__icon fa-fw'
            />
            Messaging box
            {isStaff &&
            <span >
            Je suis admin oui oui
            </span >
            }
          </div >
          <div className='user-list column-header'>
            <h2 className='title'>User list</h2 >
            <ul >
              {contactlist}
            </ul >
          </div >

        </div >
        <div className='conversations_list'>
          <ul >
            <li className='conversations_item has-new-message'>
              <div className='title'>
                <i
                  role='img'
                  className='fa fa-envelope column-header__icon fa-fw'
                />
                Un Gens
                <span className='new-message-counter'>
          (3)</span >
                <button className='btn-small'>
                  <i
                    role='img'
                    className='fa fa-caret-down column-header__icon fa-fw'
                  />
                </button >
              </div >
              <div className='conversation_stream'>
                <div className='message theirs'>
                  <p >oh hello there! 😋 </p >
                  <div className='arrow-down' />
                </div >
                <div className='message mine'>
                  <p >General Emoji</p >
                  <div className='arrow-down' />
                </div >
                <div className='message theirs'>
                  <p >we just achieved comedy</p >
                  <div className='arrow-down' />
                </div >
              </div >
              <div className='conversation_input'>
                <form
                  action='#'
                  onSubmit={this.submitCompose()}
                >
                  <textarea
                    name='messager'
                    id=''
                    cols='30'
                    rows='10'
                    className='messager-textarea'
                    placeholder='allez dis nous tout'

                  />
                  <input
                    type='submit'
                    name='submit'
                    value='Send'
                  />
                </form >
              </div >
            </li >
          </ul >
        </div >
      </div >
    );
  }

};