00:00:02 To be able to see all the questions that belong to a specific tag, let's go ahead and click on that tag, which will redirect us to a tag details page,

00:00:11 which is currently a 404. So, let's go ahead and create that route.

00:00:15 I can do that by heading over to our File Explorer, head over to App, root, tags, and then create a new dynamic route of folder id instead of square brackets,

00:00:28 and within id, create a new page.dsx.

00:00:32 Within here, we can quickly spin up a new functional component by running rifce.

00:00:37 and we can immediately extract the params as well as search params right here through the props so let's get params as well as search params and you'll

00:00:46 see the difference very quickly of a type route params to get access to params we have to make this function async so let's do that and then right here

00:00:57 we can destructure them by saying const id is equal to params and then saying const page, page size, and query are equal to search params.

00:01:12 So hopefully now you'll be able to see the difference.

00:01:14 Actually, let me visualize that for you by creating something like an h1 right here with a class name of text-white.

00:01:24 where I will render the params and I'll say ID because that's our param and below it I'll also render the search params and then I can display these three things,

00:01:37 the page, the page size and the query which are our search params.

00:01:43 And check this out, TypeScript is immediately saving our ass by saying property ID does not exist on type promise and then record of something.

00:01:52 Whenever you see that it does not exist in promise, most likely it is asking you to await it because then you're going to get the resolution of the promise.

00:02:01 So if you do it like this, immediately it'll tell you, hey, the page exists and it's a string, the ID exists too.

00:02:08 So now if you go back, you can see that we only got the params populated, which is the tag ID, but search params are empty.

00:02:16 Well, that's because just forward slash something, which is directly within a dynamic route like this, like imagine this is the dynamic ID,

00:02:25 that'll be under params.

00:02:26 but everything that is under question mark and then key value pairs such as page is equal to one and page size is equal to five well those are called search

00:02:38 params and you're going to get them through search params of course so hopefully this makes sense you get the params by simply declaring dynamic routes

00:02:47 and you get search params by defining key value pairs after the question mark in the url in this case we'll of course need both of these so it's pretty

00:02:56 exciting we can first utilize the action that we have created by saying const is equal to await get tag questions to which we can pass the tag id,

00:03:10 the most important part of id, the page which is going to be equal to the number of page or one by default.

00:03:20 We can also get the page size as well as the query.

00:03:24 Out of this get that questions you already know what we get back success data and error and now we can simply destructure the tag as well as the questions

00:03:36 coming from that data or an empty object in case something goes wrong with the data just so our code doesn't fail.

00:03:43 And now we can create the return of what we want to show when we get access to that data.

00:03:50 Believe it or not, this will be very similar to what we have on the tags page and even more similar to what we have on the homepage.

00:03:59 It is basically just the return of the search bar and some questions.

00:04:03 So for that reason, let me head over to our homepage, which is just a page under root.

00:04:08 Here we have a section with an H1 and a button, another section with a local search.

00:04:15 Home Filters and Data Renderer.

00:04:17 So let's actually get access to the entire thing.

00:04:21 And I will paste it right here within an empty React Fragment.

00:04:26 Make sure to import all of these things right at the top, from Button to Data Renderer to Home Filter and more.

00:04:32 And in this case, we're going to make it a bit simpler.

00:04:35 This section will have Flex, WFool, Flex Call Reverse, Justify Between Gap 4, And this will remain the same.

00:04:44 For H1, we can make it H1 bold and leave the same styles, but in this case, we'll render the tag name by saying tag?name to know which tag we're on.

00:04:56 In this case, we also don't need the button, so I can remove it.

00:05:01 After the section containing the title, we're going to have another section that's going to contain the local search.

00:05:07 This time, the route will be routes.tag and then we're going to pass the ID of that specific tag.

00:05:16 Image will be search.

00:05:17 We'll say something like search questions and that's it.

00:05:21 We can remove the filters because we don't need them in this case.

