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