Anyways, let's knock some of these out. Once again, I generally prefer pull requests before issues. How about addChannelFilterDropDownViewComponent? Alright, so this PR adds a small view component that adds a drop-down filter for channels to the navbar. Now, we already have that, so he's referring to this, and I'm assuming what they've done is made that into a view component to make it more dynamic. I'm not sure. Let's see. So it looks like ConceptCore has requested some changes, which is fine.

Let's see. So it looks like ConceptCore has requested some changes, which is fine. Let's see what's going on. Alright, so they've added a new view component called ChannelDropDown, and if we take a look. So it looks like this takes some of what we had, but then it just extends it. So let me zoom out. So there's still a drop-down, and then we have our drop-down menu, but then it looks like they've added... Okay, so this might be, like if you have 40 different channels, maybe you can type into this input to quickly filter down to the one you want.

Yeah. Yeah. Okay, so then in the nav section, what he's done is replaced this, this drop-down, with a reference to the view component. So why don't we go ahead and pull this in. I'm just going to squash and merge it because it looks good to me. And then I'll pull in my changes, run npm run dev, because remember, they've changed the underlying view files. So if we want that reflected in our bundle, I of course need to compile that down. Let's go to Chrome.

So if we want that reflected in our bundle, I of course need to compile that down. Let's go to Chrome. Give it a refresh. Click on it. Yeah. Okay. So now this has been turned into a view component. There's only a single channel, but yeah, as you had more, yeah, it would of course filter that down. So if I type php, that would bring down any of the channels that start with php or p.

that down. So if I type php, that would bring down any of the channels that start with php or p. Now a couple things though. Because this is a view component, let's see, yeah, so if I click on that, it will toggle it. But if I click away, it doesn't leave. If I hit escape, it doesn't leave. These are things we might want to think about to make it a little more intuitive. So I'm going to switch over to code and I want to, once again, just go over that underlying code and see if there's any changes we need to make.

So I'm going to switch over to code and I want to, once again, just go over that underlying code and see if there's any changes we need to make. So let's see. I've created a channel dropdown component and at this phase, I'm really just trying to see how things work. I'm going to be fixing some formatting. This is, I think, a little bit messy. This is not how I would style the CSS. I would always want spaces there, like so. Things like this.

Open here. You get the idea. Anyways, so we are adding this class based upon the toggle and I assume at some point when you click, it will set toggle to the opposite. So it will toggle that data property, ironically. So an anchor tag called channels, when you click on it, we will update the value of toggle. So we're just making sure at this point that we understand what the code does, which is really important because if you don't take these steps to learn what the PRs do and you're a little more loose about what you merge, you may find that six months later when you go to work on the code, you don't really, you don't understand any of it because you

So we have our input here, so I click on that, and let's see. As you type into it, it is binding what you type into it to this property filter that is defined. Okay. Next, so I guess that is being referenced here when we filter the threads. Okay. So as you type into it, we are going to filter down the items that are displayed. And we'll say for each channel within the filtered threads, render an anchor tag. All right. And how do we calculate the filtered threads?

All right. And how do we calculate the filtered threads? Well, we take all of the channels that was passed in as a prop, we'll filter them down. So basically, we're going to go through each one and decide, do you get to stay or do you have to be removed from this new collection? And the Boolean will return as we get the name of the channel in lowercase, and we'll see if that includes what the user has typed in. So if I type in P, we're just going to say, all right, well, for every single channel, let's start with PHP. Does PHP include the letter P?

let's start with PHP. Does PHP include the letter P? Yes. So we're good to go. So that means this should also respond to H. Yeah, you'll see that picks it up. Now we might want to change this to say, no, we're going to filter down anything that doesn't start with H. Otherwise, any channel you have, in fact, let's just do one really quick. Oh, we already have a bunch here. Let's just php artisan cache:clear so that they take effect.

Oh, we already have a bunch here. Let's just clear the cache so that they take effect. Yeah. So now we can filter it down like so, but let's maybe write TUR. You'll see that we still pull this up, which is maybe what you want or maybe not. If we want to change that, we could say, starts with, I'll need to double check what the status is if we can use this in all browsers at this point. If not, we could add a polyfill or just use a substring or something like that. But yeah, anyways, take the current channel name and see if it starts with whatever the user has currently typed in.

I don't want to include CSS. I think for now, I might just be explicit about what we're excluding. So here, we're not going to include app.css. Once again, fonts, if we were hard-coding something, I would not exclude that. In this case, the only thing I have are things part of the Webpack bundle, so I can exclude that. Images, I'm not going to exclude. JavaScript at the moment is fine, but again, I'm just going to be a little explicit to be safe. Now, if I were to do a git status, yes, we're going to add our .gitignore file, but I also

be safe. Now, if I were to do a git status, yes, we're going to add our .gitignore file, but I also want to remove these files. So git remove that file. Now in this case, it's saying, hey, that file has modifications. You can use --cached or -f if you want to force remove it from Git. There you go. Now, if you want to see really quickly, here's our update, and then you can see that this file has been removed entirely. Okay, next, git remove public/css/app.css.

file has been removed entirely. Okay, next, git rm public/css/app.css. Whoops. There we go. And then we can remove public/fonts as well. Let's do it recursively. All right, so if we do a git status, or let's see the visual approach, here's all the changes we've made. And once again, you can see in all of these cases, these files have been removed from Git because you will compile that down yourself, either locally or on your server.

And once again, you can see in all of these cases, these files have been removed from Git because you will compile that down yourself, either locally or on your server. So we'll say here, ignore compiled assets. But now I want to give, like I said, a little hat tip here. We're not going to use this, but I still want to say thank you. So we'll say hat tip to Chinese 1904. Now in this case, it does close issue number 67. So I will say as part of this, it's going to close out that PR, because we're going to use our own approach instead. So we'll commit that and sync it up.

on the view file change, but we're no longer tracking the compiled JavaScript file. So we no longer have to add that massive file every single time to our git commit. Anyways, in this case, I will discard that, and I'll see you in the next episode.