00:05:24 And finally, we have the data renderer where we have success, error, we display the questions that we fetch, and then we render it in the following way.

00:05:33 Margin top of 10, flex, wfull, flex call, gap6.

00:05:37 This is all looking perfectly fine to me because we are reusing this view from the homepage.

00:05:43 So, if I head back over here and click on one of these tags, such as JavaScript, check this out.

00:05:50 We have a nice looking view that has the JavaScript tag listed right here.

00:05:55 We can search across different questions and we can see all the questions associated with that tag.

00:06:02 Right now it looks exactly like the homepage, but what would happen if we asked another question?

00:06:09 That doesn't have all the same tags.

00:06:10 Let's actually create a new question.

00:06:13 It looks like I didn't use the app for some time, so it nicely prompted me to re-login, which is amazing.

00:06:18 That means that if our session token expires, we'll lose the ability to ask questions, which we should be able to do again after we log in.

00:06:26 Great.

00:06:27 I'm back in, so let me ask a question.

00:06:29 Let's actually ask a question about our own code, maybe something about the data renderer.

00:06:35 Something like, how does the data renderer component work?

00:06:37 So how does the data renderer component work?

00:06:43 We can ask a bit more detailed explanation of the problem saying, I just don't get it.

00:06:49 How does it know which data to accept and then it magically returns?

00:06:57 tags, questions, or any other collection data.

00:07:02 Pretty crazy.

00:07:05 Okay, I think this is good enough for now.

00:07:06 And we can add a tag of something like, let's do React as well as Next.js.

00:07:15 Perfect.

00:07:16 And let's ask a question.

00:07:18 Submitting.

00:07:19 Success.

00:07:20 We get redirected to the question details page, which we haven't coded out yet.

00:07:24 But if we go to home, you can now see a second question.

00:07:27 Great.

00:07:28 Has completely different set of tags than this one on the bottom.

00:07:32 So if we head over to tags now, you can see two new tags have been created, which is amazing.

00:07:37 Maybe on one of these questions, we should have duplicated a tag to see if the number of questions increments for that tag.

00:07:44 So let me actually do that.

00:07:46 I'll head over to our first one, Node.js event loop, head over to the URL bar and add edit at the top.

00:07:53 And here I will remove TypeScript and add React.

00:07:57 So now we have two questions that talk about React.

00:08:00 So if I head over here, You can see TypeScript now belongs to zero questions, whereas React was brought to the top and it belongs to two questions.

00:08:09 So if I head over to TypeScript, this is a great way to test the no-questions skeleton.

00:08:14 And there we go, it's here.

00:08:16 We have this nice illustration saying, ah, no questions.

00:08:19 You can be the first one to ask a question.

00:08:21 But if we head to JavaScript or Node, you can see the question responding to .tag.

00:08:27 And if you had to react, you can see two different questions related to that tag.

00:08:31 And you can even apply search.

00:08:33 Like here, we have the event loop.

00:08:36 So in case you want to ask about event loop, maybe a question was already there, you want to check it out.

00:08:41 Or maybe you want to know a bit more about the data renderer, you can also search across here.

00:08:46 Beautiful.

00:08:47 So our application is becoming better and better day by day.

00:08:51 With the All Questions and All Tags pages already finished, it feels like a real application already.

00:08:59 It'll be even better once we can actually get to the Question Details page to check out the question, but to complete the full circle of the usability

00:09:06 of this application, we don't just want to switch between those two pages, we want to switch between those pages and what is within the actual question details.

00:09:17 So once we implement this, the app will become even better.

00:09:21 With that in mind, great job on coming to the end of the tags module.

00:09:25 To account for our success, let's go ahead and merge it.

00:09:28 Let's go ahead and commit it by saying something like display tag-specific questions, commit, sync, and we are ready to roll.

00:09:36 Once again, great work.

00:09:38 I truly do mean it.