1- import { useEffect , useState } from ' react' ;
2- import { io } from ' socket.io-client'
1+ import { useEffect , useState } from " react"
2+ import { io } from " socket.io-client"
33
44// components
5- import RoomPanel from ' ./rooms/RoomPanel'
6- import MessagesPanel from ' ./conversation/MessagesPanel'
5+ import RoomPanel from " ./rooms/RoomPanel"
6+ import MessagesPanel from " ./conversation/MessagesPanel"
77
88const Content = ( props ) => {
9-
109 // Initialize the initial data and its modifier
11- const [ contentData , setContentData ] = useState (
12- {
13- showMessagePanel : true ,
14- showRoomPanel : true ,
15- onlineRooms : [ ]
16- } )
10+ const [ contentData , setContentData ] = useState ( {
11+ showMessagePanel : true ,
12+ showRoomPanel : true ,
13+ onlineRooms : [ ] ,
14+ } )
1715
1816 const socket = io ( )
1917 useEffect ( ( ) => {
@@ -25,35 +23,35 @@ const Content = (props) => {
2523
2624 // connect to the socket
2725 const onConnect = ( ) => {
28- socket . on ( ' connect' , ( ) => {
29- console . log ( ' Socket connected FROM React...' )
26+ socket . on ( " connect" , ( ) => {
27+ console . log ( " Socket connected FROM React..." )
3028 // emit all the room ids where the user belongs to see him / her as active
31- socket . emit ( ' onlineUser' , props . userInfo . userId )
32- } ) ;
29+ socket . emit ( " onlineUser" , props . userInfo . userId )
30+ } )
3331 }
3432
3533 // when a user is online
3634 const onUserOnline = ( ) => {
37- socket . on ( ' onlineUser' , ( data ) => {
35+ socket . on ( " onlineUser" , ( data ) => {
3836 if ( data && data . length > 0 ) {
39- console . log ( ' these rooms should be shown as online' , data )
37+ console . log ( " these rooms should be shown as online" , data )
4038 notifyOnlineRooms ( data )
4139 }
4240 } )
4341 }
4442
4543 // when a new message arrives through socket
4644 const onMessageArrival = ( ) => {
47- socket . on ( ' message' , ( data ) => {
48- console . log ( ' data value arrives from socket' , data )
45+ socket . on ( " message" , ( data ) => {
46+ console . log ( " data value arrives from socket" , data )
4947 fillRoomInfoFromSocket ( data )
50- } ) ;
48+ } )
5149 }
5250
5351 // when the socket disconnects
54- socket . on ( ' disconnect' , ( ) => {
55- console . log ( ' SOCKET is disconnected.. .!!' )
56- } ) ;
52+ socket . on ( " disconnect" , ( ) => {
53+ console . log ( " SOCKET is disconnected.. .!!" )
54+ } )
5755
5856 const toggleMessagePanel = ( showMessagePanel , showRoomPanel ) => {
5957 if ( window . innerWidth < 500 ) {
@@ -79,7 +77,13 @@ const Content = (props) => {
7977 }
8078
8179 const { userInfo } = props
82- let { showMessagePanel, showRoomPanel, selectedRoomId, newMessageFromSocket, onlineRooms } = contentData
80+ let {
81+ showMessagePanel,
82+ showRoomPanel,
83+ selectedRoomId,
84+ newMessageFromSocket,
85+ onlineRooms,
86+ } = contentData
8387
8488 if ( window . innerWidth < 500 && props . showBackButton == false ) {
8589 showMessagePanel = false
@@ -94,17 +98,19 @@ const Content = (props) => {
9498 onlineRooms = { onlineRooms }
9599 newMessageFromSocket = { newMessageFromSocket }
96100 selectedRoomId = { selectedRoomId }
97- setSelectedRoomId = { setSelectedRoomId } />
101+ setSelectedRoomId = { setSelectedRoomId }
102+ />
98103
99104 < MessagesPanel
100105 showMessagePanel = { showMessagePanel }
101106 selectedRoomId = { selectedRoomId }
102107 newMessageFromSocket = { newMessageFromSocket }
103108 notifyOnlineRooms = { notifyOnlineRooms }
104109 socket = { socket }
105- userInfo = { userInfo } />
110+ userInfo = { userInfo }
111+ />
106112 </ div >
107- ) ;
108- } ;
113+ )
114+ }
109115
110- export default Content ;
116+ export default Content
0 commit comments