1
00:00:00,730 --> 00:00:05,080
We're not going to start to focus on updating our blog context file and adding in the ability to delete

2
00:00:05,080 --> 00:00:09,500
a blog post every time that we want to add in an additional way to change our state object.

3
00:00:09,520 --> 00:00:14,590
We're always going to go through these same two steps we're going to first add in a new function that's

4
00:00:14,590 --> 00:00:16,630
going to call our dispatch function.

5
00:00:16,630 --> 00:00:19,950
Remember dispatches how we actually make a change to our state object.

6
00:00:20,160 --> 00:00:22,450
So we're going to add in a new function down here.

7
00:00:22,690 --> 00:00:28,690
Then once we add that in we will add in an additional case to our reducer to handle the change we actually

8
00:00:28,690 --> 00:00:30,460
want to make to our state object.

9
00:00:30,460 --> 00:00:32,110
So let's get to it.

10
00:00:32,150 --> 00:00:36,670
I'm going to go back down to add a blog post right here and right underneath it all adding a new function

11
00:00:36,670 --> 00:00:39,690
called delete blog post.

12
00:00:39,760 --> 00:00:42,180
So this will also be called with our dispatch function.

13
00:00:42,420 --> 00:00:49,350
And then inside we will return a function and inside of here we will call dispatch with some object

14
00:00:49,380 --> 00:00:52,650
that's going to describe how we want to change our state object.

15
00:00:52,650 --> 00:00:57,390
So usually by convention remember we add on that type property and we'll name this kind of operation

16
00:00:57,390 --> 00:01:02,100
we want to do it do the operation we want to do here is delete a blog post so we'll give it a type that

17
00:01:02,100 --> 00:01:08,940
is a string of delete underscore blog post then we can also optionally add in a payload property to

18
00:01:08,940 --> 00:01:10,270
this object as well.

19
00:01:10,440 --> 00:01:15,540
In this case we probably want to have a payload and it will be probably the I.D. of the blog post.

20
00:01:15,540 --> 00:01:19,190
We want to delete and here's where things get a little bit tricky.

21
00:01:19,260 --> 00:01:23,530
Remember this delete blog post function like this entire big block right here.

22
00:01:23,790 --> 00:01:29,010
We are only adding in this extra step where it gets called with dispatch to make sure that the inner

23
00:01:29,010 --> 00:01:34,110
function gets access to the dispatch that is created by create data context.

24
00:01:34,230 --> 00:01:38,880
I know it's a little confusing but essentially what actually shows up inside of our components like

25
00:01:38,880 --> 00:01:43,050
the actual function that we call from a component when we want to change our data is going to be that

26
00:01:43,200 --> 00:01:44,880
inner function right there.

27
00:01:44,910 --> 00:01:48,870
That's what we are actually running inside of our different components.

28
00:01:48,930 --> 00:01:53,610
So if we want to pass an argument into this thing and describe the I.D. of the posts we're trying to

29
00:01:53,610 --> 00:01:57,010
delete we can receive it as an argument right there.

30
00:01:57,030 --> 00:02:05,190
So I'll put an I.D. like so then I can update my action object and put a payload inside there.

31
00:02:05,190 --> 00:02:10,860
Now I want to remind you really quickly that these names of type and payload you don't have to use these.

32
00:02:10,920 --> 00:02:12,630
They're just community convention.

33
00:02:12,720 --> 00:02:21,700
We could just as easily call type something like thing to do and the payload could really just be I.D.

34
00:02:21,790 --> 00:02:28,150
of post to delete pulling up to us what we name these properties again convention is to use type and

35
00:02:28,150 --> 00:02:30,050
payload OK.

36
00:02:30,080 --> 00:02:32,350
Remember any call anytime we call dispatch.

37
00:02:32,480 --> 00:02:38,920
This object will be taken by react and automatically provided to our blog producer as the second argument.

38
00:02:38,950 --> 00:02:44,060
So now inside of our switch statement we can add in an additional case inside of here we will watch

39
00:02:44,060 --> 00:02:51,630
for an action type of delete blog post and then inside this case we will make the appropriate change

40
00:02:51,630 --> 00:02:54,180
to our state and then return it.

41
00:02:54,220 --> 00:03:00,060
It's all due return states and we'll use the filter function the filter function is going to iterate

