1
00:00:01,220 --> 00:00:05,780
Now that we've got our forum together and a button inside of here we need to make sure that our context

2
00:00:05,840 --> 00:00:11,930
has the ability to accept a brand new title in content and create a blog post out of it so I got to

3
00:00:11,930 --> 00:00:17,210
find my context directory and open up the blog context dot J J.S. file inside of here.

4
00:00:17,210 --> 00:00:21,390
We've already got an action function right here called add a blog post.

5
00:00:21,680 --> 00:00:26,110
Right now remember we are automatically generating a title whenever we call this thing.

6
00:00:26,150 --> 00:00:31,250
However because we are essentially trying to create a blog post anyways I think we should just reuse

7
00:00:31,250 --> 00:00:36,680
this function right here and have it accept the title content of some new blog post that we want to

8
00:00:36,680 --> 00:00:37,880
create.

9
00:00:37,910 --> 00:00:41,190
So we're just going to reuse the same function.

10
00:00:41,390 --> 00:00:46,150
Remember the inner function side of here is what we actually end up calling from inside of our component.

11
00:00:46,160 --> 00:00:51,020
So if you want to we can accept some arguments that will come from our component and then pass those

12
00:00:51,020 --> 00:00:53,210
through to the dispatch function.

13
00:00:53,210 --> 00:00:59,510
So I'm going to accept an argument of title and content we're going to eventually get from our create

14
00:00:59,510 --> 00:01:04,800
screen component or then add those both in to a payload property.

15
00:01:04,800 --> 00:01:10,710
So on this object I'll put in payload and I want to add in both title and content so I'll have payload

16
00:01:10,740 --> 00:01:18,300
this time around be set to an object of its own that has a title of title and a content of content.

17
00:01:18,300 --> 00:01:23,160
Now once again we're in a scenario where we have identical key and values so we can condense that down

18
00:01:23,160 --> 00:01:29,470
to just title and content like so.

19
00:01:29,500 --> 00:01:29,760
All right.

20
00:01:29,760 --> 00:01:36,010
So now when we see inside a very Newser an action of type add blog post the action is going to have

21
00:01:36,040 --> 00:01:40,230
a payload and we want to use that payload to set the title and the content.

22
00:01:40,840 --> 00:01:43,070
So inside of case add blog post right here.

23
00:01:43,210 --> 00:01:48,510
We will leave in the current ideal logic but we're going to replace the title.

24
00:01:48,670 --> 00:01:52,160
The title will now instead come from action payload.

25
00:01:52,210 --> 00:02:01,350
Title and we'll have a content property as well which will come from action payload dot content.

26
00:02:01,370 --> 00:02:07,000
Now whenever we create a new blog post we're gonna have an I.D. title and content okay.

27
00:02:07,040 --> 00:02:09,590
So that's pretty much all we have to change inside of here.

28
00:02:09,610 --> 00:02:16,180
So now we can go back to our create screen inside of create screen we can get access to our context

29
00:02:16,210 --> 00:02:21,040
once again remember we've already got the import for context right there and there's our use context

30
00:02:21,060 --> 00:02:22,540
look right there.

31
00:02:22,570 --> 00:02:31,560
So inside of one component I will call use context I'll pass in that context object and then we're going

32
00:02:31,560 --> 00:02:35,850
to get back our whole big state object and all those different action functions.

33
00:02:36,030 --> 00:02:41,670
In this case we don't care about the state object we don't care about the delete action function.

34
00:02:41,730 --> 00:02:50,200
We only care about ad blog post so I'm going to d structure out ad blog post like so then we can make

35
00:02:50,200 --> 00:02:52,460
sure that we call this with our title in content.

36
00:02:52,480 --> 00:02:58,180
Whenever user taps on the button that we placed in the last video here's our button element right here.

37
00:02:58,680 --> 00:02:59,840
I need to expand it.

38
00:02:59,840 --> 00:03:04,190
New line it just to give myself a little bit of space and I'll put in on press on their

39
00:03:07,160 --> 00:03:14,130
and inside of that arrow function we can call add a blog post and pass in our title and content.

40
00:03:14,190 --> 00:03:21,400
Add blog post and pass it title and content like so OK.

41
00:03:21,440 --> 00:03:24,330
So that should definitely at least create the new blog post.

42
00:03:24,410 --> 00:03:26,820
We are still missing one part of this equation.

43
00:03:26,990 --> 00:03:31,850
Whenever we add a new blog post we probably want to navigate our user back to the big list of blog posts.

44
00:03:32,000 --> 00:03:36,710
So we don't really have anything inside of here to handle that just yet but we can at least attempt

45
00:03:36,710 --> 00:03:41,310
to add in a new blog post and then manually navigate back over to the index list.

46
00:03:41,360 --> 00:03:42,310
Let's try that for right now.

47
00:03:42,320 --> 00:03:45,480
Just make sure that the code that we just added in actually works.

48
00:03:45,650 --> 00:03:51,050
So going to save all the files that we just changed I'll then go back over I'm going to tap on that

49
00:03:51,050 --> 00:04:00,650
plus button on the top right I'll enter a title of a new post and some content I'll then add the blog

50
00:04:00,650 --> 00:04:01,510
post.

51
00:04:01,510 --> 00:04:06,350
So that should update our listing and we can now navigate manually back over to our list of blogs by

52
00:04:06,410 --> 00:04:08,290
hitting that back button right there.

53
00:04:08,420 --> 00:04:13,790
And sure enough I do see a new post appear with my randomly generated ideas.

54
00:04:13,880 --> 00:04:15,910
All right so definitely looks like that works.

55
00:04:15,980 --> 00:04:18,200
I'll do another quick test on Android as well.

56
00:04:19,500 --> 00:04:23,360
Over here I'll put in new post at the post.

57
00:04:23,360 --> 00:04:25,190
Go back and see new post.

58
00:04:25,190 --> 00:04:25,880
Very good.

59
00:04:26,820 --> 00:04:27,090
All right.

60
00:04:27,090 --> 00:04:28,380
So now we've got that working.

61
00:04:28,410 --> 00:04:29,760
Let's take another quick pause right here.

62
00:04:29,760 --> 00:04:33,690
When we come back the next video we'll figure out some way to make sure that we automatically navigate

63
00:04:33,690 --> 00:04:36,080
back to our main index screen.

64
00:04:36,180 --> 00:04:40,790
Anytime we call add blog post so quick pause and I'll see you in just a minute.