add messaging
Change-Id: I9f7b5c73e25774751a2c55ea6c2575feca5ebfd5
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 5b40718..9b825f9 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -3,9 +3,7 @@
import NewContactForm from '../components/NewContactForm'
//import Sound from 'react-sound';
-import io from "socket.io-client";
import ConversationList from '../components/ConversationList';
-//const socket = io.connect('http://localhost:3000');
import authManager from '../AuthManager'
import Conversation from '../../../model/Conversation'
import Contact from '../../../model/Contact'
@@ -16,6 +14,7 @@
const JamiMessenger = (props) => {
const [conversations, setConversations] = useState(undefined)
+ const [searchQuery, setSearchQuery] = useState('')
const [searchResult, setSearchResults] = useState(undefined)
const params = useParams()
@@ -23,36 +22,6 @@
const conversationId = props.conversationId || params.conversationId
const contactId = props.contactId || params.contactId
- //this.socket = socketIOClient(ENDPOINT);
- /*socket.on('connect', () => {
- console.log("Success !")
- })*/
- //this.socket.on("FromAPI", data => {
- // this.setState({
- // messages: [...this.state.messages, data]
- // })
- //});
- /*socket.on('receivedMessage', (data) => {
- const message = {
- senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
- text: data
- }
- this.setState({
- messages: [...this.state.messages, message],
- sound: true
- })
- });*/
- useEffect(() => {
- console.log("io.connect")
- const socket = io()
- socket.on('receivedMessage', (data) => {
- console.log("receivedMessage")
- console.log(data)
- conversation.addMessage(data)
- })
- return () => socket.disconnect()
- })
-
useEffect(() => {
const controller = new AbortController()
authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: controller.signal})
@@ -64,8 +33,11 @@
return () => controller.abort()
}, [accountId])
- const handleSearch = (query) => {
- authManager.fetch(`/api/accounts/${accountId}/ns/name/${query}`)
+ useEffect(() => {
+ if (!searchQuery)
+ return
+ const controller = new AbortController()
+ authManager.fetch(`/api/accounts/${accountId}/ns/name/${searchQuery}`, {signal: controller.signal})
.then(response => {
if (response.status === 200) {
return response.json()
@@ -80,18 +52,16 @@
}).catch(e => {
setSearchResults(undefined)
})
- }
-
- console.log("JamiMessenger render " + conversationId)
- console.log(props)
+ return () => controller.abort()
+ }, [accountId, searchQuery])
return (
<div className="app" >
<Header />
+ <NewContactForm onChange={setSearchQuery} />
{conversations ?
<ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
<div className="rooms-list"><LoadingPage /></div>}
- <NewContactForm onChange={handleSearch} />
{conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
{contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
</div>