42
00:03:00,060 --> 00:03:04,470
through all the different elements inside of our state array and then run some child function that we're

43
00:03:04,470 --> 00:03:08,190
gonna pass in if we return a true value from this.

44
00:03:08,250 --> 00:03:12,350
Then the given element will be returned inside of an overall new overall array.

45
00:03:12,450 --> 00:03:16,690
If we return false then it's going to be rejected.

46
00:03:16,730 --> 00:03:21,980
So inside of here we're going to receive our blog post object and we're going to check to see if blog

47
00:03:22,040 --> 00:03:29,950
post is not equal or semi blog post dot I.D. that's better is not equal to action dot payload.

48
00:03:30,110 --> 00:03:33,220
Remember payload in this case is going to be the I.D. of the blog post.

49
00:03:33,230 --> 00:03:36,450
We want to delete so if those are not equal.

50
00:03:36,520 --> 00:03:41,620
And if that comparison is true we're going to include this blog post inside of a new version of our

51
00:03:41,620 --> 00:03:42,710
state array.

52
00:03:42,820 --> 00:03:46,780
So we're going to run that comparison for every element inside the array and then eventually return

53
00:03:46,780 --> 00:03:47,550
the results.

54
00:03:47,890 --> 00:03:52,520
And that will be our brand new state array OK.

55
00:03:52,560 --> 00:03:53,110
That should be it.

56
00:03:53,120 --> 00:03:58,310
Inside this file remember we just went through the two things that we're going to do with every additional

57
00:03:58,310 --> 00:04:02,510
change so we're going to add into our reducer anytime we want to add in some new functionality we can

58
00:04:02,600 --> 00:04:07,910
add a new function down here that's going to dispatch an object and then we're going to add in a new

59
00:04:07,910 --> 00:04:11,210
case to our reducer and that's pretty much it.

60
00:04:11,210 --> 00:04:15,110
So now to actually test this out we will go back to our next Green Dot j ust file.

61
00:04:15,110 --> 00:04:19,300
Here it is right here going to find where we import or excuse me.

62
00:04:19,320 --> 00:04:21,630
Make use of our context object.

63
00:04:21,630 --> 00:04:27,690
So in addition to the state variable and add blog post we now have an additional function of delete

64
00:04:28,080 --> 00:04:30,560
blog post anyway.

65
00:04:30,660 --> 00:04:33,900
Before we add that in I just realized we missed one tiny step here.

66
00:04:34,080 --> 00:04:35,360
Back inside a blog context.

67
00:04:35,370 --> 00:04:40,890
Down at the bottom I neglected to add in that new function we just created to our call to create data

68
00:04:40,920 --> 00:04:41,560
context.

69
00:04:41,560 --> 00:04:47,850
So let's just make sure we add that in really quickly delete blog posts like So OK that's better.

70
00:04:47,920 --> 00:04:49,430
It's now back inside of index screen.

71
00:04:49,430 --> 00:04:55,340
Now we can get access to that function and we can call that function anytime a user taps on our icon

72
00:04:55,580 --> 00:04:57,730
which will be from the touchable opacity.

73
00:04:57,730 --> 00:05:07,250
So rather than doing a console log of item I.D. we can instead call delete blog post and we'll pass

74
00:05:07,250 --> 00:05:10,740
in item dot I.D. and that should be it.

75
00:05:11,350 --> 00:05:12,490
So let's save this.

76
00:05:12,600 --> 00:05:19,070
I'll flip back over I'll add in a couple blog posts and then a tap on the delete icon.

77
00:05:19,100 --> 00:05:21,410
And sure enough they get deleted.

78
00:05:21,410 --> 00:05:24,990
Awesome and I'll test this out on Android as well.

79
00:05:25,010 --> 00:05:29,950
So there's a couple of blog posts and they get deleted to go OK.

80
00:05:29,980 --> 00:05:32,790
So once again can't say enough that series of steps we just went through.

81
00:05:32,800 --> 00:05:37,570
We're gonna repeat several times every single time they want to add in some new functionality to our

82
00:05:37,570 --> 00:05:41,110
context and update the way in which our data is handled.

83
00:05:41,110 --> 00:05:46,810
So now that we've added in the ability to delete stuff let's make sure a user can also navigate and

84
00:05:46,810 --> 00:05:51,130
take a look at a very particular blog post to sort of take care of that in the next video.