Facebook-Inspired Reactions System with Angular and Firebase

Key Takeaways

in this episode we're going to replicate Facebook reactions using angular for and firebase first let's head over to Facebook just to see how it works you can hover over like button which brings up a tooltip with all the different reactions when you click reaction it updates your own as well as the list of other users reactions below that first thing we're going to do is import the graphics into our project I found some free Facebook icons on icon finder calm and then save them under the assets folder in the angular project now we can generate the reaction service and import the angularfire auth module as well as the database module we're also going to make heavy use of lodash to handle the sorting and counting of reactions we'll keep track of the user ID on the service and then we create an array of the actual emoji graphics we want each emoji to be tied to a specific index and we'll save that index in the database in this case light will be 0 loved one Wow 2 etc so our database is a collection of item IDs things that can be reacted to and each document is the keys of the users and the number that corresponds to their reaction the first thing we'll do is get the associated reaction score and item as a firebase object observable next we create a function that allows the user to update their reaction which has a default value of 0 for life we format the data by passing the user ID is the key and the reaction is the value and then we just update that object in firebase following the same idea we create another function that allows the user to remove their reaction from the database now we create a utility function to counsel reactions to come back from firebase it returns a JavaScript object where the key is the value of the reaction and the value is the number of reactions for that type we'll use it to display the total count for each reaction type in the component template the final step is to determine the current users reaction so we just check the object for that specific user ID now we can start building the front-end component first we're going to need the input decorator as well as ondestroy and we'll also inject the reaction service and we'll use lo - in here as well the component will accept an input variable which represents the parents ID that can be any kind of content that can be reacted to then we'll declare a few other variables that represent the data we're going to be showing in the template during ng on a knit we first get big lists of emoji then we subscribe to the object observable when it emits a value it'll be a JavaScript object of user IDs and their reactions we can use this object to count the total reactions for each type as well as determine the current users reaction from there we create an event handler that will actually update or remove a reaction if the user already has a reaction with a matching value then we'll go ahead and delete that reaction if the value is different it means the users updating or creating a new reaction so we go ahead and update that in the database next we create another event handler that will require when the user hovers over the like button which will show the emojis and we create a utility method to return the emoji image path in the assets folder and one more utility method to see if a reaction type has reactions so we know whether or not to display it in the template then we unsubscribe when the components destroyed to avoid memory leaks now let's put this all together in the component HTML first we create a wrapper around everything and use the mouse enter mouse we've events to toggle the physical of the emojis inside this div we loop over the six emojis and use our emoji pass helper to find the Associated graphic in the assets folder notice how we also get the index while looping through this array because that will be the value we save to the database corresponding to this reaction type next we'll add a like button that the user can click that will add just a generic light if the user has liked this piece of content we'll go ahead and add a conditional class that will color a blue and make it bold and also we want to display the type of reaction the users have in both cases we check to see if the user reaction is not null we can use the value of the reaction to get the corresponding emoji from the emoji list and it's indexed now we need to display the total reaction Cal we do this by looping over the emoji list again and we'll see if a reaction has taken place and then we'll get the total count for that reaction just like before we use the Emoji path helper to display the corresponding image then we can get the count from our reaction count object by just passing up that index let's try it out in the app if we hover over the like button it should bring up the emojis and if we click it it should add a light telling us what the light type is the reaction counts are all kept up to date in real time so if we have multiple users reacting to the same piece of content we'll see the reaction counts be updated in real time when looking into the database console we can see that going to user clicks the reaction it adds their user ID key and the value for that reaction to the database that's it for this episode if you found the video helpful please like and subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase comm for just a few bucks a month you'll get access to your exclusive content as well as free one on one project consulting thanks for watching and I'll see you next time [Music]