1
00:00:01,080 --> 00:00:04,440
‫Let's now make our application feature complete

2
00:00:04,440 --> 00:00:08,733
‫by adding a button to clear up the entire list at once.

3
00:00:10,170 --> 00:00:13,830
‫And so, to do that, let's come down here,

4
00:00:13,830 --> 00:00:15,780
‫and after the select,

5
00:00:15,780 --> 00:00:18,840
‫we're going to add a simple button.

6
00:00:18,840 --> 00:00:21,150
‫So, not like that,

7
00:00:21,150 --> 00:00:25,470
‫but button, "Clear list."

8
00:00:25,470 --> 00:00:26,760
‫So there it is.

9
00:00:26,760 --> 00:00:28,230
‫And now, as always,

10
00:00:28,230 --> 00:00:30,660
‫we need to add the onClick event handler,

11
00:00:30,660 --> 00:00:32,130
‫and then we need a function

12
00:00:32,130 --> 00:00:37,130
‫that basically deletes all of these elements here at once.

13
00:00:37,320 --> 00:00:40,530
‫Now, I think that this might be a nice challenge for you,

14
00:00:40,530 --> 00:00:43,500
‫so creating that function that deletes everything,

15
00:00:43,500 --> 00:00:46,410
‫and then passing that function down to this component

16
00:00:46,410 --> 00:00:48,720
‫and adding it here onto the button.

17
00:00:48,720 --> 00:00:51,090
‫So that shouldn't be all too hard.

18
00:00:51,090 --> 00:00:54,480
‫And so, please go ahead and pause the video right now.

19
00:00:54,480 --> 00:00:56,280
‫So try this on your own really,

20
00:00:56,280 --> 00:00:59,040
‫as this is a really nice learning experience.

21
00:00:59,040 --> 00:01:02,460
‫And then I see you back here in a minute, or five,

22
00:01:02,460 --> 00:01:04,623
‫once you are finished with that task.

23
00:01:06,540 --> 00:01:07,473
‫Okay.

24
00:01:09,030 --> 00:01:12,120
‫So, I will create a function

25
00:01:12,120 --> 00:01:13,893
‫close to all the other functions.

26
00:01:14,790 --> 00:01:19,260
‫So we have handleAddItems, Delete, and Toggle.

27
00:01:19,260 --> 00:01:22,323
‫And so, we simply add just another one.

28
00:01:23,190 --> 00:01:25,007
‫So handleClearList,

29
00:01:27,600 --> 00:01:29,433
‫which doesn't need anything really.

30
00:01:31,869 --> 00:01:33,600
‫And then, all we need to do here

31
00:01:33,600 --> 00:01:35,077
‫is to simply say,

32
00:01:35,077 --> 00:01:38,970
‫"Set items back to the original value,"

33
00:01:38,970 --> 00:01:41,463
‫which was of course this empty array.

34
00:01:42,390 --> 00:01:43,650
‫And that's it.

35
00:01:43,650 --> 00:01:46,560
‫So that's almost too simple.

36
00:01:46,560 --> 00:01:50,490
‫But now we just need to connect this function to the button.

37
00:01:50,490 --> 00:01:53,130
‫So, that button is in the packing list.

38
00:01:53,130 --> 00:01:56,220
‫So that's where we pass this into a prop.

39
00:01:56,220 --> 00:01:57,100
‫So onClearList

40
00:02:00,930 --> 00:02:03,423
‫will be handleClearList.

41
00:02:05,580 --> 00:02:07,743
‫And so now let's get that.

42
00:02:10,710 --> 00:02:14,673
‫So this packing list really receives a lot of props.

43
00:02:17,040 --> 00:02:18,420
‫And,

44
00:02:18,420 --> 00:02:19,383
‫so then here,

45
00:02:21,212 --> 00:02:22,380
‫the onClick prop.

46
00:02:22,380 --> 00:02:25,110
‫And here we don't even need to create a new function.

47
00:02:25,110 --> 00:02:28,374
‫All we have to do is to pass this one in.

48
00:02:28,374 --> 00:02:32,550
‫So onClearList.

49
00:02:32,550 --> 00:02:35,430
‫Give it a save, and that should be it.

50
00:02:35,430 --> 00:02:39,930
‫So clear list and yes, everything is gone.

