One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
14. Keeping track of the checkbox count

Episodes

0%
Your progress
  • Total: 1h 17m
  • Played: 0m
  • Remaining: 1h 17m
Join or sign in to track your progress

Transcript

00:00
Let's go ahead and add a counter to show how many checkboxes have been checked. And of course, we want this value to stay up to date when other people check checkboxes as well.
00:10
OK, so let's go ahead and really quickly add this in and then we'll talk about some of the limitations based on what we're doing. So I'm just going to create out a div here and say flex with item center and justify between.
00:24
We're going to have our count just here. And then over the other side, we'll have our go to box when we build it. Let's go and just set a margin bottom here of six. And yeah, I think that's OK.
00:37
So remember a little bit earlier within our props, we passed the count down from our home controller based on our checkboxes class. This contains with that Redis command how many items are actually checked. So we can just very easily pull this value directly into here.
00:57
Let's go ahead and grab that count. And as you can see, we've got 34 checked. If I check one and refresh the page, it ends up at 35. So this is working nicely.
01:06
But of course, we want this to react in real time. Now, the only problem that we've got is ideally we would take these items here. We would count how many were checked and we would use that to output the value. But we know we're not using a ref, so we can't base this on any kind of reactivity.
01:23
Instead, what we can do is create out a ref which contains that count from our props, and we can update this whenever the state changes, so not the ideal solution, but it will always stay up to date. So let's go ahead and create our account
01:39
variable in here, make this a ref and grab that from our props. This will go ahead and override what we've got here. But now when we check something and update that value, it's going to react. So where do we update this count?
01:53
Well, we want to do it when an item state changes. So effectively, we want to either increment or decrement this based on the value of checked. So let's go ahead and say count value.
02:06
And we're going to add onto this based on whether we have a checked value or not. If we have checked a box and our state changes and we checked it, we're going to add one. Otherwise, we're going to add minus one,
02:17
which is effectively the same as subtracting one. So now when we go over and we check one, you can see that this keeps up to date. Now, because we're using that same method within our real time listener for when we whisper, this is now going to keep
02:34
everything up to date for us. And of course, when we refresh, we get exactly the same thing. So not great, because ideally we'd count on the ref of things, but in this case, it works really nicely.

Episode summary

In this episode, we add a counter to show how many checkboxes are currently checked. We walk through creating a little UI section with flex styling to display the count, and discuss how this count should update both when you interact with checkboxes yourself and when other users do the same in real time.

We cover how the count value gets passed down as a prop from the controller, and why it's important that it stays updated—especially in collaborative scenarios. To keep things reactive, we use a ref for the count and make sure to increment or decrement it when any checkbox state changes, so it always reflects the correct number.

Finally, we show how this ties into our real-time updates so everyone sees the same count, even without refreshing. We also note a little limitation: ideally, we’d calculate the count based on the state of our checkboxes ref, but since we don’t have that in this setup, the workaround still gets the job done!

Episode discussion

No comments, yet. Be the first!