React devs might find this archived course helpful to reference, but this course has been updated! We now recommend you take the Firebase Fundamentals course.
Transcript from the "Adding a Post" Lesson
[00:00:00]
>> Steve Kinney: So we make changes to the database. It's a reload right now, cuz we're just simply asking the database. When we're doing that get, it's just fetching stuff from the database. In a little bit, we'll learn how to actually subscribe to changes in the database and get real-time updates, but right now, we're just fetching stuff.
[00:00:14] So two things we're gonna do is that little map function that I wrote, that was fun, that was cute. I don't ever wanna write it again. So I'm gonna need it in a few other places. So who works on an application where you have a juncture or file called utilities.js?
[00:00:32] We all do. [LAUGH]
>> Steve Kinney: I'm gonna make a juncture or file. I'll do export const collectidsAndDocs, as we all know naming things is the hardest problem in computer science. So we'll go ahead and we will grab that function and paste it right in there, sweet. Now we'll collect IDs and docs.
[00:01:07] All right, and let's get rid of all of this fake stuff and state, cuz now we're getting real data. All right now, it'd be nice to actually be able to not have to log in to the Firebase console in order to make new things. So let's go ahead and figure that out.
[00:01:31] So we have this handleCreate, and right now we can use the form, it'll show up on the page, but we're not persisting that in the database anywhere. We do need to go ahead and figure out how to add stuff in there. Now, there's a few ways that you could do this.
[00:01:49] We could go ahead and do an optimistic update. The problem is that for stuff like the created.time, we're not gonna have that just yet. We don't have a really good way of dealing with that. So what we're gonna do is we're just gonna put it in the database and then we'll immediately take it right back out.
[00:02:08] And the reason we'll do this is that will give it its unique ID when we add real timestamps. In a little bit we'll get the timestamp and stuff like that as well. When we go ahead and add some cloud functions later in this workshop, we'll actually get the resulted version from the database, right?
[00:02:26] We could spend a little bit of time in doing the optimistic updates, but that is more of a not Firebase thing, so I'm going to kind of hand wave over that a little bit. So we'll go ahead and we have the post. We don't actually need this anymore, but we'll keep it for a second.
[00:02:43] So we could do a,
>> Steve Kinney: We need to make this an asynchronist function, so put an async beforehand. We'll do this docRef here, and that'll await.
>> Steve Kinney: You can see a world where in that firebase.js you make a post collection variable so you don't have to type this every time, right?
[00:03:09] That would be a legitimate thing to do, or an add post function that you could just use everywhere in your application. That's kind of what I do normally, I'm deliberately not doing that so that we see the syntax over, and over, and over again, but yeah. So we'll use the add method and we'll add this post.
[00:03:28] Now, I happen to know that add will return a reference to the place in, you can kind of see it, it returns the promise that resolves to a document reference. So it's gonna put it in the database and it's going to then return to me. Okay, I generated in your ID, here is the place in the database where I put your new document.
[00:03:56] And that is why I call this variable over here docref, all right? Or documentref or documentreference, if your font was smaller, you might type something really long like that. My font is large, so I'm not doing that at this point. So we have the document reference and then what we'll do is we'll go ahead and we'll just get that document right back out.
[00:04:20] Theoretically, like we have, we could get the ID from that document reference, we have enough in there right now to put it in stay without doing that roundtrip back to the database. But this also gives me the opportunity to show you how to get a single document for the database, so I'm going to indulge and do that.
[00:04:36] So with that reference,
>> Steve Kinney: I can call get, and that again returns a promise, we hover over it, means it returns a document snapshot promise that we will wait for.
>> Steve Kinney: And then we'll do a const this new post.
>> Steve Kinney: Take that function that we made earlier,
>> Steve Kinney: Pass in that document.
[00:05:04] And that will, again, put the ID on there. That was the one that we wrote that I never wanted to write again. We're gonna use it for a second time and,
>> Steve Kinney: Then we can just pop it on to the beginning of the post.
>> Steve Kinney: So now let's go ahead and try it out.
[00:05:36]
>> Steve Kinney: There it is on the top, go back here.
>> Steve Kinney: You can see I've got my new document here as well. The rest of that is actually put in there by just my ad post function, that's just putting in some dummy data that we're gonna need to replace over the course of this workshop, but there it is for now.
[00:05:56] There is one thing that I need to do, which is previously I was adding IDs by hand in,
>> Steve Kinney: Posts,
>> Steve Kinney: Or AddPost rather, where I was doing this cute thing. I actually have IDs now, so I don't need to do that anymore. Right, so these will be generated for me, awesome.