Reactivity with SolidJS View Filters & Clearing Completed
Transcript from the "View Filters & Clearing Completed" Lesson
>> 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 Todos 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 meaning count 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 this.
[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 date. 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, Set ShowMode. And we're gonna to 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 date 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 Set Show mode, 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 Gowindow.add event listener. That's gonna listen to our hash change 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 swipe to find it separately. So that we can go window.removeevent listener for hash change. We're gonna remove that, remove our location handler.
[00:07:32] Location handler, okay, and then we're gonna import on cleanup. 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 filter Todos, okay? And it's gonna take a list of to-dos 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 where it's not completed. Right, and, else if showMode = completed.
[00:09:25] We'll do basically exactly the opposite. Right. And choose completed. And then finally, well, we can just return Todos, okay. And then, our filter Todos, we still wanna show this if there are any Todos cuz we need to control the filters. But here we can just go filter Todos.
[00:10:00] Todos, all right? 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 to do 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 Stacklet. But we have a basic working to do 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 to dos 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 URL, we're just gonna to add another show component cuz we only need to show it when there are to-dos, to actually remove. So I'm just gonna show, and I believe the logic here is remaining count, 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 unclick equals Clear Completed, which we haven't implemented yet. And the, button, unsurprisingly also says Clear completed, okay. So, let's implement our Clear Completed function here.
[00:13:36] Add, remove, toggle, filter, yeah, doesn't really matter where it's going out of here, const Clear Completed. And this one, again, should just be a set to dos function where we go through our to dos 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 to do.completed. So, if all the cities good, we should be the go, Hello World. Click on this Completed. Now we have a Clear Completed button. The stacks are getting a little compressed here but if we click Clear Completed, it should just remove the one that's not completed, okay.
[00:14:45] So, yeah, this is about 90% of the to do MVC example we made.