Let's build a chat app with next js and firebase (text , image & emoji's)

hello guys in today's video we're going to be learning how to build a full stack uh chat application uh using NYX js14 uh using Firebase and using JavaScript so what we what we're going to do in this video we're going to learn how to authenticate using Firebase uh then we're going to learn how to initiate a chat so there'll be a part where they are users then you can initiate initiate a chat which creates a chat room between these two users once you in this in this chat room between these two users you can send text messages uh these will have a time stamp and then we're using moment to show like um the time stamp like how long ago did you send the message and then you can send emojis you can send uh you can also send uh images to the user so yeah that's what we're going to do so let's jump right into into the demonstration so when you first visit the application you see uh the Lo the login page uh the login page we can create an account you can log in so first let's create an account so you'll see here you can generate a new Avatar you can get the one that is automatically generated for you but then here we can also pick a new one if we don't like that one okay yeah so I like this one so I'll say doulas codes then we'll say codes at gmail.com then we pick a password yeah so right off the bat uh let's say Okay 1 2 3 4 5 6 so you can see this is not a valid email then we click sign up it shouldn't sign up it should tell you like hey this is an invalid email that you've provided us right then we provide an accurate email then sign up then it signs up and then this validation we're doing it from scratch we're not using any packages to validate then you go on users and then you see all the users that are in the app right and then you choose like which user do you want to communicate with so we can see you want to communicate with Elon Musk okay then we come here on the chat room and then right now it's empty so right now in this side we're logged in as Elon mask we go to chat rooms and then you can see darkas initiated a conversation with us so before we click we can come here and then we can say heyen send amen then here so here this is the last message that was sent you can see it in the preview of the chat room you open that and then you see hey man a few seconds ago so it's giving you a real time chat then you say how is it going okay how is it going then here we can see how is it going you can see this message was sent and then we can we can add some emojis to say okay I don't know like yeah say it's going great okay then here we can receive message with Emojis so here we can show the ability that we can send emojis and then here we can say uh where are you something like this then here we can see then here we can upload images so we have that ability to be able to upload images then upload and then once you're uploading it shows you the progress of where the upload currently is and then once it finishes uploading this highlights to show you that you've uploaded and you can say I'm in the mountains okay then you see we can send images then you can come back here then you can see an image was sent and received then you can say wow that's great okay and then you see as you send the messages Scrolls down automatically so that's using us revs and then it's using a use effect to automatically scroll down to the last message yeah we'll also show you how to do that and then we're going to also build that right and then yeah we're going to build everything you see here I know the design is a bit simple but I just wanted you guys to grasp uh some of the concepts behind how you can build u a chat application uh how you can add um text how you can add images how you can add emojis and then from here we can even go to adding um video we can even go to adding voice notes yeah so you just let me know what features that you want me to add and yeah I know in this build I'm using JavaScript cuz I'm trying to teach you know like the junior developers how we can do this without scaring some of you off cuz I know some of you when you once you see typescript yeah but then just let me know if you want me to do future videos in typescript we you can do that and then here we can log out and then we can log in as another user here we can also log out and log in as another user so yeah this is what we're going to build today uh please um subscribe hit the like button hit the notification button so that you're notified every time I post a video uh thank you for watching guys okay let's get started so the first thing that we want to do is go to next js. org and then we want to get um commands for installing uh nextjs so we copy this then we come here open our terminal then just CD into the directory where you want to install nextjs so I'm just installing it on my desktop and then we just call it chat uh we're not going to be using typescript we're not going to be using yes L to yes Source direct no app router yes no okay perfect then just let that install yeah it usually takes a bit of time to install then yeah while it's installing uh head over to Firebase uh get started follow the instructions on how to make an account and then for me I already have an account and then I already have a project but then for this let's just make a new project and then we say chat Dash YouTube D yeah something like this okay yeah you can name it whatever you want it really doesn't matter then yeah okay so that's done installing then this is our project is creating so to open our project we see D into chat then we say um code then we put a dot or just drag the code and then pop it into vs code so both of those ways should work and then to run everything npm run Dev okay and then yeah it's running on Port 3000 then let's come back here I want it right here and we say Local Host okay Local Host 3,000 okay perfect so yeah now our app is open so we can close this then our project let's just finish creating our project setting everything up okay so when you open your project you first need to create an app so this going to be a web app and then we can give it a name so it can be the same name as the project doesn't really matter or we can just say chat we're not going to be using Firebase hosting okay uh we have our app then we come here it says build we need authentication for authentication we need email and user click get started yeah so this is just basic setting up of things email and password save okay so we have authentication then we come here with says fire store we create a database yeah from the Geto we won't need these things but then it's better you know to always they pick a location we start in test mode yeah it's always good to set up everything so that you know when you guys are watching the video is well structured we just set everything up in the beginning rather than going through the video trying to find like what we set up then we set up the storage and then yeah those are the only three things that we need from Firebase we need uh authentication uh database then storage okay so yeah while that sets up everything okay creating packet okay yeah let's just wait for that to set up everything and then so for the component library for the stylings we're using a library called Daisy UI okay uh so just visit Daisy ui.com and then to install it we need this command then we come into our code and then yeah we install that and then we go into our Tailwind config and then we're going to add this this is a plugin so okay you see how it says plugin we're going to add this okay perfect then next J example just to see what it looks like and then here you see we now have our storage everything is working and then we come here project settings in Project settings we come here which it says config so we need this file which says Firebase config okay perfect so here okay what is this now let's just see okay so we need this button yeah so it's just an example that they give you to test out if it's working okay so our app is open yeah this is saved so to test if Daisy UI is installed let's just do a bit of cleaning up so this so we're using next USS app directory so in the app directory uh we have the page the layout then so this page wa says get started by editing this is the main page that you're seeing here get started by editing so we just need to delete this and then now not the whole thing we can just delete the main have a diva yeah have a div then you have a button so to see if um d is working yeah cuz we can both agree that BTN does not a tell in class BTN primary that's not a tell in class um so it must be a daisy UI class so if this gives us a nice butn then it means we've installed Daisy UI correctly and then we see we get a nice pattern so our da UI is done our fire base is done so the first thing that we need to do we need to install Firebase okay open another terminal npm install Firebase so by default it's going to install our Firebase Version 9 I think that's the latest and then this is going to be modular Firebase yeah if you're coming from version 8 it would be like a different way of doing Firebase where it gives you these modular functions that you can use in your code okay whil that installs uh we're going to go out of our app in the root directory we're going to create a folder and then we're going to call to the lip for fer and then inside the lib folder we're going to create a file called fire base.js okay so this is our Firebase initialization and then in the Firebase initialization we're going to import uh initialize okay we're going to import initial Li app from Firebase is that the correct spelling let me initial C by is never use Firebase app initialize yeah that's the correct spelling and then we're going to import get fire store then we're going to import get o cuz that's those are the things that we need okay get or from or perfect and then here const fire base like this so here we're going to put the we're going to put the credentials that Firebase is going to give us but for now let's just leave that and then we need to export app equals initialize Firebase then we initialize the config then we need to export fir store and then yeah get fir store then we need to export the O get off then yeah we need to export everything yeah we also need to export the app so this might be cases where we need to use that okay perfect okay so in here we need the credentials so we get them from here you see Firebase config and then here we have Firebase config so we need to replace this with what Firebase is giving us and then once we do this our app can now access our Firebase so yeah it's that it's that simple our app now has access to to fire base okay yeah that's done okay let's close that close that and then yeah in this for file we need to have um we need to have a folder called components so this folder is going to have a components okay then here perfect and then here we need um we need a register and the login so we need a file called a register then inside that folder we're going to have page .js okay then RFC okay then here we need a f a folder called login and then page.js then rce okay perfect and then we come back to our app if we go to slash register it should take us to this way says page and then why are we getting this dark background okay we need to clear the global CSS we just need to remove everything or not everything as such let's see if we remove the body yeah then we get a white page because we don't want these default stylings that next JS is coming with okay yeah now we start yeah so we're starting with the register and then for the register we can start with uh styling everything and then having the inputs um we need some states yeah so we need to think about what what are we going to have on this page uh we're going to have uh the name uh the name of the user we're going to have the email we're going to yeah so yeah we can just start with the we can start usually I like to start uh with the state so that gives us more of like a mentor model of what we're doing so in nextjs version the if you're going to be using anything with State you need to uh specify that you're going to be using um you're going to be using use client so that next just knows that it shouldn't render this on the server okay so here we're going to have name and then after name we're going to have email okay we also have password then here we have uh email okay perfect and then in below password we're going to have confirm password and then below this we're going to have con errors yeah cuz we need to store the errors then that's going to be an object and then loading so we need to know if it's loading or not so that we can display to the user that hey this is loading and then we need an avator so we're going to have avors so we need an avator URL okay and then yeah I think for now we're also going to need import use router so you always want it from next navigation and then here we initialize the use router okay perfect and then yeah for now for now that looks good and then before that I need a package it's called Uh random Avatar generator random Avatar generator so we need uh the users to be able to generate avatars so you see this package random outfut generator let's see if if that's the one random average generator npm yeah cuz I for I I'm forgetting the package that I used but I think this is the one let's just see let's just take a look yeah I think this is the one let's see the website maybe they might have yeah that's the one so they give us this kind of Av and then we can generate a random Avatar so we're going to have this pattern where user clicks and then they generate a random Avatar and and then once they have the one that they like they can just click save and then yeah that's the one that we use okay copy this then we come here open a new terminal install okay done okay yeah so our AES are installed let's yeah another thing I'm thinking what else do we [Music] need yeah I think that's it for now the rest I think we can we can do it later but yeah cuz we need a toast library but we can do that later so it's AV generator so this is a function that they give us and then with this function we can generate an uh we can generate an avatar uh we generate it in in a use effect so let's import that use effect and then here we say const Generate random Alor okay and then here it will be const [Music] generator is equals to yeah so yeah this code I don't even know what this code does but generator do Generate random yeah I don't know what this code does but it's how you generate like from their from their documentation it's how you generate yeah CU some of these things there's no benefit to knowing this like how it works deep down we don't need to know that we just need to know how we can generate a random AV and then we're good okay then we need a use effect yeah perfect so this use effect is calling the Generate random avator which is giving us a random avator and then it's setting it to avator URL then we need a button right that can gener generate these URLs so this use effect is generating a URL when the page loads so when the page loads you're going to see so it's like when the page let's load this page right let's go back to the main so when you first open this page there's already an automatic uh Al that's been generated so that's what we need and then when you click the button it generates a new one so here we have the automatic one but then now we need the one where you click the button so to do that we'll just call it um handle um refresh a yeah like this and then yeah it does the same thing it just calls the it just calls the random avat generator and then once that's called and then yeah we get a we get an avatar okay perfect so now we're going to The Styling so this was just a we have our states uh we have our a generator but then yeah now we need our form we need our just sty it okay so this form is going to be um in a body with a flex uh it's going to be justify Center so that everything is centered item Center then a height of screen so that it takes up uh the entire screen uh then we have we have a padding of 10 then a margin of two okay so yeah this this should be good and then yeah so I like to comment out my I like to comment out my um my HTML so here it's going to be a form [Music] form okay this form is going to have some stylings it's going to be space y r four so on the y axis we're going to have a space and then a Max width of 2 XL so it's not too big then a shadow large padding of 10 yeah don't worry we'll see it we know what it looks like okay um so in this form we want uh t a heading so this will be the heading of the form yeah I don't know why my jsx is not working I mean my my intelligence it's not autoc completing for some reason and then we just say chat like yeah I think this should be good and then I want this to be class name of text Excel text Center font of semi bold yeah then I want this to have a color so it's going to have an aary value of color it's going to be z b 3 a 65 FF yeah it's going to be like a deep a dark blue so let's go and see yeah so this is what it looks like so it's going to be chat and then here we're going to have a span we say chat see chat to chat something like that yeah simple name chat to chat and then in here I want a font bold yeah so it's bed and people can see what it looks like and this is going to be a [Music] b uh 6 FF so this will be like a a dark orange so let me just verify this color color so it's e e a B6 then three okay yeah perfect yeah so this is what I wanted to look like but then I don't want a space here I don't know why okay so there's a space here so I want it to be all be joined okay yeah perfect so yes starting to come out okay so the first thing that I need in the form so we go back to this form so yeah I just took inspiration from this form you see this form the first thing that's there we have our a generator let's close this up so that we have like a neat page okay yeah so [Music] yeah that's why I said I like to comment everything out so yeah cuz you know there's an issue where you whereby you come like after like three or four months back to your code and you don't remember like what you were doing so if you comment if you get into good practice of course in out your code then you won't have those issues so display the Avatar yeah so here it will be displaying the Avatar let's just put a bit of space there and then we want to div okay we want to div here and then this div so this is going to we need a bit of padding and then we need everything in that Dev to be centered then we want a space of Y yeah two then we want to justify between then we want a border the Border will be a gray border 200 so it's light gray then a padding of two yeah this is perfect okay then yeah my intelligence is not working so I'm just used you know to has become I've become lazy with with the vs code intelligence so now I have to type everything out so in images an out tag and then here we just say Avatar and then do we want any stylings yeah we want it to be rounded so we want the image to be a rounded image so here we'll say rounded rounded four then we give it a height of 20 and a width of 20 so the height and width has to be 20 so that is a perfect circle okay and then we want a button from Daisy UI it's going to be type button yeah that's how you do a button then it's class name then BTN BTN we don't want primary we want outline okay then yeah this looks good then we want the Buton to say new avat okay then when you when you click the button remember we have this already it generates a new avator when you click the button so on click yeah this looks good let's check it out so yeah as the page loads we get up a avatar when we click new avator we get a new avator so yeah it's that simple guys then after this we want name all right so the name is going to be div again yeah this time the div is not going to have that much styling uh the div we wanted to have a label all right and then the label will give it a class name okay uh the class name is going to be label yeah I think that's some Daisy UI classes span yeah and then all of this that I'm doing let me show you where you can get it in this case that maybe you're working on your own projects you're working on things of your own okay let me show you where you get these things so you come here you say daisy UI then you come here then you say components then in components we say input okay and then yeah we have the input then you come here where it says jsx just copy this and then yeah you have your input so that's where I'm getting all these dings like just seeing the labels and whatnot the buttons that's where I'm getting all these buttons from right I'm just coming here and then I'm typing the component that I want and then I'm getting it from here yeah so that's where those things are coming from then here we have an input okay so our input as a type and the type is text it is a placeholder the placeholder yeah enter your name perfect class name and then class name is withd four cuz I wanted to take the whole width and then it's input then it's input boarded okay so these are just some nice stylings and then value it's going to be name and then on change it's going to be set the so on change we're just setting the the value to the name yeah this is just basic react and then how we're going to handle the errors so remember we have an error uh state so how we handle the errors we're going to do form validation and then if there any errors we're going to push them into this array so if there are any errors in the name we need to display them below the name right so we'll say if there are errors in name okay yeah this is perfect so this is what we want so we're saying if there errors in the name right then show the error right it will make sense once we implement this uh the functionality but in simple terms that's what we're saying we're saying if there's a if there's an error then show it okay so you see enter your name yeah name is done this is good okay then below name we want email then we want password so yeah we can just do a copy and paste so that we don't have to type everything out because it's almost similar with changes to a few things so yeah it'll be email and then yeah on text just text then enter your email then here the value start my name it's email email then here it's errors. email then here it's errors. email save that see what it yeah it's coming out then below that we have password and then confirm password so yeah password then here so say password enter your password and then here I will say password password and then password and then password then here password then it's no longer text this password let's test that out okay yeah that will that's working perfect then below the password is confirm password okay and then here it's confirm password then I just I think I just want to copy this so I don't have to type the whole thing so confirm Capital C confirm password okay confirm password confirm password uh enter your password yeah make sense confirm password type of password yeah enter your password confirm your password confirm from your password okay yeah I think it's coming along and then below that so it's a form the form it is a code reaction okay in our form the div for now let's just leave the div as it is we have a button the button yeah we'll see what it says inside the button is going to have a type of submit since we wanted to sub the form it's going to a type of submit and then the class names remember the class names are coming from Daisy UI so all these buttons these stylings that just see me seeing me put they're coming from uh Daisy UI then this is the background that we want yeah it's an AR color and then inside we want the text to be white so we want white text okay yeah the button is looking so inside the button remember we have a loading so if it's loading we want the button to say loading right okay so again this loading we can come to Daisy UI and then we can say spinner or loading I think they have something so yeah we can pick what we want uh we want something small I guess cuz yeah we don't want something big so say the first one yeah the first one is too small yeah we can pick the second one so we're picking this circle then we come here then we paste it in here okay perfect we save that then yeah so you see uh chat to chat yeah everything is coming out then register then here to see what it looks like we just say if not loading then yeah this is what the the loading is going to look like okay yeah so starting to come around then below that so on a form it will say do you already have an account you know that type of stuff so already have an account okay so if someone already has an account so inside this pen we want a link the link we're importing it from next link and then the link is going to go to login and then yeah let's give it a bit of stylings class name text blue 600 when you over it the text is going to become a deeper blue I guess then it's going to say hover and then we want it to be underlined yeah this is pretty basic okay then we want the link so inside the link it's going to say login then here we need to force the space so to do that yeah do like that okay yeah we already have an account and yeah login so you press that goes to the login then we can come back here okay yeah not bad so this is what we have now okay uh then we need uh we need a way to validate this form so we need to know what was entered so we can uh do form validation so the first thing that I'm thinking is uh to validate the form but then we need to before we can do that we need to a form our Handler right so on submit what we want to do on submit so on submit we want to handle submit like this okay then here we want to prevent the default like this e dot prevent default like this okay so for now this is good and then we want to set loading to true yeah for now for now it's not bad and then here we want to have this okay perfect yeah I like to just put some spaces here so it all looks nice and then then we want to try then we want to catch okay inside the catch we want to console log then inside the try we want to validate the form so above the handle submit we want a way to be able to validate the form okay so we want to here we want to say con validate form like this yeah and then the first thing we want to validate is email Rex like this so this is just some Rex to validate an email to see if an email is valid or not right yeah you don't need to know these type of things off by heart so I just I just got it from stack Overflow I think okay so say uh if not name. trim then we're pushing into the new errors name is required so that's how we're going to do them all in here if not email. okay so here it's no longer just email it's email or the rejects then email is invalid if it's not and then here is if password. length is less than six then yeah so that protects on the password length and then we'll say if password is not then password passwords are not equal and then here we'll say set errors to new errors right so we setting uh our errors state with this errors object right and then afterwards we return okay we return the object do Keys the new errors. length equals zero so what this does is it goes into our new errors and then it checks is the length zero then it returns it true so if it returns it true it means it didn't find any errors if it a false then it means it found errors right so with that in mind can now say if right form is not valid then we return right so we're now saying if the form if our form is not valid then we don't we don't want to do anything right if it's valid then we want to do something so here we can say alert then yeah register success something like that so if you come here then you see everything is now perfect so enter your name enter your email yeah everything is now good then let's see here password confirm password errors yeah everything is now good to go so here on our loading after everything is said and done we want our loading back to false okay so there so it's reaching this point and then it's return turning without setting the loading to false so we can do it like this then return but before we return we set the loading to false yeah just for some good user experience we don't want it to keep loading okay perfect so yeah just tells you include everything so we just say test test 1 2 3 4 5 6 7 8 1 2 3 4 4 5 6 7 8 register then email is not valid at gmail.com okay register success perfect okay so yeah now our form validation everything is now good so what we need to do is now we need to bring in our Firebase so to bring in Firebase we'll say um we'll import uh the O and then and we import the fir store okay then we're importing it from at yeah like this okay and then what else we need to import create user with email and password from Firebase o yeah I think that's it yeah so from Firebase uh they give us uh that function code create um user with email and or and then once we call that it's going to register our user okay so inside our triy block so yeah if everything is good we'll say con user cred credentials okay yeah I'll explain what this means okay so saying user credentials are wait create user with email and password we get this from Firebase or we pass in the O object which we're getting from here and then we pass in the email we pass in the password okay yeah so it's that simple and then we'll say const user is equals to credential do user so we now have a user object and this user object uh we're interested in the ID and then once we get that we want to create a corresponding user in the database so say Doc ref okay then we want to create a collection uh called but then this code is wrong cuz this is the old way of doing it uh so we're using uh Firebase modular so yeah it looks more like this and then here the user. ID is going to be the ID and then this is the reference to the dock but then we still need to set uh the dock wait H set Doc and then what do you want to set the name email the Avatar name email Avatar yeah this is about right save this and then yeah this is good no thanks no thanks don't I know what that was saying there okay and then once everything is done there's no need to display any like success or anything we just route the user to the homepage so we just say router. push to the home page and then after that we'll say set set the errors to an empty object yeah I think that's it let me just see if I missed anything thing I think for now this is it we save cuz well it's loading everything is everything looks good yeah everything looks good then yeah let's test it out so new avator so let me pick a new avator that I like okay yeah this one then I'll say first user then here I'll say first at G email then password 1 126 126 then register then it starts loading okay then let's see why you didn't navigate us the doc is not defined at head of submit okay let's go to handle submit and then see what is saying so and to submit dog set dog okay so we didn't import okay no worries dog can set dog from fir store okay no worries on that let's just try again okay so new let's create yeah let's create it as a female this time then we just say uh we'll say second user then we just say second 1 28 1 2 3 4 5 6 okay register okay perfect and then you see now we diverted to the homepage that means that if we go into our fire store database there should be a users's collection and the user that we created should be in the and the Avatar URL so this Avatar URL if you open this should be a female Avatar then yeah perfect so it means the user that we created is now going into the database so for now that's good and then yeah for now let's check out the login page uh how can we implement the login functionality so the login functionality is going to be the same functionality uh as the as the register page in the sense that we just need the name and the password and then we remove everything else okay so let's go to the login drought yeah so for now we have to enter the routes but then afterwards we have like links that you can click and stuff but for now we'll just use it this way so copy what's in register go to login paste it okay then we're going to edit it out so here instead of create with user and password it's sign in with email and password and then there's no this is not necessary uh the fire store it's not necessary the a generator it's not necessary cuz we're just logging in uh the use effect is not necessary cuz we're just logging in use router yeah that's about it uh name is no longer necessary cuz we're just logging in email uh Avatar so all this code no long then in here we no longer need the name okay but we no longer need the confirm password so it's just email and password and then here we no longer need we no long we no longer need this so yeah user credentials is now let's now sign in email and password like this and then if there's a user that comes back so it's going to be like this it be if user so if a user comes back then we're going to push you to yeah like this we're going to push you to the homepage only if we get back a user then yeah we no longer need the image we no long need the name we no longer need confirm password so yeah we're no longer registering we are logging in here it's don't have an account then register then it takes us to the register page yeah so the fun we already have it but then now we're just logging in so don't have an account register then we get taken to the register page if we have an account we click login we get taken to the login page then we log in so log in perfect we're able to log in so yeah that's that's the authentication yeah pretty simple and then yeah now let move on to designing the homepage yeah okay so now we want to do the homepage uh so the homepage on the left side we going to have um the users when you click a user it's going to cck that user and it's going to add that user into your chat room or chat list once you click that user you it creates a chat between you and that user and then yeah we go from so on the left side we want to have the users and the chat rooms and then on the right side we have the actual chat room okay so I think for this we need two libraries uh we icons okay which one is it I think it's this one copy that that yeah so this is just a plug-in go doesn't really have any other conditions H to so this one gives us these nice uh to notifications yeah like this one which is making here is your T so we want those we copy [Music] that install it okay so once we install that we need to go into the rout of our application which is the layout folder so we close this so we no longer leave this we go into the layout so yeah instead of calling this create we just say chat app yeah something like that and then here we import the toast library that we just so it's called toaster like this and then we need to wrap our children inside it so it's like if you're coming from react this is like our index it's like our index file all right so we just put this put this here and then it has a position where do you want it to come from so I wanted to should be uh bottom center okay perfect so yeah that's done that's it for now can close that and then in here this is most definitely going to be a used client and then we need react use State and use effect so we need both and then we need import so we need the app we need the fire store okay from perfect then so we need to get the current logged in user to check who is currently logged in so they give us something called a get O then an on off State change okay then we also need to get the user from the DB because remember we have the user in the DB so get dog from Firebase fir store and then we need to be able to Navigate to navigate that user Lo yeah I think for now and then here we initialize the all object with the get op then inside the get op we put the app then we have a const user set user then const route use router something like this and then we need to get that user from the back end and then we need to console of that user okay so yeah we need a use effect like this and then inside that use effect we say const unsubscribe And subscribe okay let's see turn on subscribe okay let's see so un subscribe or Sy user get the user we check if the user is there then use R first door users user ID uh we get the we wait to get the dog then user then in here we need to pass in the O cuz sometimes the O comes in late then we need to pass in the router okay so if the user is not there you need to push it to the login and subscribe so this is more of like a cleanup function and then here we say console.log user so here if we go back and we open our console log we see the the user okay so object and then you see second user with our avat URL so yeah this code is working it's getting us our user let's just coming that out so that we're not having like lots of console on the end we delete this okay so now main one right we need two sections so it's going to be right it's going to be height screen okay because we always want it to be height screen and then I like to comment so here I will say left okay so it's going to have a left side it's going to have a right side so on the left side give call this left side class name Flex uh shring like this Flex shring [Music] zero like this then it's going to have a yeah like this then right right and then this this will Flex grow we save that check out what it looks like then yeah this is good so we have something on the left have something on the right so that's what we want and then so on the left we're going to have uh the users then on the right we're going to have the chat rooms okay so right now in our components folder we going to create these components right so we're going to have um on the left we're going to have the users so yeah we say users JS RFC then chat [Music] room use cing JS RFC okay we save that yeah so this part is mostly going to be concerned with the UI so the functionality would do it but let's get the UI out of the way so that you see what it looks like then I think the UI will make sense then okay so on the left side we want users okay so it Auto Import to do that you delete this you put an S then you press enter Then it Auto Imports on the right side you want the chat room you see here it suggested for me I press enter it's okay say that go back so yeah we have users we have chat rooms okay perfect so in the users that's what we want to start with okay so in the users we're going to have what is known as a user card so this is going to be what's going to be displaying the users RFC so when you see me do RFC I'm using an extension uh it's called es7 so it's this extension that I'm using es7 Snippets so it allows you to when you type RFC it allows you to be able to autocomplete so if I do this RFC I press enter Then it auto completes for me so that's the extension that I'm using okay perfect then here user card we save that we come here so here we need the user card we need to import it here so react let's just get the inputs done with so here I'm going to be using State then here I need the user card okay done in function users okay so we go back to the page so on the page I need to pass down the user object that we got back from the database remember um here I we getting back the user and here I we setting it as the user so here the user and then user perfect then yeah the user so we now have access the user into the US okay tab different tabs and then okay okay okay so this is going to be date two why you want to bre different pag users like when you go on Facebook or Whatsapp you want to communicate with someone uh you have to go and on Facebook it's edro so yeah we don't want to complicate going to be very very simple so that you guys can get the cont so it's going to be just a togle where we can say users chat rooms just it's not be really complicated so that's why I'm making it I'm trying to make it super simp so yeah change click yeah same thing but yeah I prefer to name it this okay perfect okay then inside the tab so it's going to be a main body and then we wanted to have a shadow so a shadow makes things look like a card like kind of then overflow Auto margin top of four margin bottom of 20 okay yeah then div class name Flex justify between so justify between creates a space between of all the available space that's there button class name then it's going to have back ticks where are my back ticks okay it's going to be BTN BTN outline and then active tab if it's equals to users then it's going to be BTN okay it's going to be BTN primary okay let's see here there's a mistake here okay perfect so it's going to be BTN primary or is going to be nothing okay then we close this then the button will say users yeah I'll explain what I'm doing just in a moment then on click so when you click that it's going to handle the tab change and then it's going to set it to users so these are static buttons one for users then one for one is going to be for for the chat rooms so this button is going to be a blue button here cuz that's the active button so BTN outline P primary if it's users so if it's not user let's say user like this then this patterton is going to be gray okay so what I did here I'm saying if the tabs are currently on users then this button must have this color so we see uh the button that's being that's currently active basically that's what that's that's all doing and then we want to copy this and then we want to paste it then here we'll say shat rooms like this yeah chat rooms like that and then yeah and then so here we're now changing this to chat rooms here we're now changing this to chat rooms let me save this so we now have a toggle right you see we now have a tole so that's how you create a tole okay very very simple stuff okay so now here we're going to have two divs and then this div is going to say if the active tab is equal to you uh start with chat rooms okay what happened there I imported chat room does chat room exist yes it does okay so it's supposed to be like this so if it's equal to chat rooms okay this doesn't have so this is not this is like this okay so if it's equal to chat rooms right this is what we want to do so in here we want to have the chat room like this okay physical to chat room no no we don't want to have the chat room so we want to have the user cuz we want to reuse I'm trying to think this user card we can reuse it for chat room so for chat room is it will be like um it like an avator here and then the name of the user and then um the last message that they sent but then if it's not a chat room it's just going to be the name and the avator so we can reuse this card that's what I'm thinking so yeah it will be the user card so that we can just create a component that we can just reuse okay perfect user card let's go back to user card okay that's perfect and then here it's user okay so it's like this then in here I'm thinking we have an H1 so that is like a heading come on come on H1 and then in that H1 it will say chat rooms like this and then let's just tile it up a bit so that it doesn't look too bad padding uh text of Base font of semi bold like this yeah this won't look too bad do we need the user I'm trying to think if we need the user object we don't so let's pass down some static information okay so name we'll say name is KT Perry Al URL okay let's just give take the suggestion that they're giving us okay then latest message okay then time yeah time we can say this then type we'll say chat okay perfect like this and then yeah we can duplicate this and do it like this okay so yeah we can even duplicate it like that okay and then for so this was for active Tab and then let's yeah let's just copy and paste it don't think there's AR in that copy and paste then instead of chat room it's users in here it's users but then the users I saw didn't have a capital letter name Avatar um last text sent message we don't need this then type is going to be user then let's just have it as one okay we save that so nothing will be there but then it will just show you like here it will be true here it will be one so yeah now it's our responsibility to to make this component so in this component we need to destructure everything that we passed through okay so we destructure the name the Avatar The Last message the time and the type so we distract everything that we we send through and then yeah so this card is going to be is going to have a class name of flex item Center uh padding of four uh border bottom uh border gray of 200 it's going to be relative then is on Hover it's going to have a cur off pointer okay yeah this is just some basic stylings that we having and then I always like to comment so yeah an avatar on the left there then div then div div then image with a source with an out tag yeah like this we sort it we'll sort out the styling after okay so what kind of styling we want we want a flex shrink zero margin right of four and then the position will be relative okay looks right then the inner div is going to be width so the inner div for this one I just put it so that I can round the image rounded full overflow hidden okay then yeah then we have so the source is going to be since we're passing it down it's going to be a URL then here the Out Tag we just say Avatar then it's going to be with of full it's going to be height of full it's going to be object of yeah object cover yeah I think that's good enough then yeah also that image was a Twitter image but yeah doesn't matter but you see it's now coming out right it's now coming out okay so that's the avat on the left and then here we want to check what type it is so remember for type of uh message so if it's type chat room here we wanted to have the last message but then if it's type user we can't have last message that doesn't make sense so we need to that's why I'm saying this component is a smart component because we're reusing it right so if you type chat okay we want it to behave a certain way okay then we have a div this is the main div so in our main div is going to be Flex one then in our inner div it's going to be Flex items Center then justify space between so it means take available space in between these elements then it's going to be an H2 so the H2 is going to have it's going to say the name remember we're passing down all these details from above and then the name is going to be a text of flge a font of semi bold yeah this is this looks good and then we want to span yeah like this then the span just before time and then below this I want a P tag okay the P tag text gr 500 text small then it's going to show the latest message um yeah then we also wanted to trate so trate means that if it's too long then add those three dots at the end those ellipses dots okay yeah I think for this that's enough I'm trying to think if there's anything we we've missed I doubt yeah let's save and then just see what it looks like chat room perfect so this is what it looks like now and then on users we copy this we paste it and then here we say users and then for users we want so users doesn't have a Time doesn't even make sense to put a time there and it doesn't have this okay we save and then but users has a name right so the name should come out so users let's refresh that okay let's check again users the name here1 so let just say test okay go back here did we include a name users active tab users here we have a name yeah we have a name okay us a card name name then type type is there type okay so type users okay then k KP test we come here we remove the test okay perfect so yeah now this is good so this is how it's going to be working so yeah I think for now for now this is standard okay then we go back to the page so we close this we users close this and then we come back here to the homepage so here we have this chat room user right so this chat room user let's give him the user object we save so we've given them the user object and then so this chat room object this is going to be storing um the message the message like on the right it's going to be storing the message um the message UI essentially when the the users are communicating so this will be that part that dos this UI so we go to chat room so inside chat room um we need two components we need a message card yeah so for now it's just UI don't worry about it we'll go through all the implementation afterwards then the message input so this input sits at the bottom okay so in the chat room we are going to D structure that user object that we're getting const then we're going to create a bunch of Fake Messages okay um the message is going to be like ID is one sender who sent the message then we say the message was sent by jberry then the AL URL there then the contents so call it contents okay hey how are you then time two hours ago perfect and yeah so that we don't have one we'll say the second user is ID of two then sender so in this case sender will be Douglas so this will be me okay then we we need an avatar then content then time yeah like this so yeah for now this should suffice okay yeah then inside this we have a class name of flex Flex Flex column then we have a height of screen okay then inside here we have two divs okay so this div we give it a class name okay then it'll be Flex of one of over flow y of Auto padding of 10 okay perfect then inside here we're going to Loop through the messages that we just created so we're going to map through those messages okay then we're going to map through the messages okay let just messages. map then it's like this message then it's like this then it's like this then it's like that perfect then inside that we're going to import the message card that we just created so this will be display an individual message we give it a key the key is going to be the message. ID since that's the that's something which is unique and then we pass in the message so we pass in the message that we just looped over so this will be an individual message then we pass in the current logged in user okay yeah I think this is about right so now it's just going to be showing you the message card since we have two messages right we're going to code out that and get it to look nice so then below everything okay I forgot to put my comments so yeah is my message input okay then here is my message cards like this then here is message input like this okay perfect so here so you see message input then message card and then here this is at the bottom so what should we start with we should start with the message card yeah we should start with the message card so inside the message card we're getting a message and then we're getting a user okay then we need to determine if the message was sent from me or from the other user so it's message from me uh then message. sender is equals to user yeah something like that okay perfect and then let's check use a darkas then message. sendas yeah this is in its most simplest form we're going to improve on that later on okay then the div will give it a key the key will be message. ID okay then here so the stylings they're going to be dynamic stylings depending on who's looking at this message cuz remember when the message is from us we want it to be a certain color when it's from another user we want it to be at a certain like left or right so yeah that's why we need that is message from me then if it is we we justify end else we justify starts okay okay so this this is the outer div and then yeah so inside we want okay we want the other on the left okay perfect and then it's going to be div class name then this is going to be like this and it's going to be width of 10 height of 10 there is message from me if it is we want to margin left two else we want to margin right of two so margin left of two Marin right of two okay then we want an image uh the source the out okay okay the stylings with full height full uh rounded full object cover perfect save that yeah so if the message is from KTP is going to be on the left if it's from Douglas is going to be on the right cuz I'm deas so for now it's following the rules okay then on the right side on the left side we have an avatar on the right side we have a message bubble okay then in this message bubble it's going to be so everything styling wise text right padding of two rounded of medium then if it's from me what do we want to do here we want a background of blue 500 and we want it to be self and if it's not from me we want a custom background it's going to be one9 uh [Music] D 39 e then it's going to be self start like this then inside here we're going to have a P tag and then this P tag is going to have the message do content so it's going to com by it's going to contain the contents of the message yeah then below that we're going to have a div okay this div is going to be the message. time okay then it's going to be text access text gray 300 like this we save then yeah let's see where we went wrong okay so uh the main tag it's Flex margin bottom four justify end justify start that's correct width height margin left margin right that's correct we have an image of width full height full object cover rounded full cuz we want a rounded image then the bubble yeah so the bubble is where the issue is becoming so yeah the bubble is going to be text of white padding of two rounded of medium then if the message is from me it's going to be like this so there was a number then self end perfect then here self start perfect then text 300 we save that okay yeah but then still still not looking good okay so yeah so I think this part is good um yeah so the next part we need to do uh the message input so this is the part part that will be sorting out the inputs and remember we downloaded a package called react icons let's just check I don't remember if we did yeah we did we downloaded a package called react icons so we're going to need that for the message input so we come on to the message input and then we need to import it's called fa paper clip and then is that the correct spelling because if you misspell then it breaks the WB sa a paper plane yeah yeah so that's just the two that we need and then we should be good to go so input needs to be stuck at the bottom Flex then Flex yeah Flex the item Center need a padding of four border top then border gray of 200 okay then I like to comment stuff out attach file yeah this is correct so yeah will be able to attach files and then you're going to see how it looks so it's going to be paperclip then class name okay let's see text Gray we need it to be around 500 then margin right so that it has like a space then yeah the rest is correct then we need the input so yeah we're going to use and input type text okay sort out the design that's not what I want for the stylings can sort this out so I want Flex one then I don't want I don't want I don't want you know the default border that comes with an input then outline none so I want my input to be kind of like this right and then we want to we want something to be able to send right how are we going to send these uh these messages yeah it's like it's reading my mind all right yeah then this looks good let's save and see okay yeah then somehow we forgot we made a mistake that's what I was talking about when you make a mistake it breaks the app so it's fa paper clip so yeah it's a small c yeah so be careful with your spelling any wrong spelling it breaks the app yeah perfect and then you see this is what I'm talking about we now have an input this we can send yeah we'll be able to attach the files okay perfect so yeah this is just UI then in the next part we'll do uh functionality okay so now we need to add the functionality okay so let's not close it say uh but we need message card message yeah let's just close it okay um users so go back to users okay so right now we're passing in these uh directly so what we would like to do is to get the users from the database okay so get all users in the from that are in the database we don't need this chat room don't know why it's there okay so definitely it's going to be a use client since we're going to be use client yeah chat app is is yeah it's a dream for you for your chat app to be safe as I red chat app is mostly just going to be client side or you state where have it so it's going to be use effect then import fire store then we need the app yes then we need import so we need collection okay that's the first thing that we need from fir store then we need on Snapshot CU we need it to be real time we need uh query we need add doc we need server Tim stamp we need way and we need get get docks so these are all just functions that Firebase gives us then here we need get o we need sign out so we need to be able to sign out yeah I think that's it we need the toast so it's a small T okay then we need the router but not from next router yeah you never get it from next router you always get it from next navigation I think yeah there's something wrong with my intelligence you know should be helping me in all these things okay so we have the user but then now to avoid confusion so I'm thinking how can we name it in a way that avoids confusion uh user user data cuz we have a user then we have the user data so yeah so yeah we can just call it user data so that doesn't confuse me user data we didn't pass it anyway so for now that's good okay so the first thing that we need to do we just need to create the states for everything So Below this we need loading con loading set loading const loading to yeah for leg of a better name const users okay so these are all the users that you're getting then const uh user sh chat rooms so we also want to get the chat rooms that you are part of cuz you're going to have chat rooms that you are part of then we want to get the user router and initialize it okay good then so get all users right so we want to get all the users in the database so here we use a use effect use effect okay like this and then inside there we say set loading to true so it starts to load everything up and we say const task query like this get all the users then com And subscribe okay task query on Snapshot like this yeah okay then we want to return And subscribe okay perfect we setting the users then okay query dot docs. map we get the ID then we get the data okay then let's console log the users okay so yeah we should be getting some users back so yeah is one user okay so what we need to do now we need the log out button so that I can create another user because we have one user and that user is ourselves and we don't want a situation whereby we're talking to ourselves so let's have a button and then this button it will be for logging out okay where is the buttons so it's BT and outline so just copy this button but then instead of having all these other things it's going to be like this okay so it's between between outline and then it's just going to say log out okay yeah so for design I think you can improve the system on design wise but then I'm just going to be giving you guys like yeah cuz the design is simple you can improve the design so you'll be sign out o do then log out to yeah this is correct but then we don't want to see log out yeah we can see log out success doesn't matter then on log outs we just handle the logouts then it navigates back to the username okay like this okay perfect and then yeah this yeah this looks good so here when you click log out it takes logs out successful then it takes you back so here let's create so we have we have a profile called second let's create this one we call it Douglas so we know that this is our now our real profile that we're using okay then one 2 3 4 five six okay then we register okay we save that okay now let's check we must now have two users okay we're still getting one user so it's Avatar let's check second okay let's refresh okay let's check why are we still getting one user okay right now there's nothing there am I console logging any users okay so I'm actually not console logging anything okay it users okay let's console log here I thought I was okay console log okay so yeah we're getting two users back okay so we're good yeah I thought we were console logging but I guess we weren't okay so I'm thinking once we have the users we we want to display these users right but then the way that we want to display these users um we don't want to display your profile right so we want to display the users uh where the ID is not equal to your ID right if that makes any sense CU you you don't want to be able to see yourself here so let's delete this then we come here so here this were these are the users so above the user card yeah that's what I'm thinking should we do it above the user card cuz the user card or we can do it yeah I'm thinking we do it above the user card and then yeah somewhere here yeah that makes sense then if it's loading yeah let's not get into that yet so for now it's user dot ID is not equal to user data. ID then we want to display that like this like this okay okay what's happening here see okay is this it then we get this rid of this it's like this okay yeah like this something like this so that it won't show unless it's like this but then we still need to map it right so we still need to map so like this user dot yeah I think that's a better way of doing it like that we save go back it shouldn't show shouldn't show our one so it's way user ID is not equal to user data do ID okay let's debug this okay so let's say console.log users then here console.log user data. ID okay let's check it out so we shouldn't be able to see darkas okay so user ID is undefined okay that's why that's why you not getting anything so it's coming out where it says user data then we come back to user data and then the issue is user data is not pulling in the ID so if we come here under the get dog RI and then the con user data is equals to yeah so here it says con user data we delete this then we do it like this we D structure ID so it's something like this we save that let's go back okay let's see so it's user snap ID then use a snap data okay let's refresh this okay is console of the user here then you say use them from Main like this so I see what it looks like so this is what it looks like yeah it's now coming in so I think you needed to refresh okay so that's good now so everything is now working on this side we're no longer seeing ourselves so this line is now working where it says that if the ID is not equal to our ID we you don't show anything okay perfect okay so now what we need to do once you click so yeah on the user card or we can even do it above the user card is there something above it let me check yeah we can put something above the user card yeah we can do we can do that so above the user card we can have a div so yeah let's just get rid of this then here we say div this no above this okay here we say div okay let's check if that works yeah like this perfect so here we have a div we say key key is user. ID and then on click so when you click this thing we wanted to create a chat with that user create chat with that user okay right now it's going to give us an error cuz create chat doesn't exist but then we come here then we say con create chat then we have that user perfect okay no yeah it's kind of the way but not really okay so the code to create a chat is a bit much so bear with me on this one okay so so do we need loading not yeah not for this one so we check if chat room already exists so if chat room it really exists we want to take you to the chat room we don't want to create it right so we say const existing existing chat room okay existing chat room because so yeah no not this is very wrong okay so it's query so that's why we imported query and then collection so in fire store right so the collection we going to call it chat rooms all right we want the chat rooms okay where users okay it's not an array contains where users is equals to and then here uh user data. ID okay so it's user data. ID and user. ID user data. ID like this okay so if this exists so if a chat room like this exists right we we we we don't want to add anything right so right now we just created a query right and then the actual checking we're going to do it now okay so going to have a try and then catch okay okay try and catch to. error then it's going to show us the error message there and then here is going to be const chat from snapshot okay then we get the we get the data then we check so if existing data. length is equals to zero then chat room already exists okay perfect then chat room do not exists we create a chat room right so if the chat room doesn't exist we create one so if the chat room exists then we display that hey the chat room exists so if it doesn't exist we say const user data is equal to then we say user data do ID okay is equals to the user data so this will be you and then the other user okay then so this is the data of the users then this is the chat room data so the chat data will be users okay like this [Music] users data like this yeah so this is user data okay that's what we want and then time stamp this serve a time stamp then last message is now okay perfect then const chat room ref is equals to await at dog to the collection chat rooms and then the chat room data and then once that's done we'll say console.log chat room chat room has been created and then once that chat room has been created we'll set active tab to chat rooms okay yeah so we've created a chat room so we've gotten the users once you click a user it creates a chat room okay perfect okay let's see why that's showing I messed something up here okay perfect so yeah if I click this then pushes me to the chat rooms then if I come here and refresh everything I must have a new table callede chat rooms with me the person who clicked and other that I clicked so it should be me and the second user so it should be dlas and second user so here chat rooms and then it's me and the other user so it's Douglas and second user and then if I go back here and I click again chat room already exists so perfect so that's now working like clockwork okay so now we need to open a chat room right so when you click in existing chat room so here where it says chat rooms uh we should be able to see the existing chat rooms so yeah that's the first part right we should be able to fetch existing chat rooms so that we know like which chat rooms are existing between these users okay so we got the users then now we need to get the chat rooms so below where we got the users get or users uh get users chat rooms okay then that's a use effect that we then just close right away okay perfect then in this use effect let's set loading to true and then if so the if user data is empty then we return else chat rooms query let's check it out so it's query fire store chat rooms where users array contains user data. ID perfect yeah this is a perfect one const const un subscribe let's see if it gets this right then we need to call that okay perfect so chat room query quy on Snapshot uh chat rooms then snapshot data. map it gets the ID it gets the dock says the chat rooms yeah this is good and then then we go to chat room let's see let's see let's see chat room so instead of this we delete this okay type users yeah that's perfect okay so here inside here we need a div so something like what we had here okay so we need a div okay but only after we've mapped so it's going to we move like chat okay let's see get chat rooms us a chat rooms user chat rooms okay okay okay let's see us a chat rooms user chat rooms yeah this this is the one so we need to map through the user chat rooms we map through we get a single chat room then it's like this this then me get a single chat room okay like this yeah okay you get a single chat room then the name chat room user data then use SC that's not correct so it's user data then inside the user data it's chat room. users. find by ID by ID then we need an arror function where ID is not equal to user data yeah don't worry I'll explain okay name perfect so here I was saying go into the user object the chat room object and then get the other user who's not me cuz remember when you're displaying these users you display the other user as the chat room right simple uh then here we just copy this and then we paste it here like that and then yeah then everything else chat let's check okay second user yeah chat room second user draw a go perfect yeah this is exactly what we want so when you click this instead of creating a chat we want to open a chat so we come here and we say const open chat like this and then so when you click open chat we need a way to set this chat push this chat and then pass it on to um the chat room uh object to the chat room component right so how do we do that we have to go back to the parent component and then you see right now we're in users but then we need to get this chat room to chat room right so here we can do what known as prop drilling so this is not the best way the best way you have a global State like Redux zo stand something like that but then yeah not make the video long can just do prop drilling it's not going to be that difficult we're going pass down the prop we set it from the user and then we pass it to the chat room so yeah it's not going to be that difficult so here we'll say const selected chat room okay then this selected chat room we're going to pass pass it down to um the user and then we're going to pass it down to uh the chat room so in the user we're going to pass down set selected chat room set selected chat room then in the user we're going to pass selected chat room selected chat room like this and then we need to distruct remember when whenever you pass something you need to then come here and then you need to destructure it so whil we're there we now have access to the chat room and then when you click open chat you get the chat room then you say const data okay then ID is going to be chat room. ID then my data okay my data is going to be user data then other data so this is going to be the other user like this let me just verify everything so chat ID my data is user data other data chat room. user data then we're filtering chat room. users. find ID where ID is not equal to user data. ID okay perfect then okay so here we then set the selected chat room to the data then we're done okay perfect then chat room so yeah now let's go to chat room where chat room and then here in chat room we need to destructure the selected user the selected chat room and then console log selected chat room then here will say from chat room we want to see if whenever we click a chat the chat is reaching the chat room that's what we want to test here right we click nothing is chat room already exists okay so on the wrong page okay let's clear this chat rooms okay come on users chat rooms okay okay use a chat from the do map yeah we didn't verify did we verify if this is working okay loading chat rooms in chat rooms yes create chat get user chat rooms yeah we didn't verify this one console.log user chat rooms then let check this this 969 use a chat rooms okay let's just check why this is empty get all chat rooms so let's check the query so if you if us a data is is then we return but then we need to pass in the user data cuz it it might be empty but then when it's now populated we we need to get the data okay okay we can come back to these erors later okay so user data it's now there then chat room query we're looking in the chat rooms is that correct let's go and check chat rooms yes that's correct so we must be getting this okay then in the chat rooms we're looking in users does the chat room have users yes it has users and then in that users we're looking array contains user dat. ID okay user dat. ID do we have user data yes we do okay then const unsubscribe on Snapshot query on Snapshot then con chat rooms qu. snapshot. map then we get the ID okay let's check here the chat rooms cons Lo chat rooms let's see what it looks like here okay chat rooms okay so yeah we're getting something okay we're getting something [Music] yeah Second Use the chat rooms they we click this so from chat room object we're now getting it okay perfect yeah so sometimes we run into issues and then we debug them it's no big deal it's just part of you know part of uh development you're going to run into a lot of issues that you have to debug okay so yeah that's that's good for now and then now let's work from the chat room so now we've clicked our chat room we're now in the chat room then so in our chat room we now want to um fetch the messages so yeah I'm aware we don't have messages now but we we must just fetch like we have messages right so we must just Fitch like as if we have messages even though like right now we don't have messages yet right or I think a better way of doing it would be to send the messages first right yeah that would be the better way of doing it but we can do it both ways but I think yeah I think for now that's the better way of doing it okay so here we need um I use State I use State I use effect and then I use uh riff okay then from fire store we need so we need fire store from our lib and then from fire store we need add dock cuz we need to add we we're adding something we need collection uh we need uh dock we need silver Tim stamp we need on one snapshot uh we need query uh we need way we need order buy then we need update talk okay yeah so that's what we need then we have the user then we have the selected room okay then here we need to decide uh who is um who is who so const me selected chat room dot my data okay so that would be me then const the other person will be select the chat room dot then const chat uh room ID will be the selected chat room. ID okay then const message so we have message then con messages then const messages container riff okay yeah thinking why this it okay so we need to delete this message messages that we're having right cuz now we're going to be having real messages right so if we save this the messages are going to be gone it's going to be blank Okay then if we come here the first thing that we need to do we need to put the messages so in the message input we need to say send message is equals to send message okay then we need to pass the message message then we need to pass the set message set message then here we need a con send message it's going to be like this then yeah then in message input we need to destructure and then we can um so here we need to destructure the send message function so that we can call it like this and then here in the input it's going to be like value uh message then on change it's going to be like this set the event so it's going to be V Dot targets dot value like this okay then when you click the paper plane it's going to be on click cuz the function while passing it down okay then we're going here send the message okay perfect and then yeah the message function so when you click send message we need to send the message into the database so put message into DB so send message remember we've imported everything so it's going to be const message collection it's going to be let's see fire store no it's not going to be like this so it's going to be we're going to call it message messages like this yeah like this we want it to be simple right and then if message. trim so if the message is empty we don't do anything cuz we don't want to be putting in empty messages into our database so if the message is empty we do nothing right then here is try then here is catch so any any issues that we run into we just want a console log so we say console.log we conso log the error then here we need to pass the era through okay then yeah so we need to construct what a message is going to be like so the message is going to have um so the message is going to belong to a chat room so chat room ID is going to be chat room ID and then sender will be me. ID then we're going to have what we call the content the content is going to be the message then we're going to have the T time which is going to be the silver. timestamp then we're going to have an image okay then we're going to have message type message type which is going to be text like this okay so this is what we're going to be sending then we're going to add the talk the message collection of the message data then we're going to set it to empty okay then remember each chat room has a last message so what we want to do we want to go and update the chat room with the message that was sent right so every message every latest message is the last message right so yeah okay perfect uh const chat room like this then chat room F store chat rooms chat room ID then await update doc room ref last message then message the data perfect okay so let's do it let's test it out so testing testing okay nothing is writing let's go back and check okay let's see message on change it okay I forgot to set message yeah I'm sure you guys saw the mistake let me just correct it here okay then testing then we send one two three okay let's see what the issue is okay let's let's go back let's see okay let's see if the message went through okay so yeah the message went through testing okay perfect okay so what what the issue with this if you want okay okay think I understand what the issue is chat room messages. map okay which page is the era on cuz the issue the issue is because I've had this issue before it's basically this time object right so it's saying that you're trying to display the time object but before it was simple cuz remember before it was just like 2 hours 3 hours ago but now it's it's a server Tim stamp and a Ser timestamp is a Ned object so it's it's like saying you're trying to display a Ned object but you're trying to do it inside you're trying to do it inside like a text so I'm trying to think I'm trying to think like where where would I be getting this error from cuz right now I don't think there's anyway where I'm consuming this data from um I think I see the issue so here always says last message I sent the message data instead of so it's just supposed to send the message so now it's an object and now it can be red yeah silly mistake okay come here save this save this then we come back here so here we says last message we delete this part then let's refresh okay chat rooms yeah now it's not working yeah so that was a small mistake okay so now um that we have messages going through uh we now need um I'm thinking uh we now need a way to get those messages okay let's go and get the messages so users chat room close the users send message so above send message let's have a use effect let's have a use effect then this use effect it will taken a chat room ID as this dependency okay then in here we'll say if not chat from ID then we return const And subscribe the toore messages with chat room ID is equals to chat room ID order by time and sending order yeah this is good then cost message uh snapshot we get the ID we get the message this is good we set the message and then yeah then we need to return And subscribe yeah this looks good and then let me just look through the code again yeah it looks good and then we map through did we pass it into the messages yes we did let's go here we go here we map through the messages okay so let's see let's console log it console.log messages okay so we go to chat room then we click this let [Music] see so it's saying uh fires Firebase fires to unquote error in fires okay so when you see this error it means that so here when we use when we're using an ascending or a descending it needs an index so you come here and then you click this then it's going to take you to Firebase where it's going to build that index for you then you say save just follow whatever it's saying then it's building the index so once the index is done then we'll be able to see our data but in the meantime yeah it Tes takes about 5 minutes so instead of instead of just waiting for that uh let's go and finish our message card so inside our message card uh we're bringing in message user we go back to the chat room we need to so message card user um message then instead of user we're going to say uh me then we bring in the me that we created then other then other save that we go to the message card then we need to get the message we need to get the me then we need to get the other okay so yeah it's now me. ID okay is message from me sender dot yeah that looks good and then we need to install a package called moment so npm install moment so this is for time it allows us to be able to format time in the server. timestamp in a nice way so say time ago equals time stamp it's going to take in the time stamp and then const date is equals to time dot to dat like this then const moment date is equals to moment date then return moment date. now we close this return like this yeah then that's good then yeah is anything else I left so now on time instead of saying message. time we'll say time ago then we put this in Brackets we save we go back to Firebase so that's done that's done render doing his thing we refresh we come back we click moment is not defined so here we need to import moment from moment we save that open we click the chat room then we get our message testing why is the image not showing so we come back [Music] here okay we come back here then so remember the image we want to show the image of the other user right so we come here and then for image we will say so yeah yeah it's a bit tricky right cuz remember on each message we're not draing the image so here we say um but then we have the user object for us and then we have the user object for that user so on the image we need to ask a question we need to say like this so is image from me so if the image is not from me we we do this right then here is message from me okay then yeah like this so we're showing the image depending on you see so now the image shows depending on on who the who's the 9 stuff yeah okay so now let's test Hello send okay but then this is wrong cuz then we are the one that are sending and then it's not showing okay so yeah don't worry we can fix this we can debug okay so if the message is from me so let's come here and see let's go back to the message is fire store messages so testing then send the ID D12 let's go to users Douglas D12 perfect so this should be Douglas so we come here his message from me okay so if the the message is from me it's going to be then yeah let's go to chat room and see if we didn't make any mistakes so me and then other then let's where is where is that coming so me is coming from the selected data yeah just to check like from the parent parent like if we didn't make any mistakes so me is selected chat room. my data so that would be me and then we can even console log this console.log and then yeah to see if this is correct stuff if it indeed is me or if it's another user okay then where are we getting this yeah here so the first one is me Douglas so that's correct then other also correct right so that means yeah it's going it's going down correctly so me other then we come back to message card message me other so that's coming in correctly then we come in here it says is message from me let's console.log this okay so this message is from me so you see true let's see is message from me okay console so I'm console message so console.log here perfect false so why is it saying false let's go back to the messages okay send a. ID if message sender ID like this okay okay let's go back perfect so yeah sometimes you know you see that spelling error is costing us a lot of issues just a small simple spelling error then we we just have to debug go through go through it step by step until we find out what the problem was so now hello there we send it goes okay then how do we know that it's actually working so let's open an incognit tab let's go to Local Host 3000 uh let's log in a second log in we make it bit small we click Douglas so yeah we click Douglas click duglas okay um then here we must say hello then here hello so you see now working okay so yeah and then here we're having two users so we're having an issue here where users darkas chat already exists okay okay so we had an issue whereby when we clicked and then it's it tried to look for the user and then it saw that the user didn't exist maybe there was a network issue there cuz you see now when we click it say chat room exist but then somehow this failed and then we ended up having two users yeah so it's an issue for another day but for now we can just go to chat rooms then we delete this one which doesn't have another yeah this is an issue for another day we can solve but for now for now let's just yeah cuz it would really happen but I think it's good to solve it but for now let's just stick to the to what we have okay so on this side I'm signed in as the second user then on this side I'm signed in as as dlas I know it's vice versa so here I'm sending a darkas so I'll say hello second user send okay then hello second user then hello darkas send hello duglas okay perfect so yeah relatively working in the next part we show how to send messages then in the last part we show how to send images then here we make it a bit more responsive make it a bit nicer but yeah I think we're making good progress now we're working on the image upload okay so we come to chat room and then we add state for an image so it's going to be cost image yeah something like this okay then here it's if message. trim cuz now we want to check for both um if the image exist and if there's no image yeah then we want to return cuz then that means there's no message cuz we wanted way for the user to be able to have an image or for the user to be able to um to have a text right then image okay yeah then I guess this message type really doesn't matter now yeah we can just leave it but yeah it really really doesn't matter I guess and then yeah then here last message okay so for last message will say if there's a message right then show a message if there's an image then just say image yeah I think this is looking good okay then what's left is to pass the image cuz we're going to be uploading it from from the message input so yeah that's why we're passing it down set image okay perfect then message input so inside message input uh we're going to initialize uh Firebase um then we're going to be able to upload so from Firebase I think here we need we need use State CU we need to do some stuff so use State perfect then okay so from we're now getting something from Firebase storage so we need get storage then we need a ref then we need upload bytes res uh resumable then get download URL so this allows us to be able to see the progress of the upload right so that's why it's handy then here we need the app from Firebase yeah for now this is good then here we need the image then the set image okay so use date we need um yeah storage we need this but then more importantly we need to be able to store the file we need to be able to store the upload progress so it starts we just say it now cuz we don't know if the value starts as a string so we don't want it to start it as a string right and then image image preview so we want to preview that image when you when you've um picked it up right okay so handle file change like this okay so end of file change we first get the file so that will be the file Target then if file okay reader new file reader reader unloaded set preview to the result then reader read as data URL we get the file okay yeah this looks good then we need to handle the upload Okay so 100 hand yeah upload this is a bit of a long code okay something like this okay so we need the if there's no file we return Then storage chat room images upload task upload resumable uh on upload we check for the state changed snapshot progress yeah this is pretty good then once the upload is complete we get the download URL then we set that as the image yeah this is good and then yeah so now we need to deal with how we're going to handle the image upload so once you click the paperclip it's going to be on click okay we want something to happen here what do we want to happen we come here to Daisy UI then we say a model so once we click that we want a model to appear so it's going to be like this but we want a model with an X to close Okay then this model we just copy it okay and then yeah I'm trying to think where can we where can we put it should we should we have a separate file for the model or should we just have it be in the this in the same file yeah so I think yeah I think maybe we can have it here shouldn't yeah it shouldn't have any issues here okay where is it starting so yeah yeah like this perfect okay so our model is it's going to have an ID of model 3 then it's going to have a form then inside the form uh we're going to delete this button yeah I don't think we need this button oh yeah let's just leave it cuz we might need to close the model so here it's going to be the image preview okay so yeah is going to be image preview then end and so if we're saying if there's an image we want to preview it so if there's an image then image preview okay then out uploaded okay with full height four object cover yeah not liking this cuz this won't we don't want it to be round yeah we don't want every image that you're uploading to be a round image 60 width of 60 Marin bottom of four okay perfect yeah so that will be the image preview then below that we want an input okay it's going to be input of type file and then it's going to be what does it accept it accepts an image then we put a wild card so this will be meaning like it's can accept a PNG jpeg whatever image type of file you want right can accept Okay then below that we have a div then we say upload okay then inside that d it's going to be BTN BTN same BTN primary so that's going to be an upload then on click on click it's going to handle upload okay yeah this is good then below this yes going to have a progress yeah for now this is good then we close this we delete this then here we have a button okay this button it will just be an X right so this button is to close the model OKAY on click so on click what we want to happen we want document dot get element by ID and what's the id of our model it's my model 3 and then you're saying I want to get this and then I want to there's a method on it called do close do close okay I don't know why it's writing closet okay so yeah do close then that closes it up then here we need it to be on the top right corner so it's going to be BTN BTN SM BTN Circle BTN of ghost so it's a button without any background and it's going to be a position of absolute right of so it's going to be right of two top of two so yeah this gets it to be at the top and then to open the model um we need on the button uh so on the time on that paper clip button we need to run our document. getet element in here so yeah we need to do this like this and then yeah it's do show model like this yeah hopefully if we did everything correctly handle file Chang is not defined okay so yeah const if we did everything correctly there shouldn't be any issues okay so once we click this okay then let's pick it okay yeah I don't think let uh pickels yeah this is where I get my images from yeah something like this yeah I don't want something too big yeah something like an HD oh so that's a video sorry about that yeah we want an image yeah large yeah we don't want it to be too big cuz then yeah something like this let's pick that where is it this one okay perfect then upload okay perfect so now it's uploaded then let's check is there way to see that it's uploaded handle uploaded set image uh we go here so I'm trying to think where can we check so here we can just say console.log image then perfect so that should open if it was correct then that should open then yes perfect okay so now once it's uploaded right then it sets our image here get set image so after it sets the image I want a way that it will say set upload Now set preview to now then it closes perfect closes the the model right and then if there's an image right so this will be here we now want some custom styling here okay then some back ticks so if you want to put custom styling this is how you do it okay so text Gray okay so here will say like this we say if there's an image right okay so we take this color so this this normal color is if there's no image if there's an image I want text a blue 500 so I want it to light up so yeah see there's an image and it's it lights up right that's that's that's what I want if there's an image all right so yeah that's [Music] good and then Hello send okay so it's now sent and then then once it sends I want the image to also clear so there's a place where we clear the message and then we clear the image okay perfect so now we need to go to the card and then if there's an image there's a way that we want to display that image okay so we go back to the message card so here we're in the message input so in the message card there's a way that we want to do display so yeah above the content we're going to check right does the message have an image okay like this save and then boom we have an image okay so it's my width height uh cover so we don't need the object cover okay let's save that because I don't want it okay you can cover but then I don't want it to be because it's looking too long yeah something like this now it looks a bit neat right yeah so that's how we do that's how we implement the images so next up we're going to implement emojis so finally so this is our last chapter we're doing um emojis so we're using a libraries called Emoji picker react okay so this is the library that we're using emoji Pi react okay copy this then we install that okay so whilst that's installing yeah it's done that was quick import Emoji Emoji pick a react okay then here const we need a state okay sorry yeah I'm doing it in the wrong part yeah the build is a bit much yeah because I did in one take so you end up getting confused sometimes okay no worries then const show Emoji picker because we need to decide if we're going to show it or not and then CU now what we want to do is we want to have a button that when you click it then shows the Emoji picker and then when you pick an emoji it then pens it to the text right because an emoji is just a way in another way is just text so const handle Emoji click right and then this Emoji click so we want to do it the proper way so it gives us the Emoji the data then we get the normal event that we're getting okay okay then we set the message so it's going to be previous previous like this we just say Pro this the standard way then prove the and yeah PR Emoji plus Emoji data yeah simple as this yeah simple as that then I'm thinking where should we put it we should put it next to the paperclip emoji picker yes no so yeah let's do it from scratch so Buton then on click okay so this one is just to show set show Emoji picker so it's going to be more of like a toggle so to show Emoji picker like this and then here I want looking for smiley face emoji right yeah my keyboard is some emojis but I I I forgot the key to use so yeah can just paste this one here okay so if we go back here then yeah you see we have an emojy there but right now when you click it it does nothing cuz we haven't we haven't actually put the Emoji or anything right so below that we say show the Emoji and then if but then it is a div right so show Emoji Pier like this then like this div need a div that's what I'm thinking because we want to style it a bit cuz by default it just comes out of anyway and we want it to have some order we want it to be absolute right zero bottom full P of two okay okay pick see okay handle Emoji click the Picker Style no don't want this we want something called disable photo focus is equals to true yeah we need something like that Let me refresh I think we might be having issues with refreshing okay like this okay yeah for this part yeah you have to forgive me guys I'm very tired right now so what I'll do okay so I'll leave the code in the description because this is the last part so you come here where it says Advanced chat app you come into app so the different yeah this is the the main branch we come into components message input then just copy this cuz this the correct this the correct implementation let me save this save come back to the app you click then there you have your emojis yeah cuz I'm super tired like then they they're now sending so yeah I think this is it you can log out you can test the app um I'll leave the code down in the description for you guys to check it out and yeah it will also help you but then yeah I think we we were able to get most of it done and then yeah please uh leave a like please leave a comment please leave a subscribe it also you know helps me to keep me motivated to keep making more videos for you guys and then for the next videos I think I'll be using typescript yeah let me know if you guys need typescript or if you want me to keep using JavaScript just let me know like down in the comments yeah thank you guys for watching

Channel: Coding With Douglas

Views: 593

Keywords:

Id: OU0_AhZWE_U

Length: 172min 4sec (10324 seconds)

Published: Thu Dec 28 2023