Modifying Todos

[00:00:00]
>> So the next place that we probably wanna look at is go inside our for loop and actually kind of look at what we're doing with these elements in here. For that actually, we're gonna add a class list on our list element and let's do that. So classList, And we add some dynamic classes here.

[00:00:34]
Right now, we're just gonna add completed. And we're gonna say our element is completed if todo.completed, right? So hopefully, now when we add something like Learn Solid and we click on it, our classes should be updating. Maybe I have to save the file first. Okay. Well, we've had the set completed first, obviously.

[00:01:09]
Sorry, got ahead of myself. So far, we were only adding the styling. So we actually have to set it up so that when we click on our input on our check box, we actually toggle the completed state. So, right, we need to first set its check state to be todo.completed.

[00:01:35]
And then we should add an onInput handler to basically handle this. I'm going to just use a function in here that's going to basically call, let's call toggle, for lack of a better name, and we're gonna pass the todo.id to it, okay? So we're gonna create a toggle function.

[00:02:04]
And I'm just gonna do this top level. In different apps, you might nest this wherever you want to do it, but we have everything we need right here. So I'm just gonna go const toggle equals function and it's gonna take todo.Id. And it's gonna do this. Now, there's different ways for us to do this.

[00:02:36]
Admittedly, What I'm gonna do right here though, is I'm going to actually look up the todo essentially in the list. It's not terribly tricky here because the index and the ID aren't necessarily the same. We're gonna find it and replace it. We're gonna do this differently by the end.

[00:03:14]
Because ultimately, what we're gonna do is we're gonna go through our todos and just switch the ones that actually matched. So what I'm gonna do is I'm gonna go todos and I'm gonna switch it with, let's go todos.map and I'm gonna put todo. And then essentially, if todo.id not equal todoId then return todo.

[00:03:56]
Otherwise, todo, we're returning spread, todo, completed not todo.completed, all right. Refresh our app. And when we refresh, we'll see that we're now properly changing the state and updating our todo, okay? The other functionality that we should probably add next similarly is the ability to remove a todo and it looks pretty similar.

[00:04:55]
I'm gonna just go const remove. And again, it's gonna take a todoId and we're just gonna go setTodos and this one's a little bit simpler. We can just filter out the todo that has the todoId. todoId equals todo.id. And, Remove where are we, yeah, destroy button onClick.

[00:05:49]
Remove, and actually, no, we wanna pass the id in, so it's actually function remove todo.id, okay? Do this, do this, hello. What's my error? A sanity check. Sometimes I get the filter backwards. This is like, that's exactly what it is. Yeah, it's not todoId. Some reason in my head, yeah, it's this way.

[00:06:38]
Okay, hello. This is the very basic kind of todo mechanism that we have going on here. And let's see, we can do a few other features. One of the other ones that I wanna add is the Select All which is we need to kind of go back in and add one more input element.

[00:07:07]
Essentially, it's in our section under the show here, above here, okay. Actually, I actually missed earlier one section, didn't really affect us very much. But there should actually be a main section that wraps the whole UL and the whole thing. So let's just close that section. All right, and inside the section, there is an input.

[00:07:48]
And this input, Has class equals toggle-all. And we're actually gonna add an ID for this because we're gonna actually use a label here as well. So it's gonna have a toggle-all ID and we're gonna make it a type checkbox. And we will add the functionality to it in just a second.

[00:08:24]
Let's add the label first so that we can see it. And this is simply label for again, for not HTML, for toggle-all, all right. If everything works well when I do Hello, we should now have a kind of global check mark now that we can apply to our changes to, to all the items.

[00:08:54]
Okay, so, okay, let's add our next handler here, cuz on this input onInput, we need to. So this is our input for the toggle-all, we need to add an event which is going to let me think here. We'll just call it toggle-all and we'll define it above.

[00:09:28]
I think it's the easiest thing, okay. Const, toggle-all. All right, the important part about this event is we actually have to get the, sorry. We need the event here. We need to get the checked state of the check box. So we're gonna grab that off the target and target.checked.

[00:09:58]
And then, from here, we can basically use the check state to swap them to match. So, Then we should be able to go setTodos. And again, what we're gonna do is we're gonna map the existing todos, essentially to what we're doing here. Actually, I'm gonna get rid of these curly braces, sorry.

[00:10:35]
We can do this in one shot again todos.map. Todo, and then it should just be a matter of switching it to whatever the check state is. I'm actually gonna call this completed, essentially. And we're just going to, again spread the todo and change completed to completed, essentially. Let's see you doing, right.

[00:11:05]
Remember, parentheses around this because otherwise, it thinks those curly braces are for the function not for the object, right? And try this out. This isn't the full story though. Cuz while this will check properly and uncheck properly, this is only half the story. Cuz when I check this, this isn't checked.

[00:11:30]
So we now need to know how to drive some state so that we can make sure that our check counts are right. So what we're gonna do is this is our first opportunity to use our next primitive cuz we did we did create signal already, right? That was our first one.

[00:11:56]
Let's make a remainingCount, which we're gonna use createMemo for this one. And, yeah, let's see here what do you wanna do createMemo. We're going to basically compare. It's kind of brute force way of doing it but we're gonna compare the length of our todos versus filtering out the completed ones.

[00:12:33]
Again, there's probably many different ways to do this, but I'm just gonna completed.length. It's complete for me. All right, and then our remainingCount now should be whether this is checked or not. So going down to that input, checked is remainingCount. remainingCount, all right. What have I broken, dear me?

[00:13:16]
[LAUGH] All right, todos filter, let's make sure all our brackets match. Do we have to return something, obviously? Again, yeah, can I do this without returning something? There we go. Did I forget to import create memo or something? I bet you that's 100. That is, Yep, 100%, it says my biggest failing here, all right.

[00:13:55]
So hopefully, now when we create our Hello. It's backwards, okay, as usual, it is backwards. Why is it backwards? Let's see why it's backwards. I guess it's probably, I was trying to decide if it's a logic backwards that's here. But it's probably here that I wanna do this, that's my gut, yeah.

[00:14:38]
Just gonna double check that. Yeah, that was right. Okay, perfect, so here we go. Checked if we add more. Yeah, so we are properly working, okay.