Fetching Events & RSVPs

[00:00:00]
>> Scott Moss: Let's see the same for events. So let's go make our events one. I'm gonna make its own file inside the utils folder. I like to keep all these things separate. I rather have one file with one function in it than, I rather have many files, each with one function in it than one file with five functions in it.

[00:00:18]
Maybe there's people feel differently but that's just me. So we have our events.
>> Scott Moss: Same thing here. Well actually, we're not gonna use this memoized thing yet. I like you didn't see this. We're not gonna use it right now. We'll use it later. Don't look at that.
>> Scott Moss: So, we're gonna export getEventsForDashboard.

[00:00:48]
That's an async function. Takes in a userId, I think. Yes, it does. We're gonna simulate a delay here.
>> Scott Moss: And then this query is a lot simpler, so I'm just gonna copy this, but I'll walk through it. This query is using drizzles query syntax versus more than native dot select syntax.

[00:01:13]
So this is actually a lot closer to what Prisma does. So I'm querying the events table. I wanna find many where the createdById equals the given userId and I wanna select these columns and I wanna join this table and I wanna limit to five and I wanna order by the ascending events.startOndate.

[00:01:35]
So it will show me the oldest ones first down to the newest ones on the start date, because if this is the start date of the event, that means the older one at the top is the one that's about to show that's the most upcoming one. That's the one that's about to start sooner than the rest, because its date is older, therefore less.

[00:02:02]
Okay, so we got that same concept server only. Everything's the same here we've got our delay. Let's go add this to our events page. So we'll go here, have our event slot. We're going to add I have async here. Wait, did I do that in the page? Did I do async?

[00:02:25]
I just realized that.
>> Scott Moss: Okay, I did, I'm perfect. All right, so we'll do async here, and then we'll get our user.
>> Scott Moss: Okay, and then we'll get the data. So that'll be await, getEventsForDashboard, take some user.id, and then let's get the JSX for that. Wait, I guess I need to return the data?

[00:02:57]
Sorry about that.
>> Scott Moss: I'm just going to return the data or empty array. That way it won't break my map inside of my page, so it's always an array.
>> Scott Moss: Just in case this does it. So we got that.
>> Scott Moss: And then the JSX is a little more complicated here.

[00:03:23]
This is not a UI course, so not really gonna talk too much about it. So I'm just gonna grab these imports and the wrong file. There we go.
>> Scott Moss: And then let's get our JSX. Okay. There we go.
>> Scott Moss: Cool, okay, so I'm gonna change this to events.

[00:04:08]
There we go. This is really just like making like a table with some columns in it. And you can click on one of the events, we'll make that page later. Nothing too specific, using some of the components from the component library, feel free to check it out. If you don't react, it'll make sense to you.

[00:04:26]
It's nothing crazy. So let's see if that loads up.
>> Scott Moss: There we go, so latest events, loads up. If you hover over this or this, you'll see it'll try to link to some page we haven't created yet. You'll get a 404 if you try to go there, probably, yep.

[00:04:50]
Loads up pretty good. If we refresh, it's still there. I do a hard refresh, it's still there. Maybe you want that, maybe you don't want that. What if a new event came in? Does it get it, who knows?
>> Scott Moss: And then for the last one, we'll do the RSVPs.

[00:05:11]
So RSVPs is a little more difficult query because the schema's bad. So let's do that. We'll go to utils. Make another one, rsvps.
>> Scott Moss: And we call this function getRsvpsForDashboard, so let's do that.
>> Scott Moss: And this one takes in a userId.
>> Scott Moss: There we go. Wait, our delay.

[00:05:52]
And then I'm just going to bring in this query logic. So I'll talk about this a little bit. Basically what I'm doing here, using the query builder from Grizz. I wanna find many events where the createdById equals the current userId select the ID of all those events only continue.

