 Hello, everyone. In the previous video, we looked at how we can add functionalities to create new records inside of our Firestore database. So I can hit new, I can say purple, I can give it a value, and you can see that purple is going to pop up right here. And then the ID is printed in the console. I can refresh the page. You can see it's loading and everything comes up because we are fetching the data from the database instead of hot coding it. Today in this video, we're going to talk about how we're going to add functionality to the edit links. So I have anchors here that say I did, but when I click on them, they do nothing right now. But before I start the video, I want to introduce you to our GitHub repository. So here in the GitHub, I'm going to paste this link in the video description below, you can go and you can change the branches. So let's say you want to look at the code for the second video in the series, which is ad doc and set doc, right? So you can come here, you can change this to part two, and you can go to source and ad.js. And this will be the source code for that specific video. This is the playlist, the link will also be in the description. And with that out of the way, let's go and jump into the code. So I'm going to go into the code here and I'm going to see that there's actually a lot of code. This app.js file is starting to get cluttered up here. So I'm going to create a new file called util.js. And I'm going to start copying and pasting things in. So previously we had handle new, which is what we're running when we click on the new button. So I'm just going to take this and move it over to util.js. So I'll be importing some stuff here from by a store. So I'm going to copy that as well. I'll just copy this and paste it here and get rid of this use effect. So it seems like we don't need use snapshot. And then since I've moved handle new over to the new file, I'm going to have to import that as well. So import handle new from dot slash util. And of course, I'm going to move at doc here because we no longer need it here. And then I'm going to export this. So export handle new. See, I'm also going to take this dot out of here. I'm going to instead import dot from dot slash dot. So let's go and create that file. So dot dot.js and let's do function dot. I'm going to take this out. It's no longer an arrow function because I'm an export default function dot. So now this is our functional component, which I'm importing here. That's why I can use dot right down here. And then I'm going to collapse use effect so everything is neater. And now we can come to our utils and finally write the code for export. Const handle edit here equals to async. It's an asynchronous function again because we are writing API calls in this function. We want it to be asynchronous. This time, though, I'm not going to leave the parameters empty because I'm taking ID. We need to know which specific document ID that we are editing, right? So let's console.log ID for now and do nothing with it. And here we're going to have to do on click on the anchor. You know, I can't just do handle edit like this because I'm taking in the ID here. So I have to wrap it in an arrow function like that. So this is somewhat different from our handle new function up there. We need to put this in an arrow function and take in ID. So this is actually not called ID. It's called color dot ID because remember, we are in colors dot map and we're taking each individual color. And the reason we have color dot ID here is because we in our use effect in set colors here, I'm setting both the document data and also the ID of that specific document. So in our colors, react state variable in each object, we have the ID there that we can use. So if you didn't follow me and do this step in the previous videos, then you wouldn't be able to edit this by the ID. So that's something to take note of. And then let's go back here and see everything should work. So now let's come and see there seems to be an error. Utils.js is not found. I see the issue here. The issue is I named this util.js. So I'm going to change this to util.js and now this should work. So let me just click on any of the edit links here, darker green. And you see that's the ID of darker green. I can click that multiple times. It's going to give me the same ID. I can click different colors and it gives me different IDs. So these are the document IDs for these different colors. It's right here. You can see the document ID in the console as well. So now let's actually do something with the ID. We don't want to just console.log that, right? The way to override existing documents is to use set doc. We kind of talked about this in the previous video, but this time we're actually doing it for real. So I'm going to import set doc and I'm going to set doc here. Set doc takes in two arguments. It takes in a document reference as well as a payload. And this is much like our ad doc here in the previous video we did handle new. It's kind of similar in that we take in two arguments as well. This time you're taking in document reference instead of collection reference. So let's make the document reference. The doc.ref equals to doc. So previously we did collection, right? We did collection and DB colors. So this time we're going to do doc and we have to import that here doc. And then it takes in, of course, just like collection. We take in the database handle. We take in the collection name. So I'm going to copy this down here. But for doc, we take in an extra argument here. And that is the document ID, which we're going to directly get from the handle edit function. We just have to make our payload. I'm going to do that really simply here. Const payload equals to an object like this. And then we're going to name, let's say, edited color and also value of, let's make it black for now. So let's go ahead and test it out. We have hard coded the payload here. We're going to change this just like our previous video. We're going to get this from the user using JavaScript prompts. But for now, just to demonstrate, I'm going to hard code this value in. Let's go back to our browser and then we can let's change red. So I should click on this. This should turn into black and says edited color. So there we go. It works. The only problem right now is this is a hard coded value. So if I refresh this, you can see that that remains and it's persistent in the database, which is right here. You can see change to black. But I don't want to hard code this. So that's all we need to do. We need to change this. I'm going to copy this from the previous video, the handle new. Let's get it down here. And then let's change this. So I don't want this to be hard coded yet that out as well as the value. So yes, 16 tax allows us to do this because the property and the value have the same name. So I can just do this. So let's test this out. This should be done. I can change this. Let's look for a color here. Let's see teal. So what I can do is I can type teal in here, you can paste the value in here. Let's hit OK. And you can see that the black just changed because I modified it. And then we can do this for this random color here. Let's say black. And then we can do FFF. Actually it's 0000. Sorry. Let's hit OK. You can see change to black. So our edit link is officially done. And in the next video, we're going to talk about how we can delete colors. So there are two ways of deleting colors really. We can archive it temporarily or we can also permanently just delete that from the Firestore database. Hope to see you in the next video. That's it for today.