Single and Group Chat Messages in React JS - MERN Stack Chat App with Socket.IO #14

so in today's video we are going to create the user interface for our chats so the chat that you see over here we are going to create the user interface for that by fetching all of the apis that we created in our previous videos both the message sending api so if i say hello and press enter you're gonna see oops okay i was scrolled to the top so i will say hi there and press enter you're gonna see the message gets added over here so we're going to create the ui by using that particular api and i'm going to use the other api which was for fetching all of the messages for this particular chat so all of this message that you see right over here so we're going to implement the ui for both of those apis so i'm going to close this and here is our project opened in vs code so let me quickly go and start our backend as well as front-end so npm start this will start our back end and i'm gonna go and open another terminal and cd to front end npm start okay back end has started and front end is also starting up so here's our app successfully started now what i'm gonna do i'm gonna go to our src components and the single chat.js file because this is what we are going to build so on the top i'm gonna create a few states before fetching our api or anything a state for all of our messages which will contain all of our fetched messages from the back end so let's import use state and then i'm going to create a state for loading which will be false by default and the third one will be for new message cool now let's go down and we left the space yep messages here so we're gonna create the ui inside of it which will come over here this gray part that you see it's gonna fall under over here so i'm gonna remove this and i'm gonna say if the messages are still loading then i'm gonna show a spinner which will be imported from chakra ui react yep it's imported okay otherwise so else we're gonna do something else so let me configure spinner real quick so let's for now let's say not loading and i'm gonna put like empty fragments over here and save this let's see how this spinner looks like okay you see the small spinner at the corner so let me configure this spinner i'm gonna give it some generic styles like size height to it align self to the center and margin to auto so it's at right at the center of the screen i mean of the div so you see right here this is how our spinner is gonna look like so cool so i'm gonna switch it back to normal loading and now over here i'm gonna have a div and inside of this div i'm gonna have all of our messages so i'm just gonna leave it like this messages cool so also below this i'm gonna have an input tag so if i go to our chat so just like this you see we have an input tag over here we're gonna create an input tag so let's go and right below this i'm gonna have a form control oops let's see i don't think it's imported let me import it so form control okay now inside of this form control first of all this form control so in the original app what i've done is whenever i press the enter key on the keyboard the message should be sent so i'm gonna say on key down key down and it's going to have a function inside of it which is which is going to be send message which doesn't exist yet so let me create an empty function for now const send message equals an empty arrow function okay also so this is gonna be is required and margin top is gonna be three now inside of this we're gonna have an input tag so input so let me import this from chakra ui and inside this input i'm gonna have a few styles with variant and placeholder etcetera just like this now on change we're going to call a function called typing handler so i've named this typing handler because in future we're going to implement our typing functionality as well so this will majorly contain the typing functionality and also update the new message state so for now this is empty i'm gonna create a dummy function for it and also this is gonna be a controlled input tag so i'm gonna have new message right over here also let me create and empty function for this thing cool so let's go to our ui and let's have a look okay it looks good now let's create this typing handler function so this is obviously gonna take an event so if you notice over here this we are calling this function and this is passing an event to this and instead of it i'm gonna say set new message to e dot target dot value so for now this will be that's all but in the future obviously we're gonna have our typing indicator logic over here so i'm gonna comment it out so for now it's just setting the new message before sending it now after this we need to send the message as well so let's write the logic for that so if you go down over here you can see on key down we are sending a message so this will also take an event and first of all since we are triggering this by on key down so i'm gonna check if let's call it event if event dot key is equals to enter so we need to check if it's an enter key of the keyboard and we have something inside of the new message then only we're gonna trigger this and also we're gonna make the api call inside of it so this is gonna be an async function so inside of it i'm gonna have a try catch block which will have our config just like we always do while fetching our apis so this will contain our headers so headers so what will header have it will have the bearer token and the application slash json because we're sending the json data so first thing will be the content type which will be application slash json and the second thing is going to be authorization which is in the backtext i'm going to say bearer user dot token so we have imported user yes oops where did these came from yep looks good now let's fetch our api below this so our message sending api was slash api slash message so i'm gonna type const data and it's going to be await axios dot post so is axios imported yep okay so this is going to be a post request so we're gonna request on slash api slash message and we're gonna provide two things so first thing will be the content if you remember from our previous video so content was new message and the other thing will be the chat id which is currently selected chats id so chat id will be selected chat dot underscore id all right and the third thing will be our config config cool now after we have done this we're gonna obviously set the new message to empty and whatever we get back from this we are going to append it to the array of all of the messages so for example if this chart has all of these messages when i send another message in this group sorry chat so all of these chats messages will have this message appended so what i'm gonna do is set messages obviously we have not populated this messages state yet but we will soon so inside this we're going to have an array whatever there's inside of the messages take that and add the new message so data and i'm going to handle the error over here by showing a toast so let me import the use toast const toast equals use toast oops toast yep it's imported all right cool so let's go on and test this out um so for testing this out what i'm gonna do i'm gonna just basically log the data over here and see if we get back anything so i'm gonna say by opening a term console as well so i'm gonna say hello and press enter nothing happened okay the message seemed to have been sent and there we go we received something over here the chat and you know what when i press enter i want this message to get empty before making the api call so that and obviously this won't affect our api call because this function is asynchronous so it won't instantly make this empty so i want the ui to reflect instantly so if i say so if i clear it and say how oops i think there's some console log here from group chat model okay i'm gonna remove this from the group chat model it's gone console yep let me move this and i think it's fine so now i'm going to say how are you and press enter so you see it instantly got empty and we got something over here so we have the chat details content how are you so okay we got our message successfully awesome so this is what we needed to do now next let's fetch all of the chats for this particular chat so i'm gonna go right over let me close this one and over here and i'm gonna create a new function for fetching all of our chats so of our messages so fetch messages it's gonna be an async function and we are going to call this fetch charts instead of a use effect but let's let's create this first so i'm going to say if no chart is selected then just return don't do anything otherwise we're going to have a try catch so now inside the track edge obviously we're going to have the config for authorization so let me bring this in i'm not gonna have content type okay now below this i'm gonna have the api calls const data await axios dot post or sorry dot get because we are getting all of the list of the chats and before making this api call i'm gonna set the loading to true that it's fetching all of the chats all of the messages sorry okay so axios.get and this endpoint was slash api slash message and slash chat id so i'm gonna write it inside of the backtick slash api slash message slash selected chat dot underscore id yep this was the end point and it takes config great now below this after fetching all of the messages i'm gonna set all of the messages inside of the state so data just like that and set the loading to false just like that and below this i'm gonna handle the error just like that i'm gonna display a toast for the error now to call this function i'm gonna call this function inside of a use effect so use effect let's import it from react just like that and inside of it i'm gonna write fetch messages and that's it and we're gonna fetch messages actually again whenever the chat changes so whenever user user switches the chat so selected chat whenever this changes i'm gonna fetch the messages again okay i guess that makes sense so let's check it out if this works or not so what i'm gonna do i'm gonna simply console.log over here messages all right so we should get the two messages that we just sent in this chat okay we have nothing here jane doe okay jane doe has three messages so these three messages first hello hello how are you okay cool that's awesome i think this hello is from the previous video that we were doing testing on so right now the other two messages are this hello and how are you awesome now let's try to render this on are but before let's let me send the message from john jane doe's side as well so that we have messages from both the side and then we can properly align these messages so let me open this in another window so localhost 3000 okay there's some error in this so chat provider if user info is not there history dot push to slash inside of our context chat provider why is this undefined if this is undefined then that means the chat provider needs to come inside of over here yep let me put the chat provider inside of here put the comma over here okay cool so browser router now wraps all of our app let's see i think this should fix it yep fine dot com let me log into the john doe i was sending messages to the john doe account so this one so yep it's working so if i come over here oops not here over here and go to guest user and if i try to say hi guest user press enter you're gonna see that we get the output with all of the four messages so let me send a couple of more messages from here i'm good that's great and i'm just populating the messages over here just so that we have a little bit of data to work with all right cool i'm done with this so i'm just gonna close this up and let's start building the ui so before moving forward we have this messages div over here right this div it's gonna have a class name of messages and i'm just gonna provide it some traditional css just so you know we can also use css inside of chakra ui i mean with chakra ui so styles dot css and we can import this styles.css obviously you can write it in whatever way you like i'm just showing you that you can do this as well dot css okay so inside of the styles.css i'm just gonna add a minimal css for our messages which is just going to be display flex flex direction column so that's all our messages are aligned from top to bottom overflow wire to scroll and scroll bar with to none okay let's see our app should be fine all right it's fine so john doe yep we have a bunch of messages to work with over here one more little thing that i would like to add before moving forward is that in our single chat we have this um update group chat model right so i'm gonna take this fetch chats fetch messages i mean and i'm gonna send it over here and inside of this i'm gonna receive them and i'm gonna call it just after removing someone from the group so so that all the messages get refreshed okay so i'm just gonna call it right here and now let's go back and over here oops yeah over here let's start building the ui for our messages so for this i'm going to create a separate component which is going to be called scrollable chat and i'm going to provide it the messages state and obviously this doesn't exist yet so let me create this inside of our components new file scrollable chart.js rafce and this is gonna receive messages cool let's import it just like that now let's go inside of it and now to create this interface so this interface right here to scroll these chats inside of it so i'm gonna use something called react scrollable feed so if you open this npm package so this is a really nice package if you want to create a scrollable feed just like this as you can see the example over here terminal i'm going to open another terminal and make sure you are installing it in the front end not back in so npm install react scrollable feed now meanwhile this is getting installed i'm gonna go on and create the ui so instead of this div i'm gonna wrap this inside of something called scrollable feed which will be imported from this scrollable feed package which is still getting installed so meanwhile it's getting installed i'm gonna render my messages so if there's something inside of the messages and so i'm gonna say message messages dot map so we're gonna map through all of the messages now we're gonna take the particular message the current message and the index okay so that's installed so let me import this as well okay let me manually import it import scrollable feed from react scrollable feed all right just like that now inside of it inside of this map function i'm going to write div all right now inside of this div first of all i'm just going to give it some style and the key because we are mapping so star so the key is important so m dot underscore id and now inside of it i'm gonna check if this is the same so let me show you if we go to the ui so if you take this example you can see left side we have the profile picture of the user but in the right side we don't have it and if you notice the pattern of messages when the user send multiple messages the profile picture is only displayed at the very bottom message so you see we have a bunch of messages over here the profile picture is only displayed at the very bottom message not the top messages so we're gonna implement all of this logic so first of all i'm gonna implement two logic so is same sender and if is last message so inside of our so let me config folder instead of the chat chatlogix.js i'm gonna write this logic so first logic will be is same sender so this will take the messages all of our messages the current message the index of the current message and the logged in user's id so it will check if it's less than the length of all the messages obviously then only we're gonna proceed if this message doesn't exceed the array length and if the next message is not equal to the current sender so if we go to our chat we gonna see so the next message if you see is not the same is not the message that is sent by the same user so then we're gonna proceed and we're also gonna check if the next message is undefined or not and we're gonna check if the messages that is the current message is not equal to the user id that means it's from the other user not the logged in user because in the logged in user we are not going to display the profile picture right so if it's only the opposite user then only we're gonna display the profile picture so this is one of the logic and the second logic will be is last message so let me bring this in so is last message also let me close this okay so is last message what logic this will have we're gonna take all of the messages array the current index and the user id so first of all again we're gonna check if this is the last message of this opposite user or not where we are checking this if it's the last very last of the message that he has sent so for example this message and this message etc okay so first obviously we're gonna check if i is equal to message.length minus one and we're gonna check messages the id of the last of the messages array is not equal to the current logged in user's id and that message actually exists so then we're gonna return it so it's accordingly gonna return true or false all right so let's go on and let's render it now so first of all i'm gonna say is same sender and i'm gonna provide it messages comma m comma i comma user dot underscore id also this user i have to take it from uh the context api so chat state const user yep and these messages oops what did i do so this message let me put this in the parenthesis because i'm gonna need it so if this or is last message if any of these is true so also this will take messages comma m no sorry comma i comma user underscore id so if any of this is true and we're gonna do something that something will be displaying the avatar so i'm gonna if you go back over here if we hover on this you're gonna see we have a tool tip as well so we're gonna wrap this inside of our tool tip so tool tip it's imported from chakra ui yep so inside the tool tip first of all tool tip will have a name label which is going to be the name of the sender and the placement is going to be the bottom start so i'm going to add it so just like that label placement and has an arrow now inside of it i'm gonna just simply render the avatar of the user so i'm just gonna add the avatar component that we used in our previous video let me import it just like that so avatar margin top submargin right size cursor pointer name and src for the pick let's go on and check it out so avatar is not import export it from oops where did i export it oops not over here yep right here let's see so yeah you see three messages are by john doe so that's why this got rendered over here awesome now below this we're gonna actually go on and render our messages below this i'm gonna have a span tag which according to the current user so if you see if the of the opposite user has this greenish color and us we have this blueish color so we're gonna say background color we're gonna put a style over here in the span tag background color oops i mean style inside the style i'm going to say background color and according to oops and according to the logged in sender if it's equal to the user id then this color otherwise that color okay and then we're gonna have a bunch of styles as well like border radius padding max width to be 75 percent just like that and inside of this finally i'm gonna render my content so m dot content now you're gonna see that our messages get rendered but there's a problem over here now all of the messages are rendered that's fine so these are the messages that are sent by me and these are the messages that sent but that are sent by him so now according to this we're gonna check whichever messages are sent by us are gonna be aligned to the very left side okay so i'm just gonna go and create another logic for this so right below this i'm gonna create is same sender margin so let me bring in that logic is same center margin so it's just gonna check if it's the same user so this logic is similar to that of this logic is same sender so it's gonna check if it's the same sender who is logged in so return 33 margin otherwise return the zero margin i'm sure you'll be able to understand this logic just go through it once it's just a simple javascript okay and the other thing that i'm gonna have is is same user so is same user this will take messages current message and the index so just this this is simple this is just checking if index is more than zero and the sender id of previous message is equal to the current message sender id so this is gonna return true so i'm gonna show you where i'm gonna use this so over here i'm gonna have two more styles so first of all for margin left i'm gonna import it so if it's the same sender margin so it's gonna push it by 33 pixel value to the right side so just like this you can see and also we want to create a little spacing between this so that's why i'm having this chat logic of is the same user so i'm checking if the previous message is the same user then create the space between them so i'm gonna add just like this and import this if this has this then it's gonna be three space otherwise gonna have 10 space okay so accordingly yep you see them this space has been created awesome let's try to send any message subscribe to outside coda and let's send yep it's being sent awesome so again let me remind you this is just the normal api call socket dot io is not being used right now it's this is not real time we're gonna create the real time in our next video so i guess this is done awesome so subscribe to the channel because next two videos are gonna be really really interesting in the next video i'm gonna create the real time sending functionality and after that i'm gonna create the real time notification functionality as well so don't forget to subscribe to the channel and the link to the complete playlist will be in the description below so thank you all for watching and i will see you in the next video bye bye

Channel: RoadsideCoder

Views: 38,322

Keywords: rendering messages, mern chat app, chat app react, react chat app, chat app, messaging app, Chat UI, sending messages react, socket.io, group chat app, mern, mern stack

Id: cHziFZ7Q58Y

Length: 29min 29sec (1769 seconds)

Published: Tue Dec 07 2021