1 00:00:00,180 --> 00:00:08,970 Amazing job, and I think we can set up functionality where once we click on remove button, I would 2 00:00:08,970 --> 00:00:12,830 want to remove this particular story from my UI. 3 00:00:13,440 --> 00:00:19,980 Please keep in mind that, of course, just because we removed this particular story from the UI doesn't 4 00:00:19,980 --> 00:00:26,730 mean that we remove it from the whole API, just means that we are not displaying it on a screen. 5 00:00:27,060 --> 00:00:29,400 When I fetch a new page, of course. 6 00:00:29,550 --> 00:00:36,150 Again, I get all the stories and the way we'll set this up, we're going to navigate through context. 7 00:00:36,420 --> 00:00:36,900 Yes. 8 00:00:37,230 --> 00:00:40,970 And first thing I would want to set up is my function. 9 00:00:41,460 --> 00:00:44,760 So I'm going to go here with CONSED and we just need to come up with a name. 10 00:00:45,100 --> 00:00:48,720 My guess is going to be remove and then story. 11 00:00:49,050 --> 00:00:50,940 Now keep in mind that is not the variable. 12 00:00:51,360 --> 00:00:56,220 The variable, of course we use later when we do this projection for the time being, I'm just going 13 00:00:56,220 --> 00:00:59,560 to say remove story and I'm going to be looking for Heidi. 14 00:01:00,060 --> 00:01:01,290 So from the button. 15 00:01:02,270 --> 00:01:07,910 I'll pass in the alley and then, of course, I'll do something with that idea in my dispatch for the 16 00:01:07,910 --> 00:01:11,450 time being, will just cancel Lagarde and then I have my function. 17 00:01:11,750 --> 00:01:13,060 I just need to pass it down. 18 00:01:13,310 --> 00:01:16,550 So in the value, let's say, remove story. 19 00:01:16,910 --> 00:01:25,190 And since I would want to use it in my story, I'm going to navigate stories I'm looking for remove, 20 00:01:25,850 --> 00:01:28,640 remove and then story function. 21 00:01:29,060 --> 00:01:34,980 And then once I click on a button, the remote button, which I would want to invoke to function from 22 00:01:35,000 --> 00:01:40,080 here, let's go with unclick is equal and we're going to go with remove story. 23 00:01:40,340 --> 00:01:45,470 Now, the gotcher here is that of course, I need to go with my error function because I would only 24 00:01:45,470 --> 00:01:47,900 want to invoke it once I click on a button. 25 00:01:48,080 --> 00:01:52,670 So remove story and then I would want to pass in my I.D.. 26 00:01:52,940 --> 00:01:53,990 Now what is my idea? 27 00:01:54,380 --> 00:01:59,990 Because that is the object, Kirk, since that was the property. 28 00:02:00,320 --> 00:02:01,700 So of course, if you want. 29 00:02:02,720 --> 00:02:09,020 You can give it some kind of alias, but I think in my case, I'm just going to stick with this particular 30 00:02:09,020 --> 00:02:17,960 property, the object here, remove story and let's pass an object and will navigate the bigger screen 31 00:02:18,710 --> 00:02:21,320 just so I have a clearer view. 32 00:02:21,680 --> 00:02:30,920 And if I take a look at the console, I should see every time some kind of idea once I click on remove 33 00:02:30,920 --> 00:02:31,290 button. 34 00:02:31,340 --> 00:02:34,120 That's awesome, because now I have that idea. 35 00:02:34,400 --> 00:02:36,170 I just need to set up the functionality. 36 00:02:36,650 --> 00:02:38,530 So I'm going to have to get back to the context. 37 00:02:38,560 --> 00:02:42,020 Yes, my initial structure is in place. 38 00:02:42,350 --> 00:02:44,210 So now of course, let's dispatch an action. 39 00:02:44,660 --> 00:02:47,930 So let's say dispatch and we'll pass in again. 40 00:02:47,930 --> 00:02:50,840 The object type is remove story. 41 00:02:50,970 --> 00:02:52,070 That's my variable name. 42 00:02:52,310 --> 00:02:55,880 And then as far as the payload, well, I'll pass in the same idea. 43 00:02:56,060 --> 00:02:59,320 So payload is equal to my idea. 44 00:02:59,660 --> 00:03:00,410 I'll save it. 45 00:03:00,620 --> 00:03:05,660 And then the last step is just navigating to reduce address. 46 00:03:05,990 --> 00:03:09,610 And of course, we would want to handle it in here as well. 47 00:03:10,040 --> 00:03:12,770 Let's keep on scrolling without such stories. 48 00:03:12,920 --> 00:03:17,930 And then we have defo so in between we're going to go with case and then what is the case? 49 00:03:17,960 --> 00:03:20,260 Well, that is removed story. 50 00:03:20,360 --> 00:03:20,900 Correct. 51 00:03:21,200 --> 00:03:26,690 And then as far as the functionality, again, the same thing that are not so spread out all the values 52 00:03:26,840 --> 00:03:27,500 in the state. 53 00:03:27,860 --> 00:03:29,210 And then as far as the head. 54 00:03:30,130 --> 00:03:35,720 All right, away, do the functionality where I'm going to set new value for my hits. 55 00:03:35,740 --> 00:03:36,170 All right. 56 00:03:36,370 --> 00:03:41,590 How it is going to be equal to state hits and then filter. 57 00:03:41,840 --> 00:03:45,330 So I want to filter out my current hits again. 58 00:03:45,340 --> 00:03:50,860 Keep in mind, in some cases, we're doing the functionality above the return where I was setting up 59 00:03:50,860 --> 00:03:52,780 explicit variables. 60 00:03:53,020 --> 00:03:53,650 In this case. 61 00:03:53,650 --> 00:03:59,820 I'm just doing it where I'm spreading out the object and then I'm setting the new value for it. 62 00:04:00,340 --> 00:04:02,110 That is really a preference. 63 00:04:02,380 --> 00:04:07,990 So I'm going to go with a filter here and then I'm going to look for my story. 64 00:04:08,440 --> 00:04:15,430 And then if the story object ID doesn't match my payload beautiful, that story will be returned. 65 00:04:15,760 --> 00:04:18,890 If the ID does match, then of course I would want to remove it. 66 00:04:19,120 --> 00:04:25,030 And again, the reason why we're doing this somewhat fast, because we have done that already quite 67 00:04:25,030 --> 00:04:27,840 a few times in our course. 68 00:04:28,180 --> 00:04:29,830 So we're going to go with a story. 69 00:04:29,830 --> 00:04:35,320 And then the gotcha here is that, of course, the property name is Object ID. 70 00:04:35,620 --> 00:04:38,680 So don't set this up, Heidi, because it's not going to work. 71 00:04:38,950 --> 00:04:49,450 We go with object and then uppercase ID and if the ID doesn't match my payload, only then return that 72 00:04:49,450 --> 00:04:49,940 story. 73 00:04:50,140 --> 00:04:57,940 So action and then going to navigate the bigger screen and then notice how nicely can remove stories 74 00:04:58,240 --> 00:04:59,140 from the UI.