1
00:00:01,370 --> 00:00:05,500
In this video we're going to very quickly put together our edit screen the edit screen is going to end

2
00:00:05,500 --> 00:00:07,660
up being very similar to our create screen.

3
00:00:07,660 --> 00:00:13,090
We're going to have two pieces of state two text inputs two text labels and so on.

4
00:00:13,090 --> 00:00:13,380
All right.

5
00:00:13,410 --> 00:00:18,550
So I'm gonna go back to My screen's directory inside there I'll make a new file called edit screen dot

6
00:00:18,610 --> 00:00:22,460
J.S. and then hey you guessed it for the millionth time.

7
00:00:22,500 --> 00:00:24,790
Well let's throw some boilerplate inside of here.

8
00:00:24,790 --> 00:00:26,570
So we'll get react from react.

9
00:00:27,670 --> 00:00:35,550
We'll get view text style sheet from React Native.

10
00:00:35,730 --> 00:00:39,230
We'll get our edit screen return.

11
00:00:39,250 --> 00:00:50,880
A view that has a text that says edit screen read our styles object and export default.

12
00:00:50,910 --> 00:00:52,320
Edit screen.

13
00:00:52,320 --> 00:00:54,750
I'm really curious can you type that stuff out faster than I.

14
00:00:55,080 --> 00:00:58,810
Maybe you're smarter than I and you're just going to copy pasting the stuff from somewhere else.

15
00:00:58,860 --> 00:01:02,490
Hopefully you're doing that as opposed to having to write it out every time.

16
00:01:02,490 --> 00:01:07,140
Well at any rate we've got the edit screen put together so let's pull back over to our apt jazz file

17
00:01:07,140 --> 00:01:08,960
and wire this thing up to our navigator.

18
00:01:09,140 --> 00:01:10,100
So inside of APT.

19
00:01:10,090 --> 00:01:13,270
J.S. yep let's get that import import.

20
00:01:13,320 --> 00:01:17,340
Edit screen from source screens.

21
00:01:17,340 --> 00:01:21,210
Edit screen and then wired up to our stack navigator so.

22
00:01:21,330 --> 00:01:26,520
Edit Is edit screen and that should be at hit.

23
00:01:26,550 --> 00:01:27,480
So let's save this.

24
00:01:27,480 --> 00:01:28,830
We'll do a quick test.

25
00:01:28,830 --> 00:01:34,360
Once again we have to create a post I'll add the post tap that thing.

26
00:01:34,450 --> 00:01:37,510
Tap the pencil icon and now we go to the edit screen.

27
00:01:37,510 --> 00:01:38,890
Very good.

28
00:01:38,890 --> 00:01:41,110
Now there's two things on a mention really quickly here.

29
00:01:41,140 --> 00:01:45,640
First off chances are you're noticing that having to create a blog post every time you want to test

30
00:01:45,640 --> 00:01:48,650
out this edit functionality is super tedious.

31
00:01:48,760 --> 00:01:54,640
So a way that we can get around that is to just open up our blog context remember inside a blog context

32
00:01:54,850 --> 00:01:57,230
we call create data context right here.

33
00:01:57,370 --> 00:02:02,920
And as the third argument we pass in our initial state if we want to we could actually put in some default

34
00:02:02,950 --> 00:02:06,790
blog post to appear when our application is first loaded.

35
00:02:06,790 --> 00:02:10,930
Now this might not be something we want to deploy for a production version application but it would

36
00:02:10,930 --> 00:02:13,540
definitely help out with this testing environment.

37
00:02:13,540 --> 00:02:20,350
So inside of this array right here I can put in an object with the title of test post some content of

38
00:02:20,410 --> 00:02:27,580
test content and then maybe you'd like an idea of simply one like So now anytime we load up our application

39
00:02:27,580 --> 00:02:32,760
we're always going to have one test blog post inside there so we can save this.

40
00:02:32,760 --> 00:02:36,520
And now in our application reloads yep there's our test post.

41
00:02:36,520 --> 00:02:41,530
So now to edit this thing we can very easily hit edit or see me tap on the thing and then hit the edit

42
00:02:41,530 --> 00:02:44,430
button so it definitely saves just a little bit of time.

43
00:02:45,430 --> 00:02:50,320
Now the second thing I wanna mention is that we're once again in a scenario where we've got a screen

44
00:02:51,780 --> 00:02:55,770
that needs to know what blog post it's supposed to show.

45
00:02:55,800 --> 00:02:59,640
We've already dealt with this with these show screen once before remember when we navigate from the

46
00:02:59,640 --> 00:03:01,560
index page to the show screen.

