In this chapter, I want to wrap up some final improvements for our app. Hey there, Antonio from Post Production here. We are actually not going to include all elements from this list. We are going to fix the responsive network, but we will not protect the videos get one if not public. The reason for this is that it will add unnecessary complexity to the current state of our project.
So instead what we are going to do is we are going to treat private videos as unlisted videos, meaning that they are going to be private in the sense that they will not be searchable on our app, but whoever has the link, assuming that the creator has shared it with them, we'll be able to see the video. As per the loading.dsx pages note, which I have added here, we're not going to do that either. That is because this will ironically slow down our app. Even though when I was recording this I was convinced that it's actually going to be faster. This turns out to not be true in deployment.
For that reason I will leave small parts of me attempting to do some of these things, simply so you are aware that in the past, in my first iteration of this video, I actually did have loading pages. But I will then later on instruct you to delete all of them. For that reason, to reduce the complexity, I'm telling you to not do them at all. I will once again add a post recording like this one to instruct you to not add those loading pages. And now back to the original chapter.
Fact that our navbar is not that responsive. For example, if I were to collapse this into mobile mode, you'll see that this logo completely pushes this side. So let's go ahead and quickly fix that by going inside of home navbar Inside of modules home UI components home dash navbar index and for the link simply give it a class name of hidden MD blocked And now on the mobile it's going to be hidden. You can also try how it looks when you're logged in. Just a second.
There we go. Looks just fine. Now we also have the studio here, which doesn't exactly cause any problems, but let's be consistent by going inside of studio navbar, which you can find inside of studio, UI components, studio navbar, and do the same thing here. Give it a class name, hidden, and the block. There we go.
So now it should only appear on desktop and same thing should happen here. Let's talk about group by. So this was one discussion topic that I had. I wasn't sure why I put group by here initially, but then later on, I didn't need it. And I discovered why.
And I just want to talk to you about it. So you have a clear mind as well. The thing is, when you use aggregated attributes inside of your select, which are counts, right? Something that isn't a linear example. You have to group by all other fields in your select, which are not aggregate methods, right?
So for example, here's what you can find inside of drizzle ORM when you go to aggregate helpers. Remember, aggregation functions are often used with group by clause of their select statement. So if you're selecting using aggregating functions and other columns in one query, make sure to use the group by clause. For example, here they're using a value count, but if they also added user ID and then value, they would have to group by user ID. But we are not using this count method.
So because of that, we don't need the group by. So this group, this count method is a special util, which is a wrapper around the count. And it's a very flexible operator, which can be used as is or as a sub query. So with this example, if I understood correctly, we don't need group by, and I mean, we obviously don't need it because otherwise you get a bunch of errors. For example, if I search for group by, there is one place where we are using it instead of the replies in the comments.
For example, let's find a video and let me try and add, I have a comment here, great. One reply, I have to be logged in. So let me just do that first. I will reply, hey this is a reply, like this. And now it says one replies here, right?
So if I were to go inside of my comment server procedures and remove the group by method, no errors in lint here, but we do get an error here. And that is because comments parent ID must appear in the group by clause because we are mixing it with an aggregate method right here. So we need to add this. And now let's talk about this adding loading.tsx to pages. This is not required, you know, you're already finished with the project, but Next.js definitely prefers having loading.js, specifically because you can show an instant loading state.
Now, we technically do this. If you scroll down, we use suspense, right? We use manual suspense boundaries for our own UI components. So that works fine, right? But this is what worries me.
In a few of our components, like videos, video ID, the dynamic ones, right? You can see that we await something and even though this is instant, like less than a millisecond, This technically could be sped up if we could immediately show the loading, because what will happen if you don't use loading pages, your user will click on your link and the redirect will appear frozen. So what I suggest we do is just learn how to create one loading.dsx and then you can go ahead and decide whether you want to add that anywhere, everywhere else. So it should actually be quite simple. You can go inside of Video ID and add loading.dsx.
Hey there, Antonio from Post Production again. I wanted to include the previous clip so you have an idea of what I keep referring to when I say a loading file. It's loading.tsx that I'm referring to. We are not going to use this file. More so in fact in the next chapter I would simply instruct you to delete all of them.
But I have decided to edit this in post-production because adding the loading files it's a 20-minute process. So I just said okay I'm not gonna waste your time I'm just gonna tell you ahead of time we are not going to need them. Adding them wouldn't exactly do anything dangerous but we can make our app much, much faster by not using them and instead by adding the prefetch prop to our link components from next slash link. So let's go ahead and do that instead. What I'm going to play next is a clip from my optimization chapter, which I have decided to simply join in this video.
And the second thing you're going to do is you're going to search using command shift F or control shift F and you're going to search for link. And make sure you click this so it only includes the capitalized link which is our link component. And then you're going to click on this little arrow and you're going to replace link and simply add prefetch here. So make sure that you add space here. So this is how all the changes should look like.
Make sure that this prefetch doesn't accidentally connect with your href, which is not exactly possible if you have a space here. If you want you can add an extra space just to be safe. So all of them should have prefetch and click this and this should replace all of them. So there is another bug which I have noticed, which I think we can fix before deployment. Let's go ahead and clean up our entire project.
So what I did is I go into videos and I selected all of my videos and I deleted all of them. So I have no comments. I only have playlists and some subscriptions, as well as some users, but nothing regarding video, playlists or comment relations, right? So just go ahead and go into a random video, upload a new one and create a main comment and leave a comment. And now add a reply.
Let's call this a reply. If I go ahead and attempt to delete this, I'm going to get an error. So let's go ahead and fix that. Initially what I did is I went into my comments router, my comments procedure right here, and I thought I had to delete all the replies first. But then I remembered in my schema file, in source database schema, if I find my comments table, I have the foreign key for the parent ID, but what I forgot to do was add on delete cascade here.
Let's go ahead and add that and try again. I'm gonna shut down my studio and do Bonnex Drizzle Kit Push. Now that we have applied the changes I'm gonna start the studio again and I'm gonna refresh my app here. And let's try deleting the comment now. So just to confirm I still have a reply and inside of my Drizzle Studio here I should have two comments.
One main comment and a reply. And if I go ahead and attempt to delete the main comment, there we go, the comment has now been deleted. And if our foreign key works as it should, it should also delete the reply. We can try this again, main comment again. And let's add a reply here.
And let's add an independent comment. And let's add another reply here, independent reply for example. So right now in my comments I should have four of them. There we go. I'm gonna try and delete the entire main comment.
This should leave with an independent comment and an independent reply and let's see if deleting the reply itself works. There we go and now we just have an independent comment. I think this is a very small fix and I want to include it before deployment.