Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Show Trending Movies
Loading...
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:01 Now that everything is in place and we know what our users are searching for, we are ready to show this trending list of movies.
00:00:09 But before we focus on the UI, we need to create another AppWrite function to be able to fetch the top movies from the database.
00:00:17 So create it right below by saying export const GetTrendingMovies is equal to an async function that looks something like this.
00:00:28 This time we don't need any parameters as we'll simply fetch it from the database.
00:00:33 Let's open up a try and catch block as always in case something goes wrong, we can console log the error.
00:00:40 But in the try, we can try to fetch those movies by saying const result is equal to await database dot list documents and list them from the database with
00:00:56 the database ID and the collection ID that we pass.
00:00:59 But then we can provide an array to specify which movies we want to get.
00:01:04 Specifically, we want to limit the query to only show five movies, we don't need any more, and we can do it in a descending order.
00:01:14 So query.orderDescending, sorted by count.
00:01:20 So the ones that have the highest count will appear at the start.
00:01:23 And finally, simply return result.documents.
00:01:29 This is it.
00:01:30 This is enough for us to fetch those movies on the homepage.
00:01:33 So let's head back over to app.jsx and let's create yet another state for our movies.
00:01:41 This time we'll create trending movies.
00:01:44 So another state, trending movies, set trending movies at the start equal to an empty array as always.
00:01:54 And I know that this app is not super simple, not something that you might consider your first app.
00:02:00 It has many states, many different hooks, functions, API calls, and even databases.
00:02:07 But I really wanted you to have a real experience of what building with React is really all about.
00:02:14 This is how real apps look like, not just a single use state and then some UI.
00:02:18 Typically, it does get messy like with what we have right now.
00:02:22 So with that in mind, let's create another function right below fetch movies.
00:02:28 And let's call it const load trending movies, which will be equal to an asynchronous function where we have a try and catch block.
00:02:41 In the catch, we get the error and we can say something like, error fetching trending movies.
00:02:47 And we can also set the error message to error fetching trending movies.
00:02:51 So we know if something goes wrong.
00:02:54 Oh, but no, this wouldn't be good because currently we're checking if an error message exists.
00:03:00 And if it does, we're not even showing a regular movie list.
00:03:04 So if the trending movies are not working, this would actually break our entire application functionality.
00:03:10 And we don't want that.
00:03:12 So you see, you got to be careful with that conditional rendering.
00:03:16 So in this case, I will not set this error message here.
00:03:19 I will simply const log in.
00:03:21 And in the try, we can simply fetch the trending movies by saying const movies is equal to await get trending movies.
00:03:33 Make sure to import it at the top coming from apprite.js.
00:03:37 And then once you have it there, we can simply say setTrendingMovies to be equal to movies.
00:03:44 We're not equal, you pass it into the setter function.
00:03:46 So what do we do with those movies?
00:03:49 Well, first of all, we have to actually use this function because right now it is fully unused.
00:03:55 So what do you think?
00:03:56 What would be the best place to call this low trending movies?
00:04:01 maybe within a use effect, right?
00:04:03 Here we're fetching movies, might make sense to load the trending movies too, but not really.
00:04:09 Because if you do this, then trending movies will be refetched every single time that our current user searches for something.
00:04:16 And that'll cause too many necessary API calls.
00:04:20 So instead, we'll leave this use effect as it is with its own dependency array, and check this out, we'll create yet another use effect.
00:04:30 This time with an empty dependency array, which means that it'll only get called at the start.
00:04:36 Finally, now that we've done that, we can head over above our current all movies section, remove this margin top from the H2 because now we'll implement
00:04:46 a whole another section right below the header.
00:04:51 I'll check if trending movies dot length is greater than zero, meaning if trending movies exist, then render another section that'll have a class name
00:05:04 equal to trending.
00:05:05 And within it, render an H2.
00:05:09 where we can say something like trending movies.
00:05:13 There we go.
00:05:14 Here it is.
00:05:14 And then below it, we can render a UL, an unordered list.
00:05:20 And within it, we can map over the trending movies by saying trending movies.
00:05:26 where we get each individual movie, and we can also get its index.
00:05:31 And then for each movie, we want to immediately return an li, which is a list item.
00:05:36 And don't forget, since we're mapping over it, we have to give it a key equal to movie.$id.
00:05:44 because now it's coming from the database and typically databases start their IDs with something like dollar sign or underscore and there we can render
00:05:53 a p tag and render the index plus one because indices start at zero but this time we want to start from one and you can see that now we get one two three
00:06:04 four perfect But let's actually show something next to those numbers, like an image with a source equal to movie dot poster underscore URL with an alt
00:06:19 tag of something like movie dot title.
00:06:22 If you save this, you should be able to see different posters appear right here.
00:06:27 And it looks like I searched for Avengers a few more times than what I did for Venom.
00:06:32 So if a couple more users search for Venom, let's see what happens.
00:06:36 That was one.
00:06:38 Maybe I can delete it and then search for another.
00:06:43 And now if I reload the page for the trending movies to be reinitialized, you can see that the Venom now gets the first place.
00:06:52 Let's try to search for some other popular movies nowadays, maybe the Gladiator.
00:06:57 So if I do this and search for the Gladiator, we see it and I'll search for it a couple more times just to see whether our trending movies will properly
00:07:07 recognize it.
00:07:07 I'll reload the page and there we go.
00:07:10 Now the Gladiator is on the third place.
00:07:12 And with that in mind, believe it or not, you've done it.
00:07:16 I'll close this file and expand my browser fully.
00:07:20 And there you have it, your own movie application with a trending movies functionality.
00:07:26 Isn't this cool?
00:07:28 Not only can you search for different movies, but you can also know what is popular within your app, based on other people's searches.
00:07:36 That was awesome to learn and implement, right?
00:07:39 As an extra task for you at the end of this video, maybe you can implement loading and error states for the trending movies.
00:07:46 Remember how I said that if we change the error message here that the movies would not load?
00:07:52 Well, that's because we need a whole another loading and error state for the trending movies.
00:07:58 So right now we have the is loading as well as the error message.
00:08:03 for all of the movies, and then we have the search term, maybe we can sort it a bit better, and a movie list and the trending movie list.
00:08:11 But the better way to sort it would be to have the movie list right here, and then the error message, and then the is loading.
00:08:19 But then for the trending movies, you can also implement the error message and is loading and properly render it on the screen,
00:08:27 depending on if something fails or the time it takes to load.
00:08:31 Pretty cool little exercise, right?
00:08:33 In any case, I hope you gained a lot from this video.
00:08:36 And for some of you, things might not have yet fully clicked.
00:08:40 But that's totally fine.
00:08:41 Feel free to rewatch it and try it on your own without watching the video.
00:08:46 There's no secret formula to becoming a great developer.
00:08:49 I started the same way.
00:08:51 When I learned something new and it didn't quite make sense, I'd retry it on my own and practice it over and over and over again.
00:09:01 you can do the same and you'll start to see the results.
00:09:04 Since we're very close to the end of this video, I just want to say that if you enjoyed my teaching style, and maybe you did since you're at the end,
00:09:12 make sure to sign up to the waitlist or check out the upcoming Reacts.js Pro course to dive deeper.
00:09:17 YouTube is great, but on jsmastery.pro, I provide you with a bit more structure and exact path on what you have to learn next after you master JavaScript,
00:09:27 React, Next.js, and so on.
00:09:29 No matter where you add in your journey, I'll provide you with the next step to become job-ready.
00:09:35 But on that note, there is one thing that will surely make you more job-ready, and it's within this course, and that is the deployment of this great application.
00:09:44 Not only have I taught you how to build it, but now you want to share it with others, right?
00:09:49 It's a pretty cool app and you want to have it online and you want to show it to your friends, colleagues, or maybe even put it on your portfolio.