[00:06:11]
There's actually if this user has events if they do, then I want to select from the attendees table, make sure they're distinct, so d dupe them where in rsvp.eventId is one of these usersEventsIds. And I can get rsvp cuz I'm joining it to an attendee cuz an attendee has a one to many relationship with rsvps.

[00:06:37]
So one attendee can have many rsvps so I can join on here. And then I can join the events on the rsvp because the rsvp knows what event it is for. And that's how I'm able to access those and then just order by the createdAt descending so I can show the latest rsvp at the top with the oldest ones at the bottom.

[00:06:58]
And that's what this is. So I get back, actually get back an array that looks It's kind of weird. It has like an events object, which is just one event. It gets back rsvp object or rsvps object, which is just one. And attendees, which is just one, it's like an array of all of those.

[00:07:14]
So it's kind of weird how it's formatted, but there it is. And then the JSX for that. I'm just gonna copy this right quick.
>> Scott Moss: And we'll go into the RSVPs or RSVPs, here we go. So for this one, we get our imports in, and then for the JSX, we first, let's get the user and let's get the data.

[00:07:44]
So async user awaits, getCurrentUser. And then what do I call it events = await get, what did I call it?
>> Scott Moss: RsvpsForDashboard. I don't know why I'm calling them events, but rsvpsForDashboard takes in a user.id. There we go. And then from here, all of this JSX, which is not innovative or important but necessary.

[00:08:29]
>> Scott Moss: So I'll just loop over those, and it's gonna be another table similar to the one that we just did, just slightly different. Put those on the page really like I said, nothing special, just, JSX. The important part is what's going on here. So let's see if that loads up.

[00:08:49]
>> Scott Moss: And it does, but does it? [LAUGH] Let's see, so.
>> Student: The notion doc is importing events again there, the GitHub is different then.
>> Scott Moss: Okay, yeah, that makes sense. I might have wrote it wrong in notion. That's okay. Let's go to GitHub and get it and I'll fix it in the notion.

[00:09:13]
So let me go to GitHub, go to my app, go to dashboard, RSVPs, page. Yeah, it's way different. That's why I was looking at it, I don't know if that's the same. So let's try this, data and do that. There we go.
>> Scott Moss: Okay, so now let's see if this loads.

[00:09:50]
There we go.
>> Scott Moss: So now we have our three slots loading data independently from each other.
>> Scott Moss: And they're all their own pages, but they're yet still in the same layout. And if we go to, well, I guess we'll have to wait to make this route to go to it, but we only wanna show this layout.

[00:10:14]
If the path name, eco/dashboard, if we go somewhere else, we don't want this layout, but we'll wait till we make some more pages for that to happen. The way I think about it is like, it actually works the way you think a React component will work. Like who here, the first time they ever used React was like, yeah, I'm just gonna call a promise at the top of this component.

[00:10:32]
Wait, that doesn't work. I got to put it in a, well back then a life cycle method. And then now it's like a use effect, but it works the way you think a regular function would work. So to me, it's easier to understand. Yeah, you got a question.

[00:10:47]
>> Student: Yeah, I was curious, so with the interactions between a server component and a server action, one of the benefits then being able to keep the server state in sync with the client. If you were to perform a server action that maybe updates a user as an RSVP, how would that behave within the React server component in this context?

[00:11:09]
>> Scott Moss: So if you wanted to take one of these and like update it, is that what you're saying?
>> Student: Yeah, exactly.
>> Scott Moss: Yes, well, in this example, so if you wanted to stay within like the whole server actions ecosystem, you'd have to go make a client component that you would bring inside of here.

[00:11:28]
And then that client component would import a server action that did the update. And then you can pass in as a prop, whatever you want into that component. So in this case, like a rsvp id, the things you wanna update, and then that component can render that because you won't.

[00:11:44]
You won't be using the server actions inside this server component because there's no way to capture an interaction like an on click or something like that. So how would it know when you want it to run the server action? So the server action has to run on some client component.

[00:12:01]
So that's how that would work.