Building Chats Page UI - MERN Stack Chat App with Socket.IO #11

so in our last video we created the apis for searching the user and creation of the chats now in this video we are going to create the ui for searching of the user and when we have searched the user successfully just like this we can click on it and create the chat for that user and start sending a message so i've opened our project folder over here and i'm gonna open the terminal and start our app so our backend has started and i'm gonna open a new terminal and i'm going to switch to front end and i'm going to start our front end so this is our app we have created login and sign up for our app up until this point and when we go to login we are redirected to the slash chat page so inside of my front end folder i'm going to go inside a src and initialize our context api now what is context api context api helps us manage the state of our app it helps us put the state at the top so that we can fetch the state directly from one single place it creates one single source of truth for our state if you're not aware of context api you can go and watch this video link will be in the description below but of course in this video as well i'm going to explain you everything how context api works so i'm going to create a new folder over here called context inside of it i'm going to create a new file chat provider dot js now to create our context we need to write const and give the name to our context which i'm gonna give chat context and equals create context and we need to import this so i'm gonna import from react we're going to import create context from react and now i'm going to create the chat provider which is going to wrap whole of our app so chat provider and it's going to take the children which is going to be whole of our app so i'll explain you in just a moment let me just write this real quick and we're going to return something called chat context dot provider so i'm going to write it like this chat context dot provider like this and inside of this i'm gonna keep this children which we imported from here cool now let's export this export default chat provider right so we have created our context successfully now we need to take this chat provider and go inside of our index.js so i'm going to remove this strict mode tag and i'm going to put it in place of that and i'm gonna wrap the whole of our app in this chat provider so that whatever state we create inside of our context api it's gonna be accessible to whole of our app okay so this we have created successfully but how do we make the state accessible into other parts of our app so we need to use a hook called use context so we write use context and this use context takes this context that we have created so we can place it over here and also let me import this yep just like that so inside of it is going to be whole of our state now i'm going to create the state in just a moment but before i'm gonna export const chat state and i'm gonna return this from inside of here so that arch every so that all of our state is inside of this variable now how do we create the state inside of our context api for example if we are creating a user state so let me create a use state called user import use state now obviously if we create this state inside of any component it will just be accessible inside of that component but since we are creating this inside of the context api so this will be accessible for whole of our app now how do we make it accessible for whole of our we'll we're going to copy this and inside of this tag we're gonna give a value prop and it's gonna take an object with all of these states just like this that's all we need to do so to put value inside of it so if you remember when we created our login and sign up we are storing our user info value or user value inside of our local storage so what i'm gonna do is i'm gonna create a use effect and inside of this i'm gonna fetch our local storage so i'm gonna say local storage dot get item user info and then since this will be in the stringify format i'm gonna parse it so json.parse and i'm gonna store it inside of a variable let's say const user info equals json.parse local storage all right now we have this variable so we're gonna store it inside of our set user state so set user to be user info now what i'm gonna do is over here i'm gonna check if the user is not logged in it's gonna be redirected to the login page so i'm gonna say if user info is not there then history dot push to slash route now obviously this history i have to define over here so i'm going to say const history equals use history and uses stray hook is imported from react router dash dom make sure you have imported from reactor to dom right so i guess that's pretty much it and i'm gonna give history over here so whenever the history changes it's gonna run again awesome this is all we needed to do now one more thing that i like to do is i'm gonna go inside of our home page since we are checking over here if the user is not logged in push it to the slash route but inside of our home page if the user is already logged in so inside the home page i'm gonna go to the top over here and i'm gonna save the user is logged in push him back to the chats page so i'm gonna add this code just like similar to that one so i'm going to import use state see i've imported history hook and i'm going to fetch the local storage and i'm going to say if user is there then just push it to the chats page that's all all right now let's start working on our chats page i'm going to start this chat page.js and i'm going to remove all of this stuff that we had done earlier we don't need it anymore let's move this up all right cool now inside of this we're gonna take our user state from our context api now how do we take something from context apis you can see we are doing export cons chat state so this is what we need over here so i'm gonna go to chat page and write chat state and i'm gonna import the chat state just like this import chat state from chat provider and now inside of this we're gonna have our user state so i'm gonna write const and i'm to destructure the user state inside from inside of it so user just like this now inside of this div i'm going to first give this div some style of with 100 and now instead of this first thing that we're gonna build is this thing our header of our app with this search user and this profile functionality and logout functionality etc so in here i'm gonna check if the user is there in our app only then render this side drawer component i'm giving it side drawer because there's this side drawer over here so that's why so obviously this side draw doesn't exist yet let me create this or you know what i'm gonna create the structure of our chats page and then we're gonna move forward so below this i'm gonna have a box from chakra ui and it's gonna have two things so again i'm gonna check if the user is there then render my chat that is this section of our app so i'm gonna name this my chats i'm gonna comment this out similarly we're going to have this section of our app as well so if the user is there then i'm going to say chat box i'm going to name that chat box cool and let's create all of these components real quick so inside of the components i'm going to create a new folder called miscellaneous for all of the miscellaneous components inside of it i'm going to create a new file for side drawer dot r a f c e i'm gonna say side draw cool let's import this component slash miscellaneous slash side draw let's see if it has rendered yep side drawer has rendered over here for my chats and chat box i'm gonna create directly inside of over here my chats dot js rfce my chats and for chat box as well new file chatbox.js rafce chat box let me import these two as well okay i'm gonna have to import them like this so they are not inside the miscellaneous my chats and chat box let's see yep all of these three has been rendered but these two are supposed to be in the horizontal way so what i'm gonna do is i'm gonna give some styles to this box display to be flex so justify content see it's giving us sessions as well space between and i'm gonna say with to be 100 height is going to be 91.5 vh you can put the height according to your will and padding i'm gonna keep 10 pixels let's see yep you see these are in the horizontal format now cool now let's go inside the side drawer and create the side drawer component so first of all we're gonna have a bunch of states over here which we're gonna use so i'm gonna create all of the states first then later we're gonna use them so first is going to be the search state empty string as initial value we're gonna have search result as another state which is going to be empty array all of these search results that are going to be populated inside of over here just like this then we're going to have a state to display our loading is going to be false by default and then we're gonna have a loading chat to display when the when we click on a particular user it's gonna display that the chat are being loaded don't worry about this much now i'm gonna explain you as we go along okay now inside of over here i'm gonna remove this side drawer and i'm gonna remove everything inside of this fragments i'm going to create a box component from chakra ui which will contain these many things our search our title and both of these icons so first thing let's create this search so if you notice if we hover on this it's gonna have this tool tip in on upon this so this tool tip comes from chakra ui as well so i'm gonna write tool tip and notice it's importing from chakra ui slash react and obviously it's gonna have a label prop which is going to say search user to chat and it's gonna have an arrow so i would highly recommend you to go and read more about it in chakra ui's documentation i don't want to open documentation again and again because that will make this video too long so this has a few props like has arrow and the placement which i want to be in the bottom so bottom end so let's see okay let's create this then we'll see inside of this we're gonna have a button which is going to have a variant let me import the button first just like this and it's going to have a variant of ghost right and inside of the buttons we're going to have an icon which is going to be the search icon so i'm going to keep i'm going to use the font awesome for this font awesome icons so if we search for search icon yep this one we have this thing we can click on this and copy it up and just paste inside of our button but to use this we need to import the cdn for font awesome so what i'm gonna do is i'm gonna go back and i'm gonna search font awesome cdn just go inside of here and take the version 5.15 so yeah 5.15.3 this one click on it and copy it up go to my public folder inside of index.html i'm going to paste it right below this just like this let's see if this is working or not yep you see we have this search icon and you can see as we hover on this we can see a tool tip awesome so this is what we needed let me close this up let's go back and below this i'm gonna write a text component which will be imported from chakra ui see yep it's imported inside of this i'm going to write search user and i'm going to give this some styles as well display is going to be in the base it's going to so we have multiple different break points in chakra ui like base medium large small just like we have in material ui or bootstrap so you can read more about it in the documentation so in the base i'm gonna say that is in the smaller screens i'm not gonna display this but in the larger screens i'm gonna say that is in the medium screens i'm gonna say it's going to be flex let me show you real quick so you see over here search user now if you make the screen smaller it's gone it's gonna be gone yep you see just like that and i'm gonna give some horizontal padding as well p of x to be four let's see yep that looks awesome now i'm going to give this box some styling as well it's going to be display flex justify content space between so that all of the contents are aligned properly and align items to be the center in vertical manner and background is going to be white which is going to be hundred percent some padding and some border width so let's see yep just like this this is beginning to take shape all right second thing that we need is this title of talkative so let's go back and below this tool tip i'm gonna have a text with the talkative title just like this with font size of 2xl and font family of work science let's see yep you see talkative over here now when we add the third item this is going to be aligned to the very center the third item will be for that menu button so below this i'm going to add a div side we're going to have menu so let me show the menu real quick in the chakra ui menu so this is how a menu looks like see so we're gonna have menu inside of this we're gonna have menu button and the menu list is going to contain all of these items of the list okay let's create this let's import menu yep menu from chakra us react and inside of this i'm gonna write button which will have the padding of one and so this menu button i'm gonna add a bell icon so chakra ui itself has a bunch of icons so if we go inside of chakra ui and search icons icon inside of here we have a lot of icons so we're going to choose the bell icon so this one this is what we need for notifications so i'm gonna say and write bell icons and import it so bell icon and we're gonna need this chevron down icon as well so i'm gonna import this one as well and i guess we need to install this chakra ui icons package which we don't have right now let's see yep we don't let's install this package so if we go inside of here yep npm installed chakra ui icons i just wanted to show you that you can use font awesome as well and chakra ui icons as well there are multiple options for this so let's install this make sure to switch to front end before installing this we don't want to install this in our root so inside the front end right npm install chakra ui icons there it is let's save this file and see if it works or not i'm going to restart our app as well cd front end and npm start there it is you can see the notification icon over here and over here i'm gonna add the list for notifications so menu list for notifications the menu list will be over here and obviously we are not building notification right now we are going to build the notification in the future videos so i'm going to let it be also this bell icon i'm going to give this a font size of 2 xl and some margin of 1 so that it looks good let's see yep it looks good cool so we're gonna leave this for now and i'm gonna build this one this menu right here our profile menu so below this menu we're gonna have another menu which will contain another menu button so i'm going to copy this up so we can write icons inside of a menu button like this as well so i can say as button and for giving the icon i'm gonna say icon will be in the right so we can you can give right icon left icon so i'm gonna say right icon to be chevron type down icon just like this and instead of let's say if i write anything and go back yep you see we have it so let's build this fold further now insert this we're going to have something called avatar from chakra ui so if you go and search avatar so this is this will just like be a round profile picture yep you see just like you see in other social medias so we're gonna use this so this avatar will have multiple things first of all it's gonna have the profile picture of our user who is logged in right now so i'm gonna give this size of small and it's gonna have a cursor pointer so that our icon changes let me import this first let's see okay let me manually import it just like this so it's gonna have if the profile picture is not available it's gonna display let's say if the name is pure sugar wall so it's gonna display pa in the avatar and for getting the name obviously i'm gonna need the user state so let's import the user state from chat provider so just like we did over here i'm gonna take this and paste it over here chat state yup just like this i'm gonna take this user state and give inside this name user dot name now this should work let's see let's find out yep you see so guest user is logged in so it's displaying gu and if the guest user has a picture i'm gonna say src equals user.pick just like this if we go back and obviously guest user has this default image so it's gonna display this default image over here now i'm gonna display the menu list which is going to be this one this menu list right here so below this menu button i'm going to say menu list inside this menu list we're going to have two things first are my profile menu item which i'm gonna import from chakra ui react and the other thing is gonna be log out button log out let's see click on it yep my profile and log out awesome let's create a little separation between them so i'm gonna add a menu divider as well all of these things are available in the documentation you can go and check them out yep you see it looks much better now so what i'm gonna do now is i'm gonna create this profile model first so if you click on this and click on my profile it's gonna displace profile model and then we're gonna create the logout functionality and then we will move on to the sidebar functionality so inside the miscellaneous i'm going to create a new file for profile model.js rafce now let's go to chakra ui and see how we can create a model so model so this is how we can create a model we have this model tag over here which takes bunch of things like on close is open is there a full code for this let's see i don't think this is the one um yep here's it the model and this is how we do it so if you click on open model we have this model opened so this takes all of these things like use disclosure so i'm gonna copy this hook which is going to contain all of our functions and it's gonna have this model with this button okay fine let's create this import use disclosure from chakra ui hooks now we're gonna use this profile model like this so it's gonna have two things first the user information and second the children so i'm gonna take the children and put them inside of over here just like this and what i'm going to do i'm going to wrap this thing in profile model just like this let's see okay cool so inside the profile model so if we go inside the original app you can see one thing if we open another if we open our chat we have this i button over here on which if we click we display the profile model as well so we have to create this model so that it fits both of the places since this is the point of react right we are creating reusable components so we have to create a reusable component like that so what i'm gonna say if the children's are supplied so i'm gonna go inside of here and i'm gonna sort of fragments i'm gonna say if the children are supplied children question mark if the children supplied then just display the children span and for span i'm going to give an on click to open the model on open which is this one and sort of this i'm just going to say children but if the children is not supplied what i'm going to say is i'm going to display this i icon which is going to be like this icon button and icon is going to be view icon so icon button will be important for chakra io slash buttons view icon will be imported just like that and it's going to have on open as well so let's check this out so inside of here so right now we have my profile but we only if we display profile model and i'm going to remove this let's see yep you see the i button over here awesome so inside the profile model i'm going to go again and let us finally create the actual model for it so if we go to our docs and let's take whole of this stuff and paste it here and import all of these things because we're going to need this model header model close button model body i'm going to not need this lorem let's add anything in place of this button model footer and i guess that's pretty much it let's find out if this works or not if we yep we can see if we click on my profile it opens a new model awesome let's customize it according to our wheel so inside the model header what i'm gonna say i'm gonna say user dot name let's see if we are supplying user from there or not i don't think we are so user equals user let's see if you click on my profile yep you see guest user displayed awesome and you know what i'm gonna keep this model header okay it's in stuff over here so i'm gonna give this a few styles like font size 40 font family display and some justify content inside of our model body we're going to have some things for let's create the modal footer first it's going to have a close button and no secondary action so instead of the modal body we're going to have first thing as an image which is going to display our user profile picture so image image will be imported from chakra ui image what's wrong okay let me manually import it all right so image will have some border radius border size src and an alt prop okay and below this we're going to display the email address of the user so for that i'm just going to simply import a text text import it comma text and this should work let's find out click on my profile yep guest user okay this is not properly aligned let me align this and by giving this model some styles first of all i'm going to give this size to be large and if is centered let's see yep it is centered but this is still not defined so i think i need to give model body some styles which are going to be display flex flex direction to be column that means top to bottom align item center and justify content space between yep awesome let's compare this to our yep it looks absolutely similar i think we need some padding as well or some height probably so inside of model content i'm gonna give some height of 410 pixels yep awesome all right now that my profile functionality is done let's build logout functionality so i'm gonna go back to our app and i'm gonna create a function over here so i'm not gonna waste much time in this because this is gonna be just simple so logout handler it's it will have a local storage dot remove item we're gonna simply just remove the user info from the local storage and we're gonna push it to our slash route okay so let me create the history as well const history equals use history and make sure it's imported from react router dash dom and i'm going to put this logout handler inside of here so on click logo handle okay click yeah let's find out if it works log out oops it's not working oh on click let's see now on click yep it's logged out successfully let's log in again awesome so this is working now let's go on and create this drawer for searching the user the side drawer so let's go to chakra ui docs and i'm gonna search drawer yep so we have all of these things to import and if you click on open it's going to display this drawer and it must have something called like on right yep placement is right so we can put it on left according to our need cool let's go and create this so below this box in scidraw.js i'm going to create a drawer component and you're going to see that it has imported i guess yep it's imported it's gonna have the placement of left it's gonna have on close so i need to import on the use disclosure as well the use disclosure let's copy it up and import it here from chakra ui hooks is it imported let me manually import this so import at chakra ui hooks yep yeah just like that now we're going to take this on close and put it over here we're going to have an on open as well so we're going to put on open inside of this or i guess it is open is open yep it is open now inside of this drawer i'm gonna have a bunch of things it's gonna have a drawer overlay just like we saw in the documentation it's gonna have a drawer content tag so draw content it's gonna have a drawer header inside of the drawer content which is gonna have border bottom one pixels let's let's see if this is turning out to be what we expect but before this when we click on this search user we need to open the drawer right so we need to add the functionality over here so on click to on open let's see this should work we click on here yep you see search users draw is opening cool let's build it further it's gonna have a drawer body all of these things are getting imported if you see over here inside of this i'm gonna have a box with display of flex and padding bottom of two so what is this for it's for our input so click on this you have this input right here so it's going to contain let me write this real quick it's going to contain the input tag from chakra ui input let me manually import it input and then i have button on click of which we're gonna handle search so obviously this handle search doesn't exist yet so i'm gonna comment it out for now but this set search for state we did create it so you can see search set search and we're going to update this state and we're going to give value offset so that this is a controlled input okay so i think this drawer body needs to be inside the drawer content tag itself so that's my bad let's see if it works yep you see input tag is over here with this go button awesome for this handle search i'm gonna create an empty function for now it's const handle search just like this okay or you know what let's create handle search first then we're gonna move forward so instead of the handle search what we're gonna do we're gonna check if there's search if there's anything inside the search so after we click on the button this is gonna run so i'm gonna check if there's something inside the search or there's nothing inside the search then we're gonna throw the error by using our toast just like we did in our previous videos so for toast what we're supposed to do we're supposed to import the use toast hook so const toast equals use toast and use toast will be imported just like this from chakra ios react now if we go back and say empty and click on go yup you see please enter something in that so if you see i've put the warning and i've put position to be the top left that's why it was displaying on the top left okay so there's that now below this i'm gonna have a try catch and i'm gonna make the api call for searching the user so first of all after this i'm gonna say set loading to true when this search starts and after this we're gonna have a const config so we are supposed to this we are supposed to send the jwt token if you remember in our previous video we make this we made this route as protected so it takes some headers so headers and it's going to have the header of authorization which will be bearer token so in the back ticks i'm going to write and in the dollar sign curly braces user dot token yep just like that and i'm going to take this config i'm going to put inside of the exes call so i'm going to say const data i'm going to destructure the data from the api call so await axios dot get and the end point was if you remember it was slash api slash user and we're suppose we are supposed to send a query so search so question mark search equals insert the curly braces i'm going to write search whatever there is inside of this search state and i'm going to provide the config as well it's config so this should be enough what's wrong a weight and this is going to be since we're using a weight this is going to be an async function just like this now below this i'm gonna say set loading to false and set the search result to the data cool and insert the cache simply we're gonna display a toast if the api request fails so i'm going to say error record fail to load the search results status error division 5 seconds excludable true and bottom left yep let's see yeah everything looks good in here let's move forward and display all of these search results so i'm gonna go right over here below the box i'm gonna say if the loading is true then do some loading stuff otherwise display all of the search results so if it's loading i'm going to create a component chat loading and i'm going to display the component so for now let me just write any random thing inside of over here and obviously this chat loading doesn't exist let's create this first so inside of the components i'm going to create a new file for chat loading dot js and it's going to be a fairly simple component so instead of this i'm just gonna have a stack so if you remember we use the stack while creating our login form so it's going to have a stack of loading skeletons so if we go here search skeleton you're going to see a skeleton look something like this you might have seen this in other social medias as well so we use just like this so we're going to create a bunch of skeletons and i'm going to add them inside of here so just like this let's import skeleton it's going to display all of these skeletons while this is loading so if we go back to our app and if we search something click on go uh what's wrong did i do something wrong for this okay we haven't imported the chat loading yeah of course yeah now we have imported it so now this should work so if we click on j and let's say go yup you see this search will be displayed over here awesome so this is what we needed so our search is done now let's render all of these things from handle search so for rendering this inside of here i'm gonna say search results or search result dot map so if there's instead of something inside of search result so optional chaining and user inside this i'm gonna display all of these things so i'm gonna display this inside of a component called user list item user list item it's gonna have a key since we are mapping so user dot underscore id and it's gonna have the user itself and we're gonna have a function so that when we click on it so handle function it's gonna have this function so when we click on it it does something so i'm gonna say access chat so it creates a chat right with the user dot underscore id so i'm going to create this access chat empty for now over here below this handle search let me close this handle search below this and this access chart takes a user id so i'm going to keep it empty for now and let's create this user list item first so i'm going to create a new folder for it inside of the components called user avatar inside this folder i'm gonna create a new file user list item dot js so it's gonna contain files related to the user list item so instead of here our afce it's going to take user as we mentioned and it's going to take this thing handle function which will be responsible to create a chat and to be honest this user is not really needed so i'm not gonna send this i'm just gonna take it from the context api why bother if we are using context api right so i'm just gonna go inside of here so chat state and inside of here i'm just gonna quickly write it and then i'm gonna explain you what i've done so inside the return i've created a box let me just import this all of these things cool now let me explain so inside of this box we have an on click of handle function which we are sending from there it's gonna have these styles cursor pointer some background hover styles we can write like this underscore hover so on hover the background will be this bluish color and the color will be white width will be 100 display flex align item center some generic styles i don't think i need to explain them so and inside of this we're going to have an avatar for the user so that we can display the user pick just like we used avatar earlier with the name in src and below this we're going gonna display users name and email so let's find out let's see if it's working or not so if you go inside search user and say j go yup you see guest user and okay guest user um let's oh my bad my bad so we need to import the user obviously because if we go here we are using this user and not that user so we need the user from the search results otherwise only going to display the logged in user okay let's see yep you see john doe if he just says j and go we should have yeah john doe and jane both of them are over here awesome this works absolutely fine so we are successfully done with our side drawer now let's create the functionalities so that we can click on these and it can create a chat right over here awesome so let's go and write the logic for access chat so inside of the access chat i'm gonna say a try catch instead of the try obviously we're gonna start the loading and we're gonna use this set loading chat so set loading chat to true and inside this we're gonna have the config just like this one this config over here i'm going to take this so i have one more thing actually inside of the config it's going to have authorization better token and since we are going to be sending some json data so it's also going to have content type make sure you write just like i am typing this so application slash json don't make any spelling mistake so just like this content type application slash json cool and below this we're gonna make an api request so to create a chat what was the api request it was slash api slash chat and it takes the user id so when i say const data equals a weight and it's going to be an async function answer this axios dot post and it will have slash api slash chat and it takes the user id and the config cool now let's set the loading to false and set the selected chat to the data so obviously we need to create the selected chat state and i'm gonna create this selected chat state inside of our context so that it is accessible in whole of our app so i'm gonna go here and say set selected chat and obviously we haven't created it so let's go inside of our context and chat provider create a use state selected chat and take both of these things and i'm gonna put it inside of our value and send it to our app also i'm gonna have a chat state as well so use state chats so that we can populate all of our current chats inside this chat state and send this to our app cool and i'm going to import these chats and set chats as well we're going to need them later so what this will return is it will return a chat that is created so selected chat will be the data and set loading chat will be false and we're gonna close the site drawer after we click on this cool so now we're gonna obviously display the toast for the catch function so just like this awesome so this is what we needed to do now let's go and create the ui for it let's create the ui for all of the chats so i'm going to go back to my chat page inside of this my chats now here inside of the my charts component we're gonna import all of the state from our context that we are going to use which is going to be all of these so let me import this so we're gonna have set chat stats user selected chat set selected chat all of these things and we are going to have a local state as well which is going to be logged user which i'm going to explain you later what i'm going to use that for it so let's move on for now and also we are going to use toast to display the toast so let's create the function for toast as well so that we have we don't have to create it later now when we come to this page we are supposed to fetch all of the chats of the user so for fetching all the charts of the user there was an api for slash api chat and it was a get request so i'm going to quickly create that function just like this so let me explain so this fetch chart is gonna be async function obviously and let me import axios yep so it's gonna have a try catch with this authorization bearer token so self-explanatory i guess and we're gonna we're making the axios request to slash api slash chat which is a get request and we are setting all of the chats so we created the set chats if you remember so you're setting all of the chats inside of this also i forgot to do one more thing so this set chats if you go inside of the side drawer over here we're gonna say so we are creating the new chat over here right but if the chat is already inside of this this chats state which we are fetching inside of my chats so what we want to do we want to append it so we're gonna write over here if chats dot find nope so if chats dot fine if it finds it inside of the list that is already with us then it's just going to update the list by doing set chats and appending the chart inside of it so this is a normal find function in javascript and also one more thing that i forgot to do i don't know why i keep forgetting things and below this drawer body so we are doing that loading chat right so when the chat is being created we are not showing that loading anywhere so we are gonna display a loading animation over here with loading chart and the spinner spinner will be imported from chakra ui spinner let me import it slash spinner and import it just like this cool so let me just try to do this and if we go inside the user if we say j if you click on it yep you see the spinner over here and when the chats are created it's gonna go over and obviously the chats are not populated yet that's why it's giving this error but let's let's take care of that first let's create this function over here fetch chats after this is done then that will be done as well now we have created this function now to call this function i'm going to call it inside of the use effect use effect also i'm gonna set the logged user which we have created the state which i'm gonna again tell you why i'm gonna use that so set the logged user to json.parse and i'm gonna import the user from the local storage and fetch chats will be called below this now that we have fetched all of these chats inside of this chat state let's render all of them inside of the chat provider for chats i'm going to give empty array so so that it doesn't give any error later anyway so let's try to do that again let's try to search j click on this yep our chat might have been created we can't see right now but let's go inside the network tab um i'm gonna do that again yep you see the chat was created we get this response cool so now if we go inside of our here and i'm gonna log this log the data and this should give us the list of the charts right so i'm gonna refresh this yeah you see we got this list of chats with all of both of these user yep we created the chat with john doe so it's displaying john doe here cool we are successful in this part now let's render all of our chats over here so first of all i'm gonna create the basic ui for this i'm gonna have a box from chakra ui why is it not getting imported yeah now now instead of this i'm gonna have a few styles so if we go inside of our app and if we do like this if we go beyond a certain limit you can see only this screen is displayed and not the two parts of the screen are displayed yep so we're gonna make this responsive just like this box is not defined what's wrong why is box not defined it comes from import from oh sorry it's imported from chakra ui layout okay fine cool so i'm gonna say inside of this box i'm gonna say display to be if the chart is selected then this screen will be displayed so if you can see if i refresh this and make this smaller so if a chart is selected this screen will be displayed right and that screen will go display none so i'm gonna say if the chat is selected display none otherwise display flex and the medium obviously both of them are going to be displayed so it's going to be always display flex flex direction column align items to be center and padding is going to be 3 background is going to be white some width in the base is going to be 100 and the medium obviously it's going to be 30 percent as i displayed you some border radius and some border width so just like that now inside of it i'm gonna have another box which is going to be the header of our charts so this thing which will say my chats and new group chat etc so inside of this box i'm gonna give this some styles as well it's going to be padding three padding bottom three padding horizontal to be three some font size according to the screen size some font family display with justify item and align items just like that it's gonna say my chats my space chats let's see yep you see just like this if we make the screen smaller hmm what's wrong okay maybe because the chat is not selected obviously if the chat was selected it would be display none it's cool so my chats and below this i'm gonna have a button for new group chat and display a button just import the button slash button cool just like that and it's it has an icon for add icon cool let's see how that looks yep it looks as we wanted it to look now later when we click on this button obviously we're gonna have this model displayed but we're gonna do this in our next video for now we're gonna create all of the chats we're gonna display all the charts here so now below this i'm going to render all of the chats so below this i'm gonna not below this below this i'm gonna have another box which will contain a few styles such as display flex and flex direction to be column so they are displayed from top to bottom some padding of three some background color some width and height and border radius and some overflow y hidden now inside of here i'm gonna check if there's something inside of the chats array then do something otherwise what you should do is you should display the loading so we created the chat loading if you remember let me import this chat loading from dot slash just loading cool otherwise what we're gonna say so if the chats is there i'm gonna map through the chat so i'm gonna have a stack over here just like we used previously so inside the stack i'm gonna first of all stack will be scrollable so i'm gonna say overflow overflow y to be scroll instead of this i'm going to map through all of the chats so chats dot map it's going to be a single chat and inside of this i'm going to map i'm going to say box and inside this box i'm going to have a few things so on click a chat will be selected right so what i'm going to say on click of this selected chat will be the particular chat which is currently inside of here and it's going to have a few styles like cursor pointer background to be selected at so if the selected chat is equal to the chat so let me show you over here you see this if the if this chart is over here if this chart is equal to select edge so if i click on this this chart is selected now so if this is equal to selected chat it's gonna turn blue i'm gonna say if it's equal turn blue and the color of the text will be white otherwise black or this color cool and some more generic styles like this and obviously we need to provide a key and inside of the box i'm gonna display a text which will have a few things so first of all i'm gonna check if the chat is not a group chat is group chat so if you remember in our back end if the chat is a group chat then it's going to have its name but if it's not a group chat every chat has a name of sender right because we don't know from which perspective we are looking in the chat because both of the user will have the name of the opposite user so if we go here if the if roadside coder is logged in it's gonna see the push it's gonna have to see the push but if the push is logged in it has to see the name of roadside coder so we don't know whose name will be displayed over here that's where that's why we kept the sender in place of the single chat but for group chat it's always going to be this name of the group right so what i'm gonna do over here is if this is not a group chat i'm gonna create an operation over here otherwise i'm just gonna display chat dot chat name i'm just gonna display the chat's name now if it's not a group chat then i'm gonna say get sender i'm gonna get the name of the sender and i'm gonna create this function in just a minute so get sender will take logged user and all of the user of this chat chat dot users it's just gonna make sense in a second just hold on let me import this text first yeah so um yeah text is imported okay so now we're going to create this get sender so for keeping all of the logic of our app i'm going to keep them inside of a config folder so i'm going to create a new folder over here in the src called config and inside this config i'm gonna create a for a file called chat logic logics.js now in here i'm going to create the getsender function now so export const get sender now this getcenter takes two things logged user and the user's array and what it's gonna do is it's gonna see inside of this user's array it's gonna leave the user that is logged in and returned the user which is not logged in so simple logic not much but since we're going to use them we use this at multiple places that's why i've kept it in separate place so just like this so inside the users array if the user of zero id is equal to the logged in user's id then return this otherwise return this so obviously it's going to have just two user inside of this array if it's not a group chat so that's why this logic will be helpful cool so we are exporting it and let's import it um okay let me manually import it from dot slash config slash chat logix and let's import it now control space yeah it's imported now this should work let's find out let's go back and yep you see jane john doe is displayed over here we don't want this scroll thing right here so i'm going to write some styles inside of app.js i mean app.css web.css i'm going to write webkit scroll bar to 0 webkit scroll bar thumb to a background so i just simply googled it on how to remove the scroll bar or to make this display none something like that so i got this code so i just copy paste it over here yep you see let's go and try to create jndo so i'm just gonna click on this and yep you see jane dose chat has been also created over here awesome so we have successfully created our chats page with our header and my chat section now in our next video we're gonna create the functionality for this new group chat and then later in our project we're gonna create this chats box so that we can start sending these users chats so hit the like on this video if you like this video and don't forget to subscribe for more such awesome tutorials in the future and if you have not yet accessed the complete playlist click the link in the description to access the complete playlist and i will see you in the next video bye

Channel: RoadsideCoder

Views: 80,591

Keywords: MERN Chat App, chat page design, react chat app socket io, react chat app with socket.io, search user react, react search bar, chakra ui tutorial, chakra ui react tutorial, chakra ui sidebar, chakra ui, react chakra ui, mern stack, mern stack tutorial, react chat app, chat app, socket io, context api react

Id: 2JNL2JBgruI

Length: 59min 40sec (3580 seconds)

Published: Mon Nov 29 2021