Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 1 | import React from 'react'; |
| 2 | import Header from '../components/Header' |
| 3 | import ContactList from '../components/ContactList' |
| 4 | import MessageList from '../components/MessageList' |
| 5 | import SendMessageForm from '../components/SendMessageForm' |
| 6 | import NewContactForm from '../components/NewContactForm' |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 7 | |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 8 | //import Sound from 'react-sound'; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 9 | import io from "socket.io-client"; |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 10 | import ConversationList from '../components/ConversationList'; |
| 11 | import CircularProgress from '@material-ui/core/CircularProgress'; |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 12 | //const socket = io.connect('http://localhost:3000'); |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 13 | import authManager from '../AuthManager' |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 14 | import Conversation from '../../../model/Conversation' |
| 15 | import Contact from '../../../model/Contact' |
| 16 | import ConversationView from '../components/ConversationView'; |
| 17 | import AddContactPage from './addContactPage.jsx'; |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 18 | import LoadingPage from '../components/loading'; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 19 | |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 20 | class JamiMessenger extends React.Component { |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 21 | |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 22 | constructor(props) { |
| 23 | super(props) |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 24 | |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 25 | this.state = { |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 26 | conversations: undefined, |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 27 | messages: [], |
| 28 | sound: false |
| 29 | } |
| 30 | |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 31 | /*socket.on('connect', () => { |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 32 | console.log("Success !") |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 33 | })*/ |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 34 | |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 35 | |
| 36 | //this.socket = socketIOClient(ENDPOINT); |
| 37 | //this.socket.on("FromAPI", data => { |
| 38 | // this.setState({ |
| 39 | // messages: [...this.state.messages, data] |
| 40 | // }) |
| 41 | //}); |
| 42 | this.sendMessage = this.sendMessage.bind(this) |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 43 | this.handleSearch = this.handleSearch.bind(this) |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 44 | this.controller = new AbortController() |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 45 | } |
| 46 | |
| 47 | componentDidMount() { |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 48 | const accountId = this.props.accountId || this.props.match.params.accountId |
| 49 | const conversationId = this.props.conversationId || this.props.match.params.conversationId |
| 50 | |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 51 | if (this.req === undefined) { |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 52 | this.req = authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: this.controller.signal}) |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 53 | .then(res => res.json()) |
| 54 | .then(result => { |
| 55 | console.log(result) |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 56 | this.setState({conversations: Object.values(result).map(c => Conversation.from(accountId, c))}) |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 57 | }) |
| 58 | } |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 59 | /*socket.on('receivedMessage', (data) => { |
| 60 | const message = { |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 61 | senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8', |
| 62 | text: data |
| 63 | } |
| 64 | this.setState({ |
| 65 | messages: [...this.state.messages, message], |
| 66 | sound: true |
| 67 | }) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 68 | });*/ |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 69 | } |
| 70 | |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 71 | componentWillUnmount(){ |
| 72 | this.controller.abort() |
| 73 | this.req = undefined |
| 74 | } |
| 75 | |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 76 | handleSearch(query) { |
| 77 | const accountId = this.props.accountId || this.props.match.params.accountId |
| 78 | const conversationId = this.props.conversationId || this.props.match.params.conversationId |
| 79 | |
| 80 | authManager.fetch(`/api/accounts/${accountId}/ns/name/${query}`) |
| 81 | .then(response => { |
| 82 | if (response.status === 200) { |
| 83 | return response.json() |
| 84 | } else { |
| 85 | throw new Error(response.status) |
| 86 | } |
| 87 | }).then(response => { |
| 88 | console.log(response) |
| 89 | const contact = new Contact(response.address) |
| 90 | contact.setRegisteredName(response.name) |
| 91 | this.setState({searchResult: contact ? Conversation.fromSingleContact(accountId, contact) : undefined}) |
| 92 | }).catch(e => { |
| 93 | this.setState({searchResult: e}) |
| 94 | }) |
| 95 | } |
| 96 | |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 97 | sendMessage(text) { |
| 98 | var data = { |
| 99 | senderId: 'Me', |
| 100 | destinationId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8', |
| 101 | text: text |
| 102 | } |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 103 | //socket.emit("SendMessage", data); |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 104 | console.log(data.text); |
| 105 | this.setState({ |
| 106 | messages: [...this.state.messages, data], |
| 107 | sound: false |
| 108 | }) |
| 109 | } |
| 110 | render() { |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 111 | const accountId = this.props.accountId || this.props.match.params.accountId |
| 112 | const conversationId = this.props.conversationId || this.props.match.params.conversationId |
| 113 | const contactId = this.props.contactId || this.props.match.params.contactId |
| 114 | |
| 115 | console.log("JamiMessenger render " + conversationId) |
| 116 | console.log(this.props) |
| 117 | console.log(this.state) |
| 118 | |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 119 | return ( |
| 120 | <div className="app" > |
| 121 | <Header /> |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 122 | {this.state.conversations ? |
| 123 | <ConversationList search={this.state.searchResult} conversations={this.state.conversations} accountId={accountId} /> : |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 124 | <div className="rooms-list"><LoadingPage /></div>} |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 125 | <NewContactForm onChange={query => this.handleSearch(query)} /> |
| 126 | {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />} |
| 127 | {contactId && <AddContactPage accountId={accountId} contactId={contactId} />} |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 128 | {this.state.sound && <Sound |
| 129 | url="stairs.mp3" /*https://notificationsounds.com/message-tones/stairs-567*/ |
| 130 | playStatus={Sound.status.PLAYING} |
| 131 | playFromPosition={0 /* in milliseconds */} |
| 132 | onLoading={this.handleSongLoading} |
| 133 | onPlaying={this.handleSongPlaying} |
| 134 | onFinishedPlaying={this.handleSongFinishedPlaying} |
| 135 | />} |
| 136 | </div> |
| 137 | ) |
| 138 | } |
| 139 | } |
| 140 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 141 | export default JamiMessenger |