- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.000 --> 00:00:02.300
This is gonna be a really fun guide.
2
00:00:02.300 --> 00:00:04.328
In this lesson, we're gonna put together
3
00:00:04.328 --> 00:00:06.395
everything that we've learned so far
4
00:00:06.395 --> 00:00:08.890
in building out our post form screen
5
00:00:08.890 --> 00:00:10.880
and we're actually gonna create records
6
00:00:10.880 --> 00:00:12.190
that have persistence.
7
00:00:12.190 --> 00:00:14.660
That means we're gonna give our users the ability
8
00:00:14.660 --> 00:00:16.390
to create their own posts.
9
00:00:16.390 --> 00:00:19.550
So, on the DevCamp space page,
10
00:00:19.550 --> 00:00:21.140
you can see right here that you have
11
00:00:21.140 --> 00:00:23.693
a new line item called Create Post.
12
00:00:25.643 --> 00:00:28.420
It uses the post http verb
13
00:00:28.420 --> 00:00:30.400
and you can see the end point
14
00:00:30.400 --> 00:00:33.403
is just gonna be memipedia_posts.
15
00:00:34.490 --> 00:00:36.040
Now, if you think of it,
16
00:00:36.040 --> 00:00:37.430
it's a little confusing
17
00:00:37.430 --> 00:00:40.510
that you have two end points that are identical,
18
00:00:40.510 --> 00:00:42.530
that is perfectly fine.
19
00:00:42.530 --> 00:00:45.660
That kinda goes into some conventions
20
00:00:46.682 --> 00:00:48.310
for how http works
21
00:00:48.310 --> 00:00:50.510
and how APIs work,
22
00:00:50.510 --> 00:00:53.870
and specifically, the reason why that's possible
23
00:00:53.870 --> 00:00:57.070
is because one of these line items
24
00:00:57.070 --> 00:00:59.740
is using a get request and the other one
25
00:00:59.740 --> 00:01:02.270
that's identical is using a post request.
26
00:01:02.270 --> 00:01:06.940
So, the server recognizes those types of requests
27
00:01:06.940 --> 00:01:08.650
completely differently,
28
00:01:08.650 --> 00:01:12.830
so even though the end point we're hitting is the same,
29
00:01:12.830 --> 00:01:16.250
the fact that we're using a different type of verb,
30
00:01:16.250 --> 00:01:17.910
a different type of request,
31
00:01:17.910 --> 00:01:20.720
the server automatically routes that
32
00:01:20.720 --> 00:01:24.340
to a different action in the server,
33
00:01:24.340 --> 00:01:26.490
and then it adjusts accordingly.
34
00:01:26.490 --> 00:01:28.790
So, just so that's not confusing at all.
35
00:01:28.790 --> 00:01:30.760
So, we're gonna use a post request here
36
00:01:30.760 --> 00:01:33.580
and it's gonna be the same call as
37
00:01:33.580 --> 00:01:37.450
when we made our retrieve posts call,
38
00:01:37.450 --> 00:01:39.650
so we can actually go and look at that function
39
00:01:39.650 --> 00:01:41.500
for building out our current one.
40
00:01:41.500 --> 00:01:42.770
So, let's switch.
41
00:01:42.770 --> 00:01:44.860
I'm gonna open up the simulator,
42
00:01:44.860 --> 00:01:47.570
and then go to Visual Studio Code.
43
00:01:47.570 --> 00:01:49.980
I'm gonna go to the Post Form screen,
44
00:01:49.980 --> 00:01:53.490
and let's create our submit handler.
45
00:01:53.490 --> 00:01:54.900
So, I'm gonna create a new function,
46
00:01:54.900 --> 00:01:57.800
and I'm putting it right above the return statement
47
00:01:57.800 --> 00:01:59.850
and right below Build Form.
48
00:01:59.850 --> 00:02:01.788
And I'm gonna say,
49
00:02:01.788 --> 00:02:05.500
const handleSubmit,
50
00:02:05.500 --> 00:02:08.640
and we know, because this is gonna have to use
51
00:02:08.640 --> 00:02:09.830
the secure token,
52
00:02:09.830 --> 00:02:12.793
we know this is gonna be an A-sync function,
53
00:02:13.910 --> 00:02:17.150
and it's gonna be a fat arrow function.
54
00:02:17.150 --> 00:02:17.983
Now, like I said,
55
00:02:17.983 --> 00:02:19.850
we can open up our Feed Screen,
56
00:02:19.850 --> 00:02:22.290
because quite a bit of this code
57
00:02:22.290 --> 00:02:23.780
is gonna be exactly the same.
58
00:02:23.780 --> 00:02:25.360
So let's just copy this,
59
00:02:25.360 --> 00:02:28.053
and then I'm gonna show you the differences.
60
00:02:28.902 --> 00:02:30.730
So, I'm gonna paste this in here.
61
00:02:30.730 --> 00:02:33.170
You can see that a few of the dependencies
62
00:02:33.170 --> 00:02:34.330
need to be imported,
63
00:02:34.330 --> 00:02:38.230
so we're first gonna go and bring in Secure Store
64
00:02:38.230 --> 00:02:39.870
and this time, I'm just gonna type it out.
65
00:02:39.870 --> 00:02:42.240
You could also copy it if you want, though.
66
00:02:42.240 --> 00:02:46.590
I'm gonna say Import, * as SecureStore
67
00:02:48.666 --> 00:02:52.770
from "expo-secure-store."
68
00:02:52.770 --> 00:02:55.270
And then we also need the API.
69
00:02:55.270 --> 00:02:58.590
And this API handler is in our utilities,
70
00:02:58.590 --> 00:03:00.330
so I'm gonna come down here
71
00:03:00.330 --> 00:03:05.330
and say import api from "../utils/ and then api;
72
00:03:09.300 --> 00:03:12.140
and that should be everything that we need here.
73
00:03:12.140 --> 00:03:15.240
And then we wanna get rid of all of the code
74
00:03:15.240 --> 00:03:18.300
in the then and the catch blocks.
75
00:03:18.300 --> 00:03:20.090
We can leave the consol.log statements
76
00:03:20.090 --> 00:03:24.280
and we can say, this is the response from
77
00:03:24.280 --> 00:03:26.963
creating a new post.
78
00:03:27.860 --> 00:03:32.860
And then we could say error from creating new post.
79
00:03:34.320 --> 00:03:36.760
And that's all we need right there.
80
00:03:36.760 --> 00:03:39.920
Now, the other change is, like I said,
81
00:03:39.920 --> 00:03:41.290
we can't use a get request.
82
00:03:41.290 --> 00:03:43.420
Now we need to use a post request,
83
00:03:43.420 --> 00:03:47.420
so change it so is says api.post
84
00:03:47.420 --> 00:03:50.090
and then memipedia_posts.
85
00:03:50.090 --> 00:03:52.860
Now, because this is a post request,
86
00:03:52.860 --> 00:03:56.770
we have to slide in the data that we're sending.
87
00:03:56.770 --> 00:03:58.360
So the way we can do that
88
00:03:58.360 --> 00:04:01.630
with our very handy Build Form function
89
00:04:01.630 --> 00:04:03.110
that we already created,
90
00:04:03.110 --> 00:04:06.913
just add a space right after where it says memipedia_posts,
91
00:04:08.090 --> 00:04:10.650
then just say, buildForm,
92
00:04:10.650 --> 00:04:13.560
and then call the function and then add a comma.
93
00:04:13.560 --> 00:04:15.270
So, what this is going to do
94
00:04:15.270 --> 00:04:19.470
is this is going to call our Build Form function
95
00:04:19.470 --> 00:04:21.280
that we built out in the last guide.
96
00:04:21.280 --> 00:04:23.400
It's gonna wrap up all of our data,
97
00:04:23.400 --> 00:04:26.640
our name, our content and our image,
98
00:04:26.640 --> 00:04:29.180
and it's gonna wrap it up in an object
99
00:04:29.180 --> 00:04:31.200
that the API can understand.
100
00:04:31.200 --> 00:04:35.030
And so, that is where we're passing in all of the data.
101
00:04:35.030 --> 00:04:37.100
Then we need to pass in the headers.
102
00:04:37.100 --> 00:04:39.480
We have to make a few changes right here,
103
00:04:39.480 --> 00:04:42.580
because in order to send images,
104
00:04:42.580 --> 00:04:46.450
we have to let the API know that there are images
105
00:04:46.450 --> 00:04:47.580
that are about to hit.
106
00:04:47.580 --> 00:04:50.550
So we're not just gonna send the authorization code,
107
00:04:50.550 --> 00:04:53.520
we're also going to send some more descriptions
108
00:04:54.850 --> 00:04:58.090
on exactly how that should be structured.
109
00:04:58.090 --> 00:05:02.093
So, the first thing is a key that says Accept:
110
00:05:03.270 --> 00:05:04.597
and then as a string,
111
00:05:04.597 --> 00:05:09.340
"application/json" and then a comma,
112
00:05:09.340 --> 00:05:12.000
and the next thing is a string,
113
00:05:12.000 --> 00:05:15.480
because this is gonna be broken up by a dash,
114
00:05:15.480 --> 00:05:18.950
and you say, "Content-Type
115
00:05:18.950 --> 00:05:22.259
and then in the quotation marks,
116
00:05:22.259 --> 00:05:26.920
: and then multipart, spelled out exactly like that,
117
00:05:26.920 --> 00:05:29.167
/form-data."
118
00:05:30.810 --> 00:05:34.090
Okay, now that might look a little bit weird to you,
119
00:05:34.090 --> 00:05:35.430
but don't worry, we'll walk through
120
00:05:35.430 --> 00:05:37.510
exactly what's happening here.
121
00:05:37.510 --> 00:05:41.320
I'm gonna hit Save and then we're gonna call handleSubmit.
122
00:05:41.320 --> 00:05:43.720
So copy where it says handleSubmit,
123
00:05:43.720 --> 00:05:46.260
and come down into the button here,
124
00:05:46.260 --> 00:05:49.080
and get rid of where it says onPress,
125
00:05:49.080 --> 00:05:51.670
get rid of everything inside of there,
126
00:05:51.670 --> 00:05:55.210
and just paste in handleSubmit.
127
00:05:55.210 --> 00:05:56.690
So what's gonna happen here
128
00:05:56.690 --> 00:05:59.670
is whenever the Submit button is pressed,
129
00:05:59.670 --> 00:06:02.710
then handleSubmit, our function,
130
00:06:02.710 --> 00:06:04.260
is going to be called.
131
00:06:04.260 --> 00:06:06.100
Now, just to kinda go back to some
132
00:06:06.100 --> 00:06:09.960
core Java Scriptings, you may wonder
133
00:06:09.960 --> 00:06:12.570
what is the difference between
134
00:06:12.570 --> 00:06:15.260
having handleSubmit called here,
135
00:06:15.260 --> 00:06:18.140
where we're just passing the name of the function,
136
00:06:18.140 --> 00:06:22.030
versus passing it in and actually using it with parens,
137
00:06:22.030 --> 00:06:23.930
which is called invoking the function?
138
00:06:23.930 --> 00:06:26.520
And that's a great question if you're curious about it.
139
00:06:26.520 --> 00:06:30.310
The difference is when Java Script would run this code,
140
00:06:30.310 --> 00:06:33.110
when React Native would run,
141
00:06:33.110 --> 00:06:34.910
when this component loads up,
142
00:06:34.910 --> 00:06:39.070
if we have handleSubmit just like this,
143
00:06:39.070 --> 00:06:40.660
where we're invoking it,
144
00:06:40.660 --> 00:06:44.400
the handleSubmit function would run right away.
145
00:06:44.400 --> 00:06:47.200
So, immediately, it would try to call the API,
146
00:06:47.200 --> 00:06:48.370
it would build the form,
147
00:06:48.370 --> 00:06:49.410
it would try to pass in data,
148
00:06:49.410 --> 00:06:50.890
and that just would not work
149
00:06:50.890 --> 00:06:53.280
because there is no data in this form right now.
150
00:06:53.280 --> 00:06:55.040
So, that's not a good thing.
151
00:06:55.040 --> 00:06:59.220
The way onPress works is with onPress,
152
00:06:59.220 --> 00:07:04.220
it waits until this onPress event occurs,
153
00:07:05.090 --> 00:07:07.240
and then when that happens,
154
00:07:07.240 --> 00:07:09.490
it runs the function for us.
155
00:07:09.490 --> 00:07:13.370
So, you can almost think of it as happening in stages,
156
00:07:13.370 --> 00:07:17.990
where this is stage 1, and then right here,
157
00:07:17.990 --> 00:07:20.563
this is stage 2,
158
00:07:21.665 --> 00:07:23.790
where React looks, it waits,
159
00:07:23.790 --> 00:07:26.870
it says, okay, now when onPress is occurring,
160
00:07:26.870 --> 00:07:29.780
okay, now we want to actually call handleSubmit,
161
00:07:29.780 --> 00:07:31.570
and that's when it happens.
162
00:07:31.570 --> 00:07:33.400
So, if you're curious about that
163
00:07:33.400 --> 00:07:37.480
and the differences on why you'd want to use one syntax
164
00:07:37.480 --> 00:07:39.930
versus the other, that is why.
165
00:07:39.930 --> 00:07:41.860
Okay, so let's hit Save here,
166
00:07:41.860 --> 00:07:44.840
and it doesn't look like we have any syntax issues
167
00:07:44.840 --> 00:07:46.620
or anything like that.
168
00:07:46.620 --> 00:07:50.270
So, let me kinda prep you for what to expect.
169
00:07:50.270 --> 00:07:51.760
What's gonna happen right here,
170
00:07:51.760 --> 00:07:53.450
because we're not changing anything.
171
00:07:53.450 --> 00:07:54.850
When handleSubmit happens,
172
00:07:54.850 --> 00:07:58.710
all we're doing is printing something out to the console.
173
00:07:58.710 --> 00:08:01.070
So, if this works, all that should happen
174
00:08:01.070 --> 00:08:04.460
is we should have some data printed out to the console,
175
00:08:04.460 --> 00:08:08.620
but we should create our record on the server,
176
00:08:08.620 --> 00:08:10.840
so we should be able to see it in DevCamp space,
177
00:08:10.840 --> 00:08:12.830
and also, we should be able to navigate
178
00:08:12.830 --> 00:08:16.100
back to our main feed screen and see it there.
179
00:08:16.100 --> 00:08:18.690
So, I'm gonna come up to where it says name,
180
00:08:18.690 --> 00:08:22.580
and I'll say some name and then for description,
181
00:08:22.580 --> 00:08:23.930
just type in some gibberish,
182
00:08:23.930 --> 00:08:25.410
whatever you wanna type in there,
183
00:08:25.410 --> 00:08:28.460
and then I'm gonna pick an image from the camera roll
184
00:08:28.460 --> 00:08:32.060
and then pick out any one of these images that are there,
185
00:08:32.060 --> 00:08:33.630
or if you are using this on your phone,
186
00:08:33.630 --> 00:08:35.310
you can pick out your our images.
187
00:08:35.310 --> 00:08:36.600
And you can pinch and zoom,
188
00:08:36.600 --> 00:08:38.810
and edit the image however you want.
189
00:08:38.810 --> 00:08:40.340
You're gonna click Choose here.
190
00:08:40.340 --> 00:08:42.250
So everything there looks like it works.
191
00:08:42.250 --> 00:08:45.200
We have access to the image path,
192
00:08:45.200 --> 00:08:46.790
which we'll get rid of all of this
193
00:08:46.790 --> 00:08:48.790
when we start adding our styles.
194
00:08:48.790 --> 00:08:50.860
And now, if I hit Submit,
195
00:08:50.860 --> 00:08:52.050
let's see if that worked.
196
00:08:52.050 --> 00:08:54.520
Like I said, nothing was supposed to happen
197
00:08:54.520 --> 00:08:55.750
or change on the screen,
198
00:08:55.750 --> 00:08:57.740
because we didn't do that in the code.
199
00:08:57.740 --> 00:09:02.400
But let's open up the server file and look at that,
200
00:09:02.400 --> 00:09:03.850
it looks like it actually worked.
201
00:09:03.850 --> 00:09:05.300
This is, where you can see,
202
00:09:05.300 --> 00:09:08.760
where it says response from creating a new post,
203
00:09:08.760 --> 00:09:11.763
we have our new post object here.
204
00:09:12.639 --> 00:09:15.070
We have the user that created it,
205
00:09:15.070 --> 00:09:18.450
and then we have the name that we provided.
206
00:09:18.450 --> 00:09:20.460
We have the post image URL.
207
00:09:20.460 --> 00:09:21.293
This is a cool thing.
208
00:09:21.293 --> 00:09:25.980
This means that now, this image is no longer on our phone,
209
00:09:25.980 --> 00:09:27.890
it is up in the Cloud,
210
00:09:27.890 --> 00:09:29.090
it's in the data base,
211
00:09:29.090 --> 00:09:32.488
and it's being stored so that all the users can see it.
212
00:09:32.488 --> 00:09:35.640
And then, let's see, we also have our content.
213
00:09:35.640 --> 00:09:37.120
All of that looks great.
214
00:09:37.120 --> 00:09:39.530
So let's switch back to the simulator.
215
00:09:39.530 --> 00:09:42.950
Gonna go to the feed screen, hit Refresh.
216
00:09:42.950 --> 00:09:44.490
And there you go,
217
00:09:44.490 --> 00:09:47.200
our image and our new post is right there,
218
00:09:47.200 --> 00:09:50.680
right along and right above all of the demo ones.
219
00:09:50.680 --> 00:09:51.980
So this is fantastic.
220
00:09:51.980 --> 00:09:55.040
This means that if you add this application
221
00:09:55.040 --> 00:09:56.690
and you add a bunch of users,
222
00:09:56.690 --> 00:09:59.920
as soon as this user clicked and hit Save
223
00:09:59.920 --> 00:10:02.050
and submitted that new post,
224
00:10:02.050 --> 00:10:04.860
all of the other users would be able to see this, too.
225
00:10:04.860 --> 00:10:07.420
So this is working really nicely.
226
00:10:07.420 --> 00:10:09.440
So, congratulations.
227
00:10:09.440 --> 00:10:12.180
You now have the ability for your application
228
00:10:12.180 --> 00:10:15.560
to create posts, and now with this in place,
229
00:10:15.560 --> 00:10:17.410
with this core functionality in place,
230
00:10:17.410 --> 00:10:19.490
in the next few guides we're gonna start cleaning
231
00:10:19.490 --> 00:10:21.990
up the design and building out a workflow,
232
00:10:21.990 --> 00:10:24.170
so that after a post is created,
233
00:10:24.170 --> 00:10:28.593
the user is redirected to a new post detail screen.