51
00:02:39,930 --> 00:02:40,763
‫Great.

52
00:02:42,420 --> 00:02:46,173
‫So, I'm hoping that you did this as well.

53
00:02:47,370 --> 00:02:49,260
‫And now just one more thing here,

54
00:02:49,260 --> 00:02:51,000
‫is that here in this demo app,

55
00:02:51,000 --> 00:02:52,710
‫is that here we prevent the user

56
00:02:52,710 --> 00:02:55,410
‫from accidentally deleting everything.

57
00:02:55,410 --> 00:02:58,110
‫So here, when they click on clear list,

58
00:02:58,110 --> 00:03:01,290
‫first we get if we want to delete all the items,

59
00:03:01,290 --> 00:03:04,020
‫and only then if we click on okay,

60
00:03:04,020 --> 00:03:05,523
‫everything will get deleted.

61
00:03:06,900 --> 00:03:08,973
‫So you see, now it is empty.

62
00:03:09,990 --> 00:03:12,090
‫So let's quickly do the same thing here.

63
00:03:12,090 --> 00:03:13,590
‫And that's pretty easy

64
00:03:13,590 --> 00:03:17,280
‫because that's just a standard dumb function.

65
00:03:17,280 --> 00:03:20,520
‫So that's a function that's not really part of JavaScript,

66
00:03:20,520 --> 00:03:23,280
‫but it's part of the web API.

67
00:03:23,280 --> 00:03:28,020
‫But anyway, here we can create some variable.

68
00:03:28,020 --> 00:03:29,430
‫Let's say confirmed.

69
00:03:29,430 --> 00:03:32,550
‫And then that confirmed will be defined

70
00:03:32,550 --> 00:03:36,420
‫by window.confirm.

71
00:03:36,420 --> 00:03:38,673
‫So here we can then pass in any string.

72
00:03:40,320 --> 00:03:42,240
‫So that's going to be the the message

73
00:03:42,240 --> 00:03:43,860
‫that the user will see.

74
00:03:43,860 --> 00:03:48,737
‫So "Are you sure you want to delete all items?"

75
00:03:50,310 --> 00:03:53,580
‫And then when the user clicks on "Okay"

76
00:03:53,580 --> 00:03:55,320
‫confirmed will become true,

77
00:03:55,320 --> 00:03:57,690
‫and in the case they click "Cancel,"

78
00:03:57,690 --> 00:03:59,040
‫then it will be false.

79
00:03:59,040 --> 00:04:01,950
‫And so now we can do this conditionally.

80
00:04:01,950 --> 00:04:06,300
‫So we just say if confirmed

81
00:04:06,300 --> 00:04:08,853
‫then set items to the empty array.

82
00:04:09,960 --> 00:04:12,270
‫Just to make sure, let's reload

83
00:04:12,270 --> 00:04:16,410
‫and shorts and a charger,

84
00:04:16,410 --> 00:04:18,123
‫and now when I clear the list,

85
00:04:19,080 --> 00:04:23,310
‫then, yes, we got to confirm and it works beautifully.

86
00:04:23,310 --> 00:04:25,680
‫Now maybe you got a little bit annoyed

87
00:04:25,680 --> 00:04:29,010
‫at all the scrolling that we had to do here now lately

88
00:04:29,010 --> 00:04:32,100
‫because our components were getting bigger and bigger.

89
00:04:32,100 --> 00:04:35,340
‫So whenever we wanted like to pass in something here

90
00:04:35,340 --> 00:04:38,490
‫then we had to scroll all the way down here

91
00:04:38,490 --> 00:04:42,090
‫to then accept, for example, these props right here.

92
00:04:42,090 --> 00:04:43,800
‫And so that's why I said

93
00:04:43,800 --> 00:04:45,180
‫in the very beginning

94
00:04:45,180 --> 00:04:46,980
‫that in real world applications

95
00:04:46,980 --> 00:04:49,890
‫we usually have one component per file.

96
00:04:49,890 --> 00:04:52,650
‫And so in the next lecture I will show you a trick

97
00:04:52,650 --> 00:04:56,670
‫of how we can basically divide this one file

98
00:04:56,670 --> 00:04:58,440
‫into multiple files.

99
00:04:58,440 --> 00:05:00,303
‫So one file per component.