1
00:00:00,330 --> 00:00:08,040
And with our toggle functionality in place now, let's work on the removing the tau functionality where

2
00:00:08,400 --> 00:00:12,240
if I'm not interested in tau, can just remove it from the list.

3
00:00:12,720 --> 00:00:19,710
And once I remove all the words from the list, we'll set up another return where we display was left.

4
00:00:19,950 --> 00:00:24,450
And then, of course, we can fetch the horse one more time.

5
00:00:24,780 --> 00:00:28,450
Now, first we need to decide well where we are going to set up the functionality.

6
00:00:28,900 --> 00:00:30,480
The moment we are in the tour.

7
00:00:31,370 --> 00:00:38,120
Correct, but it is sitting in the tourist component and then TORC is rendered and the objective is

8
00:00:38,540 --> 00:00:41,560
not where do I have my torse data?

9
00:00:41,990 --> 00:00:43,640
And that is, of course, in the abcess.

10
00:00:44,000 --> 00:00:51,160
So it would make sense if I would have my function right here, but then where I'm going to call it.

11
00:00:51,590 --> 00:00:53,360
Well, that is going to be in every tour.

12
00:00:53,370 --> 00:00:53,660
Right.

13
00:00:54,050 --> 00:01:01,730
So we all need to figure out how we can pass the function, the remove to our function down to a or

14
00:01:01,740 --> 00:01:02,210
component.

15
00:01:02,540 --> 00:01:05,200
Because I'm here, I will need the ID.

16
00:01:05,600 --> 00:01:10,880
This is why this structure, because my function, of course, is going to be looking for Darity, because

17
00:01:10,880 --> 00:01:15,730
I would need to know which door I would want to remove from my list.

18
00:01:16,040 --> 00:01:23,960
So let's go with a function removed for now, like I said, will be looking for that as the parameter

19
00:01:24,410 --> 00:01:26,090
will pass in the ID.

20
00:01:26,510 --> 00:01:32,660
And then as far as the functionality, we're just going to go with const all name this new torse and

21
00:01:32,660 --> 00:01:33,890
that is equal to torse.

22
00:01:34,130 --> 00:01:42,440
And we just go with filter method where I say if the tour ID doesn't match beautiful, it's going to

23
00:01:42,440 --> 00:01:47,580
be placed in the new Tercera if the ID matches whenever I'm passing.

24
00:01:47,840 --> 00:01:51,330
Well, that means that that is the thought that I would want to remove.

25
00:01:51,500 --> 00:01:55,520
So of course that's why I will not place it in that new hurry.

26
00:01:55,790 --> 00:02:00,440
So say to where ID and then does not match that.

27
00:02:00,830 --> 00:02:06,440
So if that is the case, if the tour ID doesn't match the idea that I'm passing and beautiful, is it

28
00:02:06,440 --> 00:02:07,130
going to be returned?

29
00:02:07,340 --> 00:02:11,270
If it does match then it's not going to be returned in the new tourist.

30
00:02:11,270 --> 00:02:11,520
Right.

31
00:02:12,230 --> 00:02:18,170
And then of course I will call my setters and set it equal to my new torc.

32
00:02:18,500 --> 00:02:25,790
Now the next question is, well, how we can get this function down to a tour component?

33
00:02:25,940 --> 00:02:29,900
Because this is where I would want to call it, because this is where I have the button and this is

34
00:02:29,900 --> 00:02:33,770
where I have the hurry and we simply pass it as a prop.

35
00:02:34,040 --> 00:02:35,240
So I have my function.

36
00:02:35,420 --> 00:02:38,240
I just need to come up with some kind of prop.

37
00:02:38,600 --> 00:02:41,120
In this case, I will name it exactly the same.

38
00:02:41,120 --> 00:02:48,800
So removed for prop is equal to my remove to more function than I would need to the structure in my

39
00:02:48,800 --> 00:02:49,820
towards component.

40
00:02:50,180 --> 00:02:58,640
So I removed her and also pass it to her component so we can also pass functions as props.

41
00:02:59,030 --> 00:02:59,990
And let's go.

42
00:02:59,990 --> 00:03:08,360
The same name removed to our prop is equal to a remove to a function that is coming from objects.

43
00:03:08,600 --> 00:03:13,660
And then finally we go for remove to.

44
00:03:14,580 --> 00:03:19,980
Propp in the tour component, by the way, this is something called prop drilling, which we're going

45
00:03:19,980 --> 00:03:22,320
to cover later in tutorial.

46
00:03:22,710 --> 00:03:28,080
So if you're watching tutorial and then project tutorial on project, then I just want to tell you that,

