React, Redux & Firebase App Tutorial #38 - Showing Notifications

Key Takeaways

or rather than gang so we've created our firebase cloud functions now to create notifications and we have those inside the notifications collection in our fire store so now we need a way to grab this data and show it in our application of a hit so that's inside the notifications component so let's get rid of this index that was our cloud functions now what we could do is connect this component to our read up state and grab the data there or we could go to the parent component which is the dashboard since we've already connected these and we have the map state two props which we'll need and just get the data in this component then pass it down as a prop inside notifications and that's what we're going to do so then if you look down here we're already connecting to one collection in fire store because we want the project and we pass that down into the project list but now what we're going to do is connect to another collection and that is the notifications collection so since this is an array that goes into fire store Connect we can check on another object here so inside this object we'll do a collection property and that this time is going to be notifications so I'm also going to apply a limit property to this to three to only show a certain amount of notifications so now we're connecting to this collection as well inside fire store Connect so behind the scenes our firebase reducer or fire store reducer rather knows to sync this stuff from firebase from our database to the Redux store as well so now we're doing that what we can do is get that off the Redux store and return it inside this object so we have it inside the props of the dashboard so let's do that after the auth prop we'll do a comma and go to the next line create a property called notifications and set that equal to state dot fire store since this is where the kept then we'll go into the ordered property to get them ordered then we'll get the notifications so this now is an array of those notifications and we've attached it now to the props of this component so now up here in the component we can grab that using a bit of these butcherin in here notifications and then we can pass them down as a prop inside the notifications component so again we'll say notifications is equal to notifications okay so now we've done that we can get them inside the notifications component so again let's do a bit of destructuring from the props to grab that I'm going to say down here Const that in curly braces and notifications and that's not where the capital n is equal to props so that grabs the notification object off the props and stores it inside is constant that is an array so now we need to cycle down here through that array and output an li tag for each individual notification so then we could cycle through the data up here and then output it here this time I'm gonna embed it directly in the template just to shake things up a little bit so we'll there are curly braces and then we'll say notifications and we'll do a double ampersand sign and then notifications dot map now remember when we do this in front of the map function what we're doing is checking that the notifications actually exists if this has a length of zero there's nothing in it then it's not going to bother mapping through them if a length does exist and notifications are inside that array then it will map through them so that's what this does alright so now inside this map function we want to take the notification that we're currently cycling through now instead of always calling it notification because I hate typing it I'm going to call this item so inside will output that item details so we're going to return some JSX here right so let's do that return and then in brackets I'm going to do an li tag first of all and that Li tag is actually going to have a key because it's a surrounding element and the key is going to be the item dot ID we have access to an ID property on it which is going to give us this thing okay so then we're outputting that first of all time inside the Li tag I'm going to do a span tag this is going to have a class of pink text and inside that will output the user so we'll say item don't use it remember that's the use of property over here so we're going to output the name so who started this notification okay then we'll do another sponsor and inside that will output the content so item got contents oops not slash content dot content like so then finally under that we need to output the date so I'm gonna do a div this is going to have a class of gray - text and also a class of notes date and this is just short for notification just me being late it so inside there we need to output the date now we're going to use moments to format this date so let's import that first of all import moment from the moment library then down here and curly braces will say moment then in brackets we want the item then we want the time property which is stored inside the document right here yeah then we want to say to date and then we want to use a method on moment called from now and this is going to format it in such a way that says something like two minutes ago or five minutes ago okay so now what we're doing is placing that inside this div at the bottom and now we should be logging those notifications out to the browser so let's save this and let's go to the react app and we don't see any notifications there but if we inspect the element over here and then go to the console we should see an error and that's something to do with the permissions so missing or insufficient permissions okay so what's that well we've not set up any kind of security rules for this collection notifications so let's just go into rules and create that security rule form because at the minute all we're doing is matching these two things right here so let's do this copy that and paste it down below and this time it's going to be notifications and then here is the single notification and then we're allowed read access but not write access we don't want anyone to write them we're allowed read access if someone is logged in okay so let's publish these now you might have to wait a minute before you go back and try this out so when we go back now and refresh then we should see that this works we're getting those notifications right here okay so that's pretty cool we're now logging these over here in the notifications panel and the good thing is whenever say another user somewhere else creates a project or creates a new account we're going to get a notification in real time right here and I'm going to demonstrate that right now so I'm going to go to new protip but open this in a new tab over here now let me just go to this little app to split up my screens like this so that we can see one on the left and one on the right so we can see the notifications over here and I'm going to create a new project over here so I'll call this Mario Kart bonanza and then come and have a go and then create this and then in a second we should see that create a notification here in this component and we can see that right here Koopa Troopa added a new project a few seconds ago so that's pretty awesome right we're now adding all of these notifications out I just want to sort this thing out right here because currently there's no space between Koopa Troopa and added a new project so I'm gonna go over to my text editor and just add that space in so after use it we'll just add a space and save that leave this in a browser and it should start to look better okay cool so there we go now we've created our notifications in the next video what I want to do is show you how we can order data that comes back from firebase so we can show these in order and also these in order