Dynamically Generating the Server and Channel Navs
Let's round out our clone by replacing all static links with the mock data file, making sure the navigation works at every step.
The code for this lesson is divided into two sections, with this you can see the progress on the code.
Instructor: [0:00] Our clone is looking great. We've been working on this Tailwind CSS server here and all this works. The navigation works. We can go forward and back. We can reload the app and all of the active states are correct, but we broke some of our nav in the process.
[0:16] If we click Next here, we'll see we have an error. We just need to update a little bit of this to make this all dynamic again. I went ahead and updated the format, just a tad of this data file. Before we were using keys for IDs for each server.
[0:31] I just made this a normal array of objects and updated the code right here to use that new format. Let's go back to Tailwind and fix these server links. These are over in our root app file. When we started, we were just iterating over this hard coded data. Let's delete this, import our data file from data. Down here, again, data is just a plain array now, so we can iterate over data for each server.
[1:10] Our server nav is working again. We can still click around here. If I click on Next, we'll see we get an error. That's because right now, we're hard-coding this channel ID of one, but each channel has a unique ID across all the servers.
[1:26] One belongs to Tailwind, but the first channel in Next is 17. Instead, we're just going to link to the first channel in each server. Server.categories, we'll grab the first category, .channels, grab the first channel, and then put the ID right there.
[1:47] If we go back, Tailwind still works. Let's try clicking on Next. Now we navigate to an actual channel in Next, but we see the channel nav here hasn't updated. Let's take a look at that. We were hard coding in just the Tailwind server right here.
[2:07] Instead of doing that, we already find the current server based on the router query. Let's just grab the server instead. Server.categories. Now they update. Finally, if I click on one of those links, we again, get an invalid URL. Let's come down and look at our channel link.
[2:28] We'll see we had hard-coded servers one right here. To get the current server -- we already have the router -- let's just come grab this code right here, paste it in our channel link, and then replace this with the current server's ID.
[2:49] We'll go back to a valid URL. Now check this out, all of our links are working again. The active state is good. We've got our descriptions right here. If we zoom out, we'll be able to see them. Our toggles are working. We can go to any of our servers. This is actually starting to feel like a real app now.