fix: text chat layout and logout

ingridpacheco · Sep 5, 2020 · 6917371 · 6917371
1 parent 2af481a
commit 6917371
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 19 deletions.
diff --git a/src/components/videoChat/Room.js b/src/components/videoChat/Room.js
@@ -4,7 +4,7 @@ import Button from "@material-ui/core/Button"
 import { withStyles } from "@material-ui/core/styles"
 import ArrowBackIcon from "@material-ui/icons/ArrowBack"
 import Video from "twilio-video"
-import { v4 as uuidv4 } from "uuid"
+import { v4 as uuidV4 } from "uuid"
 
 import createChat from "../../services/chat"
 import createRecognizer from "../../services/speechToText"
@@ -40,11 +40,15 @@ const RegularButton = withStyles(() => ({
   },
 }))(Button)
 
-const Room = ({ roomName, token, handleLogout }) => {
+const Room = ({
+  roomName, token, logoutTextChat, handleLogout,
+}) => {
   const [room, setRoom] = useState(null)
   const [participants, setParticipants] = useState([])
   const context = useContext(VideoChatContext)
-  const { openHumanBody, disableVideo, disableAudio } = context
+  const {
+    openHumanBody, disableVideo, disableAudio, setLogoutTextChat,
+  } = context
 
   const remoteParticipants = participants.map((participant) => (
     <Participant key={participant.sid} participant={participant} type="remote" />
@@ -65,7 +69,7 @@ const Room = ({ roomName, token, handleLogout }) => {
       room.on("participantConnected", participantConnected)
       room.on("participantDisconnected", participantDisconnected)
       room.participants.forEach(participantConnected)
-      const uuid = uuidv4()
+      const uuid = uuidV4()
       createChat(`legend in - ${uuid}`)
       createRecognizer()
     })
@@ -111,7 +115,14 @@ const Room = ({ roomName, token, handleLogout }) => {
   return (
     <div className="room">
       <div className="video">
-        <RegularButton variant="text" color="primary" className="button" startIcon={<ArrowBackIcon />} disableElevation onClick={handleLogout}>
+        <RegularButton
+          variant="text"
+          color="primary"
+          className="button"
+          startIcon={<ArrowBackIcon />}
+          disableElevation
+          onClick={handleLogout}
+        >
           Voltar para o dashboard
         </RegularButton>
 
@@ -138,7 +149,7 @@ const Room = ({ roomName, token, handleLogout }) => {
           <PainClassification />
         </Chat>
       )}
-      <TextChat />
+      <TextChat logoutTextChat={logoutTextChat} />
     </div>
   )
 }

diff --git a/src/components/videoChat/TextChat/Messages.js b/src/components/videoChat/TextChat/Messages.js
@@ -9,10 +9,9 @@ const styles = {
     flexDirection: "column",
     justifyContent: "flex-start",
     height: "inherit",
-
   },
   message: {
-    border: "1px solid #096262",
+    border: "1px solid transparent",
     borderRadius: "20px",
     color: "#FFFFFF",
     fontFamily: "Muli",
@@ -26,9 +25,14 @@ const styles = {
   },
   me: {
     background: "#096262",
+    float: "right",
   },
   another: {
     background: "#5B5B5B",
+    float: "left",
+  },
+  line: {
+    width: "-webkit-fill-available",
   },
 }
 
@@ -38,16 +42,18 @@ function Messages(props) {
     if (me === person) {
       return clsx(classes.me, classes.message)
     }
-    return clsx(classes.an, classes.message)
+    return clsx(classes.another, classes.message)
   }
 
   const { classes, messages } = props
   return (
     <div className={classes.root}>
       {messages.map((message, index) => (
-        <span className={setStyle(message.author)} key={index}>
-          {message.body}
-        </span>
+        <div className={classes.line} key={index}>
+          <span className={setStyle(message.author)}>
+            {message.body}
+          </span>
+        </div>
       ))}
     </div>
   )

diff --git a/src/components/videoChat/TextChat/SendMessage.js b/src/components/videoChat/TextChat/SendMessage.js
@@ -7,6 +7,8 @@ import InputAdornment from "@material-ui/core/InputAdornment"
 import OutlinedInput from "@material-ui/core/OutlinedInput"
 import SendIcon from "@material-ui/icons/Send"
 
+const ENTER_KEY = 13
+
 const styles = {
   root: {
     display: "flex",
@@ -21,21 +23,35 @@ function SendMessage(props) {
     setNewMessage(event.target.value)
   }
 
+  const clearMessage = () => {
+    setNewMessage("")
+  }
+
+  const sendMessageWithEnterKey = () => (event) => {
+    const { sendMessage } = props
+    if (event.keyCode === ENTER_KEY) {
+      sendMessage(newMessage)
+      clearMessage()
+    }
+  }
+
   const { classes, sendMessage } = props
   return (
     <FormControl>
       <div className={classes.root}>
         <OutlinedInput
           id="newMessage"
           fullWidth
-          placeholder="Digite uma messagem"
+          placeholder="Digite uma mensagem"
           value={newMessage}
           onChange={handleChange()}
+          onKeyDown={sendMessageWithEnterKey()}
           endAdornment={(
             <InputAdornment position="end">
               <IconButton
                 onClick={() => {
                   sendMessage(newMessage)
+                  clearMessage()
                 }}
                 edge="end"
               >

diff --git a/src/components/videoChat/TextChat/TextChat.js b/src/components/videoChat/TextChat/TextChat.js
@@ -8,7 +8,7 @@ import IconButton from "@material-ui/core/IconButton"
 import Typography from "@material-ui/core/Typography"
 import CloseIcon from "@material-ui/icons/Close"
 import Chat from "twilio-chat"
-import { v4 as uuidv4 } from "uuid"
+import { v4 as uuidV4 } from "uuid"
 
 import { chatToken } from "../../../services/tokens"
 import { VideoChatContext } from "../videoChatContext"
@@ -43,14 +43,14 @@ const styles = {
   },
 }
 
-class TextChat extends React.PureComponent {
+class TextChat extends React.Component {
   constructor(props) {
     super(props)
 
     this.state = {
       channel: {},
       messages: [],
-      identity: `person - ${uuidv4()}`,
+      identity: `person - ${uuidV4()}`,
     }
 
     this.sendMessage = this.sendMessage.bind(this)
@@ -61,13 +61,30 @@ class TextChat extends React.PureComponent {
     this.setupChatClient(identity)
   }
 
+  componentDidUpdate() {
+    const { logoutTextChat } = this.props
+    console.log({ logoutTextChat })
+    if (logoutTextChat) {
+      this.logout()
+    }
+  }
+
   setupChatClient(identity) {
     const token = chatToken(identity)
 
     Chat.create(token).then((client) => {
       client.getSubscribedChannels().then(
         this.createOrJoinGeneralChannel(client),
       )
+
+      // client.on("memberJoined", () {
+      //   const { channel } = this.state
+      //   channel.getMembers().then((members) => {
+      //     const { length } = members
+      //     console.log({ length })
+      //   })
+      //   client.shutdown()
+      // }
     }).catch((error) => {
       console.error(error)
     })
@@ -83,6 +100,20 @@ class TextChat extends React.PureComponent {
       this.setState({
         messages: [...messages, message],
       })
+
+      channel.getMembersCount((count) => {
+        console.log(`Total members in the channel: ${count}`)
+      })
+
+      channel.getMembers().then((members) => {
+        const { length } = members
+        console.log({ length })
+      })
+    })
+
+    channel.on("memberLeft", (member) => {
+      console.log("alguém saiu do canal")
+      console.log(member.state.identity)
     })
   }
 
@@ -94,7 +125,7 @@ class TextChat extends React.PureComponent {
   }
 
   createOrJoinGeneralChannel(client) {
-    const chatName = "clinicall - persons"
+    const chatName = "clinicAll - persons 2"
     client.getChannelByUniqueName(chatName)
       .then((channel) => {
         this.setState({
@@ -116,11 +147,28 @@ class TextChat extends React.PureComponent {
       })
   }
 
+  exitScreen() {
+    window.onbeforeunload = () => {
+      this.logout()
+    }
+
+    window.onunload = () => {
+      this.logout()
+    }
+  }
+
+  logout() {
+    const { channel } = this.state
+    channel.leave()
+  }
+
   render() {
     const { openTextChat, toggleTextChat } = this.context
     const { classes } = this.props
     const { messages, identity } = this.state
 
+    this.exitScreen()
+
     return (
       <SwipeableDrawer
         anchor="right"

diff --git a/src/pages/VideoChat.js b/src/pages/VideoChat.js
@@ -16,6 +16,7 @@ class VideoChat extends React.Component {
       room: 'bbb',
       token: null,
       back: false,
+      logoutTextChat: false,
     }
   }
 
@@ -60,6 +61,7 @@ class VideoChat extends React.Component {
       ...this.state,
       token: null,
       back: true,
+      logoutTextChat: true,
     })
   }
 
@@ -73,12 +75,12 @@ class VideoChat extends React.Component {
       this.handleLogout();
     }
 
-    const {room, token, back} = this.state
+    const {room, token, logoutTextChat, back} = this.state
     return (
       <div>
           {token ? (
             <VideoChatProvider>
-              <Room roomName={room} token={token} handleLogout={this.handleLogout} />
+              <Room roomName={room} token={token} logoutTextChat={logoutTextChat} handleLogout={this.handleLogout} />
             </VideoChatProvider>
           ) : back && (
             <Redirect to={{ pathname: "/" }} />