Full Stack MERN Project - Implement MERN Comments | React + Redux, Node, Express, MongoDB

Key Takeaways

in previous videos you'll learn how to set up a full stack marin project from scratch how to add pagination search authentication using email and google and much more today we're going to add a new essential feature and that is comments if you haven't watched the first four parts they're going to be linked in the description make sure to watch them first and then come back this video is special because it can also be watched as a standalone video that teaches you functionality needed for implementing comments however i'd still strongly encourage you to watch the first four parts because then you'll have a much stronger understanding of the project we're building as i mentioned before i initially planned on putting this as a paid course but i later decided to release it completely free for you guys here on youtube so to support this video leave a like comment and subscribe it shouldn't take more than a few seconds and i really appreciate it on another note some of you in the comments requested me to add some extra features to this app things like a live chat feature or even the entire google maps functionality where each memory is displayed on a world map if you'd like me to create a sixth part of this series where i add one of the features you requested make sure to like comment and subscribe if this video reaches 5 000 likes we're recording part 6. with that said let's do a short demo and then let's jump straight into the project so the new feature we're adding are comments let's visit a single memory page as you can see now here is an entire comment section where you can view and write comments js mastery and john already left some comments let's add a few more hello there let's write it there we go it fit on the screen but if we add one more this is awesome there we go and if you keep adding more comments like this you're gonna see that it actually scrolls to the bottom so we're also gonna implement the scrolling functionality to implement comments we're going to work with react and redux on the front end the data coming from the front end will be sent to the backend to be stored to the mongodb database essentially we're going to use everything that you need to know to build a full stack marin application before we dive right in i'd like to quickly introduce you to brain fm i've been personally using their software for quite some time now they create music that improves your focus while coding and it's not just a gimmick it's actually backed by science the link is going to be down in the description feel free to try it out it's completely free if you do decide to upgrade to a pro plan i've also prepared a discount code for you with that said let's jump straight into the video [Music] to be sure we are on the same page when starting the project you can click the github link down in the description and that's going to lead you to this page of course if you'd like to learn the mern stack fully i'd strongly suggest you to start with the first video in the series that way you'll learn everything you need to know and you'll also learn how to deploy it the link is going to be down in the description so let's go to part 4 let's click this green code button and let's download it as a zip once the project is downloaded you can drag and drop it to your desktop and then there you can simply extract it once you've extracted it you can simply drag and drop it to your code editor of choice in this case i'll be using visual studio code let's make this a bit bigger increase the font size so that everybody can see it and let's go under view and then finally terminal before starting with anything you can open up the server side package.json and we're going to modify the start script to say nodemon index.js instead of node that way it's going to always keep our code updated you can save and close that and now we can split our terminal by clicking here and clicking split great we can clear both sides the left side of our terminal is going to be our client side meaning react so you can cd into client and then there you can run npm install the second one is going to be for our back end or our server side so you can cd into server and run npm install once both client side and server side finish installing the necessary dependencies to start our application you can run npm start both on our client side and on our server side this is going to initialize the application if you've done everything correctly you should see my demo posts here these are some of the most visited places on earth but of course you can connect your own database the database connection with mongodb atlas is covered in depth in the first 20 minutes of the first memories video so if you want to learn in depth how to connect it definitely make sure to check it out again the link is in the description but for now let me also give you a quick refresher first you need to go to the mongodb atlas website and then you have to either create an account or sign in if you already have one once you're in here if you haven't already you'll have to create a cluster in this case i already have my cluster running in here we can click connect and then finally connect your application in here you can see a string which we have to use to connect it keep in mind that in here you need to change your password and also the name of your database so let's copy that before we go to our code i also want to show you that you can change your password if you go to database access then right here click edit and then in here you can click edit password and change it once you've copied the link and once you know your password let's go back to the code more specifically we're going to go to the server and then index inside of here you can see that we have our connection url you can definitely keep using my url and that way you'll always have some memories in there but feel free to remove it and then in here make sure to paste your own url of course you have to change your password and you also have to change the name of your database great with that said we are up and running and we can start implementing the comments feature let's do that right away let's close our terminal and let's start implementing our comments section that's going to be inside of the client folder inside of the source components post details and then inside of here we're going to create one more component that component is going to be called comment section dot jsx this is a new component that contains all the logic about comments so let's import react from react and we're also going to import a few hooks these are going to be use state and also use ref right below we're going to import everything we need from material ui and that's going to be typography we also need the text field and finally we need a button component that's coming from add material ui forward slash core also we're going to use the use dispatch hook belonging to redux so we can see that's coming from react dash redux and we're also going to use some styles so we can say import use styles and that's coming from dot slash styles great now we have the majority of imports that we have to do and let's create our component const comment section and that's going to be equal to a functional react component inside of there for now let's simply console.log something like comment section and also let's simply return an h1 just so we can see something on the page for now great of course we have to do export default comment section of course we have to use this comment section somewhere and that's going to be inside of the post details when we open more details about a specific memory so in here at the top let's import comment section from dot slash comment section just like this and where are we going to render that component well the last time we even left a typography saying where we need to put it comments coming soon so let's simply delete that and then instead of that typography we're going to render out our comment section it is going to be self-closing component and let's pass one prop to it and that prop is going to be the data for the specific post we're currently on we're going to use that inside of the comment section so let's go back to our comment section and let's immediately this structure our post data just so we know what's coming through there and maybe instead of this comment section let's simply console log the post great we already have enough code that we can see it on the website let's open up a specific memory page and then inside of here you can see that we have a big comment section now let's create the jsx for our comments inside of that div we're going to have yet another div and this div is going to have a class name equal to classes dot comments outer container right now our classes are not defined and to use the classes coming from the use styles we can simply say collins classes is equal to use styles and then we call it as a hook great now inside of this div we're going to have yet another div and this div is going to have a class name equal to classes dot commons inner container great now we have our layout now inside of our inner container we're going to have a typography component and that typography is going to have a prop of gutter bottom which is simply going to give it some bottom margin and it's going to be a variant equal to h6 now inside of there we can simply say something like comments now we have to loop through the comments of our specific post of course right now none of the memories or none of the posts have the actual comments because we haven't implemented the feature of adding them yet but let's create the jsx code that's gonna loop over them once we have them populated let's open a dynamic jsx block and then in here we're going to loop over the comments for now let's create a use state field so const comments and set comments and that is going to be equal to use state for now in here we can leave simply an empty array because we have no comments yet now that we have comments let's loop over them comments dot map in here we're gonna get a comment i'm gonna put c for short and also we're going to get the index then we want to instantly return something so don't put the curly braces here but simply a parenthesis now for each specific comment we're going to show a typography and that typography is going to have a key equal to i it's also going to have a gutter bottom and it's going to have a variant equal to subtitle 1. for now we can simply say something like comment in there or we can even make it dynamic and say comment i this is going to give it a number now just so we can see this let's add 1 2 3 4 here that should render out four demo comments i'm gonna save that and in the browser we can already see our comments header and we can see comment zero one two three so we're already starting to create the layout for our comments later on of course we're gonna have real comments in here but for now let's keep moving forward below the comments inner div we're gonna have one more div and this div is not going to have classes it's simply going to have some inline styles we can say style is equal to width is equal to a string of 70 percent inside of there we're going to have one more typography we can even copy this one everything is going to be the same gutter bottom variant h6 and we can simply say write a comment now as we have our comments below our comments typography we're gonna have the code to write a comment below this typography so to do that let's create a material ui text field which is basically just an input it is a self-closing tag we can expand it in multiple rows and let's give it a few properties the first one is going to be full width this means that the text field is going to span across the entire width of the screen then we're also going to have a property called rows and we're going to set that to 4. usually text fields are simple fields for like name or last name or something like that but our comments can be longer and that's why we can have multiple rows our variant is going to be equal to outlined and we can also have a label which is going to simply say comment we are going to make our text field multi-line and then in there we have to keep track of the value of our specific comment to keep track of the value of our text field we have to create another state so we can say const comment now singular and then set comment is equal to use state in there we're going to pass an empty string because we want to start with empty string now that we have that we can specify a value and the value of this text field is going to be a comment then we can specify the onchange property and to change something we have to get the event like this and we have to call the set comment and more specifically event dot target dot value that's going to set the value of our text field let's save it and look at it in the browser okay that's already starting to look just a bit better we have our comments and we have our write a comment section of course we still haven't implemented the styles for our containers we're going to do that really quickly now let's add a button below our text field i'm going to create a button that button is going to have a few properties first it's going to have an inline style equal to margin top and then in there we can simply say 10 pixels that's going to separate it a bit from the text field then it's also going to be full width it's also going to be disabled so we can say disabled and it's only going to be disabled if we haven't yet typed in our comment so we can say if no comment our button is also going to have a variant equal to contained and it's going to have just one more property which is the on click handler what do we want to do on click well we want to call a special handle click function which we're going to create right now but before we do that let's simply put something in our button and that is comment great so now we can see that we are missing our handle click let's create it at the top for now we can simply leave it as a blank function const handle click is equal to an arrow function great now we finish the better part of our comment section let's implement our styles to do that i'm going to open up the styles.js and we have to add just a few class names below the loading paper i'm going to add the comments outer container that is going to be equal to an object and then in there we simply want to say display is equal to flex and also justify content is going to be equal to space between below our comments outer container we're also going to have our comments inner container and then in there we can simply specify the height which is going to be equal to 200 pixels we can also specify the overflow y which is going to make our div scrollable so we can set that to auto and we can also give it a margin right which is going to be equal to 30 pixels great these are all the styles that we need for now so let's go back to our comment section and let's actually check it out in the browser that already looks so much better technically we've finished the entire frontend part of our comments functionality now is the time that we connect it to redux and then send that data to the backend and finally create a comment in the database so let's do that right now now let's grab this data from a specific comment and when we click comment let's submit it to redux also i've just noticed that our button is gray and it has to be blue so let's change it right inside of here we're going to give it a property called color which is equal to primary now if you type test you can see it has this nice primary color with that said you already know that we created our handleclick function but we have no code inside of there so let's implement the code right here when we click comment we have to dispatch a new action to our redux more specifically we can dispatch a comment post action our comment also needs to contain the information about who is creating that specific comment so let's grab our user from the local storage i'm going to remove this console log and i'm going to grab our user we can say const user is equal to json.parse and then we can go inside of the local storage and simply call get item user this is going to populate our user from the local storage we've already done this a few times throughout our application now that we have the user's data let's form our comment to include the user's name and also the comment itself let's say something like const final comment and that is going to be equal to a template string the first thing in there is going to be user dot result dot name and then we can say colon and then in here we render the comment so just one more time we are getting the user's name here and we're saying who wrote that comment that user and what is the context of the comment well it is the actual state we are going to write that in that specific text field right in here now that we have the contents of the comment and we can put that here final comment and also as the second parameter we have to say which post does this comment belong to so let's add a comma and let's say post dot underscore id great but as you can see our dispatch is currently not here and also our comment post is not defined so let's fix that first we can get the dispatch by saying cons dispatch is equal to use dispatch hook but now we have to create that action for now let's simply import it even though it's not yet created we can say import comment post and that's going to be imported from dot slash dot dot slash actions forward slash posts great now let's create it right inside of there we are going to go to actions and then posts and right inside of here below the like post we're going to implement the comment post so let's follow the same structure export const comment post and in this case we'll be getting two different parameters the first one is the value and the second one is the id of the post then considering that data is asynchronous we have to use redux stunk and it has this weird structure which is the async dispatch and then after that one more function call like that now how can you know that we are getting the value and the id well we can know that because in here that's exactly what we're passing the comment including the name and the comment and the id great so let's create the actual comment post action we're going to create a try and catch block as we always do now we have to make an api call and that's going to look something like this await api dot comment and then in there we're going to pass the value and the id of course we don't yet have that api comment as we have the like post or delete post or all other so we have to create that and let's do that right away let's go to our api and then index.js inside of here we can even copy the entire like post just above now let's change it we're going to change this to comment our comment accepts two different parameters and that is the value and the id the method of the request is going to be the post because we want to create a comment and the route is going to be forward slash posts forward slash id and then forward slash comment post but of course we also have to pass some value with it so just next to that we're gonna pass an object that's going to contain the value of our comment great we're now ready to make api calls from the front end to the backend but this route doesn't yet exist in our back end so let's create it right away to start creating our backend let's first close all of our tabs just so we have a cleaner workspace and let's collapse our files and folders now let's go to our server and then we're going to go to routes posts.js we can duplicate our like post route and in here it's going to be incredibly similar but just a bit different instead of the patch request it is going to be a post request and instead of the like post it's going to be comment post need to be logged in to be able to comment the post so we're going to leave this here and then also we're going to change this to comment post of course we have to first create that controller and let's import it right there comment post this here is going to be a function on the backend that's going to handle the creation of the comment so let's go to our controllers and our posts.js now let's scroll all the way down below our like post and let's create a new controller that's going to handle the post creation it's going to look something like this export const comment post and that is going to be an async function it's going to accept the request and the response as all of the controllers do and in there we want to get a few values from our front end first we're going to get the id of the post by saying const and then we can destructure the id from rec.params and then also we're going to get const the structure the value but this time it's going to be coming from rec.body now let me specify how is that working i'm going to open the client source api index.js and put it on the side the request for rams is something coming through here take a look we have this id right there and if you take a look at our routes you can see that the id coming in is dynamic and that's what populates the id right here in direct params so where does this value from direct.body come from well if you take a look at our request one more time you can see that we're passing that object that contains the value and that's what's populating this value that's basically the value of our comment great now let's use those values to create a comment in the database first we have to fetch the post that we have to put our comment on so we can say const post is equal to await post message dot find by id and then in there we can simply pass that id finally we're going to go into our post into the comments of our post and we're simply going to push the contents of our comment that is going to update our post but we have to actually update it in the database as well so let's say const updated post is equal to a weight post message dot find by id and update and then inside of there we have to pass the id we have to pass the new post and we have to pass the options object that's going to contain the message new is equal to true i know this is a long line so let me repeat it one more time we are getting the post from the database we are adding the comments to that post and then we are updating the database so that the new post contains that new comment finally we are storing the value of that post in our updated post variable once we have that we can simply return res.json that updated post and we can receive that back on the front end great but there is one more thing we also have to update the model of our post so we can go to our server and then models and then our post message inside of here just below the likes we can create the comments part and we can say the type of the comments is going to be an array of strings and the default value is going to be an empty array because by default we don't have any comments in great now we can come back to our front-end let's first close all of this go to client-side source and then actions posts inside of here now we know that we're receiving something back once we actually call this api so let's retrieve that value we can do that by saying const response is equal to this and then in here we can destructure and simply take the data from that response for now we can simply console.log that data so what are we expecting to see with this console.log well if our database functionality for creating the comment works and if our frontend is sending the correct data in the first place that means that this data should return a new post and that post should have the comments that are going to be an array and it should have a new comment that we type in so now let's test it out i'm right here on a specific memory page i'm going to click inspect and then i'm going to open the console now we'll keep track of our console and we'll see if a comment gets there let's write something like test and click comment okay something is red and looks like we have the result of null that means that the user hasn't been fetched yet or we haven't properly been logged in so let's close this reload and yeah it's true we are not logged in and we cannot post comments if you're not so we have to properly handle that error let's go back and then inside of here we're gonna check if we have a user so how are we gonna solve this well there are a few ways first of all we can in here once the user clicks we can then check if the user is logged in and then if he's not we can disable that but there's a better way why would the user even need to see the part for creating the post if that's gonna result in failure let's immediately remove this from his view that way he's not gonna run into errors so right inside of here we can take this we can check if there's a user we can do that by simply putting our code here opening a dynamic block and we're going to check if there is a user.result.name then we're going to show this so we can say end end and then open a parenthesis then at the end of our div we can close that parentheses and close our dynamic block this code is basically saying if the user has a name basically meaning if there is a user then display this piece of code otherwise show nothing our user is sometimes going to be undefined and we cannot do the dot notation with undefined it's not possible to do undefined.result.name so we have to handle that i'm going to bring the user back and i'm going to say user question mark dot result and then question mark dot name this is the new javascript syntax that's going to allow us to simply not throw an error if the user doesn't exist let's save it and check it out in the browser and would you look at that now we have only our comments but since our user is not logged in he cannot create any that's great he can view but not create now let's sign in i'm gonna sign in with google and apparently even if i'm logged in i cannot see the post creation part so let's see what that is about i'm going to console log our user just at the top right here and our user seems to be null and looks like i've made a small mistake instead of specifying user here we should be specifying profile i'm going to copy this and search for this across the entire code base as you can see we've been calling profile many times and never user i just made a typo so let's go back to our comment section and see if this works right now we can even remove this console log because i'm quite certain it will work and since we're logged in we should be able to see the part where we can create a comment and there we go now we can see this part where we can write a comment if we were logged out we wouldn't be able to see it but now let's see if this comment is going to come through i'm going to say test and click comment now we're expecting a cons of log with the post now including the comment and there it is considering that i've used this before it's going to have a few more comments yours should have just a few but there it is our comments are there now we have to fetch them and using redux and reducers we have to bring them back into our jsx view and we can do that like this let's go back to our actions where we left off that's going to be actions post.js and then inside of here we're getting the data about a specific post now including the comments so the question is what do we do with it well we're going to simply dispatch a new action we can say dispatch and we're going to specify the type of our action to be equal to comment also we're going to specify the payload to be that new post with now included comment also after we dispatch that specific comment we're also going to return the data dot comments that means that we're returning the newest comment that's coming in and inside of here inside of the catch we can simply conjure log the error one more thing see how we've used the constants for all of our action types right there start loading and loading and so on let's now create the constant for the comment as well so right here next to the like i'm going to create a new constant and that's going to be comment of course this is just the import we have to create that constant right here under the source and then constants action types just below like i'm going to create the comment and that's basically just a string again if you're not sure why we're using this for maybe watch some of the previous videos but the quick explanation is that if you scroll down here if you write something like comment here and maybe miss one letter like this comment that's going to cause a lot of problems in your app but it's not gonna throw an error so you might be able to miss it but like this if we write it as a constant then if you miss just one letter it's immediately gonna throw you an error that's the reason why we do it that part is now done the last part we have to do is deal with this data in our redux and then send our comments back to our comment section where we'll be able to fetch them and then loop over the real comments not just the dummy data so let's do that right away to get this data to our component there's one last step of the entire redux workflow that we have to do first we're dispatching an action then inside of that action creator we are making an api call and finally we have to go to our reducers so let's go to reducers and then post.js now inside of our reducers we also need to pull our comment action type and we have to add one more case to create a new case let's go under our like right there and let's say case comment so what are we going to do on the comment well we're also going to return an object so let's specify it like this and in every object we want to first spread the state and we're going to do that here as well once we spread the state we want to define posts so we can say posts is equal to state.posts.map so we want to map over all of the posts and we're going to get each individual post then we want to do something so what do we want to do here well we want to return all the other posts normally i'm going to explain quickly what do i mean by that and then we want to change the post that just received a comment great so we want to return all the posts normally and then change only the post that recently received a comment how can we do that well we can check if post dot underscore id and if that is equal to action dot payload dot underscore id that is our new post that just received a comment so if that's the case then we want to return only that new specific post which is equal to action.payload and in other case we simply want to return a post one more time return all the other posts normally like this and then if the post is that specific post that just received a comment then return it changed with that comment included great so this is how this works we can now remove these comments put this in one line and that is it this is how our common functionality in redux works i know it might be a bit confusing we're spreading the state and then setting the posts but keep in mind we want to return all of the posts and only change the one that just received the comment that is it great so with that we're done with the reducers and now we can actually take a look at our data inside of our comment section component so let's do just that i'm going to close all of our other files go inside of here and now we want to fetch our comments the comments are of course stored in a post and we are already getting a post right there so what we can do is we can initially set our comments to be the comments of that specific post so right in here i'm gonna say post question mark dot comments okay so now we're getting our redux data from the back end right in here and putting it in our comments and of course we have to change it right there so we're not to simply say comment i we are going to return the c the comment of course so for every comment we want to return a comment inside of a typography let's save it and check it out and would you look at that we have our comments i've been there last year the best experience ever and we have all of the comments we can scroll through and read them now let's sign in as well okay as we're signed in we can now write a comment and the functionality should be fully functional so let's say grade memory okay let's try saying great memory a few times and nothing seems to be happening but if you reload the page you'll be able to see that we clicked it quite a few times so we just have to make it update immediately as soon as we leave the comment and that's what we'll do right now but with that said you can see the comments actually work you can write a comment click comment right there and you just left it on this specific memory let's go to another one let's go for example to the eiffel tower let's write something meaningful looks great at night great and let's comment it and as you can see nothing happened right away but if we reload the comment should actually be there and there it is okay so now let's make it update automatically we can do that by immediately receiving all the new comments from the dispatched action if i go into this specific action creator you can notice that we are returning all the new comments and we can actually make use of that let's make this function asynchronous and right inside of here we can say const new comments and new comments are going to be equal to a weight dispatch great so now we can use those comments more specifically to set the comments to new comments that's going to update our state of comments and then render them down immediately what we can also do is we can set our singular comment that's the data inside of the text field we can set that to be an empty string and that should clear it out so let's check it out anybody else been here let's do something like that leave a comment and take a look amazing we can successfully post comments on our memories now what if i keep adding comments like test and then maybe one more let's add test one as you can see test one has been added but you cannot automatically see it which is not a great user experience you have to scroll down so let's make it scroll automatically you might think that you're going to have to use some external libraries or that it's going to be hard to do it but it's not really that hard we just have to know how to use refs so we're importing the use ref hook right there and right here we can say const comments ref is going to be equal to use ref so we've just created this specific reference that we're going to hook onto a specific element more specifically we are going to create an empty div just below all of our messages so right here we can create a self-closing div like this and the only thing it's going to have is going to be a ref equal to comments ref this is going to be our anchor point we're always going to scroll to this specific div because we know that that div is at the end of all of our messages so let's scroll up when do we want to scroll well we want to scroll once we add a new comment so right here let's create a functionality to scroll down we can do that by saying comments ref dot current dot scroll into view i'm missing an n here and you call that as a function pass in an object and then in here we can say behavior is equal to smooth that's going to make it scroll slowly to that specific point and with that our scroll should be done let's check it out let's add a new comment let's do test two and as you can see it just scrolled let's try adding a few more test four it scrolled as well great this functionality is now done last thing that we can do is make the username bold and leave this as it is we can do that right inside of here by splitting our comment into two parts more specifically we can say comment.split and we want to split it by that colon and we want to get the username so if you do 0 this here is only the username now that we have just the username we can put that into a strong tag and that is going to make the text bold so if i do it like this and just below we can now get the second part which is the actual comment so we can say c dot split we want to again split by the same thing and in here we want to get the first part which is the actual comment on the bottom part make sure not to put the space in here great let's save it and check it out great that works now we can differentiate the username from the comment this is a seemingly easy feature that we just implemented but it's really going to add a lot to the entire application our memories project really needed the comments section because now people can comment on each other's memories and share their stories but that's not it for this video i've decided to do one more thing some of you guys requested of me in the comments and that is to fix the speed of liking something right now if you click like it's gonna take maybe a second a second and a half or maybe four to five seconds in areas with slower internet connection so if i click it notice how long is it gonna take yep that was quite a long pause so what we're going to implement for the end of this video is the ability to immediately give the user feedback once he likes something the actual liking on the backend is going to take 2-3 seconds but we can immediately display the action to the user let's do that and this is not useful only for liking you can use this technique with everything where you want to give users the quick user feedback if you appreciate these little tips that i like giving to you definitely make sure to like and comment down below comment if you'd like to see the entire map of all the memories implemented in the next video to implement our let's call it quick liking we can go to client source components and we're going to go to posts and finally a singular post component from here we can see that we have some imports that we're not using so we can delete that right here get post and we can also immediately import use state from react because we'll definitely be using that great so now let's see what do we have to do right now we're getting the post passed through props and that's fine we're then using that post to find out the length of the likes in that specific likes array and then based on that we're showing our likes but we can make that just a bit better first of all we're going to implement a new state field called likes and of course it's going to have a set likes which is going to be equal to use state and then inside of there we want to immediately set that to the post question mark dot likes so we're taking the same value from our post right there post question mark that likes and we're setting that into likes so so far not a lot has changed but there is a specific reason why we need to do that because now we can set them again we can reset them we can change them because now we have this setter function so we're going to scroll down and find where we're actually liking something here's the delete and right here is the like button so right now we are doing something on click but we need to do a bit more stuff so i'm going to copy this and simply create a new function called handle click we're going to use that function above right inside of here so right here let's create a new function const handle like is equal to an async function like this and then let's simply paste what we had of course we don't need this callback function it says our handle like is not being used so let me see why i called it handle click a more appropriate name would be handle like great so now we've changed nothing we've added a new handler function which is still doing the same thing it used to do before and we also just added these likes which again is not being used so now what can we do to start using them inside of here we're going to add an if check i'm going to copy this entire part right there pose.lice.find and then we're checking if the like is equal to to the google id or the result underscore id we're basically checking in this whole thing did the current user like the post so we can say if this and that's basically saying did the current user like the post or not usually when you have lines as long as this one it's good to put them to a specific variable so let's say const has liked post and that is going to be equal to this now that we have this we know that that's going to be a boolean value and we can say if has like the post then we want to do something else if the user hasn't liked the post then we want to do something else so what do we want to do if the current user has liked the post well we want to set the likes to be equal to post dot likes dot filter inside of here we get a specific id and we want to filter out the id of that specific person so we can say if id is not equal to and that's going to be in parentheses user question mark dot result id or we can also have user question mark dot result question mark dot underscore id so we're basically simply filtering out the like because if the user has liked the post and he or she clicks the button again that means that they want to unlike it but now i figured out we're mentioning this part quite often so i want to take that entire part and put it in a new variable let's copy it and i'm going to call it something like const user id and that's going to be equal to all of this we no longer have to repeat it i'm going to put it above and we can use that id in a few places we can use it right here because you can notice it's the same thing we can also use it right here that's also the same thing and we can also use it right here because it's the same thing this was a great little lesson where we use two new variables to simplify our code and make it more readable now everybody can understand that this whole part is either getting the user's id from google or a normal id from the database and it's storing it in the user id variable and then in here we're simply figuring out if the user has currently liked a post or not finally if the user has liked the post that means that they want to unlike it and then we filter out their specific like but if the situation is different if they haven't liked it we can say set likes equal to we spread all of the current likes and then we want to add one new one and that is that same user id variable we created right here and why is this faster than simply updating the database immediately because updates to the database are asynchronous and they take time but this is gonna happen instantly finally we need to use our likes as you can see they're not currently being used right here we have to exchange every single place where we mention pose that likes and simply use our likes so that's happening here you can do control f and then find pose that likes and simply replace that with likes then you can click enter a few times and it's gonna fill that for you there we go so in all of the places where we used pose.likes you simply have to switch it to simply likes there might have been a lot of code in here so if you mess something up that's completely fine you already know where the link to the entire github repository is so make sure to copy the file if it's not working for you okay before we finally take a look in the browser i think we also have to replace this part here with only likes and let's check it out okay let me try to like something that was instantaneous take a look at that i can like and unlike all the posts incredibly quickly and if i refresh the page as you can see it's going to be updated in the database i can try unliking everything now and then we're going to reload the page and as you can see everything was successfully stored in the database but now the feedback that the user receives is instantaneous look at that i would say it's less than 100 milliseconds it's basically instantaneous great that was it for this video we've sped up our like and we've added the comments which was a great feature that was really needed in this memories application if you liked the video make sure to leave a like comment down below turn on the bell notifications and thank you so much for watching and supporting javascript mastery i'm gonna have some extremely cool updates for you guys really soon so if you want to stay up to date the link to join the mailing list is going to be down in the description definitely make sure to do that with that said one more time thank you so much for watching and see you in the next one you