So now that we've successfully set up the backend to be able to handle those RSS feed links that we're grabbing in this form to set up a listening party, we can start making this homepage, this dashboard look more presentable. Because first, we want to be able to show any existing listening parties that are going on or about to start. So we're going to take some time actually styling this out and making it look a little bit more presentable and inviting to join a listening party. All right. The first thing that we want to do is when we're showing listening parties, again, we started with pushing this information to the view before we actually are displaying this.

The first thing that we want to do is when we're showing listening parties, again, we started with pushing this information to the view before we actually are displaying this information. But we don't want to just show all of the listening parties. We want to show the ones that have not started yet and maybe have started, but are going consistently still going. Remember, we have this isActive value. If we take a look at our listening_parties table, we have this isActive value and we can set this to false after the end time has already passed. So we can say, let's see, where and we can say isActive is true.

can set this to false after the end time has already passed. So we can say, let's see, where and we can say isActive is true. And then we could order by and we're going to order by startTime and order by startTime ascending because we want to have the closest starting ones first. And we also want to grab additional information with listeningParties. So we want to grab the listeningParties with the podcast and the episode. So we can say with and we'll say episode.podcast. So we're grabbing all the listeningParties where they are active. We're ordering them by the startTime ascending and then also grabbing the information of their episode and their podcast information.

We're ordering them by the start time ascending and then also grabbing the information of their episode and their podcast information. So we can start with here. Maybe we'll switch this up. Still have like a min height of screen and instead of having that gray background, let's have a emerald background of 50 and we'll still have it as flex and flex-col so that we can have these two items that are separated and we can set like a padding of top of 8. Let's go ahead and say that this is the top half, you know, the create new listening party form.

Let's go ahead and say that this is the top half, you know, the create new listening party form. Okay. So that's looking pretty good. Instead of this, let's just got this and we'll say that this is flex and we can put these items center. We'll justify center and have a padding of four. And then this is where we can have a div with a class of width full. We can set the max width to large. We'll go ahead and add another div here and another div here to kind of round that out.

We can set the max width to large. We'll go ahead and add another div here and another div here to kind of round that out. So we can see here that that's looking pretty good. We have that background color now and everything is looking good here. But why don't we put this into its own card itself? And we can do that while we put them with the full and max width of large here so that we can have a card that is the... Maybe we'll just take the default of the card because it's going to stretch to the max width first. So we can have XCard and we'll wrap that here.

first. So we can have XCard and we'll wrap that here. XCard. Okay. That's looking pretty good. Now the card components, we can set specific shadow or we can set specific round. So if we wanted to say like shadow equals large here, maybe that would look good and maybe we rounded equals large as well. Yeah, I like that. Now why don't we have a title for this card?

Yeah, I like that. Now why don't we have a title for this card? We have an H2 with a class of text-xl, font-bold, maybe we'll change it up and this will be the serif font. We can say text-center and then we'll set a margin-bottom of 6. Actually instead of a margin-bottom, one of the things I like to do is I like to, and we'll call this maybe let's listen together. So I think the title or the name of this application that we'll be creating is going to be called audio, A-W-W-D-I-O. And so we can have this phrase of let's listen together.

audio, A-W-W-D-I-O. And so we can have this phrase of let's listen together. Let's create these listening parties together. And so instead of putting a margin-bottom, I always like to put margin-top. I always like to kind of move the thing that I'm putting the class in, especially when it comes to tailwind classes. So maybe we'll put a margin-top of six. Okay, that's looking pretty good. Now we have this form here, space-y of six, all that looks pretty good. And for this button, maybe we'll have this button stretch across the entire card so we

Now we have this form here, M-Y-6, all that looks pretty good. And for this button, maybe we'll have this button stretch across the entire card so we can say class with the full. Now why don't we start displaying the existing listening parties. So this is the existing listening parties. And we'll go ahead and set a div. And just to start off, maybe we'll have a class of M-Y-20, so separating the top and the bottom. And let's go ahead and just start listing off the parties that we have. So what we can do is we can say if there are no listening parties, so in this case,

And let's go ahead and just start listing off the parties that we have. So what we can do is we can say if there are no listeningParties, so in this case, if listeningParties is empty, and it looks like we're setting listeningParties like this. That's one way to do it. One of the things I like to do if I'm in a Livewire component, I like to have it camel case instead of snake case. We already have things like the listeningParty up here. So now we have listeningParties. So we'll say if listeningParties is empty, why don't we just show like a no audio listening.

So now we have listeningParties. So we'll say if listeningParties is empty, why don't we just show like a no audio listening parties started yet. Maybe we'll say a sad emoji face. There we go. Else, and now here is where we can loop through all the listeningParties. So we'll say foreach listeningParties as listeningParty. We have a WireUI component for x-dash, I believe it's called avatar. And why don't we set a div where we can say the wire:key is listeningParty.id.

And why don't we set a div where we can say the wire:key is listening to partyId? Okay. Yeah, that's looking pretty good. And then we can have the x-avatar and we need the src is going to be the listeningParty.episode.podcastArtworkUrl. And we can set that. We don't need the class just yet. Maybe we'll go ahead and show we have the listeningParty.name. We have the episode.title. So we can say, and just so we can set this, maybe we'll put this in its own paragraph.

We have the episode title. So we can say, and just so we can set this, maybe we'll put this in its own paragraph tag. And then we have paragraph of listening party. Hmm. Is it called episode title? Yep. And then let's duplicate this because we have episode party podcast title, and then we'll have the start date as well. So listening party or start time, I should say start time, and then we can say, and for

have the start date as well. So listening party or startTime, I should say startTime, and then we can say, and for each if statement, and let's see what we have so far. Okay. Attempt to read property title on null. Okay. Let's see. We have episodeTitle and podcastTitle. It's because it's not the listening party podcast, it's listening party episode podcast. So if we did want to grab the podcast that's associated to a listening party, even though

It's because it's not the listening party podcast, it's listening party episode podcast. So if we did want to grab the podcast that's associated to a listening party, even though it's not directly associated, Laravel Eloquent does have some awesome parameters to be able to say, okay, this is associated through another model. In this case, it's associated through an episode because a listening party has an episode which has one podcast that's associated to. So it's not a direct relationship in that sense, but in listening party, we could say that public function podcast would be hasOneThrough. In this case, we always are going to return this has a podcast through an episode, and we need to pass in the parameters of those foreign keys as well as the local keys.

In this case, we always are going to return this has a Podcast through an Episode, and we need to pass in the parameters of those foreign keys as well as the local keys. So we can say this returns, this has one through, and then we can say the Podcast class, the Episode class, but then we also need to pass in the first key, second key, local key, and second local key. So we'll pass in the ID, the ID, which is the second local key, podcast_id, or oops, episode_id, and the podcast_id. So the related through the Episode first key is the ID, which is the foreign key on the Episode class or the episodes table. The second key, which is the second key, should be the ID on the podcast table.

episodes class or the episodes table. The second key, which is the second key, should be the ID on the podcast table. Then we have the episode ID, which is this first local key and the podcast ID, and that should give us what we're looking for. There we go. So without having to change any of our dashboard view, now we have the ability to say, here's the listening parties podcast. So an easier way to do that instead of having to do episode podcast.