Build and deploy a real time chat application with Supabase,Next.js 2024 full course

all right hi everyone so welcome back to the coding so in today video we are going to build a real time chat application with nexts and super base so let me show you what the demo look like so as you can see right here so this is a group chat only and we have the user number one and user number two right here and so since right now both of this user is online so that's why we see there's two online right here and if one of this close we will show only one online and also let's try to send a message so for example I hit say hey and this one we can see hey as well and this one say hi and we should be able to see hi as well and right now you can also do the action to only your message only and so right now let's say for example I try to edit here and I'm going to go to High update and as you can see this is also update and also for example if I try to edit here and for example edit with empty message save chain this will prompt to the delete indicator so right now if I click here so right now this message is gone as well well and IO also can delete the message from here as well so right now I try to delete so you can see message here is gone as well also one more thing in this one for example this user when it's scroll reading the previous message we have this one and also when this user while scroll reading the previous message and I send a message hi and as you can see we have the indicator like there's new a new message has been sent and for example hi again so there will be two so we click it go down you can see there's two new message right here okay so same things for this one I'm going to say hello and right now you can see we have this one as well and also for this one we also implement the passation as well so when I click load more it will fudge more and there's no more B so right now you can see there's no more message need to be fetched okay and also for example if I close this tab right here so you can see there's only one online user right now all right so I'm so excited to show you how to build this one so before we do doing that so don't forget to like And subscribe so right now so let's start coding all right so the first step that we going to do is to install nextjs so you can go into nextjs documentation and we can copy this Command right here so we can paste this one and so since we going to run this one inside our local folder right here so I'm going to do SL do slash right here so this will install everything inside this folder right here so here it will ask just a question so I'm going to choose yes for typescript yes this one tell when yes this one no and this one yes and this one no and so right now it will install everything for us all right great so right now our installation is complete so the next thing is we going to do to install sha CN into our project so we going into shatan documentation and go to installation and then we can choose nexts right here so the first step right here we complete already so we can skip to the second part which is this one so I'm going to copy this one we're going to choose npm so right now you can see this is our next boiler plate so we can paste the same and we press enter so this will ask us a bunch of question as well I'm going to press y for this one and right here we're going to choose yes and for this one I'm going to choose default color thing and this one just press enter this one choose yes and this one just leave it blank by pressing enter and just this one enter and enter enter and this one press yes and this one press y so it will install all of the uh everything that needed for shn with our project so the next thing is with this one I wanted to set up the seams for this so you can choose go to the seam right here and then you can go to customize you can choose customize your seam and choose any color you want and this is the color that I want I want the color violet right here so for that I'm going to copy this color right here and then we can navigate back into this one let's go into the global. CSS and to the apps right here and global. TSS so this is the code that we need to replace so I'm going to scroll down for the layer right here until this one so then we can paste the new code that we just copy okay and so right here as you can see we have two twin config right here so I want to remove the uh TS right here so we can keep the JS only so the next thing that I wanted to install is the dark mode for our shapen so let's go into dark mode and then we're going to choose nextjs and then we can click on install next seams right here and then we can open back our terminal and then we can uh paste this one and run and this is the component that we need to create so the seam provider so I'm going to copy this one and going back here inside the work component I'm going to create a new file which is this one and so we can just copy and paste the content from here okay so we paste I'm going to paste this one I hit save and and this is where we're going to use it so we're going to use it inside our layout so for that let's navigate to our layout and between this one right here so I'm going to add the same provider and then make sure I put the body inside here and then we're going to copy all the attribute that we have here and then we paste it inside this one and for the default color of this one I'm going to choose dark as my default color all right so I think that pretty much it for our installation and setup all right so right now if we navigate into our Local Host 3000 we should be able to see this page right here so one thing about this one I wanted to change the fun from enter to another fun so it's going to be space this one right here so then we can change this one and we can change this one so this is going to be to lowercase and then for this one and hopefully if we refresh this one right now we should be able to see the updated fun all right great so nice so right now let's go back into this page right here let's try to remove everything from here so I'm going to do this one so we can run a command snippet orc so if you do not have the snapet right key you can go into the extension and you can search for the es7 uh react right here I think I believe this one right here so you can install this one so you should be able to run the snippet and right now it will generate the boiler plate for us so we have this one nice so for the layout of the page right here this one is going to be the max width to 3 xels I'm going to do the MX2 Auto and from the MD up we going to do py10 and the height of this one is going to be screen okay so right now we should be able to uh see this one so you can see when we on the largest screen we Max on the 3 XL and when we go on the lower screen uh smaller screen and then we have the full width right here nice so right here we have another container right here and for this container is going to do the height of this one is going to be full and we're going to have the borders around it and then we're going to do the round it to MD and then there you go so right now we should be able to see this one so you can see right now we have this layout right here so the next thing that we going to do is to build the shart header so you can see right here this shart header that we have the title and the uh action Bon that do us lock in and lock out right here all right so for the chat header right here so I'm going to create another D for this one and the height of this one I'm going to give it 20 and then so we going to have this diff right here and for this one we going to have another diff that this one is going to have the H1 so for now it's going to be a daily chat so if we hit save we should be able to see this and for this one let's do this one P5 let's do the border of this one to B so right now we should be able to see something like this nice and for this one we going to have another div to display the person number of online user so for now we're going to use with the Statics number so I think this one we're going to have another D which is a class name of height to four and then width to four BG to green and then round it to p and then I'm going to do animation of this one to p so we hit save we should be able to see this nice and we going to have the this one is going to be two onlines okay all right so right now we have this one nice so make sure this one I'm going to do Flex Flex item Center and then let's do gap of this one to one so then we should see this and for the tech of this one let's go with the class name to Tex to SM and then let's do the text of this one to gray to 400 okay nice and for the H1 right here I'm going to give the TCH of this one to xels and the font of this one is going to be B okay this one ah I think this is not Flex this is going to be a text to XL right right now we have this one all right so inside here so we going to have another one is going to have the Bon so if you look here so right here we have the Bon for the user to lock in and lck out and so with that we're going to go outside here and then we going to have the Bon so the Bon for this one is going to be login okay and right now we need to import the install the Bon from shat CN so for that let's go into shat CN documentation and go to find the Bon and right here we can go click on install choose npm and right here I'm going to open another terminal and so we going to paste this one and hit install so this is what we're going to do we going to import it from here which I'm going to do I imported this one and right now we should be able to use this one okay so we hit save and if we go back we should be able to see the lockin Bon right here and so for this one let's do the collect item Center and then we're going to do justify this one between okay nice so right now we should be able to see this this is what it look like on the larger screen nice so this one we going to implement the login with GitHub so and also we going to do tle this one later when the user after the user log in with the authenticate user all right so for that let's Implement that all right so right now let's set up with super base so install everything that's needed so first you need to create your super base project so which I have already done here so the next step is we're going to set up with nextjs so we can go into the documentation of super base as with nextjs right here and inside this documentation as you can see they recommend us to use a new package which is uh this this one right here and also I think we need to install this one as well all right so maybe we can go into this stock click on this link the migration link and click on the npm install this one and go back inside our apps right here and I'm going to paste this Command right here so first we need to install this package and another package that we need to install is also the super base.js right here so then I'm going to copy this one right here and then so I can paste this one and press enter so then we going to install both of this Library okay all right great so now after this one so we going to create an EnV to store our super base key so I'm going to copy this one and come back here inside our apps and then and here I'm going to create the EnV local and here I'm going to paste this one so then we need to get the super base URL and then the Aon key and so this key right here you can find a super base project by go to the project setting go to API and the URL this one so we can just click copy this one I'm going to paste this one right here and I'm going to copy and paste this one right here as well all right so this is what it's needed for OB super base so the next thing that uh I wanted to do inside here so since we're going to log in with the GitHub so we can follow this documentation right here for our oos so I'm going to open this one in a new link and also if we want to create a setup of a client for superbas INS app we can follow this link right here so right now let's do that so this is where we going to set up our client for our next apps and so to do this one so you can scroll down as you can see we have the client component or the server component so for this one let's go ahead and do the super base I'm going to create inside the lips right here I'm going to create the another one it's going to be super base and then this one we're going to have the browser and TS and this is where we going to create the browser clients for it so for that I'm going to copy this one right here and paste this one and I'm going to import this one by click on the control that so you can see it will auto inut for me so this is going to be a function so it's going to be I'm going to call this one as a super base super base uh browser and I'm going to make this one as a function okay which this function is going to return this clan right here and right here I'm just going to do export okay great so this is where we're going to use our super base inside our client and the next one is I'm going to create a server. TS and so for this one we go into the server component and then we can copy and paste this one right here okay so right now we can just copy and paste uh everything from this one and then we can do Auto Import this one and then we need the cookie and also this one and then we need to input from the cookie the header right here as well all right so let's go here Cy header and then we need to wrap around this one inside another function so I'm going to create another function this one is going to be done super base server is going to be equal to the function which is this one I'm going to copy this one and then we're going to return this one right here okay so for this one I'm going to export this one as well and since this one on the server I'm going to use the use server on this top right herey as well great so right now we have the server so so I think we can close this one and the next thing is we going to in uh get the middle Weare inside this one so I'm going to copy this and go inside here make sure you do it outside the app folder we're going to do the middleware TS and then we can just paste everything that we have right here okay so right now everything should be all good to go so right now our super base is setup is complete so the next step that we going to do is we going to to do it with our page right here with our Bon to log in and use it to log in with GitHub all right all right so before we doing login with GitHub so we need to go into the authentication and go to provider and then so we go to enable GitHub authentication inside our super base dashboard so inside here and then you can click on enable so first we need to get a client ID and a client secret from this one so for that let's go into the GitHub profile and you can go to your GitHub profile you scroll down down to the developer setting and right here click on oos so you can click on create a new oos right here and you can give any name you want so for example I here the chats demo and the URL right here you can choose the Local Host 3000 and if you have another endpoint for example production you can come back and change it later but this one is still fine and description here is optional and the authorization call back we need to go back in here and then we can copy this one and so we and paste this one right here so right now when you register the app so we will get the client ID so you can copy this and paste this one right here and right here you can generate a new secret right here so right now as you can see we have this clan secret so let's copy this one and then just paste this one right here so right now the next thing is just hit save and everything should be good to go great so now let's go back inside this one right here so for authenticate and enter so we need to redirect and validate the code from the GitHub so for that we can go follow this documentation and then so we need to create the all call back route that responsible for that so we can just copy this one and go inside here I'm going to create the ask folder and inside here we're going to have another callback folder as well and inside here we're going to have the routes. TS okay so right here you can just paste this one and we have everything that needed so this one is will be change the code from GitHub as you can see right here and then it will redirect to our region or if you have the pass it will redirect there if there's an error we redirect to this one so then uh so all right so now let's go back inside our page right here and then let's implement the lockin right here okay so for this one what I'm going to do first I'm going to cut out this one and create a component for it instead so I'm going to create a a new component is going to be equal to chat header do TSX and I can paste run this snippet and then we can paste this one and for this one I just do control dot it will Auto Import for me and right now we have this one so I'm going to transform this one into the use uh client component because we're going to do the on click here and for this one I can just remove and then I'm going to do the chat header right here okay so right now if we go back this should be the same nice let's go into the shat header and create a function to lock in with GitHub so let's do handle login with GitHub and this one and we should be able to call this one so when this one is on click we going to call this one right here okay all right so this is a client component so we need to use the super base browser so for that we're going to have the super base equ to the superbase browser which is going to be a function and right now we can you do the superbase O that right here is going to be sign in with the oos and then we're going to choose the provider which going to be GitHub and we're going to do the redirect right here so we can to have another options and I think this one is going to be an option and this one is going to be the redirect two and for this one just do location. origin which is the current uh pass of which is Local Host 3000 right here and this is going to be a and then let's just do uh call back right here okay great so right now there's no need to do thewa right here and so when we finish this one we should be able to lock in the user right now let's go back in here and try to click on the login and and so you can see and click on the Ri so everything good we should redirect back here very nice so we go back inside this one and make sure that we have this user register and as you can see I have this user log in great all right so right now we finished the lockin so the next thing that I wanted to do is to toggle between the lockin Bon and the lockout Bon right here all right so to do that I'm going back into our homepage so since we have only one page right here so I'm going to fetch the user information inside this page right here and then we can pass down to the chat header so for that let's go call to super base and then since this is on the server component so I'm going to call to the super base server function and then from here we can get the user session by doing this one it's going to be the await super base do from uh I think this one is going to be us instead it's going to be get session right here okay and then we should be able to have this data and then we can Cho for now console.log data right here so if we go into our terminal we should be able to see this information so what we interested in is going to be data do session and then this is going to be the user okay so right now we have this user information right here so we're going to pass this user into the chat header right here okay so now it's going to be a user and so we're going to do data. sessions. user okay great so for this one we need to go back inside our chat header to make the prop of this user going back here this one is going to be have a user and we have a user and the user is going to be the user type from super base and I think I believe this is another one is going to be undefined so we hit save this one so you can see the typescript here is gone as well great so right now we can come back key for this Bon and I can create another Bon for this one is going to be lockout and so right here based on the the user info right here if there's a user we going to render the Bon lock out and else we going to render this Bon okay so we hit save so you can see right now it's going to lock out great so right now let's try to implement the lockout functionality here so scroll up here I'm going to create another function is going to be handle lockout and this one is going to have we going to call to super base as well and this is going to be pretty simple it's going to be super base. o do sign out right here this one we need to do the weight so from after this one this one we need to have an aing and right here we need to do router. refresh to refresh the page so for this one we're going to use the router use uh router this one from the use navigation make sure you can use this one and then we going to call this one router. refresh so let hit save this one and right now going back here we're going to change the function this of this lockout to handle lockout okay if we refresh this one let's try to click on this one again so you can see when we click it refresh it go back to lockin and right now if I click back on lock in we should be able to see the lockout great all right so right now if we go back inside a page so if we can see that we have this session but this session is fet from the server because this one is run on the server component and this is passed to the client component so if you want to pass this user information for example right here to the the other client component we have to do as a props so another thing that I wanted to do I want to create the client state that is going to get this data user right here and use it uh Global so any Cent component can access it without just passing as a prop all right so for that I'm going to use the stage management Library I'm going to use that stand right here so this is a really small package so it's suitable for this one so for that let's go and ahead and install this one so I'm going to copy this one open our terminal and I'm going to run this one right here so right here since we go with work with typescript so let's go with the typescript guide and then copy this one so I'm going to copy this one right here and inside this one our apps and then let's go inside our lips inside here I'm going to create another folder called store and then inside the store right key I'm going to create the user. TS okay and right key just paste this one so right now let's change this one to the user State instead so the user State instead of the B State and this one is going to be use user and for this one we're going to do the user and for the user right here we're going to have the user types or another one is going to be undefined right undefined great so right now we can just leave this one and let's let's have these only the user right here okay we have this user and then this one the default value of this one can be undefined and for this one let's just export this one right here great so right here you can see the small of this one is just only 3 kiloby okay so right now we have this function user so let's use this one uh this use user right here to set the state from the data session right here so for that I'm going going to create another component inside the store so this is going to be init user. TSX all right and then we going to run the snippet ofc and this is not going to return anything uh just going to return null and or maybe just return the empty jsx all right okay so right now for this one I'm going to run the use effect and for this use effect is going to here and and for this one it's going to accept the prop as a user and the type of this user is going to be user and then uh user and then this one is going to be all undefined and from here we going to create the reference so init is going to be use ref use ref right here and this one is going to be fall and we going to check if in nit do Curren if it's not in nit Curren so we going to call to use user so it's going to be uh use user dot set State and we're going to have the user right here where it's going to pass to this one okay and then from here I'm going to do the init do current is going to be equal to True okay maybe this one should the init um init State and then this one I'm just going to change this one right here and for the dependency right here maybe we can ignore this one so this one is going to be esin disable next slide all right so right now we have this one so let's call this one inside of a page and then we can have these in it right here so for that we can we can run this one as we add another fragment and then we can add this one right here our init user and then we can cut this one and past it right here okay over here we can do control dot it will Auto Import for me with this one and for the init this one right here we need to make it as the use client because this is a client component so right now I hit save this the arrow should be gone and for this one we need to have a user and it's going to be data sessions. user as well okay so right now we needit this one so for this one we can still pass this one it's fine because this component used directly but this one we can use it for a user information for deeper component like a smaller and deeper component all right great the next thing that we wanted to do is to adding a user information to the user table so as right now after the user lock in we just be able to create in the ass table user but we want to have the user table right here where it's going to store record of the user all right all right so to do that it's going to be really simple so we going to create a new table going to table editor right here and then going to create a user right here and for this user for the ID is going to be the uu ID and then this one can link into the O table so for o and then scroll down for the user and then we're going to do Cascade and Cascade this one right here okay let hit save and then the another one is going to be the display name of the user and this is going to be a text knowable is going to be fall and another one is going to be the hour timecore URL and this is going to be a tech as well and this is not notable all right so we have all this three column because we want to use this one to display when we have a message and then we can reference back to this one to show the user out that and right now so this one we can click save okay so to in order to insert this one we can just use a trigger function to insert into this one for the trigger function you can go into this one it's going to be the daily blocks demo I think this is my block that I create in my previous video and you can go into block the filer plate and this is the trigger function that we going to copy so I'm going to copy from this one and then let's go back inside here and let's go into our function and create a new function so for here you can give a name to create user on sign up and the type of this one is going to be a trigger and we can paste this one so here we need to change a little bit so we do not need this one so I'm going to remove this okay and for this user right here so you can see this one is begin insert into the public user table is the user table that we just create and this is the field of the H table that we have so for this one we do not have the email so I'm going to remove this one and the image URL we do not we have the Avatar URL right here okay so I'm going to copy this one and paste this one right here so right now we should be about good to go maybe I need to remove this one okay so right here we insert display name Avatar URL get from the this one username and Avatar so this one is a raw metadata that we get from GitHub so if you implement this one with another authentication you probably look into the raw metadata make sure to get this information and fit it to this one okay so right now for the so Advan setting right here we going to choose the security definer okay right now let's hit confirm on this one so right now we need to create a trigger so for the trigger we need to run a command line asual to do that so for that let's go back into the spoiler plate and we can copy this function right here okay so right now let's go back in here go to SQL editor and right now we can just paste this one and for the function name right here we going to replace with the function that we going to create earlier and for the trigger name you can call whatever you want I'm just going to call the the same function name okay so maybe I can zoom it a little bit so we can see better and right now let's try to run this one okay so right now you can see success no and then let's go back inside the database and going into trigger if you filter to the O table you should be able to see this one right here great so right now let's go inside the as table user so I'm going to remove this user for now and so we need to lock in again to be able to have the record so going back to our application I need to log out from here I refresh if I log in if everything successfully it mean our trigger function is successfully set up so right now as you can see we are log in and if we navigate back we have this user and if we go into the table editor we should be able to have the user information right here as well all right that's nice all right great so the next thing that we going to do is we going to build the UI for our chat message right here all right so for now we're going to build the UI of our chat so inside here I'm going to create another div this will be this two da right here and this one and for this one let's give this one is as a flex and then we're going to do deflex call and so for this one let's going to do deflex one so this one will take the entire space so for example if I do the background color right here we should be able to see this one and this one is we going to have to put the input at the end so for that let's go I'm going to give this one a p five and as you can see we have this one and so for this one we going to put our input component so for that let's install this one from a shapen I'm going to go search for input and we can go here choose and M and then we can come back here and then we can run install this one okay so from here we can just copy this and then we can use our input so our input right here I'm going just going to do this one right here right now let's go back we should be able to see our input right here and then we can add some placeholder is going to be the send message right here okay so right now we can see this is our layout where we render our message and so see our message will render from the bottom and to the top so right here we can split another this one so for here we can do the same thing going to flex Flex col and inside here we going to have another two diff that do exactly the same thing so we have this one and we're going to have the this one is going to be Flex one it will take the entire space so and then for this one let's do the P5 for this one as well okay okay so for this one is where we going to render our message so as of now I am going to render our message as a static so later on we're going to add it with the real data so for that inside here I'm going to have another div and this one we're going to have another div this one is going to be height for height 10 with to 10 and then let's do BG of this one is going to be green 500 so we should be able to see this and I'm going to do this one is going to be round it to full okay so this is try to stimulate the the Avatar and from here we going to do the flag on this one so we going to have another diff that this one going to have another diff again and this one we're going to have a name for example this is going to be my name it's going to be so so we have this we'll try to do flect this one and then let's do the gap of this one to two Okay so right now we have the space and for the name right here let's to the font of this one to Bow okay and then for this name we going to have another this one is going to be a date so for now I'm just going to be the new dates. two date string okay and this one is going to be the text to SM and I'm going to do the tech gray of this one to 400 and let's do the flag on this one is going to be flex and then uh let's do item Center and then gap of this one two one is as well so right now we should be able to see this and the next thing is we going to have the message where this is going to be the message so for now let's try to copy some random message for example this one right here and I'm just going to make it a a lot right here so we should be able to see this and as you can see it distor this one so for that just let's give this one a flex one and this one will resolve this one nice and for the text right here let's give a different color maybe text grade to 300 so then it's not uh shining a lot okay so this is our message that look good so for this one we can try to make it scroll only this part only and so for that I'm going to try to simulate this one by looping this one so right now I'm going to generate the array right here and then let's map this one right now we're going to have the value and which is going to return return the our message component right here okay right now we can just return this one and then this one is need to have a key and for now the key is going to be the value of this one okay so maybe I think I should add more of this one probably um 9 11 12 things like that so okay this is what we want so we we going to fck this one and but for now let's fck this one first so for this one I am going to give this one a space y to five so right now as you can see it's a little bit space between these two maybe let's go with seven at a little bit bigger right so right now let's try to fix this scroll bar right here so for this one for this Flex call I'm going to give the high to full and for the Overflow y of this one let's go with the auto okay and now as you can see right now it's it's scroll on and this field only okay all right so but there's something wrong with this one so you can see when we scroll we h i see I think I think this one is fine okay so right now scroll this one but the only problem that we have right now is as you can see when we scroll we the it's past this border all right so to fix this one I think we can go into our chat header and let's get the height of the this one to full so it take the maximum height from this one so as you can see right now when we scroll uh this one is going to be the full right here so right now as you can see when we scroll this one we do not have that uh UI before okay this is looking good all right nice all right so the next thing that we going to do we're going to work on the send a message right here so right now when we click on send right here do not do anything all right so right now I'm going to create a new component for the chat input right here so for that let's go inside here and inside this component and I'm going to create a new one it's going to be chat input okay and this one and then I'm going to cut this one right here I'm going to do offc and then so we can paste this one right here and this one we going to make it as a client component so for that let's do use client and right here let's Auto Import this one by control Dot and you will have this one right here so right now going back I'm going to import this one in chat input and I think we believe I need to remove this one right here okay nice so right now inside the chat input right here we're going to listen so for every time when a user click on this one we are going to listen for that even and to get this message so for that I'm going to do this one is going to be on key down so we get the value right here and this one we I'm going to create a function to handle this one so it's going to be handle send message okay this is going to be eror function and then we're going to call this one so for this one we're going to check if the e. key is equal to the enter so if the user press on the enter key and so we're going to call to handle message right here and then we're going to pass the e current target. value okay do value so basically we're going to get all of the key from here all the value from here so this is we're going to get the message which is going to be as a text and this is going to be a string so right now so when the user click on here so we should be able to do the alert so just hello or maybe just alert the message itself the text right here okay so now for example when I click on this one so it's nothing happen huh all right so maybe if I refresh this one and try to do it again so as you can see right now we should be able to see this one right here nice and after we get this message we need to e. current target. value is to mty so then we going to clear this value all right so right now what I'm going to do is to when I click here so you can see we do aert and after that it's clear this message nice so right now the next thing that we wanted to do for this one is to call to super base to insert the new message to this one so for that we going to go into super base and create a new message table to add our message right here all right so right now we going to super base dashboard and inside here I'm going to create a new table and this table right here is going to to be messages and for this one we going to enable real time CU we want to listen to unchain on this one and for the ID of this one is going to be the uu ID autogenerate for us and then we going to have multiple field inside here so the first one is going to be text and the type is going to be text if this is not nullable and another one is going to be isit and then this is going to be bullan and this is not nullable as well and the default value of this one I'm going to set it to all and another one is going to be send by so this is going to be related to the user table so this one and then we can add the action to cascate which mean if the user table if the user record is delete so the message all of the user is going to be delete as well and then we going to do auto generate for this one it will using the ask the request ID and then this is not going to be not nullable as well all right great so right now we should be a so do this and then hit save so the next thing that we wanted to do for this one is to set up the policy for this message so then we'll be able to add some do some action to it and let's go to the new policy click on quick this one and this is for the read policy so who so what I want is like for the user to read this one they need to be authenticated and basically true and as you can see and right now let's save this policy so the next one is going to be the insert policy so you need to be authenticated to be uh to insert and also the send by the send by is need to be equal to do uid so make sure that you are sending the this right here and another thing is I'm going to do is going to be created at is going to be equal to now okay and I think for this one we can just do end right here and then hit review and hit save this one all right so the next thing is for the delete and update so for the delete we want to them to up delete B on the ID so they can delete their message only so for this one it's going to be send by all right and then we need to be authenticated and then we can just maybe I can copy this one we can use it later save this one and for the update it's going to be the same policy as this one but let's go for update need to be authenticated and then for this one as well and we need to change the name because this name cannot be duplicated and yeah so right now we click review on this one and hit save okay so I think I messed up for the policy let's go back again for the update CH update uh I can copy this one and this one authenticated and update all right then hit review hit save so right now we have all the policy setups so then we can come back inside our chat input right here and let's do and connect to this insert to this table right so right here we're going to use super base client since this is a client component so for that I'm going to create a super base R is going to be super base browser right here and then so we can call super base right here I think for this one first I think it's much easier to insert into this table if we know the type of this one so for that we can generate the type so you can do super base generate types and this one is going to go into the first link here so this is what you need to do so the first one is we going to install the CLI right here at a at the Dave dependency so let's go ahead and do that I'm going to go here and then I'm going to paste this one and the next thing that we going to do we need to do the lockin of this one right here so I'm going to copy this and then I'm going to paste this one right here so right now this will auto lock iners this is pretty easy so then just press enter as you can see it will auto loog in for me nice and so now I Auto theog in so I can be able to run this Command right here so for this Command right here this is Will generate the types from our table so you need the project reference so for that let's go back inside here and go to Project setting and this is the reference ID so I can just copy this one and so we can just paste right between this one nice and the next thing is this is where the path of the types will be stored and so for that I'm going to create inside the put it inside the lips right here so for this I'm going to create another folder called tpes and then I'm going to change the pass for this one is going to be to lip SL type right here so now if I press enter this one so this should install and add a type for me nice so I close this one and if I go to the types right here so as you can see it this will fetch all the table that exist inside this one or the function that can be called the ball inside here so for this one we can use it inside our super base and then we can do something like this and then we can do database and for the server if we work with the server we can do something like this as well database as well all right cre right now make sure we hit save so after we doing this one if we we come back into this one if I go with super base. from so as you can see it give me the intelligent of the table that we have so right now we're going to go with the message right here and then we we're going to do insert into this one and the field that we need to pass is going to be the text and which is going to be this one so for the rest of the field it will be autogenerate for me so I don't have to pass anything else and so as of now let's do something like this and let's do the await and do the a thing on this one and right now we're going to listen for the error only so error from here and we're going to check if if we have any error we're going to toss something to the user and so to toss this message to the user I'm going to use the library from Shan is the soona right here okay so for that I'm going to copy this one and then I'm going to install this and to use this is really simple so first we need to pass this one inside uh I this one to have a layout and then I come back here and then probably I will put in in between the this one right here so it's going to be Tas component and then we can give the position of this one so I think for this one is going to be the position we can do this it's going to be top Center and all right so that's it so right now go back into chat input so if there's an error I'm going to do task message so as you can see this is Auto Import for me and that message this is going to be t. error and for this one what are we going to do is display the error. message okay great so right now let's go back in here let's send a message is going to be hello well so right now everything if you can see there's no error so it look like everything is going through and if you look at the table right here we should be able to see this data nice so right right now one thing that we want to improve this one as you can see uh for the user for example I am sending a message right I should see the message immediately so for that we need to do the optimistic update and insert the message so I'm going to do send a message again for example this is a real message I'm going to send and I'm going to send right here so right now if we go back we should be able for record and so I think the first thing that I'm going to do is to list the message first and then we're going to come back and update the message right here to do the optimistic update and to show that the user the message has been sent all right all right so right now we're going to render the message here so for that I'm going to go into the page so there are different way you can fudge the data so what I'm going to do here I'm going to fudge the data from the server and then I'm going to pass it to the client so that's what I'm going to do all right so for this one this is the our list of message so for for this one I'm going to create this one into a new component and then I'm going to cut this one and then inside the component right here this is going to be a list of messages list messages T and then I'm going to run the snippet and then I'm going to paste this one right here okay so we hit save so we should be able to see this one and so inside here I'm going to do the list of so this one is going to be list of message list messages okay great so now everything should stay the same so for the fetch right here I'm going to create another component and then we're going to do subspan fudge for this one so for that I am going to create a new component inside here it's going to be chat messages. TSX and for the chat messages right here we'll have the list of of messages inside here okay and for the list of message right here I need to make this one as a client component so I'm going to do use a client component and we should be able to have this nice so right now instead of doing the list of messages we're going to do the chat messages instead and so now let's go into our chat messages may hit save this one first and so for this one I'm going to uh import the subsense and and then this one is going to be the fallbacks is going to be equal to loading okay for now we have the text loading we have the subspan right here so this is where we going to fudge the message all right so right here so this is in this is a server component so I can create get the super base from the server super base equal to oh uh um super base server right here and right here we can call to Super base. front messages and then we're going to do select this one is going to be select sty and also we need to get the image Ur and display name and so for that we need to add the user from the user table see there's a relationship here so for this one is going to be we going to select St from here as well and so let's just do a wait here and for this one is going to have the data right here all right so right now we have this data and so for this one let's console. loock the message First Data and if we go over our terminal if we go back here so right now as you can see we be able to fet the message but we do not be able to fge the user so the user is n so for that the problem with this one is because we do not have the policy for the user table yet so let's do it so come back here so for this one we just enable read the policy only and so I'm going to use this template select so you need to be authenticated to be select the user click review and let hit save the policy great so right now if we going back here if I refresh this one so it will fudge this one again so as you can see right now we have all of the user information alongside the message that is being sent as well okay great so right now we have this message right here so what I'm going to do is the same thing I'm going to pass this message right here into the client state so then we can use it to render inside here so rather than I passing as a prop to this message I am going to pass into the state so then we can use it to manipulate this one easier than passing directly to this component okay all right so for that I'm going to go into this one lip store and then I'm going to create another one is going to be the messages and TS so same for the user so for now I'm just going to copy this one right here and then I'm going to paste this one so we just going to shange a couple thing here instead of user State and this is going to be the message State and and for this one we going to have the list of the messages and so so right now we need to define the type of the messages so I'm going to do export the I export types and this one is going to be I message which going to be the type of the message and so for to get the type of this one so we can go back in here so if you hold on this one you should be able to see what kind of data that we have here so for now I'm going to copy this one and going back to our message and then I'm going to replace it right here but the thing about this one is that this is a single message so then we don't need the array right here so I can remove both of this one okay so right now we have this message so then let's hit save and so we're going to have to change the state of this one to the messages instead and then for this one is going to be the empty array and then we're going to do the message right here this is not an empty array this is is like night message array and the default value is going to be Mt array right here okay and this one is going to be use message all right great so right now we have this one so let's do the same thing for the user I'm going to create another this one is going to be init message messages. TSX okay and I'm going to copy this one and paste it right here and so the init this one is going to be the init messages and so for this one it's going to be use message so we do not need this one and set state is going to be messages so for this prop it's going to pass the messages to us and the message right here is going to be I the type is going to be IM messages okay right so right now we should be able to have this one and so we can have this one inside our uh chat messages I'm going to do init messages that we have here and then so we going to pass the messages right here into the data right so as a data right here so right here this is going to be the type is going to be different and so because as you can see this is going to be null so for this one I'm going to do or empty this one all right right so right now this is should be so if there's an data if there's no data we going to just pass the empty array and if if not then we can just have data all right so right now we should be able to have this message let's use this to render this message right here let going back here and right now I'm going to have the use the use message and from here I can extract the state so the state is going to be messages and so we're going to have the messages right here so the reason if we do that state right here so rather then spread the array so it would be better to select the individual of what you needed from these stand all right so right now we can have this one so as of now maybe we can just use this one to render the message. maps and we got to have the index on this one and for the index right here let's use it for key instead so right now let's just save this one and see so you can see we have four value because we have the four messages inside our table as well right so it mean we render the right message for this one great so for this one instead of doing here I'm going to split this one into a new component and then we can just pass the value directly to this one so for that I am going to create another component is going to be message or we can yeah just message. TSX and we have this message right here so for this one I'm going to C this component right here into the message component okay and so we can remove this one great so right now we have this message component so let's bring it back here message and the key of this one is going to be index and so we're going to pass the w value of this one so this is going to be the message and then we're going to have the value okay so if we H the value we can see this is a type that needed we can come back here and have the message and the type of our message is going to be iMessage okay great so H save this one and right now for this message right here we can change from this one to the message. text and so we should be able to see this one and for the string right here so we need to pass the uh message dot create at and right now this is should the date is still the same and for the name right here is going to be message. user. display name so right now as you can see so what El do we need to change I think the last one is going to be the image URL right here so instead of doing this one we're going to use the image component instead and so I think we need to import image from next SL image okay and the source of this one is going to be message. user. aatar URL since this is pro uh probably null so maybe we can do this one and the next thing from here it's need the and then this one is going to be the message I'm going to use the message okay I'm not sure why it's it's not Auto intent for me so maybe I can just copy this one and paste this one right here okay all right so right now as you can see we have this error so we need to add the width and height to this one and this one is might be null that's why we have the squishy line so for that we can do is SL all right so right now for this let's just give a width of this one so the width of this one let's go with 40 and the high of this one is going to be 40 as well and also 40 image for here so right now if I hit save that's still wrong because we need to adding the host name to our next configs so for that let's go into the next config right here and let's do the image and here we going to have the remote patter turn this is going to be the array and right here we can add the host name so right here we can just copy this one so this is going to be because the H name and then we can to have the protocol of this one is going to be htps okay so wion we change the next config right here so one thing that we need to do if we need to restart our server so right now I can run an PM R da again so after this complete the arrow should be gone right so right now I can Clos this one let's navig get back into our message and let's hit save this one right here so right now we should be able to okay see this one and as you can see we have this message right here very nice so right now the uh this one is pretty uh distorted so I'm not sure why let's do the class name and but then this one is going to be the arounded to oh okay so okay so look like there something wrong with this one maybe what I can do for this one I can wrap around this one around the diff so you can see right now it's all gone so we have a nice image right here so we can do some style of this one maybe I can add the ring two to this one add some border here okay now that's great so right now we finish listing our message and so as you can see right here we have think the message right here that is empty so I think we can come back and update our chat input that not allow empty message to be sent all right so right now let's work on the optimistic update for our message right here for let's go and for that let's go into the chat component it's going to be the chat input right here and so this is where we going to need to create the update and adding this one since we going to add a new message so right now can do hello and this is sending and adding message to our database but we need to adding the optimistics and the user can see it immediately so for that I'm going to create the new message is going to be like this because the new message is going to be the same type as the IM message so then we need to fill out of the type of this one and then we add it to the state so for this one we need first one is we're going to need an ID that which is going to be a string I think for this ID right here we need to generate this one so I'm going to do The npm UU ID so I'm going to install this one which I'm going to copy from here and open our terminal and then we import this one and this is how to use it so copy this and so I think right now we need the type for this one as well so as you can see this is here with the error and then so we can just follow that and install the type for this one as well okay so right now the error should be gone if I hit save this one nice so for the ID right here is going to be the uu ID or right here I believe this is how we call it okay nice and so right now we have the ID right here so we can to have the text and then we going to have the send by ID so for the send by ID we need the user ID so for this one is going to be a user is going to use user going to have the state and the state this one is going to be user and then we're going to do the user. ID right here okay user. ID and okay so this could be this is could be undefined and we can do something like here nice and then for another one is going to be is edit right here is going to be fault and then we're going to have the user information so for the user information we going to have the user do ID and then we going to have another field for this one if you look at the message right here so we can have this field right so I'm going to copy this field right here we have the Avatar URL this one which is going to be the user. user metad data do aatar URL all right and for created at for this one we can just get the the data now I think i'vegot the created at for this one as well let's create it at probably in the new date and then this one we need to transform into this string right here okay and so I can just copy and paste this one and for the display name right here this is going to be the same thing with this one and this is going to be the username okay make sure we do come at right so right now we have this new message right here and so we need to create a function inside our message right here to be able to update this message so for that I'm going to create a function it's going to be add message that is going to take the message the type of it is going to be iMessage and the return type is is going to be AO and for this one we're going to do add message and this is going to be a function uh this is going to be the new message and this one is going to be Arrow function and then we're going to do set and then we're going to have the previous date so what we going to do is to return this right here so return the messages and then so for that we're going to spread the old state is going to be state do messages okay and right now and the next thing is we're just adding the new message to this one right here right so right now we should be able to use this add new message and so we go come back here and so I'm going to call use message and we can have the state and the state right here is going to be add uh no not messages it's going to be add message and for this one I'm going add this one so right here we can call the add message before the error right here and so it's going to be the new message okay so right here probably there's some going to be types error right here as you can see uh string the user undefine okay it's not assigned to B type and the stand by okay all right so I think for this one what we are going to do I'm going to just a cast the type of this one as the type iMessage okay so right now we should be able to do the optimistic so this is going to be optimistics message add message and then let's refresh this one so right now we get the latest message I'm going to do hey so you can see we have this message and so right now as you can see this is okay all right so here uh what we're going to do next is to prevent the user send mty message for example I can just send mty message right here it also create create a new record inside here as well so for this one what I'm going to do is I'm going to check if the text. trim so if you remove all the space if there's a value and then we go into all of this one okay and else probably we're going to do the task the error for the user and I think I'm going to do the Tas error so message cannot be empty okay so now we do this so right now if they try to hit send a message so you can see the message cannot be empty so they need to send a message nice okay so I think for adding the message is done so the next thing that we going to do is going to remove and edit the be able to remove and edit the message all right so for delete and edit we have the action Buton as you can see this is belong to the user who sent it will see this so for this example this user send it since we do not send this user we do not not have this action Bon and so right now first we let's try to build this UI to render this Bon first so for that let's go into the message component and so this is where we render our date and so I'm going to add the action Bon to here so for that let's first let's install the drop down menu this is where we going to use to render that and so we go to shaten and then to install that I'm going to copy this one choose npm and I open my terminal and open another install terminal right here so right here I'm going to install this one so this is what we going to add which is going to be uh this one right here okay so right now I'm going to copy this one and then I'm going to paste it right here and so for this one maybe I can try to create another one is going to be cons uh message menu all right now what is this one is going to to return which is going to be this one right here I'm going to paste this one so right now we should be able to have this one so for the open right here we going to use the hcid chat um I think it's going to be the Lucy chat react and if you go here and then you can go into the color icon so maybe this icon right here so we can search for menu and this is what we want so we can click on this one and this is for react we have to do this so this is the component so I'm going to copy this component right here and then I'm going to paste this one so this library is coming in with the Shad CN so it's automatically installed for us already so and what I need to do here I just do control dot it will uh give me suggestion here so it will Auto Import for me here nice so right now we should be able to have this one and so we can add it belongs side our date so this is going to be the uh message menu message this one is going to be a message menu and right now if we go back here we should be able to see this one okay nice and so right now we need to push this one at the end so the way that we do that we um so we need to wrap this one in another diff and then we need to copy this Flex for this diff right here last name and then we flect this one and but for this one let's just do justify this one it's going to be between so you can see it push this one to the end right here and so for this one there's no need a gap for this okay so right now we have this one so let's try to remove some field right here so what we want is to I think for this one is going to be action and then we going to have two menu this one is going to be the edit and another one is going to be delete okay nice so right now we have this one okay so and for this one uh the way that we can render this one since we have the message user info so we can do it to render this one as well so inside each of the message we can uh get the user ID so by running this one so user equal to use user and I'm going to do the state and then we're going to do state. user and then right here we're going to do if the message if message. user. ID is equal to the user do ID and if it's true we going to render this message menu okay so right now since we have only one user and so that's why we when the user that's why this is stay there but different user send a message we will not see there so you can see the condition is true that's why we render this one okay nice so right now the next thing that we want wanted to do when we click on this one there will be a popup alert and a dialog alert to show the user are they confirmed to do this or not so just as a demo so you can see when I click on delete will pop up andure and ask me to if I want to delete or not all right so let's build that all right so for the dialog popup and the alert alert dialog here so one thing is that I'm not going to render that for every message here so what I'm going to do is I'm going to create the dialogue action for only one for delete and edit and then we can reuse a bullet for every action when we perform of the action okay so for that I'm going to create a new component inside here and I am going to call it is going to be message action all right and this is going to be the. TSX and right here I'm going to just going to do this first so first we're going to do the alert dialog for the delete so we can go back to Chan and we can search for theer dialog this is what it looks look like so when you click it we have the continue and cancel just like in our demo and so right now I'm going to copy this one and then we going to install this one right here and inside here I'm going to just come back and copy this one and probably I'm going to remove this one the default right here and then we going to import this one maybe what I can do is I can copy the whole code over here I'm going to copy everything from this one I'm going to paste it one right here so right now we should be have this one and then and so for this one is going to be delete alert all right so and then we have the show dialogue right here so right now where I'm going to put this one so the delete aler right here I'm going to put it inside the list of message and which is going to be I think I'm going to put it between here so delete alert all right so right now if we go back in here we should be a for to see the show dialogue and click up it will pop up so one thing about this one we can disable the remove this one right here and so now and we can put we can put the empty Bon inside you can see we do not see this one but I'm going to give the ID of this one is going to be trigger delete all right nice so in order to pop up this trigger one thing we can do we can go back inside our message action right here so whenever we click on this item we can use it to open that alert so this is going to be onclick this is going to be unclick and then what I'm going to do here is going to be document. get element by ID is going to be trigger delete and then we just going to do do click okay so right now if I click on the delete Buton uh oh this one is did okay so maybe I can I need need to cut this one this is belong for edit only is it's right here right now if I click on delete so as you can see the alert is pop up and nice great so right now you may ask okay if we do this how can we know which action or which message that we going to do so for that I'm going to keep track of the state of when we click in here we can keep up the state of the message that we are going to delete all right so for that let's go into the our message right here which is going to be message store I'm going to create a new state for this one is going to be action message so this is we're going to keep track of which message that we going to perform the action and so right now we should be able to have do this and then let's do the undefine as a noun and this one we need to give a state is going to be undefined as well okay so right now we have this action message okay let's refresh this one it's still all good so right now I'm going to do set the actions message and so we're going to have the message right here I think maybe we should create a type for this one first and this one is going to be message which is going to be the type of iMessage or undefined right here that is going to return of Y and so right now this is just going to be set state so I'm going to just do this one probably we do not have this state right here and this one is going to be the action message with the new message that we have so it's going to be this message right here okay so we going to reuse this message uh this one all right so okay so right now we have the set message right here let's go back into our message menu component and use it right here I'm going to do use message and then from here we're going to do state and this is going to be state do set message action and we should be able to use this one right here so now we're going to have this one and so where do we get the message so we can pass this as a props to our message menu and so for our message menu right here we're going to have the props it's going to be a message where the type of this one is going to be iMessage and so right here we're going to have the message where the this is the message right here okay nice so right now we have this one so whenever we call to this function right here we're going to do set message action with the message that we have all right so this is what we want so okay nice so right now we should be able to uh this one and so when I click on Ed it so I can know which action message that I have so if we go back to message action right here we can grab State on this one and so it's going to be use message we can have state and then this is state of the action message and so right here we can get the action message right here and so right now I can just show you for example the action message dot let's say text right here or the ID basically when we delete we need only the ID only right so when I click on the delete right here so right here you can see we have this uh Delete um ID and also when I create a new message I'm going to say hello world right here so right now if I click on delete so you can see I have this ID right here as well nice so right now the next step that we going to do since we have all this ID we going to call to super base and to delete when we click on the Buton continue right here all right so right now we're going to do this so I'm going to scroll up here and then I'm going to create a function called handle delete message this one delete message and so for this one we going to do something here all right so for the delete message right here we going to call to super base so I'm going to do super base equal to super base so this is uh this is going to be a prowser client so this is going to be a client component maybe I think we need to specify this one is a use client as well and so right now when we unclick on this one so for example on the click on here and then we're going to call to handle the leete message all right and right now we have this browser and then so what we do is going to do super base. proms message. delete and then the only thing that we need to do we need to kind of pass the ID of this one which is going to be the actions message. ID okay and so this one just do the not operator because this might be undefined that's why we have the squishy line but to avoid that we can do this and then we can do the await right here okay so since we do the await we need aning here so right here we are going to have the data and or the error of this one if we have any error or data okay so we're going to do the task if there's a data of probably there we don't need the data if there's an error we're going to do task do error and then this one is going to be error. message okay else we going to T something else which is going to be the not the error but it's going to be the success one and we can have this display the message right here successfully delete uh message okay great so right now this should be good to go so for example I have the empty message right here so I'm going to click on this one click on delete and click on continue so you can see we have delete successfully right now on the state right here we do we still see this one so what we need to do we need to optimiz stick and update the state right here okay so for that let's come back here I'm going to create another function is going to be equal to delete message and so for this one we need a message ID and this is going to be return a boy and for this one it's going to be a string okay so for the delete message function this is going to be really simple so we're going to have the message ID which is going to be a string and one thing I can do I can just copy and paste this one right here okay so right now we have this one so maybe one thing about this one I can and just remove this first so we're going to do this and this is going to return and we're going to have the object here we're going to have the message and for this one is going to do state messages and for this one we just going to do filter and we're going to have individual message and then we just going to check if the message. ID make sure it's not equal to the message ID that we passed okay so right now we should be able to have this delete message optimistic delete message Maybe I think one thing that I can do is like optimistic and so and then for this one right here optimistic delete message all right so I think for the name right here I should be do the optimistics uh add message as well okay so right now we have this function we can use it inside the message action so from here I can cons optimistics delete message going to do use m message and have the state right here and so for this one it's just going to do state. optimistic delete message okay so I think for this one we're going to do it before this and before running the a way to call to super base and then we're going to pass the action message oops actions message. ID right here all right so this one okay this should be good to go so right now if I try to delete the Mt message again if I click here so you can see the message is gone and I think I need to remove the ID right here okay so yeah so right now if I delete the hello right here for hello world our last message if I refresh like here so you can see the message is gone nice all right so right now we delete it complete so next we're going to work on the edit right here all right so for edit we're going to use another dialog component so I'm going to do the dialogue and so you can see right here so you can see this one it will po up this right here so what I'm going to do is I'm going to install this one right here I'm going to choose the npm and we can run this one right here okay so right now maybe what I'm going to do I'm going to copy the code that we have here so if I close this one inside the message action so we should be able to have this and for everything that we have here just move it right now I can cut this one and paste it right over here okay so right now we have duplicate so I'm going to remove this one and for the label we do not exist so maybe I'm going to go and install at the label as well all right so go 10 pm and let's add this label right here okay so now let's scroll down here so this is going to be edit AER and so this is going to be the title is going to be this is going to be a bon and the same things for this one I'm going to give the empty Bon and I'm going to give ID of this one going to be trigger it did okay so right now we should be able to have this one and let's hit save so you can see we only have this Arrow right here okay nice so right now let's try to use this one inside our list message as well this is where we going to import it and I'm going to this one it will Auto Import for me and now let's go inside to the message menu and Trigger this one same thing here and I copy this one is this is going to be the trigger edit so if we go back in here so right now if I click on edit right here we should be a to pop up this one nice so right now let's try to change the style of this one a little bit so going back to our message action and so for this one let's just give it the width to full and I think everything here is going to Center and so right now I think the only thing that I need is just one input right here okay so right now I'm going to click on this one so right now as you can see we have one of these inputs and then for class name of this one I do not need this one okay so right now this is looking good so inside here we can get the the previous message and so same thing for with the alert right here we can get the action message right now we can scroll down and then we can use this one and pass it down to the default value so this is not going to be the value but a default value not the default check this is going to be a default value and the value of this one is going to be the action message dot text okay so right now if for example if I click on this one if I click on edit so you can can see we have this message right here very nice and for this edit right here we have this one okay that's looking good so now we have this message right here so the next thing that we are going to do is when I click on this one we going to get the value from here and update it to super base all right so for that I'm going to come back here so I'm going to copy the function that we have here maybe the we have the super base right here and go going back here and so right here we can first we need to get the value from our input right here so for that let's create the input reference so it's going to be the input ref equal to use ref and this one is going to be as reacts do mutable and this one is going to be HTML input element okay HTML input element and so right now we can put our this one and you can uh ref and then it's going to be equal to input rep all right so we should be able to have this value and so right now we going to create a function is going to be pendall edit and I'm going to C it right here and for this one is being called by this function right here so when we unclick on this one okay I think for this one I'm going to remove and for edit right here just remove this one to edit message okay nice so for this one what I'm going to do is to call to super base so now super base. from message that's going to be update so the update of value is going to be the text right here so we need to get the text value so for that I'm going to get the text that's going to update is going to be input graph. c. value and then I'm going to do D do trim on this one as well okay so right here I'm going to check if there's a text and then we going to call to this one all right so because if we want to update we need to C if there's a value right and so we need to do a wait and we have an aing on this one as well and right now we going to have the equal we're going to have the ID and for this one it's going to be action. message. ID and let's do this one right here and for the update right here I'm going to add the edit T to true as well okay so when we update this is going to be true and same thing for this one we going to have the error we I ttic in the error only and so for this let's just copy this one and then we can come back here I'm going to paste this one so right now if there's an error we TSS an error l we're going to do update message successfully or maybe update successfully okay and just remove this one all right so right now let's try to test this one first so for example the a value right here if I try to edit this one I'm going to go with um update and hit save chain so you can see right now we have this one so right now when we edit right here and so if you refresh we should be able to see this one so we need to do the optimistic update on this one as well but one thing about this one so I'm going to let's say update this one again as you can see when we click save chain this is not close so for this one when we finish this one what I can do is do the document. get element by ID is going to be trigger edit do click okay so we're going to click this one again so this is going to be close and so for example I'm going to update this one to five and then click here so you can see update successfully close and so if you refresh so you can see this is update correctly okay so right now let's working on the update the optimistic for this one so one thing about this one is the same thing I'm going to copy this but for the optimistic updates right here we going to pass as the message instead so you can see the iMessage I'm going to pass the whole everything here so then we can later use this one to update easily and now we have this function so I'm going to copy the function that we have for the delete and this is going to be the optimistic update message right here all right great so right now we should be able to have this and so for this one what we going to do we're going to do filter inside here and then we're going to check if this one if the message right here this is going to be the update message if the message that we have that ID is equal to the update message do ID as well so what we going to do is going to do message. teex is equal to update message. text and then for this one message do is edit is equal to update message. is edit as well okay and after that we can just return the message right here great so right now we should be able to have to use this function let's go back inside here and then for this one let's just do dot optimistic update message and then we should be able to use this and so for this one we are going to call to this one before we call to super base as well so I'm going to call this one right here and so for the message right here we just going to spread the action message this one is going to be the the the spread the our action message and then this one is going to ask yes this one and let's see why is there something wrong with this one okay so we have this message right here and then let's do text of this one is going to be the text and then is dided is going to be true okay and I'm going to cast the type of this one is going to be as IM message all right so right now this should be good to go so if we go back in here right now try to refresh this one again and I try to update this edit message I just going to remove it back to this one let hit save so you can see this is we can see this immediately and if we refresh this is being update nice and so right now one thing that I wanted to do is that when the user for example click on the edit and somehow they remove everything and try to save chain so for this one I want the user to pop up the delete alert so for them that they can delete this one as well right so for this one if there's no message here what we can do we can do document. get element by ID on this one so we can click close this one and then we going to open another one which is going to be trigger. delete okay so right now for example if I click edit and I try to remove everything and then I try to save so right now we're going to pop up another one that's going to ask them if they want to delete this one and if we click continue so you can see we do the action delete instead and so right now if we refresh that one is SC as well nice so one thing that I wanted to do is to display the message to the user that if this message is Ed on not so for that let's go into the message and let's scroll down into the near class one here so I'm going to have another H1 right here this is going to be um a message is going to be edited and we going to give a class name to TSM text Gray 400 and for this one we're going to do the message do is edit and then we going to render this one okay so right now I hit save so since this one message is edited that's why we see this and the other is not so for example I edit this one as well and I'm going to do update it and let's hit save so you can see we have the edit state right here as well all right great so right now we finish our edit so the next step that we going to do right now this is not listen to a real time so since we have only one user so the next step is we're going to build a real-time listener to be able to for the other user to get the new message or any action such as update or delete and when to perform so we're going to listen to that all right so right now we're going to work on realtime listener so I have the user one right here and user two below and so for that we're going to follow super basic documentation on how to do that so you can go into JavaScript and then you can go on to subscribe to channel right here so this is the document for real time so we have broadcast present and listen to database chain for this one and this is for listen to specific database but for this one it's listen to All Event so as you can see the event is star so what I'm going to do is to listen to on the insert for now I'm going to copy this one and I'm going to zoom this back and and then make sure I do this okay nice so right now let's go inside here I'm going to call I'm going to use this one inside the list message and this one is we need to do this so right now first we going to to call the use effect and inside the use effect right here we can paste this one and so right now we need the super base so it's going to be super base browser super base browser and so right now we should be a to have this one nice and so for this one the room right here the channel name so this one is I'm going to go into the chat room so since we have only one room so I can name this whatever I want but if you have multiple room so probably the room name right here should be unique depend on the room ID okay and so right now I am going to go this one is going to be the channel and then we I'm going to unmount this one so return and unsubscribe this one it's going to be Channel unsubscribe all right great so right now we should be about this and then this one is going to be messages this is going to be the message table and make sure you enable real time as well if you look at my table right now it's going to be here so you can see F time is on and if not it's you need to reenable that all right so right now this one this that's it so right now whenever one of the user is send a message so we should be a or to console. loock this one okay so let's do that so right now let's go to inspect and then go to the console. loock so this one right here and right now let's try to send a message from the user one right here so I'm going to do send uh message and then let's do send message okay and as you can see we have the this user listen to this one and right now we be able to see the console the lock so both of this one both of this user is listen to this even and this is console.log for both and so right now what I'm going to do is to use this one so you can see the new right here and so we can call the add message for the user one as well to be able to display the message and so for that I'm going to get the function to add a message which is going to be here so right now instead of getting from the message only I'm going to get the message and add message as well and the add message should be called here and then we're going to pass the payloads do new but the payloads add message right here will need the iMessage right and the iMessage will have the user information who send this one but if you look at the payloads right now we have only send by ID we do not have like the username the user out there so for this one we need to fetch the user information first all right so for that let's try to fetch the user data so I'm going to do this is going to be an error or data and this is going to be an async function so I'm going to do the await super base from user and then we're going to do do select star select star here and then right here what I'm going to do is to call do single I think no no we need to do that equal first and ID is going to be equal to payload do new. send by by and then we're going to do do single so because we want have only one single user okay and right now we have this user data so right here I'm going to check if there's an error I'm going to do task. error so it's going to be error. message L if it's not we going to call to add message right here right here I'm going to create a new message is going to be equal to spread of the payloads new which is going to spread this object and we're going to add the user information as well which is going to be data and right now we can pass this new message into the add message function and this one is just cast this one to I message okay so right now the this one should be okay so maybe I can remove the console.log so right now since we update this one so I'm going to refresh this page so right now let's send a message again so hi from user one so you can see be be able to see this one inside user two but the user one right here we have double message so why we have this double message so the reason that we have the double message is because so right now this one will be listen so whenever the new record inside the database we're going to call this one right but from this user when he send a message from here if you look at the chat input is also called to this one as well so right now this is going to be wrong so the so right now to fix this one we can try to keep track of the message that this user send and if that message that this user sent already exist in the optimistic State and then we do not want to fetch from here again okay so the way we do that I'm going to go into the message right here and I'm going to create another fun uh state is going to be optimistics ID and this one is going to be array of string okay and then we going to have the optimistic ID right here which is going to be Mt and so when we add a new message from our chat input right here I'm going to spread a new one is going to be the optimistic ID so this is going to be spread the state do previous optimistic ID with the uh message. ID or maybe this one is going to be the new uh message. ID right here and new message. ID all right so right now we should be able to have this one if we refresh this one nice and so right here what I'm going to do is I'm going to check if the optimistic ID if optimistic ID ID and then we're going to do if optimistic ID do includes in payloads do new.id so we can check if the new pay. ID is included inside the optomistic ID or not so if it's not include and then we going to run this one okay and now and for this one we going to pass the message as well messages we need to keep track of whenever there's a new message we going to rerun this one so right now now let's try to refresh both of this one make sure everything okay so let's try again hi from user one so you can see right now we have hi from user one we have only one message and so I'm going to do again so you can see we have only one message and one message so this is uh good so right now everything is work out and but I think for this one since we call the add message right here so right now every new optimistic ID will be added to this one as well even though this user this user is do not end but he also have the optimistic ID see this uh message as you can see um this one right here will be add so I think for this one we should create another function to set the optimistic ID when we call the chart input only okay and so for that let's try to create that function so is this one I'm going to copy this this is going to be set the op mytic ID and let's do set optimistic ID and so we need an ID as a string and this function I'm going to put it right over here okay so right now we're going to have the ID of the string and then we're going to do set and then we going to have state and then this one is going to return the optimistic ID with the previous optimistic ID is going to be state. optimistic ID here and then with a new ID we can do comma here and then so we can remove it from this one now let's hit save refresh this one and right now let's call this one whenever we set a new message and this one right here and let's do this it's going to be use message state state do set optimistic ID and now if I do this it's going to be new message. ID great so right now let's try to refresh this one refresh this one again and so let's try to send a message so I'm going to say hi and as you can see we have only one and we have the high message here as well okay that's great so right now we be able to up this one nice uh and but so as right now as you can see one of the thing that we can need to fix this one for the user better user experience is that so when I send a message I'm going to say hello from user one and as you can see when we have the message right here we do not see immediately so because the scroll by is stuck right here and when I send a message I do not see it and also same thing for the the new user from here as well so as you can see when I send a message I'm going to say hey so as you can see the message we appear here and also appear here but we have to scroll down so then we need to fix this one to provide a user better experience for this all right so to fix the scroll bar right here so what we going to do is to create another use effect to list sense for it so I'm going to create another use effect right here and then this one okay so actually we can do it inside here as well but but I want to create another one so that it's not clutter inside this use effects so first we need to check uh get the container scroll which is this one right here which is the scroll bar and we're going to check if there's a new message and then we going to scroll this one to the bottom okay so for that I'm going to create a reference so it's going to be scroll ref is going to be the use ref and it's going to be as reacts do mutable object is going to be HTML div element okay so right now we have this scroll ref right here and so we can have the reference and we can this one nice and so inside here we're going to do the get this one it's going to be scroll container is going to be equal to scroll ref. Curren and we can check if there's a scroll container what we're going to do is to do scroll container dot scroll tops and this one is going to be equal to container do scroll height as well oh not not container we scroll container do scroll height okay and then for this one we need to get the message right here so whenever where there's a new message chain and then we going to run this one all right so I think I just import earlier the container right here I can remove it okay so right now if we refresh this one so as you can see we scroll to the bottom as well so we scroll right here if I refresh this one and right now we start at the bottom and so I can do the chat right here and test this one so I'm going to say hello and as you can see we scroll at the bottom and we can see the hello immediately and if this user send high right here so we can see this is scrolling down and very nice okay that's great so right now we fixed this one so the next thing let's try to listen more events from the Real Time such as delete and edit okay so right now it's for edit listener so this is I'm going to close this one so we can have some space so we can go back inside our documentation and then we can copy the one that I think this one for the delete so let's go into subscribe real time and this is for delete update right here so basically we can just copy the uneven right here I'm going to copy this one and then we can paste this one right here we're going to do do on we can change this one so you can see this is we listen for the edit and another one I can just do another dot of this one and we listen for the update okay great so right now we should be able to this one this is going to update this one to update and then the this one is going to be messages table and this one is going to be messages table as well okay great so right now let's try to see the payload of this one what this look like and then we can from there we can try to do some operation with it but now let's go into the inspect and go into the console. lock and let's try to delete so for example if this user to delete the message and I think we need to refresh as well since we updating the our message right here so right now we try to Del uh Delete right here and I'm going to delete so you can see right now we have the delete payload and then this is just getting the old id so basically it just show us like okay this is the ID that has been deleted so right now we need to use this one and to call to optimistic update uh uh delete this message okay so from here what I need to do is I'm going to do the optimistics delete message and then what I need to call the optimistic this one is going to be payload do. ID which is we here okay so right now let's hit save this one and then I think for this one we need to uh do for maybe let's try to refresh this one refresh this one again and right now let's try to delete this one and both as you can see the this one is gone very nice and make sure everything is okay all right great and let's try if the this user is delete as well so I'm am going to delete and as you can see this message is got great so right now the new message has been the delete so we work on delete and let's try to do update as well what update is the same thing and we going to call the optimistic optimistic update message and then for this one is going to be the optimistic so maybe we can see the payload for the update first let's go here let's go into the console.log and this one for example this one is update message to hello and we hit save so you can see this is update and we have the new message right here that's being sent by this user and then also we got the old message here as well all right so for this one it's going to be really simple so we can just do a payload right here and then this one is going to be dot I think this one is going to be that new and then the type of this one is going to be different so we can just cast type this one to optimistic update right here okay so right now let's try to refresh both of this one and refresh both of this so we can see we have the edit and we have the hello right here and let's try to edit again so for example if I edit this one so I'm going to edit this one update again and then hit save so you can see this one we can see the update immediately and this one again all right great so right now we complete everything will the insert delete and update and all right that's great so let's try to double check and test if everything uh went wrong is there anything we need to fix so now let's try to create a new message so I'm going to say hello so we can see hello and what if I edit this one to update update and let's hit save so you can see we have this update and this update as well for this user and right now if I try into the delete this one and try to delete and okay that's good that work very nice okay so right now this is complete so the next thing that we going to do is to provide a user more better experience so for example right now when I scroll down right here I should be able to have the Buton for the user to click and then scroll back for example this one right here so as you can see this is the demo so right now if I scroll up so you can see we have this one and when I click it scroll down okay all right so let's work on that all right so to do that first I'm going to create a UI for it first and then we're going to have this div right here and for this one we're going to use the arrow so and then I'm going to have this div right here it's going to be width to 10 and then is going to be height to 10 and if you go into the Lucid icon right here here to try to search for the icon is going to be the arrow down so I'm going to choose this one and let's copy the jsx and then let's come back here should be able to do this and now I need to this one okay right here just do control do it will Auto Import for me and right now we should be able to see this one and for this one we need to do the position absolute so I'm going to do the absolute and let's do the bottom to 20 and let's do width of this one to full okay and right now let's going back so as you can see we should be able to see this one on the larger screen we see this one as well okay very nice uhhuh so okay I think there's something wrong with this one okay so I think to fix this one let's go into our page and then for this one we need to Rel relative because it's because the position absolute earlier is absolute to everything so right now it stay only here very nice that's good so let's going back here for this one let's give a BG of this one to blue00 and then round it off this one to full and then justy to Center and then item Center and then we're going to do flect and make this one to go Center and and then this one to ax to Auto so right now this one will go to the center maybe let's do it let's give it the Border okay and I'm going to give the cursor of this pointer and then when we hover on this one is going to be scale to this and then we're going to do the transition all okay so let's do Transition to all and right now when we H you can see very nice okay that's looking good so if I refresh this one so right now we got some problem as you can see when on the lower smaller screen we have this one and I think it's do to this one maybe let's Okay so as you can see it's du to that um and so okay so maybe this one we can do translates this one to translate X to 1.2 ah I see it's not translate X is to use the r instead so the r it should be 1.2 uh not ring is right see this one as so you can see right now it's going to this position very nice all right this look good so right now when we show we need to show this one whenever the user scroll to this container so then we can listen from this container and if the user scroll right here we we should be able to show this one okay so right now we're going to create a function to let's say armc scroll it's going to be equal to handle on scroll and we have this function let's create that function and we're going to do handle on scroll okay so for this one first we need to get the scroll container which is the same thing here going to check if there's a scroll container what we're going to do here we need to check if the user is actually scroll so we're going to do is scroll it mean like if the user scroll from the bottom and then we can do something like this so it's going to be scroll container do scroll tops it's less than the scroll container do scroll height minus the scroll container do client height and then uh and then it's going to be minus 10 as well okay so it means so this one is going to be for example we if they scroll like for 10 pixel and here so I think here we can do console lock the scroll here so loock is scroll and then we going to go into console.log and as you can see if I scroll here it's true but if I go at the bottom right here you can see it's F okay great so right now we can get the state of this one so this one user scroll and set user scroll and equal to use stat of this one is going to be fault so maybe I think this one and then this one okay right now let's scroll down here and then we not going to show this one right here if the user scroll and then we're going to show okay right now let's do this so since the user is not scroll it's it will not show but if the user is not scroll we're going to show so this one is going to be set user scroll is going to check is scroll right here nice so right now if we scroll up so you can see we can see if it's not we not be able to see that so if we click in here we should be able to push down so for that let's uh create that function and inside here going to be onclick so right here we're going to do just scroll ref Curren do scrolltop is equal to scroll ref. Curren do scroll height and there you go I think maybe I can create a function for this one so it's going to be uh scroll down is going to be equal to this one right here I forgot the arrow function and I can come back here when I click it's going to call to scroll down okay try to refresh this one if I scroll up and I click as you can see it scroll down okay very nice that's looking good okay so right now we're going to work on the notification to show the user if there's incoming message or not so for example if the user scroll down right here and they are reading the previous message so if there's a new message we should display them okay there's a new message and things like that okay so for that so for example right now it's inside the demo right here so if this user scroll up right here and if I send a message and and as you can see we have this new message one right here and if you scroll down we can see that message even his own message as well okay okay so right now let's Implement that inside here so I think this one we have this Buck first we need to fix it so for example if this user scroll and for one if this one of user scroll and if I send let's say hi and right now as you can see this is forc the the scroll bar to the bottom as well so it's not good so we need to fix this one so for that let's go inside this one it's going to be list of message and for the scroll bar that we listen on here will be this user effect and we're going to do the end operator here if not user scroll so it's mean that if the user is scroll and reading the message and things like that we do not force this one to go at the end of the scroll bar okay so for that let we fix this one and right now let's work on the notification for the notification is going to be really simple so first we're going to have the state is going to be notification and set notification okay and equal to use State and the use state is here is going to be zero and maybe I think for now we can build the UI for this one first I'm going to set the value is to two and then we going to render the UI right here so for this if there's a notification so we going to render uh a diff right a diff right here not this one and then inside this diff right here we're going to have the H1 basically we have the message new notification and then messages and then we're going to do the tary operator and then we going to show this one right here okay so now if we hit save so for example if the user is scroll so we have this message right here and for this one I'm going to give the width of this one to 36 BG of this one to Indigo 500 let's do P1 round it to MD and also the cursor for this one two pointer and H is going to be scale this one and then we're going to do the transition all as well okay so right now we scroll up we should be about this nice but I think this is not feel like not in the center of this one I think we can fix that by moving this one outside and then we're going to wrap everything with the another fragment and we scroll up here and then we add a fragment and then for this one instead of the break 1 and A2 we're going to do width to full and this one is going to be the Max to Auto okay so right now as you can see it's it look more center to me this one okay that's good and also for this one when we click on scroll down we also do the go to the bottom as well scroll down right here so right now we scroll here click and it's go scroll down here very nice okay so the next step that we're going to do is to show the real notification and so for this one I'm going to change this one back to zero and right now as you can see it turned to this one and so for this one when we going to add we going to add this one and this one is going to be outside of this if so we're going to call set notification is to the current notification and then we're going to do the current plus one right here so if there's a new message we going to display this one okay and so right now if I do this one and I set I if I scroll down down so I think this is a problem so for example right here even though we at the end of this one so we don't want the scroll the notification if the user haven't scroll or the position here at the end okay so for this one we can check if is scroll and then we do not set the notification I think the same thing for the scroll function right here so I'm going to copy this one and then we can run this one right here and also we going to have the scroll container ref right here as well and then right here we're going to check if this is true then we going to uh then we going to run this one okay so right now let's close this one and so let's try to refresh both of this refresh this and for example if I send here say hey and so if we scroll this we should see this this one but if I send a message from here then I should be able to see the notification same again and right right now as you can see we have this notification okay very nice and then for this user as well so if he scroll down and if he this user send hey and as you can see we have this notification I'm not sure there's like the animation is not looking good maybe I think we do not need to do this I guess me try to remove this one let try to refresh this one again so for example if the user scroll up and this user send a message so hi and we see this one nice so right now if I click go down and then if I scroll up as you can see the message is still here so for this one so when the user is scrolling down we also set the notification 20 I'm going to set the notification to0 uh right here very nice so right now if I click here and I scroll up so you can see the notification go back to zero and also one more thing is that so I'm going to send a message again this is again and right now one thing I want to do if the user scroll down to the end also we're going to remove the message as well notification because right now as you can see that when I scroll up there's a new again so if the user seen this one we going to set a notification to zero as well so for that we going to take take a look at the function handle scroll right here and this is the condition that we need to do I'm going to do if this one and this is not going to be minus 10 but this is if it's equal so this is triple equal so it's equal so this condition it mean if it's at the bottom and so I'm going to set the notification right here to zero as well okay so right now this is z and then if I scroll here so you can see when I scroll down the notification is go back to zero now let's try to refresh both of this one and try again this user scroll this users had a message hey not t one and you can see we have this one when I click we can see this one nice and if the user scroll both of them scroll and so I'm going to say hi and as you can see both will have a notification and if they scroll down we can see this and if they scroll down as you can see we see this okay I think that pretty much it so if the the notification is complete and so the next step that we going to do is to do the pagination of this one all right so right now we're going to work on pagination so as you can see right here we fetch all of the message so let's do that so for the pation I'm going to limit this one to the number of 20 message on the initial load so for that let's go into the chat messages so this is where we fetch the our message so for this one let's remove this one right now let's to do this one we can just to range and then this one is going to be from zero to the number of we one so the limit message I'm going to be 20 and then for this one I'm going to do order and order by created at and then also this one is going to be ascending to fault so we going want to get the late this message first and so if we refresh this one so you can see we be able to get the first 20 the last 20 message and but the order of this one is wrong because the seven here should be at the below so for this one we need to do reverse right here so I'm going to do data. reverse okay right now if we refresh this one so this is at the low right here very nice so I think for this one to make us easy and understand uh easy to do pagination maybe I can limit on the number two two record first and then so we can see the number right here when we do pation is going to be a lot easier than seeing the text right here so for this one let's do cap out this one only two and if we refresh this one we should be able to see three record because this one range from index zero index one and index two as well that's why we can see three record and then I think for this number right here we can create the variable to keep store of this one I'm going to inside the constant folder create a new file called index.ts and let's do export cons limit messages okay and then this is equal to two and so right now we can use this one inside here so it's going to be limit messages great so okay so right now let's create the Bon to fetch the chat okay so for that I'm going to create a new component and this one is going to be loads more messages. TSX and then we can do this and inside here I'm going to use Theon right here okay and this one is going to be variant is going to be outline let's do the outline here and this is going to be load more and I'm going to remove the message right here so right now let's import this one and this one is going to be inside the list of messages and spin this one let's import this one loads more messages right now we should be able to see load more Bon and for this one I'm going to give a class name and then to a width of this one to full okay nice so I think for the load more right here so for example this one will stay so I think maybe we can the visibility of this one I will do it later but for now we're going to keep on the functionality of the pation first I think because this one if right now for example if you have no data so we shouldn't display the load more right but for now we can keep it for later okay so let's create a function to fudge more so for this one let's do fudge more and then the fetch more right here what it's need is going to call the super base I think the same things for fetch chart right here maybe we can copy everything from this one and instead of the server so this one is going to be super base browser and this one need to be the weight uh acing because we use a weight here and we need to import this one as well but right now so this is we need to generate the from and to so because on initial load we we uh fetch from rank zero to two and then so we need to pass on this number and then we can fetch uh create a range from zero to another record right so for this one let's go into the util function and create the function to generate the from and two so export get from and two and this one is going to be need the page number and another one is going to be item per page this is going to be t number as well and for this one we're going to do let fromom is going to be equal to page time item per page and then we're going to do let two is going to be equal to from plus the item per page and in here I'm going to check if the page is bigger than zero and what I'm going to do is going to be from plus equal to 1 as well and right now we can just return from and two right here so the the reason I plus one right here because I don't want to fet to duplicate because uh if the page is bigger than zero we will result the last two the last record will be duplicate so that's why I plus one right here to avoid that duplicate and so right now let's go back inside here so we should be able to get this one so it's going to be get from and two and so this one is going to be page to number one and then it's going to be the limit page right here and then so we going to get this one and from and two from this one okay so the one right here this is will we need to keep track the state to of this one as well because as of right now on the initial load this will be page zero and so when we click on this more so the number of page right here should be increased so for that let's keep stay uh keep track of this one so for that let's go into the message right here and I'm going to create another page and it is going to be type number and the page of this one is going to be one because when we initial PCH this one from the server we do it zero already and so for this one I'm going to start with one we save this one and come back here we can count equal to H equal to use messages use message and state and then I'm going to do state nope state. page okay and then we can pass the page right here so right now we can be able to have this one so and then we can use the from and to this one and then we can do the two to this one as well okay so right now we can check if there's an error we have the error right here so if there's an error so we're going to do task. error going to be error. message else so we going to as I'm now we going to do console loock data okay great so right now let's go back into inspect right here and let's go into the console and so make sure I refresh this one and if I click F more okay so I forgot to call this function so when we do un click on this one and we going to do fetch more okay so when I fetch this one so you can see we fetch another two more record so which is going to be the four and this one right here this is going to be three okay or three okay that's good so and all right so right now the next thing that we need to do is we need to use this data and insert it optimistic and add it to the our message right here all right so for that I'm going to go to message right here so I need to create a new function is to set messages and because we for add messages right here we add us only a single message and so for that I need to create a new function for this one so for this I'm going to do set messages and so we're going to have the messages as the parameter and the IM messages and this is going to be this one and then we going to be the Y right here okay so right now we should this one so let's create a function for this and I think maybe I can just copy this function right here I'm going to copy this function Ed it right here change the name to set message instead and this one is going to be the messages as you can see the type is array and then for this one we need to spread the new message right here as well okay so and then we add the comma right here and also for this one we need to increase the page number as well so we're going to do state. Page Plus one as well all right let hit save this one let's refresh this right now let's use this one inside the load more function so this one is going to be use messages use message and then this one is going to be state do St message all see this one right here I think maybe this one should be set messages instead of message and we should come back here and change the name of this one oops okay now that's good so then we can use this one and call this one and pass the data to this one right here so right now let's refresh this one so if I click more okay so you can see we have this data which is wrong because I think the way to we fetch right here should be we add the new message to the front instead and then so we have this one and so right now let's load more so but this one we need to reverse as well to display the right order of the message so for this one we need to do data. reverse this one as well so if we refresh this one again if we fetch so you can get you can see 4 three and then fetch more we get 2 one and if fetch more this is the previous message so it mean the our Implement of the this one is correct so right now I think we can just change back our in constant right here 220 message on the initial load okay that's nice so for this one I think we have maybe the UI right here I think we can do a little bit of spacing between these two um and send this Flex call for this one I'm just going to do gap of this one to by as you can see so right now we have a little bit space nice so for this one as you can see um right now since this one we has more message so you can see when we fetch it's going to fetch more but at some point the message is going to be gone right so we don't want if there's no more message we do not want to show this Bon load more right here okay so the way that we do this one is to inside the message right here we can have the state has more and the has more right here is going to be the bullan and then for the initial load I'm going to do has more it's going to be true and so it's depend so this one we going to update this one so right now let's hit save this one and then this one as well okay all right so right now let's go inside the hasmore to to update this one so for this one let's go on the init message so first we need to check when we get the message right here we need to check L of our messages if it has should have more data or not so the way that we do that we can do condition we has more right here equal to messages L is it bigger or equal to our limit messages if it's equal and this one and then so we can has has more right here so right now since our data has more data than the 20 or than this one is true so that's why we have load more and also when we update our state right here we can update the has more right here as well so the has more right here we need to make sure that our messages right here L is bigger or equal to our Li limit message okay so let's do that let's refresh this one so let's scroll up and fetch more so you can see this is fetching more messages and let's keep on fetching more to until it's run out of more message to fetch so you can see I think it has more here should be fall so we need to render this one to not display so for that let's fetch this uh data so it's going to be has more and then this one is has more so for this one I'm going to check if it has more so we're going to render this one okay else we can just return the fragment right here so right now as you hit save so you can see it has more here turn to fall that's why we do not has more we don't has more fetch right here all right so right now that should be good to go if you refresh we should be able to see this one and all right voila that's great so right now our pation is complete so the next step the last step that we going to do is to do the present number right here all right so right now for the present right here so for this one is going to be inside the chat header component so let's go here and this one right here so I'm going to make a new component for this one so this is going to be the chat present. TSX and we can run our snippet and then we can paste everything in here let hit save and then come back here I'm going to import the chat present right here going to be chat present okay so right now everything should be the same and if we go back in here so for this one I'm going to to check if there's a user we going to keep track of the online if there's no user I don't want to display anything to this one so because right now for example if this user is lock out so as you can see right now as you can see this is information is still display so what I want is only when the user is lock in okay and right now so for that let's go to fetch the user it's going to be user equal to use user and then we going to have the state right here and the state is going to be user and I'm going to check if there's a user or not so if there's a user we going to return this is L we're going to return something else so for this one what I'm going to do is just going to return a div and the class name of this one is height three and width one basically I'm trying to simulate the height this one okay so right now this one should be gone and so right now let's try to listen the present number because this is Statics and so for that let's go back inside the superbase documentation so you can see we have listen present this is where we can listen of the number of user that uh on our application so we can have the present join or present leave so for this one I'm going to choose the present syn I'm going to choose all of the uh event right here I'm going to copy this so for this one we need to run the use effects to make this one work so it's going to be use effect and then for this one we're going to call this and then this one need to have a super base so I'm going to call the super base equal to super base browser okay and this one is going to be our client component so I'm going to use client right here okay great so right now if we navigate back in here so we should be able to see the same thing it's all good so right now we have this one so you can see so this is where we subscribe and then this is where we can keep track of so right now right now we can keep display information only online add so right here we can add more key right here but as of now we can actually try to inspect and see the conso the lock of this one so as you can see right now we have the present state right here since we have two user that's why we have this two information right here okay have two array right here sometime this one can be more depend on how many browser that you open so if you look at more like right here so this one will add as well so if so that's why this is like keep track of how many tab that you open and it will call to this function right here so for this one we need to determine okay if the same user open the same tab we can count only once only okay so right now in order to do that we going to pass the information to this one so right now there's no much uh useful information because we have only online ad right here right here we can pass the user ID which is going to be the user. ID oops uh right here okay so but this user can be null so then we need to pass the user right here so make sure that this one will rerun again okay great so right now if we refresh this one and if we look at our our array right here and this one right here okay and as you can see right now we should be able to have the user ID and if I refresh this one and so right now let's take a look at this one again we have the user ID here and also here we have both of these two user ID okay right so right now we can based on this user ID we can use this one to count the number of present user all right so since this is what we get here as an array of an object on this one so what we can do for this one is going to be for Loop I'm going to do four C is going to be an ID in channels. present States right here okay and then for this one I'm going to store a user ID inside the array user ID is going to be equal to this so it's going to be user. ID push and this is going to be channels. present State and then so we can get an ID of this one I think this one is going to be the ID and then we this is going to be the array so we're going to do index zero and do user ID okay let save this one so this is going to be complain because of the typescript error so for this one let's just do add TS um I'm going to do add TS signore this line right here okay great so right now we should be able to see uh this one and so for this we need to set the number of user and display it right over here so for that let's go into create a new state is going to be online user set online user is equal to use state so for now let's go with zero and then we can change this one to the online user so I think I need to change this one to online user great so right now inside here after this Loop we can just go with the uh user id. L okay so right now if we refresh this one we should be able to see two number see there's two user online here so for example if I close this one so you can see right now we have only one user but the problem right now as you can see if I open this one again there's two user because like I said there will be duplicating ID inside here that's why we have two right here but this one should be only one so to do this one we need to uh create remove the duplicate so to remove the duplicate of this one we can use the set this one so it's going to be new set of the user ID and then we can just do l and then look like something around here so we hover on this one okay um so I'm not sure why okay I think this one is wrong maybe I think yeah we need to do that L outside here instead great so right now for this one for the set right here we need to upgrade our typescript to es25 I'm going to copy this one let's go and to the TS config and change this one right here let's hit save and then this one the arrow should be gun and right now if we refresh this one we should be only one user on the and let's try to refresh this one again so you can see have only one so even though if you app the multiple tabs it's only one message right here okay great so right now let's go back for example this user is open back the apps let's go back here so as you can see right now we have two and this is two as well great so right now everything is complete for our present so the next step that we going to build is to show the display message and when the user is lock out so for example when the user lock out right now so you can see we still be able to see this list of chat we not switching to anything and if we refresh this one this is empty right here so we should display something information to the user instead of doing this one okay all right so right now let's do the lockout and then we can show the more information to the user because when we log in we can see this date so for this one let's go inside the page so this is where we switch the component so you can see right here so one thing that we can do right here we can create another component and so for this one I'm going to create another component it's going to be chat about this is going to be like displaying about message of our apps and for example we're going to have the H1 right here and this one is going to be let's say welcome to Del chat and then for the style of this one I'm going to give the class name of this one to text to Street XL and font B and we have the message right here so right now let's say I'm going to copy this one right here so when I click on lock out on this one so I should be able to see this I'm going to copy this one right here very nice so right now we have the chat about right here so we can use it to render right here so the chat about and so for this one since when we lock out we going to do the uh page refresh so then we should be able to have the data session and then we can render this one so for this one I'm going to do data do session and do user if there is a data so we're going to render everything that you can see right here okay so right now we should do this one else we going to do chat about right here and I think I need to make sure I import this one let hit save this one so right here as you can see we have this one but it's not looking good right here right so I think for our chat header right here we should be able to see but this two we do not want to see so maybe we can do something like here so right now this this is the UI what this look like so we can see this one so right now let's put this one inside the center so for that let's go into text about right here and I think we we need to I'm going to wrap this one with another if and then since this one is going to be a flex I'm going to do Flex one and if we do the BG y right here we should be able to take the entire screen and and so for this one I'm going to do Flex item Center and then justify center right now everything into the center and this one I'm just going to do the text this one to Center and let's do space uh gap of this one or maybe the space y this one to five we have a little bit of space and for this one I'm going to limit this one to width on 96 so right now it should be have this one right here okay so that's looking good for now let's try to lock in again so when we lock in back so we should be able to see this one that's nice all right so the last thing here maybe I want to update this UI right here a bit so you can see this is too much space below here so what I want here let's go to fix this one and let's go here and right now instead of doing the Gap five so right now and this one will be close to each other so maybe I can here I going to do the PB to by instead so right now this is have a normal space and then we have the space separate between the Lo M right here as well okay so I think that pretty much it for this one all right so for our last step here I'm going to deploy this one to a cell so I have push our all of our code into the GitHub repository right here so I'm going to open to the Vell dashboard and click on add new project and this one I'm link it with my GitHub profile and so that's why every time that I have a new repository I link all to myell you can see right here I'm just going to do add right here and for this one we're going to set the environment variable so for this one I'm going to do env. loal and for this one and then for the this is the value and then we need to pass this one and we add this and another one is for this one and I'm just going to be copy and paste this one and add this this one as well I click add and and I think for this one just click on deploy so right now it's deploying this one all right so as you can see our deploy is complete so if we go to dashboard for this one and so we can visit this one so maybe I can need to change the demo of this one the URL I think this one is fine the URL so hopefully okay so right now we not lock in that's why we see this message so first I think we need to come back into the super base dashboard and register the new URL and and so we come back here and okay I think for this one we need to remove because this is my previous URL I add to this one and so I'm going to add this one again for this new domain and this one I'm going to do another one is for the O call back okay so also I'm going to change this one for the URL right here to this one as well okay let hit save this one and all right that's good to go so right now if we refresh this one if if I log in on this one as you can see right now we'll be able to see this one all right so right now let's do the demo for both of this user and interact on the real production right here all right so right now I went ahead and remove all the existing data so we start from fresh so right now we have two message right here and as you can see we have the online present as well that's two user and for example if I close this one I'm going to copy this Ur first and so right now as you can see we have only one user that online and if the user is open back so we should be able to see there's two user and there's two user right here nice and so right here I'm going to say the hello from this one going to be hello and as you can see and also we can do the action for example it did and this one is going to be hello update save this one and this one we can see this one as well and for example this one is delete and you can see the the message here is gone as well all right so right now we need to test one more thing is going to be the load of this one is going to be the notification so for example I'm sending a very long message right here and now I'm trying to make the now bar right here so for example if this user scroll and we can see this one nice and right now if I say hi in here so we can see we have notification hi again and we have another notification and also same thing for this user I'm going to say hey and we have this notification okay all right so I think this uh looking good right now all right so maybe I I need to add more message here for the pation so you can see it's working here I'm spamming so right now I'm try to spamming so you can see we have more message right here so hopefully this is enough okay this still not enough for our new message it's probably this one and so right now let's try to refresh this one we should be able to see the load more Bon and so we scroll up as you can see there's load more and if I try to fetch here it's fetch more and so right now since there's no more we have no more Bon so I think it's complete our feature is working fine all right so pretty much it all right so thank you so much for taking your time and watching this video Until the End I hope you learn something from this video and I really enjoy building this project as well so hopefully you do too so don't forget to give a like And subscribe and don't forget to share your thought in the comment so that pretty much it from me so okay see you in the next video

Channel: Daily Web Coding

Views: 9,511

Keywords: react chat application, chat application react, react, realtime chat application, realtime chat application using nodejs and socket io, realtime chat app, chat application, realtime chat app react js, next.js realtime chat app, supabase realtime, next.js chat app, supabase presence, dailywebcoding, chensokheng, supabaser and next.js, supabase, next.js, zustand, typescript, supabase auth, realtime app, next.js realtime, next.js and supabase realtime app

Id: -xXASlyU0Ck

Length: 163min 20sec (9800 seconds)

Published: Thu Jan 04 2024