47
00:03:01,560 --> 00:03:06,960
We pass along a parameter that tells the show screen what the current I.D. or the idea the blog post

48
00:03:06,960 --> 00:03:09,990
is that the shows screen should display.

49
00:03:10,020 --> 00:03:12,410
We need to do something very similar for edit as well.

50
00:03:12,570 --> 00:03:18,000
So anytime we navigate from show to edit we need to pass along a parameter and tell the edit screen

51
00:03:18,240 --> 00:03:23,970
exactly what idea of blog post it's supposed to be displaying right here and attempt to edit.

52
00:03:23,970 --> 00:03:29,070
So to do so we need to go back to where we tap on that little Edit icon and make sure that we pass through

53
00:03:29,190 --> 00:03:34,080
the idea of the posts that we want to actually see all right.

54
00:03:34,110 --> 00:03:38,430
So back inside of my edit screen or see my show screen.

55
00:03:38,430 --> 00:03:39,900
Here it is right here.

56
00:03:40,080 --> 00:03:43,920
We can once again go down to our navigation options.

57
00:03:43,910 --> 00:03:46,920
Now in this scenario life is just a little bit crazy here.

58
00:03:46,920 --> 00:03:48,800
Remember insight of our component.

59
00:03:48,930 --> 00:03:54,270
To figure out what the idea is of inside the show screen the idea the blog posts we're supposed to show.

60
00:03:54,270 --> 00:04:00,450
We did that navigation prop and we called Get param with I.D. because our index screen told the show

61
00:04:00,450 --> 00:04:02,320
screen what blog post to show.

62
00:04:03,030 --> 00:04:08,880
So it turns out we can essentially use that exact same variable inside of the things navigation options

63
00:04:09,000 --> 00:04:15,480
because remember we get access to that same navigation prop so inside of our touchable opacity we can

64
00:04:15,480 --> 00:04:19,200
extend our navigate call as a second argument.

65
00:04:19,200 --> 00:04:27,010
We could put in an object that's going to have an I.D. property and that I.D. will come from navigation.

66
00:04:27,050 --> 00:04:31,050
I was going to write out all the text here and I'll show it to you where you can read it very easily.

67
00:04:31,050 --> 00:04:38,270
So navigation get pram I.D. like so and then I'm going to save that.

68
00:04:38,400 --> 00:04:42,690
So it wraps and you can hopefully see everything very easily on a single line

69
00:04:45,590 --> 00:04:45,930
OK.

70
00:04:45,940 --> 00:04:51,940
So once again whenever we tap on the opacity or anything inside of it we run on press inside there we're

71
00:04:51,940 --> 00:04:56,100
going to call navigation navigate we're going to pass on the I.D. of the blog post.

72
00:04:56,100 --> 00:04:58,910
We want to show it.

73
00:04:58,960 --> 00:04:59,890
So it looks good.

74
00:04:59,900 --> 00:05:04,660
So now our edit screen should be receiving the same kind of thing right here.

75
00:05:04,700 --> 00:05:10,610
We should be able to call navigation get param with I.D. and receive whatever we just pass through.

76
00:05:10,610 --> 00:05:14,710
So back inside of edit screen let's receive that navigation prop

77
00:05:17,620 --> 00:05:22,550
all then inside this text element let's just print out the I.D. of whatever blog post were supposed

78
00:05:22,550 --> 00:05:23,590
to be editing.

79
00:05:23,970 --> 00:05:34,860
So inside of here I will do navigation get param with I.D. hey let's save this we'll do a quick test.

80
00:05:34,900 --> 00:05:38,030
Remember my default blog post right here has an idea of one.

81
00:05:38,130 --> 00:05:43,930
So on my edit screen I'll expect to see edit screen dash one if everything is working as expected.

82
00:05:43,930 --> 00:05:47,680
So I'll top that thing tap on edit and there we go.

83
00:05:47,800 --> 00:05:50,640
My blog post I.D. is reflected there.

84
00:05:50,690 --> 00:05:55,030
It's now our edit screen knows exactly what it is supposed to be editing.

85
00:05:55,030 --> 00:05:56,370
Let's perfect.

86
00:05:56,410 --> 00:05:56,770
OK.

87
00:05:56,800 --> 00:05:59,860
So that's pretty much it for some initial setup on the edit screen.

88
00:05:59,870 --> 00:06:04,360
It's now just about everything else inside of here is going to be somewhat similar to our create screen

89
00:06:04,920 --> 00:06:06,980
where we're going to have those two pieces of states.

90
00:06:07,120 --> 00:06:12,730
We're gonna have our two text labels in our two text inputs as well so quick pause right here and we'll

91
00:06:12,730 --> 00:06:14,970
start working on the edit screen in just a moment.