47
00:03:28,290 --> 00:03:35,730
yes, there's a way around this where essentially we'll use something called Context API, but for now,

48
00:03:35,730 --> 00:03:36,390
we're good.

49
00:03:36,390 --> 00:03:38,160
We have our remove tor.

50
00:03:38,430 --> 00:03:44,910
And then finally in my button, of course, we just need to call it where I'm going to go it on click.

51
00:03:45,180 --> 00:03:51,570
Then I'll set up my inline function, of course, and then I would want to invoke my remove tor.

52
00:03:51,780 --> 00:03:59,100
But then remember Moftah always looking for what it was looking for the correct and each and every Tor

53
00:03:59,100 --> 00:04:00,190
has that unique idea.

54
00:04:00,540 --> 00:04:03,120
So just pass it into a Muftah.

55
00:04:03,390 --> 00:04:06,510
So that way I know which door I'm going to be removing.

56
00:04:06,820 --> 00:04:14,010
So I have my thoughts and you want you can check your array where once you click on not interested.

57
00:04:14,310 --> 00:04:16,190
Now the array got smaller.

58
00:04:16,440 --> 00:04:20,070
We already have only four items and we can keep on going here.

59
00:04:20,170 --> 00:04:22,310
I said not interested.

60
00:04:22,700 --> 00:04:27,660
And finally, once we remove all the tools, we should have the empty array.

61
00:04:28,140 --> 00:04:35,910
And this will be a good case where we could set up another return where if there are no more tours that

62
00:04:35,910 --> 00:04:39,060
you can display, why don't we set up a condition?

63
00:04:39,450 --> 00:04:42,330
So I'm going to navigate back to objects.

64
00:04:42,600 --> 00:04:45,390
I already have my one condition for loading.

65
00:04:45,570 --> 00:04:51,510
And then second, the default return now would want to set up another one where I'm going to say if

66
00:04:51,810 --> 00:04:57,220
and now I'm checking for tors length and if that is equal to zero.

67
00:04:57,570 --> 00:05:04,560
So essentially if I have no torse in my state value, well, what I would want to return.

68
00:05:04,770 --> 00:05:06,120
I'm going to go here.

69
00:05:06,390 --> 00:05:11,550
We return and we're going to set up our main here and inside there.

70
00:05:11,550 --> 00:05:16,370
We're going to go with Dev and I'm going to have the title and land inside of title.

71
00:05:16,380 --> 00:05:21,480
Let's go with adding to no towards left like so.

72
00:05:21,750 --> 00:05:28,340
And now it's add a button and this button will simply call the fetch torch.

73
00:05:28,560 --> 00:05:31,020
So essentially the function that fetches it.

74
00:05:31,020 --> 00:05:39,600
Or so then of course we will set up our state value afterwards back to the array that is coming from

75
00:05:39,600 --> 00:05:40,290
the API.

76
00:05:40,510 --> 00:05:47,550
So we have not is left and then right after that we're going to go with Button will go on click.

77
00:05:48,000 --> 00:05:54,630
There's going to be equal to my inline function here and let's go with fetch torc like so.

78
00:05:54,960 --> 00:06:00,330
And by the way, in this case, you can also set it up as a reference if you wanted to, since you don't

79
00:06:00,330 --> 00:06:03,110
need to invoke it with some kind of argument.

80
00:06:03,420 --> 00:06:06,780
So in here, let's write button and let's type refresh.

81
00:06:07,680 --> 00:06:16,560
Like, so what you'll notice is that once you remove on TORC, we'll refresh them, so I remove all

82
00:06:16,560 --> 00:06:17,130
the doors.

83
00:06:17,310 --> 00:06:18,870
I have no tours left.

84
00:06:19,290 --> 00:06:22,740
And by the way, I think I can add a styling here.

85
00:06:23,220 --> 00:06:27,330
So it's a class name and that is equal to a.

86
00:06:28,320 --> 00:06:30,050
It's going to be a bit more presentable.

87
00:06:30,570 --> 00:06:32,850
Now, in this case, I'll have to remove the torch again.

88
00:06:33,820 --> 00:06:39,520
We removed them from the list, I have no tours left because now, of course, our condition matches

89
00:06:39,790 --> 00:06:42,250
and I have this option of refresh.

90
00:06:42,430 --> 00:06:49,930
I click refresh and then of course, I fetch the torse from the API and display them in my torch component.

91
00:06:50,140 --> 00:06:51,820
But you do it for a second project.

92
00:06:52,090 --> 00:06:54,040
Hopefully everyone enjoyed it.

93
00:06:54,340 --> 00:06:56,020
And I hope to see your next project.