View Filters & Clearing Completed

[00:00:00]
>> I can already start seeing some of the kind of building patterns here with Solid. I think there's a lot of features in this demo. I think the other one that's actually probably most important here, is our ability to filter the list based on what's active and what's not active.

[00:00:21]
So, I think that's probably where I'm gonna leave the feature side and then we'll look a bit at what's actually happening in the app and understand kinda reflect a bit on Solid's reactivity here. So, let's see if we can add our footer essentially. And this footer, it kinda sneaks in underneath inside the show still, but it kinda sneaks in under the section that we had before.

[00:00:55]
We're gonna make a footer. With class="footer". And Now that we have remaining count, we can do a lot of cool stuff for the rest of this. We can span with the class="todo-count". So, now, we'll be able to kinda show how many we have left or whatnot.

[00:01:27]
So what we're gonna do is strong. We're gonna go remainingCount and then we're gonna put in here. This is some kind of text formatting stuff but for remainingCount equals one. We're gonna say, item, otherwise, we'll leave space here. Otherwise, I don't know why I chose to do those, it doesn't really matter which quotes I use but let's do these.

[00:02:14]
Item, otherwise, it's gonna say items. And then Left. So I don't know why I'm putting, it's just, Perfect, okay? So now we're toggling and we're getting our updated state. Two items, one item left. And then we're gonna add A UL here, an unordered list, and it's gonna have class filters.

[00:03:05]
And, essentially, each list item looks a bit like this. List item, and then We're gonna have an anchor tag that is going to use hash state. So it's gonna have something like Active, and then it's gonna have classList, which is gonna indicate that it's selected. Again, object selected based on, let's just call it showMode.

[00:03:48]
We don't have a name for this yet, but we're gonna add that in a second. And showMode() === "active", essentially. So, let's create that signal so it stops complaining at us a whole bunch. We, actually, need to close the anchor before I'm done. So I'm gonna put all and then close the anchor, okay.

[00:04:21]
All right get it to format it for me, okay. Yeah, interestingly enough, it's not complaining at this not being defined as of yet but that's because we haven't actually added in yet Todo items. So, we're gonna leverage that for a second because, actually, slash is going to be all.

[00:04:41]
And then we're going to basically just copy this list item over and over again to add, basically, the three different filters, right? There's All, there's Active. And the this is just Active. And then there, is it completed? Yeah, completed. All right. And let's see here. To wire this up, we're gonna need another signal.

[00:05:26]
We're gonna need to showMode, const showMode, setShowMode. And we're gonna default to all, I believe, yeah. And all we need to do here is we're gonna have to create an effect here, I believe, in order to handle the hash state of the URL. We're also gonna create the filter itself but we'll get to that in a moment.

[00:06:02]
So, let's define. I'm gonna go down here above our JSX, kind of our handler here. So location, handler, let's call it. So this is gonna be the function we call, is the event handler here. And we're going to simply go setShowMode, and we're actually gonna be able to get the current location, of the window location object.

[00:06:36]
We're gonna look at the #, and we're gonna slice the beginning off of it. And then basically if we have something there, then we're gonna use that to set the location. Otherwise, we're just gonna set it by default to all. And we're going to go window.addEventListener. That's gonna listen to our "hashchange" event.

[00:07:05]
And it's going to use our location handler that we just wrote. And then being a good citizen here, we're gonna clean up so that we can that's why we defined it separately. So that we can go window.removeEventListener for "hashchange". We're gonna remove that, remove our locationHandler.

[00:07:32]
locationHandler, okay, and then we're gonna import onCleanup. And refresh this hopefully. Fun, code sandbox automatically tried to import it for me. Okay, and. All right, now we have this and let's see what happens when I add some stuff. So we're on all, so that's good so far.

[00:08:12]
If I switched to active, it's still there, that's good. But the problems we haven't implemented the filter yet, but we at least have the controls. So, let's just continue onward and implement our filter. So, hopefully, it just works for us. But, yeah, let's implement our filter. So, here we go.

[00:08:34]
Const I'm gonna call this filterTodos, okay? And it's gonna take a list of todos and, basically, it's gonna just look at that state. So it's gonna go like if showMode() === "active", Then we're gonna return todos().filter todo where it's not completed. Right, and, else if showMode() === "completed".

[00:09:25]
We'll do basically exactly the opposite. Right. And todo's completed. And then finally, well, we can just return todos, okay. And then, our filterTodos, we still wanna show this if there are any Todos cuz we need to control the filters. But here we can just go filterTodos(todos()), all right?

[00:10:00]
And if all is good and well, hopefully now we actually get some more stuff going on. So I'm gonna cross one of these out and if I go to Active, okay, we Do not have that working quite yet. But why don't we have that working quite yet?

[00:10:44]
Todo is not a function, beautiful. Why is todos is not a function? It's my mistake. We already resolved this in the view. We already passed the values through. So, Hello world. Okay, it's actually working. It's funny, little bit of a delay there. Okay, sweet. So All, Active, Completed.

[00:11:43]
And we can see it'll toggle through all of this, okay. All right, but a bit long session here on the coding side but, hopefully, you can get a bit of an idea minus my obvious stumbles here in a Stackblitz. But we have a basic working Todo example.

[00:12:07]
I'm gonna add one last feature to kind of finish it. We're not gonna do the Edit we're going to just add the ability to clear all the Todos in the list, which is fairly simple feature that kind of sits at the very bottom of our section here.

[00:12:29]
Still inside the show, still inside the footer, right below this ul, we're just gonna to add another show component cuz we only need to show it when there are Todos, to actually remove. So I'm just gonna show, and I believe the logic here is remainingCount, not equal todos().length.

[00:13:01]
And if that's the case, cuz we only need the clear Todos when there are those, we're gonna add a button with "clear-completed". And then has an onClick={ clearCompleted }, which we haven't implemented yet. And the, button, unsurprisingly also says Clear completed, okay. So, let's implement our clearCompleted function here.

[00:13:36]
Add, remove, toggle, filter, yeah, doesn't really matter where it's going out of here, const clearCompleted. And this one, again, should just be a setTodos function where we go through our todos and we filter them based on the fact that they are completed. I'm second guessing myself now cuz I keep on messing with this but I think, yeah, we wanna keep the ones that are not completed.

[00:14:18]
So it's not todo.completed. So, if all of this is good, we should be the go, Hello World. Click on this Completed. Now we have a Clear completed button. The styles are getting a little compressed here but if we click Clear completed, it should just remove the one that's completed, okay.

[00:14:45]
So, yeah, this is about 90% of the Todo MVC example we made.