WEBVTT

1
00:00:00.825 --> 00:00:04.466
Let's implement the confirmed
guest filtering function.

2
00:00:04.466 --> 00:00:06.766
We'll want to turn our filter on and off,

3
00:00:06.766 --> 00:00:10.861
which suggests we want to put a Boolean
on the state as we've done before.

4
00:00:10.861 --> 00:00:14.757
So far we've been working with
the state of individual guests.

5
00:00:14.757 --> 00:00:16.711
Well, now we want to filter guests, so

6
00:00:16.711 --> 00:00:19.573
we'll need to treat the collection
of guests as a whole.

7
00:00:19.573 --> 00:00:24.854
This means our new filter Boolean will sit
outside of the guest array in the state.

8
00:00:24.854 --> 00:00:28.772
So in App.js,
I´ll add the Boolean to the initial state.

9
00:00:28.772 --> 00:00:33.876
I´ll call it isFiltered,
and set it to false.

10
00:00:33.876 --> 00:00:37.735
Now, I´ll write a handler to
set this property on the state.

11
00:00:37.735 --> 00:00:41.487
And this will be easier than the other
handlers we've written because we won't

12
00:00:41.487 --> 00:00:43.282
need to hunt through the guest array.

13
00:00:43.282 --> 00:00:46.032
We just have one value to worry about,
it's filtered.

14
00:00:46.032 --> 00:00:53.066
So just above getTotalInvited, I'll
create a new handler called toggleFilter.

15
00:00:57.700 --> 00:01:02.584
And inside the handler, I'll set a new
state by reversing the isFiltered

16
00:01:02.584 --> 00:01:05.355
Boolean value in a similar way as before.

17
00:01:05.355 --> 00:01:11.272
So we'll add this.setState[{

18
00:01:11.272 --> 00:01:19.642
is.Filtered: !this.state.isFiltered.

19
00:01:23.098 --> 00:01:29.905
And now I'll bind the method to the on
change events of the check box.

20
00:01:29.905 --> 00:01:35.288
So here's my check box and
right below the type

21
00:01:35.288 --> 00:01:42.476
attribute we'll say
onChange={this.toggleFilter}.

22
00:01:42.476 --> 00:01:46.477
And we also want to complete
the pattern we've been suing and

23
00:01:46.477 --> 00:01:49.778
bind the checked property
to the isFilter state.

24
00:01:49.778 --> 00:01:54.051
So let's pass checked=

25
00:01:54.051 --> 00:01:59.141
this.state.isFiltered.

26
00:01:59.141 --> 00:02:03.477
Now that our users can turn filtering
on and off, let's tackle the filtering.

27
00:02:03.477 --> 00:02:06.249
We need to do that in
the guest list component where

28
00:02:06.249 --> 00:02:08.520
all the guests are rendered.

29
00:02:08.520 --> 00:02:12.905
So let's scroll down to
the guest list component and

30
00:02:12.905 --> 00:02:15.902
pass the isFiltered value into it.

31
00:02:15.902 --> 00:02:20.526
I'll add a new prop to isFiltered and

32
00:02:20.526 --> 00:02:25.309
set it to this.state.isFiltered.

33
00:02:28.088 --> 00:02:31.040
So now inside GuestList.js,

34
00:02:31.040 --> 00:02:35.817
let's first add it to
the PropType declaration.

35
00:02:35.817 --> 00:02:39.601
Let's see, isFiltered

36
00:02:39.601 --> 00:02:44.832
PropTypes.bool.isRequired.

37
00:02:44.832 --> 00:02:48.620
And to do the filtering,
we can use the filter array method.

38
00:02:48.620 --> 00:02:51.708
Since it returns a new filtered array,

39
00:02:51.708 --> 00:02:55.833
we can create a new line
above where we map our array.

40
00:02:55.833 --> 00:03:01.227
So right after guests, I'll create
a new line and we'll say .filter and

41
00:03:01.227 --> 00:03:06.273
you can see that the array will be
filtered first to remove elements we

42
00:03:06.273 --> 00:03:11.341
don't want to appear,
then they'll be mapped over for rendering.

