client/src/pages/messenger.jsx

import React from 'react';
import Header from '../components/Header'
import ContactList from '../components/ContactList'
import MessageList from '../components/MessageList'
import SendMessageForm from '../components/SendMessageForm'
import NewContactForm from '../components/NewContactForm'

//import Sound from 'react-sound';
import io from "socket.io-client";
import ConversationList from '../components/ConversationList';
import CircularProgress from '@material-ui/core/CircularProgress';
//const socket = io.connect('http://localhost:3000');
import authManager from '../AuthManager'
import Conversation from '../../../model/Conversation'
import Contact from '../../../model/Contact'
import ConversationView from '../components/ConversationView';
import AddContactPage from './addContactPage.jsx';
import LoadingPage from '../components/loading';

class JamiMessenger extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      conversations: undefined,
      messages: [],
      sound: false
    }

    /*socket.on('connect', () => {
      console.log("Success !")
    })*/


    //this.socket = socketIOClient(ENDPOINT);
    //this.socket.on("FromAPI", data => {
    //  this.setState({
    //    messages: [...this.state.messages, data]
    //  })
    //});
    this.sendMessage = this.sendMessage.bind(this)
    this.handleSearch = this.handleSearch.bind(this)
    this.controller = new AbortController()
  }

  componentDidMount() {
    const accountId = this.props.accountId || this.props.match.params.accountId
    const conversationId = this.props.conversationId || this.props.match.params.conversationId

    if (this.req === undefined) {
      this.req = authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: this.controller.signal})
        .then(res => res.json())
        .then(result => {
          console.log(result)
          this.setState({conversations:  Object.values(result).map(c => Conversation.from(accountId, c))})
        })
    }
    /*socket.on('receivedMessage', (data) => {
      const message = {
        senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
        text: data
      }
      this.setState({
        messages: [...this.state.messages, message],
        sound: true
      })
    });*/
  }

  componentWillUnmount(){
    this.controller.abort()
    this.req = undefined
  }

  handleSearch(query) {
    const accountId = this.props.accountId || this.props.match.params.accountId
    const conversationId = this.props.conversationId || this.props.match.params.conversationId

    authManager.fetch(`/api/accounts/${accountId}/ns/name/${query}`)
    .then(response => {
      if (response.status === 200) {
        return response.json()
      } else {
        throw new Error(response.status)
      }
    }).then(response => {
      console.log(response)
      const contact = new Contact(response.address)
      contact.setRegisteredName(response.name)
      this.setState({searchResult: contact ? Conversation.fromSingleContact(accountId, contact) : undefined})
    }).catch(e => {
      this.setState({searchResult: e})
    })
  }

  sendMessage(text) {
    var data = {
      senderId: 'Me',
      destinationId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
      text: text
    }
    //socket.emit("SendMessage", data);
    console.log(data.text);
    this.setState({
      messages: [...this.state.messages, data],
      sound: false
    })
  }
  render() {
    const accountId = this.props.accountId || this.props.match.params.accountId
    const conversationId = this.props.conversationId || this.props.match.params.conversationId
    const contactId = this.props.contactId || this.props.match.params.contactId

    console.log("JamiMessenger render " + conversationId)
    console.log(this.props)
    console.log(this.state)

    return (
      <div className="app" >
        <Header />
        {this.state.conversations ?
          <ConversationList search={this.state.searchResult} conversations={this.state.conversations} accountId={accountId} /> :
          <div className="rooms-list"><LoadingPage /></div>}
        <NewContactForm onChange={query => this.handleSearch(query)} />
        {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
        {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
        {this.state.sound && <Sound
          url="stairs.mp3" /*https://notificationsounds.com/message-tones/stairs-567*/
          playStatus={Sound.status.PLAYING}
          playFromPosition={0 /* in milliseconds */}
          onLoading={this.handleSongLoading}
          onPlaying={this.handleSongPlaying}
          onFinishedPlaying={this.handleSongFinishedPlaying}
        />}
      </div>
    )
  }
}

export default JamiMessenger