Working with Firestore Data

[00:00:00]
>> So, I'm gonna go inside this Onmounted because this is what you uses to say, hey, when this component's kinda ready to start doing things. I'm gonna say onSnapshot, I'm going to pass in that markdown collection. And then, this is gonna take a callback. And this right here is what is referred to as a data snapshot.

[00:00:22]
And so a data snapshot is not just your data, it is a bunch of other important metadata about it and other helpful information. We can get the data by calling snapshot.data and then it spits out the data from that. But, we'll see later on as we get more into FireStore, there's a whole lot that we can do here.

[00:00:47]
And so from here, what I wanna do is, I want to sync this to view state. So I can say state.converted. State.converted=data.converted and state.markdown = data.markdown. So, whenever something syncs, it will sync to the state and then that kinda binds to this UI in here, I call it firebase.

[00:01:22]
All right, firestore, okay, it should be good now, cool. Now, snapshot.data is not a function probably because of, something I'm doing on snapshot. Let's just drop in a good old debugger statement. Snapshot.oh, it's cuz I'm doing collection. Yes, so this is a really good point here, this is something that you'll run into a lot.

[00:01:50]
Right here, I'm asking to get all of the documents within the markdown collection. And I'm saying, let me get its data. Well, I have a whole list so technically, what I would need to do is, I would need to say .docs. And then within here I have a whole array of them, and then I can call each one and get its data.

[00:02:09]
I don't want to do that, what I wanna do is, I wanna get an individual document. And so to do that, I can come into here, and I can import a document reference. So we have a collection reference, I'm gonna use that to get a document. I'm gonna say markdowndoc is document passing the markdowns collection.

[00:02:30]
And then from here, I can say hey, what's the ID of the specific one? We're gonna get more into managing IDs in a bit, but let's just get it from the route actually. So I'm gonna pass it down here and I can say route.params.id which I believe it is if I go into main JS.

[00:02:51]
Yes, this is what we're capturing the ideas. And so now whatever the route ideas will sync up to a document did not pass in the doc is early. Okay, so now just to recap. I'm saying on snapshot. Whenever I see a document the database in real time, I'm going to get its data and spit it out here and sync it to the state.

[00:03:16]
Now, this is going to be a problem because it's saying, Hey, I don't have any of these properties. So I'm going to go into the database and kind of hard code that in. So if we look at In this, this is RID. And to go into here into the database, I'm going to add a document of that and we're going to say that it's marked down is hello and I'm just gonna cheat for now and converted is going to be like h one of Hello Save Let me give this a refresh.

[00:03:55]
All right. And so, we have this document right here. And now when I come back to this and give it a refresh, look at that. We have that synchronizing from the database. If I refresh, it pops in. But that's just loaded in if I want to write in I can call a method called Set doc and so now that I have the markdown doc that's synced with the Parameter ID in this convert function which just says hey whenever there's a, The key app method on the text area instead of setting it straight to the state I'm going to call set doc with the markdown document And then I'm going to pass in data of converted,and then also the markdown.

[00:04:46]
And I'm going to delete it from here because this is one of the most important concepts and I'm going to actually every time we run into this concept all day, I'm going to be talking about this over and over again. One of my favorite front of masters courses is when will sentence does the JavaScript the hard parts and then it keeps going always goes to the execution context with the arms out this is like one of those moments where every time I do this I'm gonna to point this out and many back end systems you're used to saying let me request out this data okay I have it now I'm going to display it here let me make an update Let me wait for it Okay now I'm going to display it here we don't do that in the Firebase world what we do is we have more of a Redux style system where we dispatch changes it is very rare that you will ever say I wanna update data.

[00:05:37]
And I'm gonna wait for it back or I'm gonna wait to know that operation has completed. We're gonna get more into why that works as we go along. But right here we're calling set doc, and we're passing in this data object. And that's gonna save to FireStore. And we're not waiting for it to get done.

[00:05:55]
We're not writing like a weight set doc or we're not getting back the Document. What we're doing is we're triggering on snapshot. So this is one of the most key things in all Firebase development you will see this in Firebase authentication, you will see. This across the board this is a unidirectional data flow.

[00:06:14]
So call a set method call an update, call delete, it will trigger this callback right here. And this is how we keep things in real time. This is how we keep things very snappy in the UI, is we say I want to make an operation. I want to set a document I want to delete a document.

[00:06:33]
And I will get its results in this callback. So now when I save, let's see here if I say this is working, right? No errors, so that's great. And then here we go, this says this is working right so now I know that this is working. And what I want to do now is since I have this I want to be able to display the list of these so I can see that I can write to one and I want to be able to write create a whole list so now in dashboard what I'm going to do is I'm actually just going to copy and paste code like I said I'm going to make a lot of mistakes at first so I'm going to just copy all of this right here During a copy all of this I'm going to copy initialize that all my FireStore imports my config initializing app and getting my services as well as the collection reference because I'm going to want all these things in the dashboard Hi I'm just going to paste them in here and then what I want to do now is I want to say okay I want to get all of the documents and display them to this ui li so if I just assign it to state DOT markdowns view will take care of the The rest.

[00:07:59]
And so we'll do what we did before. We'll call on snapshot. We'll pass in the collection. What is it? Markdowns calls what I called it. We get our snapshot callback. Unlike before I showed before this is for a collection so it's gonna have a whole list whereas documents are a single object and so what I can say right here is I can say state.markdowns to bind to that list I can tap into the snapshot Call docs, since it's just a plain old JavaScript array, I can call map.

[00:08:33]
And from here, I can say d for data or for actually stands for document. That's why you should have better naming than that. I can return an object and I can say that it's ID is d.id. Because I'm not storing the ID within the data. And then I can do this cool JavaScript trick which I spread the rest of the data out so kind of merges it all into one object so now when I save we We have ourselves markdown.

[00:09:07]
So if I click into this one, this is so cool. All right, need to put a space there. So now I have this little Markdown editor. If I click back, back in, it's still there. That's awesome. So the last thing I want to do is sign users in.

[00:09:29]
Yes question. If that method is unit directional,.
>> How do you manage errors if you don't get any feedback?
>> That is a great, great question. For the most part the fire when I'll be getting an interest in the fire store section In the FireStore are most of the SDKs try to handle a lot of the errors for you.

[00:09:53]
You most of the rejection errors you are going to get are due to security roles. Someone trying to write data to locations that they are not allowed to. So it is not actually all that common, you will need to handle those cuz the SDK handles that behind the scenes for you.

[00:10:09]
But if you need to listen, there is another callback where you can check the error state inside of here. This is, if you're used to RX js, or observables in general, this follows a whole observer pattern from here So if you need to get errors you get it inside of this callback but you'll find that that is less common than you might think