- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:08.430 --> 00:00:11.480
In this guide, we are going to be able to connect
2
00:00:11.480 --> 00:00:15.470
our post form with our posts detail component.
3
00:00:15.470 --> 00:00:19.690
So what this means is that when a user has successfully
4
00:00:19.690 --> 00:00:23.870
created a post, then they are gonna be redirected
5
00:00:23.870 --> 00:00:26.530
to that post detail screen that we just completed
6
00:00:26.530 --> 00:00:27.547
so that they can see everything that just got published.
7
00:00:27.547 --> 00:00:32.547
So let's open up our PostFormScreen.
8
00:00:36.040 --> 00:00:39.510
And let's see where this work needs to happen.
9
00:00:39.510 --> 00:00:44.510
Now, we've already pretty much done this in the other video,
10
00:00:44.600 --> 00:00:46.910
so you may have already went ahead
11
00:00:46.910 --> 00:00:49.370
and built this in yourself, but if not,
12
00:00:49.370 --> 00:00:51.170
we're gonna do it right now.
13
00:00:51.170 --> 00:00:54.540
So there are a couple changes that we're gonna have to make.
14
00:00:54.540 --> 00:00:57.320
First and foremost is our post form,
15
00:00:57.320 --> 00:00:59.300
now needs to take in props
16
00:00:59.300 --> 00:01:02.880
because if we're going to enable the screen
17
00:01:02.880 --> 00:01:07.410
to use the navigation prop we need to tell it about it.
18
00:01:07.410 --> 00:01:09.680
So let's build out an interface here.
19
00:01:09.680 --> 00:01:12.970
So I'm gonna say interface and then this is gonna be
20
00:01:12.970 --> 00:01:15.957
my IpostFormScreenProps interface.
21
00:01:18.320 --> 00:01:22.870
And then inside of it, we're going to say navigation.
22
00:01:22.870 --> 00:01:26.270
And then this is gonna take in, it's an object,
23
00:01:26.270 --> 00:01:30.470
which is going to take in the navigate function.
24
00:01:30.470 --> 00:01:35.320
Now we have to go and we have to see what options we have.
25
00:01:35.320 --> 00:01:37.630
'Cause remember, we're not just passing in
26
00:01:37.630 --> 00:01:42.410
the name of the screen, we're also passing in some data,
27
00:01:42.410 --> 00:01:44.700
we're passing in that post object.
28
00:01:44.700 --> 00:01:49.237
So our very first argument is gonna be the ScreenName
29
00:01:50.350 --> 00:01:52.530
and that is of type string.
30
00:01:52.530 --> 00:01:55.540
And I believe we've talked about this before,
31
00:01:55.540 --> 00:01:58.250
but whenever you're creating your interfaces,
32
00:01:58.250 --> 00:02:01.890
whenever you have a function you have to pass in
33
00:02:01.890 --> 00:02:03.560
a set of key value pairs,
34
00:02:03.560 --> 00:02:06.910
the first one is gonna be the argument name,
35
00:02:06.910 --> 00:02:09.610
you're not actually going to call this name.
36
00:02:09.610 --> 00:02:11.820
This is for your own guidance.
37
00:02:11.820 --> 00:02:14.810
So you definitely could and we've done this before,
38
00:02:14.810 --> 00:02:16.200
if you had two arguments,
39
00:02:16.200 --> 00:02:20.930
you could say okay, arg one and arg two.
40
00:02:20.930 --> 00:02:23.180
And you could say that,
41
00:02:23.180 --> 00:02:25.920
but that's not really helping yourself out.
42
00:02:25.920 --> 00:02:29.470
Remember, the entire reason why we're creating an interface
43
00:02:29.470 --> 00:02:31.410
is so that as you're typing,
44
00:02:31.410 --> 00:02:33.930
and as you're calling your properties,
45
00:02:33.930 --> 00:02:37.330
you actually know the data that you're passing into them.
46
00:02:37.330 --> 00:02:40.450
So that's the reason why, for arg one,
47
00:02:40.450 --> 00:02:43.800
I'm saying I want this to be the screen name,
48
00:02:43.800 --> 00:02:45.200
and it's of type string.
49
00:02:45.200 --> 00:02:48.270
And then the next one is gonna be the data
50
00:02:48.270 --> 00:02:50.610
and that's gonna be of type any.
51
00:02:50.610 --> 00:02:53.330
And for our case in previous times,
52
00:02:53.330 --> 00:02:55.483
so when we did this on the feed screen,
53
00:02:56.720 --> 00:03:01.360
notice here that we made that second argument optional.
54
00:03:01.360 --> 00:03:06.110
And that's because we needed the ability to call navigate
55
00:03:06.110 --> 00:03:09.430
with either screen name, just by itself,
56
00:03:09.430 --> 00:03:12.780
or when when we pass the data into it.
57
00:03:12.780 --> 00:03:13.844
So it's up to you on if you wanna make that optional or not.
58
00:03:13.844 --> 00:03:18.844
But for our PostFormScreen
59
00:03:19.260 --> 00:03:20.369
we are gonna make that required,
60
00:03:20.369 --> 00:03:23.650
because anywhere in the PostFormScreen
61
00:03:23.650 --> 00:03:26.390
that is gonna use this navigation function,
62
00:03:26.390 --> 00:03:28.680
we wanna have that data there.
63
00:03:28.680 --> 00:03:31.010
Okay, so that is gonna be a function,
64
00:03:31.010 --> 00:03:32.850
and it's just gonna return void,
65
00:03:32.850 --> 00:03:35.600
which means it's not gonna return any data to us.
66
00:03:35.600 --> 00:03:37.330
We're just calling the function,
67
00:03:37.330 --> 00:03:39.540
and we're sending the user on their way.
68
00:03:39.540 --> 00:03:41.030
Okay, so that's the first thing.
69
00:03:41.030 --> 00:03:45.640
Now we need to call this inside of the function parameters.
70
00:03:45.640 --> 00:03:48.970
So I'm gonna say props and this is gonna be
71
00:03:48.970 --> 00:03:52.623
of shape post form or IpostFormScreenProps,
72
00:03:54.380 --> 00:03:58.430
and then down below, inside of our post,
73
00:03:58.430 --> 00:04:03.300
what we're gonna do here is we're going to add this after
74
00:04:03.300 --> 00:04:06.310
our prop or after we get our response back.
75
00:04:06.310 --> 00:04:08.800
But now we're also gonna make a check.
76
00:04:08.800 --> 00:04:10.220
And this is always a good idea,
77
00:04:10.220 --> 00:04:13.040
because you may think that we could just do this,
78
00:04:13.040 --> 00:04:17.643
we could just say props.navigation.navigate.
79
00:04:19.120 --> 00:04:21.400
And then we could call PostDetail.
80
00:04:24.220 --> 00:04:27.120
And then we pass in our data,
81
00:04:27.120 --> 00:04:29.950
which is just the post which we got back.
82
00:04:29.950 --> 00:04:32.550
But that's not really a good idea,
83
00:04:32.550 --> 00:04:35.260
when you're building up this type of feature.
84
00:04:35.260 --> 00:04:38.880
And the reason is, because remember that the errors
85
00:04:38.880 --> 00:04:43.290
that we get that we catch, these are server errors.
86
00:04:43.290 --> 00:04:48.070
But let's imagine a scenario where a user creates a post
87
00:04:48.070 --> 00:04:49.860
or they try to create a post
88
00:04:49.860 --> 00:04:52.820
and they pass in the wrong type of data.
89
00:04:52.820 --> 00:04:56.960
Our system is not going to or app itself,
90
00:04:56.960 --> 00:04:59.560
isn't really gonna block them from doing that.
91
00:04:59.560 --> 00:05:02.010
But the server is a server,
92
00:05:02.010 --> 00:05:04.860
I built all kinds of validations in place.
93
00:05:04.860 --> 00:05:07.080
You have to have a name, you have to have content,
94
00:05:07.080 --> 00:05:11.870
you have to have an image and it has to be of JPEG or PNG,
95
00:05:11.870 --> 00:05:13.810
if you try to do anything else,
96
00:05:13.810 --> 00:05:16.160
the server is simply going to reject it.
97
00:05:16.160 --> 00:05:19.070
But we don't have those kind of validations in place here.
98
00:05:19.070 --> 00:05:22.420
So what we're gonna do is we're gonna say
99
00:05:22.420 --> 00:05:26.330
that we're going to ask how we were asked
100
00:05:26.330 --> 00:05:27.163
what type of data we get back.
101
00:05:27.163 --> 00:05:32.112
So I'm gonna say, if response.data.memipedia_post
102
00:05:35.950 --> 00:05:38.690
because that is the data that we get back.
103
00:05:38.690 --> 00:05:41.090
If you were building this for another application,
104
00:05:41.090 --> 00:05:44.460
it would in the documentation the API would tell you,
105
00:05:44.460 --> 00:05:47.070
the name of the object you'd get back.
106
00:05:47.070 --> 00:05:49.700
So if the object like say you were building
107
00:05:49.700 --> 00:05:53.130
something for stripe and it was a billing system,
108
00:05:53.130 --> 00:05:57.760
you'd say okay, if the response.data.payment_object
109
00:05:58.890 --> 00:06:01.040
or whatever it was was returned
110
00:06:01.040 --> 00:06:02.290
that's what you would use here.
111
00:06:02.290 --> 00:06:04.540
So that's just the name
112
00:06:04.540 --> 00:06:07.380
that I built when I built up the API.
113
00:06:07.380 --> 00:06:12.130
So if the post was created successfully,
114
00:06:12.130 --> 00:06:13.950
this is the data that we'll get back.
115
00:06:13.950 --> 00:06:17.610
And so we're gonna only redirect them if we know
116
00:06:17.610 --> 00:06:19.640
that we've received that data.
117
00:06:19.640 --> 00:06:21.480
So I'm gonna say if this
118
00:06:22.850 --> 00:06:26.820
that's where I wanna send in everything
119
00:06:26.820 --> 00:06:29.180
and I want the user to be redirected.
120
00:06:29.180 --> 00:06:31.770
And so I'm going to copy this.
121
00:06:31.770 --> 00:06:36.360
And I'm going to say inside of our object,
122
00:06:36.360 --> 00:06:39.530
I'm gonna say post, colon
123
00:06:39.530 --> 00:06:42.773
and then our response.data.memipedia_post.
124
00:06:44.400 --> 00:06:48.200
Now I also can do an alert an alert here.
125
00:06:48.200 --> 00:06:51.800
So I'll say if we didn't get that memipedia post back,
126
00:06:51.800 --> 00:06:53.720
then I want to alert the user.
127
00:06:53.720 --> 00:06:58.720
So I wanna say alert and then say there was an issue
128
00:07:00.620 --> 00:07:05.620
Creating the post, all fields are required.
129
00:07:06.930 --> 00:07:11.340
And only images are allowed.
130
00:07:11.340 --> 00:07:13.730
Something like that you can put whatever you want
131
00:07:13.730 --> 00:07:18.510
and hit save and that it should be everything that we need.
132
00:07:18.510 --> 00:07:20.150
Now, don't worry about this warning
133
00:07:20.150 --> 00:07:23.260
that's simply one of those hot-reloading warnings.
134
00:07:23.260 --> 00:07:25.100
So click dismiss there.
135
00:07:25.100 --> 00:07:28.090
And let's test this out, let's see if this is working.
136
00:07:28.090 --> 00:07:31.550
So I'm gonna say some kinda name
137
00:07:33.280 --> 00:07:36.700
and then a bunch of content right here.
138
00:07:36.700 --> 00:07:39.400
And then let's pick out an image from the camera roll.
139
00:07:43.170 --> 00:07:46.293
And then just pick out any image here.
140
00:07:48.410 --> 00:07:52.163
Hit choose, and then let's hit submit.
141
00:07:53.710 --> 00:07:54.850
Oop and there we go.
142
00:07:54.850 --> 00:07:56.570
Okay, you could see for a second,
143
00:07:56.570 --> 00:08:00.370
it had the last post detail that was there.
144
00:08:00.370 --> 00:08:02.510
And that's fine, that's something we can clean up later.
145
00:08:02.510 --> 00:08:04.850
But for right now, this is working perfect.
146
00:08:04.850 --> 00:08:08.890
So you can see, we have our new image
147
00:08:08.890 --> 00:08:12.800
that we just uploaded, we added all of our content
148
00:08:12.800 --> 00:08:14.750
or our name and our content.
149
00:08:14.750 --> 00:08:15.760
All of this is working.
150
00:08:15.760 --> 00:08:19.503
And now if I click here, then hit refresh.
151
00:08:21.870 --> 00:08:24.550
If the simulator will let me there we go,
152
00:08:24.550 --> 00:08:27.110
then you'll see that that is working.
153
00:08:27.110 --> 00:08:30.167
Now one thing we're gonna be adding later is the ability
154
00:08:30.167 --> 00:08:32.120
and this is a pretty cool one
155
00:08:32.120 --> 00:08:33.570
to do something like you've seen,
156
00:08:33.570 --> 00:08:36.090
maybe on Instagram or Facebook
157
00:08:36.090 --> 00:08:37.350
where if you pull down,
158
00:08:37.350 --> 00:08:39.380
it'll actually go and get all the new posts.
159
00:08:39.380 --> 00:08:43.250
Because as you saw, when I just clicked on the feed icon,
160
00:08:43.250 --> 00:08:45.090
it didn't go and get our new one.
161
00:08:45.090 --> 00:08:48.190
So we're gonna give the ability to do that
162
00:08:48.190 --> 00:08:49.550
and so that we can go out
163
00:08:49.550 --> 00:08:52.630
and get anything new that maybe was created.
164
00:08:52.630 --> 00:08:56.810
But as far as all the basic functionality that is working.
165
00:08:56.810 --> 00:08:57.950
We still have, as you can see
166
00:08:57.950 --> 00:08:59.830
we still have some cleanup items that we need to do,
167
00:08:59.830 --> 00:09:01.820
but we'll take care of those later.
168
00:09:01.820 --> 00:09:05.370
The main thing is, users now have the ability
169
00:09:05.370 --> 00:09:09.830
to go to the form, create a new post and then be redirected
170
00:09:09.830 --> 00:09:11.950
so that they can see everything
171
00:09:11.950 --> 00:09:13.760
that is now stored on the server.
172
00:09:13.760 --> 00:09:15.920
So that is working nicely.
173
00:09:15.920 --> 00:09:17.070
In the next guide,
174
00:09:17.070 --> 00:09:21.530
we're gonna start building out our form styles right here
175
00:09:21.530 --> 00:09:25.470
so that our form can look nice and it can behave exactly,
176
00:09:25.470 --> 00:09:28.943
the way you'd expect a professional form to behave.