43
00:03:11.341 --> 00:03:15.664
Now, we'll need to put a call back into
the filter method that will look at

44
00:03:15.664 --> 00:03:17.059
the state and decide for

45
00:03:17.059 --> 00:03:20.428
each guest whether it should
make it into the final view.

46
00:03:20.428 --> 00:03:24.510
I'll start by defining a guest parameter.

47
00:03:24.510 --> 00:03:30.187
We wanna return false from this function
if a guest shouldn't appear and

48
00:03:30.187 --> 00:03:31.871
true if they should.

49
00:03:31.871 --> 00:03:35.416
Let's start by thinking
about the isFiltered value.

50
00:03:35.416 --> 00:03:38.909
When this is true,
we confirm guest filter is on,

51
00:03:38.909 --> 00:03:42.165
meaning we want certain
guests to disappear.

52
00:03:42.165 --> 00:03:48.186
When false, the filter is off and we want
all guests to appear no matter what.

53
00:03:48.186 --> 00:03:52.253
If you think about it,
the filter is a kind of logical reversal.

54
00:03:52.253 --> 00:03:56.579
When isFilter is true,
we sometimes want to return false so

55
00:03:56.579 --> 00:03:58.835
that only some guests appear.

56
00:03:58.835 --> 00:04:03.258
And when false, we always want to
return true so that all guests appear.

57
00:04:03.258 --> 00:04:06.302
So to return true from
the filter function,

58
00:04:06.302 --> 00:04:10.675
we will need to return the opposite
of the value in isFiltered.

59
00:04:10.675 --> 00:04:14.528
So to return the opposite
of isFiltered's value,

60
00:04:14.528 --> 00:04:17.581
I can use the bang or exclamation point.

61
00:04:17.581 --> 00:04:22.341
So I'll return !props.isFiltered.

62
00:04:24.804 --> 00:04:31.437
So unlike props.isFiltered, we want to
return the actual value of isConfirmed,

63
00:04:31.437 --> 00:04:37.705
not its opposite, but we only we want
to do that if props.isFiltered is true.

64
00:04:37.705 --> 00:04:41.417
For this reason,
we'll use JavaScript's logical or

65
00:04:41.417 --> 00:04:44.089
operator to join the two expressions.

66
00:04:44.089 --> 00:04:51.401
So I'll add a double pipe
followed by guest.isConfirmed.

67
00:04:51.401 --> 00:04:56.044
Now when the expression to the left
of the or operator returns true,

68
00:04:56.044 --> 00:04:58.985
the entire expression evaluates to true.

69
00:04:58.985 --> 00:05:02.249
This is the case when isFilter is false.

70
00:05:02.249 --> 00:05:07.583
And when the left expression is false,
the right expression is returned.

71
00:05:07.583 --> 00:05:12.493
So when isFilter is true,
isConfirm will determine

72
00:05:12.493 --> 00:05:16.298
whether true or false will be returned.

73
00:05:16.298 --> 00:05:19.478
If the guest is confirmed,
true will be returned and

74
00:05:19.478 --> 00:05:23.540
the guest will be displayed,
otherwise false will be displayed.

75
00:05:23.540 --> 00:05:27.383
Go ahead pause the video to make sure that
you can follow what's happening here.

76
00:05:27.383 --> 00:05:31.777
If you need a refresher on how logical
operators work, there are some links in

77
00:05:31.777 --> 00:05:36.120
the teacher's notes including a Tree House
video looking at them in depth.

78
00:05:36.120 --> 00:05:40.098
So let's save our file and
have a look in the browser.

79
00:05:40.098 --> 00:05:44.657
When I click on the check box
to hide unconfirmed guest,

80
00:05:44.657 --> 00:05:46.795
you can see that it works.

81
00:05:46.795 --> 00:05:49.048
We now only see Nic.

82
00:05:49.048 --> 00:05:53.589
Now if I click off and
confirm another guest,

83
00:05:53.589 --> 00:05:57.900
now we see two guests
appear on the screen.

84
00:05:57.900 --> 00:06:02.006
I can even uncheck one of the guests and
they will disappear.

85
00:06:02.006 --> 00:06:05.720
Next up, let's allow users to
add new guests to the list.