How to Add Real-time Post Notifications to Your React Applications

hey guys I am Nishant and I welcome you all to cybernetico so I just heard my morning tea and yes good morning so let's learn how to implement a notification system in your application whether it be anything so basically I am using a threads app to demonstrate this so I have logged in with two users here Nishant Singh and Kumar in different browsers so if you like if I like a post off the sushant Kumar we should get a notification in this browser so like it now check there and we are getting one one plus I mean one icon here click it and we will get this notification that says Nishan Singh like your thread and if I comment something like this test reply to we should get this thing called Nishan Singh commented on your thread this thing so basically let's learn how to implement this so if I open the vs code first thing we have to do is create a collection for notifications which will take the database and notification then in the function called like thread we will do our notification for likes so we have the type of notification called this type key so if it is a like this will be like and if it is a comment it will be a comment text it is taking some extra things here from the previous video if you want to learn how to make this application threats 2.0 just visit that video the previous video on my channel so yes let me show you this recipient user ID I am getting from this single thread page which is basically the ID of the current thread yes no not the ID of the current thread the idea of the current user that has posted that thread so this ishan Kumar the current user ID or this recipient user ID will be the ID of Nishant Kumar so if I show you here in the users table we all have an ID which is this hm 70 and so on so if it is Nishant Kumar sorry if it is my chance in the ID will be this if it is Kumar the ID will be this simple so yes we're passing that in the action buttons and again in this one like as props what I am saying yes we are passing recipient user ID in here as well in the post replies and in the post likes or render likes or likes thread whatever it is I'm in the function here we are sharing the props then we have the thread data which is basically the post which is the thread like thread 2 or the free chancing and so on to store that in the database in the notifications collection so we have all this kind of things now we are having a dog to notify it is taking the collection for notification and the recipient user ID and the state ID now we are having this payload which contains the data some data the username the sender user email sender user ID which is from the Authentication we are getting this from here like if I go to the Top by reading it from the config file basically it denotes the current user display name or email or uid and then we have thread ID thread data and all these things you know we have also this key code is red it means we have not seen our notification so if it is false it means it will appear in the notification page and if it is true it will not appear there we are sending this random data in this notification we also have a condition here which means if the user ID is not equal to dissipient user ID only then we will send data to the collection of quantification so basically these are things like the user ID is the ID of the current user which means me Nishant Singh and this is recipient user ID is the ID of the person with the post or the thread so if it's the thread of Nishan Singh I can like the post because it is outside this collect this condition but we will not receive any notifications that is why by having this check here let me explain again so user ID is the ID of the current user sanichan Singh and this recipient user ID is the idea of the person who made the post let's say this or this so if it is equal we will not do this because then the notification will be our own so we cannot receive our own notification because that's not how this kind of apps works or work so this is how we do it like if I like it you will send the payload in here the same thing is with commands so if I come to post replies we have recipient user ID thread data then all the things the same yet like we have this kind of things which is same the difference only is what is the difference we have thread ID we have reply timestamp and name the difference is this and thread data and I think user ID because we need it okay do we have user ID here yes yes we also had it here so that's all for adding notifications for a like and for comment the type is comment here remember then we are adding the data in the notifications collection simple now about reading them if you come to the bottom we have this function called get notifications which we are calling here in the hook called use notifications here it is taking the current user ID and the setter function called set notifications this C recipient user ID and set notifications so there is a print user ID is the ID of the user or the current user I think I have to change the name like it is not proper so we can just make this as user ID so if the user ID is equal to recipient ID it means that we have our current notification for the user so we can show it on our unifications page that is why we also passing the function for setting it set notifications so this will come in this will go in here set notification okay let me set it here like this yes one second I think this should be here yes so we will use set notifications to send data from this collection or from on Snapshot yes yes so this will return us okay this will call the function called get modification if it will set it then it will turn this hook I mean it will return in this notifications and we are using these notifications somewhere so if I search where are we calling or reading data from this hook it is in the bottom bar first all right thing let me show you the notifications.jsx page view to you first so yes we are having one second notifications okay it is from this page okay this is the component I guess so we have to go to the page for this notifications yes so we are getting the notifications it is what is happening yes well yes we are getting notifications here as well from this book which is called use fetch notifications let me show you this one see we are just having it from here so the next thing is single thread okay not here the use the notification.jsx yes we are basically mapping through it and if it is not red if it is not false if it is true it means we have to show the notification if it is false we cannot show it because it is red now we have function here called read notifications which is receiving our notification ID which means if I show you in here the idea of the notification like this or this and using that ID we have to set the key of this so where are we calling this we don't need this so here it was returnification and the function is this so it is checking the ID and the collection name which is called notification collection dog update which recommend to update the idea of that current notification and we will simply set it to true it means we have read it so if I click notification like this it will disappear it means it has been read now if I come back here it is basically done I explained this to you now we're also calling these certifications in this Bottom bar this is for the count of fortification like it is one or two so if I just like this again or like this post called Nishan Kumar okay it is our own post so it will not reflect we have to like it from here like this post called red one now we will have two p but the problem is we have liked it at 734 this should be on top of the notifications so I will also covered that but before let me show you the count logic how to calculate the account so if I check in the notification let me show you so basically we're mapping through all the notifications and getting the property is read so if a z is false we are just filtering it out if it is only true we are getting it so if I console it down here we should see let me open this we are getting error zero because it is having no notifications let me check in here open the console yes we are going to array so they are both false it means I think we have to read it it is not red if it was true it means we have read it so it is to a number like we have two array items those are false that is why we are getting true so this is a filter function and then map function which is filtering the which filtering the notifications is read property from the array okay and then from is raid let me show you what I am doing if I come down we are just passing the length of the Israel if it is true so if it is false not true in the notification page we are getting it as uh parameters like it is use navigate hook and this so let me open the page I guess yes we're getting the notifications from I mean yes it's not empathy from the state DOT is red so the problem is it closes on this phone so like it is not a problem it is like basically problem in vs code or it is not good for me so see I opened notification page and then I mean I opened the component and the page was closed this is not a good ux okay so yes we are getting it here and like if I check yes we are getting is not empty but if it is lengthy 0 it means it is empty and in that case we can show no notifications or we can make it no new notifications it means are not present newly that's all else if we have notifications we will map through it and so on if I come over here we're reading the notification here you see and okay I think I Bottom bar is there yes we also have a is readout length property so if it is true it means we have notification and if we have notification we can show this basically if the number of length is more than one sorry more than zero in that case we will see you will see the notification dot length as a badge and we are telling them in the active modification class like we are having the background color and the color and so on and yes that is how we Implement a notification component in our or any app like customer media so let me show you we are having no new notifications in the user of Nishan Singh let me like a post listen if I check again here we will okay if I have to go back and come here I think that will be deflected here yes it is coming so that is how we do it if I click it we will see nothing because we will have no notifications Define refresh nothing will happen because I think we may have some bugs that I have to fix but not now but I forgot one thing let me show you that if you come to firestore.jsx like in my repo check it out in the GitHub we have a thing called order by which is a query basically so this will simply arrange our modifications in any order so if I check here the like is at 739 but the comment was that 723 so they should be in descending order like 739 should be on the top so to fix it or to make it in descending we have this order by so we have to descend I mean we have to order the timestamp in descending order so if I saved this they should work but the problem we have something and the problem is this if I open the console we have to add the index in the fire in here basically it is currently empty and if you open this you will see you can make it here so we have to do it just select your account and just click create here or savior it will take some time so you can wait for it and I can wait for it too if you want for you only meanwhile I can explain if you didn't even stand or get anything maybe it will not work because it is a recording so get notification this is we have great notification query which is taking the notification collection where order buy and it is ordering the collection called verifications according to timestamp in descending order yes it is still building and the battery is running out in my laptop in my MacBook so that I can just fit so it's still building still building still building still building so if it is completed we will not see this message in the console because then we will have something called indexes basically this recipient user ID is ascending timestamp is descending name is descending in the collection ID of notifications if it was for example in the users the index name was users or it will tell me what do you need to see in this we can say collection now so it's still building I don't know what to do so this is then we can get notifications so if I like this one ishan Singh we should get it in this browser C browser and if I like something from here let's say this past or post to this will reflect in this browser see it is real time so it will deflect instantly yes it has been completed we can say it is enabled and if I give it a refresh you will not see any issues now so it is done let me get Rider notification in our app the power of having notification button here

Channel: Cybernatico

Views: 7,027

Keywords: threads app, instagram threads app, threads app instagram, how to use threads app, what is threads app, new app threads, meta threads app, build a threads app, code a threads app, threads app using react, how threads app works, javascript tutorial for beginners, javascript mastery, javascript threads app, html css javascript tutorial, react project, react tutorial, learn react, build project in react, software engineer, react js tutorial, next js, notifications, javascript

Id: 03OvR8I3EXg

Length: 19min 50sec (1190 seconds)

Published: Sun Jul 23 2023