- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.520 --> 00:00:03.880
Now that we have our search bar initially built out,
2
00:00:03.880 --> 00:00:06.210
now let's actually wire it up
3
00:00:06.210 --> 00:00:08.740
so it can function as a search engine.
4
00:00:08.740 --> 00:00:10.610
We're not gonna see any of the posts,
5
00:00:10.610 --> 00:00:12.040
it's not gonna have any styles,
6
00:00:12.040 --> 00:00:14.580
but what I wanna do is to be able to make sure
7
00:00:14.580 --> 00:00:16.370
that we can run queries
8
00:00:16.370 --> 00:00:19.890
and that we can see the data that's being passed back to us.
9
00:00:19.890 --> 00:00:21.770
So let's get started with that.
10
00:00:21.770 --> 00:00:25.580
If you go to the MemiPedia dashboard for DevCamp Space,
11
00:00:25.580 --> 00:00:29.700
you'll see that there is a GET request called Query Posts,
12
00:00:29.700 --> 00:00:32.253
and the endpoint is memipedia_queries.
13
00:00:34.210 --> 00:00:37.090
Now, there is one thing I'll add onto this
14
00:00:37.090 --> 00:00:39.720
because this is not full API documentation.
15
00:00:39.720 --> 00:00:42.130
This is more of just a reference point
16
00:00:42.130 --> 00:00:46.950
for you to know exactly what your URLs look like.
17
00:00:46.950 --> 00:00:49.420
In a real-world scenario
18
00:00:49.420 --> 00:00:52.010
where you're working with an outside API,
19
00:00:52.010 --> 00:00:55.590
then it would tell you when parameters are needed.
20
00:00:55.590 --> 00:00:58.540
Right here in the retrieve single post,
21
00:00:58.540 --> 00:01:00.420
which we're not even using, I just created it
22
00:01:00.420 --> 00:01:02.640
in case you wanted to call a single post.
23
00:01:02.640 --> 00:01:05.510
It says that we need to pass in an ID.
24
00:01:05.510 --> 00:01:08.310
Well, right here with memipedia_queries,
25
00:01:08.310 --> 00:01:10.310
we do need to have some data
26
00:01:10.310 --> 00:01:12.140
that we're passing, which makes sense.
27
00:01:12.140 --> 00:01:15.430
We need to pass in a query parameter.
28
00:01:15.430 --> 00:01:17.640
Now, that's not in this documentation
29
00:01:17.640 --> 00:01:20.710
but in a real-world scenario if you were working
30
00:01:20.710 --> 00:01:23.990
with Stripe or Shopify or anything like that,
31
00:01:23.990 --> 00:01:27.980
you would be told exactly what data needs to be passed
32
00:01:27.980 --> 00:01:30.710
in order to get your response back.
33
00:01:30.710 --> 00:01:32.160
So just keep that in mind.
34
00:01:32.160 --> 00:01:35.510
I'll show you exactly how to structure that here.
35
00:01:35.510 --> 00:01:40.450
So let's open up Visual Studio Code and the simulator.
36
00:01:40.450 --> 00:01:42.710
And we're gonna actually build out
37
00:01:42.710 --> 00:01:46.570
a pretty cool-looking search functionality
38
00:01:46.570 --> 00:01:47.750
and API connector.
39
00:01:47.750 --> 00:01:51.100
I'm gonna show you how you can really spread out
40
00:01:51.100 --> 00:01:52.570
each one of these function calls
41
00:01:52.570 --> 00:01:54.920
and break them into very tiny, little pieces.
42
00:01:54.920 --> 00:01:56.580
So hopefully they continue
43
00:01:56.580 --> 00:02:00.170
to just make more and more sense the more you use them.
44
00:02:00.170 --> 00:02:01.920
So inside of handleSearch,
45
00:02:01.920 --> 00:02:05.310
I'm gonna get rid of our debugging text here.
46
00:02:05.310 --> 00:02:07.610
And the very first thing that we're gonna need
47
00:02:07.610 --> 00:02:11.240
is we're gonna need our SecureStore element.
48
00:02:11.240 --> 00:02:15.420
So let's go and open up one of our other components
49
00:02:15.420 --> 00:02:18.350
like Post, we can do it from PostForm,
50
00:02:18.350 --> 00:02:22.010
not postFormStyles, PostFormScreen.
51
00:02:22.010 --> 00:02:24.730
And you can see that we needed access
52
00:02:24.730 --> 00:02:28.192
to SecureStore.getItemAsync
53
00:02:28.192 --> 00:02:30.800
and then the memipedia_secure_token.
54
00:02:30.800 --> 00:02:33.530
I'm just gonna copy all of that
55
00:02:33.530 --> 00:02:37.983
and I'm gonna come down into handleSearch and paste that in.
56
00:02:37.983 --> 00:02:40.110
Now, there's two things we have to do
57
00:02:40.110 --> 00:02:42.370
and we've already done this many times.
58
00:02:42.370 --> 00:02:44.863
We're going to say handleSearch = async
59
00:02:46.410 --> 00:02:49.620
and that's gonna take care of the asynchronous call
60
00:02:49.620 --> 00:02:51.770
to get the SecureStore.
61
00:02:51.770 --> 00:02:53.770
And now we need to import this.
62
00:02:53.770 --> 00:02:55.780
So I'm gonna go up to the very top
63
00:02:55.780 --> 00:02:59.127
and I'm gonna say import * as SecureStore
64
00:03:00.730 --> 00:03:05.217
from "expo-secure-store".
65
00:03:06.780 --> 00:03:07.613
There we go.
66
00:03:07.613 --> 00:03:10.190
And that fixes all of our errors.
67
00:03:10.190 --> 00:03:13.650
Now let's call our API utility.
68
00:03:13.650 --> 00:03:17.070
So I'm gonna say that I want our api.
69
00:03:17.070 --> 00:03:18.880
And this is gonna be a GET request
70
00:03:18.880 --> 00:03:20.950
if you reference our documentation.
71
00:03:20.950 --> 00:03:22.570
So it's gonna be a GET request.
72
00:03:22.570 --> 00:03:26.260
And then we're going to pass in the endpoint link
73
00:03:26.260 --> 00:03:28.433
which was memipedia_queries,
74
00:03:31.420 --> 00:03:33.270
spelled out just like.
75
00:03:33.270 --> 00:03:37.120
Now, there are a few ways that you could pass data
76
00:03:37.120 --> 00:03:39.460
to a GET request string.
77
00:03:39.460 --> 00:03:44.460
So one way is you could wrap up memipedia_queries
78
00:03:45.270 --> 00:03:47.570
and use string interpolation.
79
00:03:47.570 --> 00:03:49.660
So you could say instead of double quotes,
80
00:03:49.660 --> 00:03:51.950
you could say memipedia_queries
81
00:03:51.950 --> 00:03:56.263
and then add a question mark, and then query equals
82
00:03:57.680 --> 00:04:02.190
and then pass in with the dollar, curly brackets.
83
00:04:02.190 --> 00:04:04.970
You could pass in the query like that.
84
00:04:04.970 --> 00:04:08.540
And that is a structure that would work perfectly fine.
85
00:04:08.540 --> 00:04:13.410
That's one way that you can send query parameters to a URL.
86
00:04:13.410 --> 00:04:15.630
But this can get a little bit messy,
87
00:04:15.630 --> 00:04:17.510
and because this is a more advanced course,
88
00:04:17.510 --> 00:04:19.380
I want you to have a more advanced way
89
00:04:19.380 --> 00:04:21.060
of sending parameters.
90
00:04:21.060 --> 00:04:22.150
So let's do that.
91
00:04:22.150 --> 00:04:24.100
Let's clean this up a little bit.
92
00:04:24.100 --> 00:04:26.580
I'm going to get rid of that.
93
00:04:26.580 --> 00:04:28.110
In fact, just to make it easy,
94
00:04:28.110 --> 00:04:31.190
let's also just make this double quotes.
95
00:04:31.190 --> 00:04:32.870
My personal convention
96
00:04:32.870 --> 00:04:37.640
is that if I'm not going to make a string dynamic,
97
00:04:37.640 --> 00:04:40.730
I like using either single or double quotes.
98
00:04:40.730 --> 00:04:42.950
And then if the string has to be dynamic,
99
00:04:42.950 --> 00:04:46.830
so if I have to inject some other values into it,
100
00:04:46.830 --> 00:04:50.160
that's when I will use the backticks.
101
00:04:50.160 --> 00:04:51.840
Okay, so that's the first thing.
102
00:04:51.840 --> 00:04:55.200
And then we know we're gonna have to pass in headers,
103
00:04:55.200 --> 00:04:58.790
but one other cool thing with how Axios works,
104
00:04:58.790 --> 00:05:03.000
this is not aping, this doesn't have to do with HTTP,
105
00:05:03.000 --> 00:05:06.700
this actually is how the Axios library works.
106
00:05:06.700 --> 00:05:09.330
The second argument here,
107
00:05:09.330 --> 00:05:11.680
in a GET request, it can have the headers,
108
00:05:11.680 --> 00:05:16.130
but it also can have a few other things in the object.
109
00:05:16.130 --> 00:05:18.630
And so that's what we're going to do here.
110
00:05:18.630 --> 00:05:21.000
I'm going to pass in a second argument here
111
00:05:21.000 --> 00:05:23.160
that's just gonna be an object.
112
00:05:23.160 --> 00:05:25.060
One of the things we're gonna pass in
113
00:05:25.060 --> 00:05:26.370
is gonna be the header.
114
00:05:26.370 --> 00:05:30.047
And then the other thing is gonna be our params,
115
00:05:30.980 --> 00:05:32.690
so it's gonna be our query.
116
00:05:32.690 --> 00:05:35.600
So let's create a couple variables up here.
117
00:05:35.600 --> 00:05:40.600
And so I'm gonna say I want to create a params variable.
118
00:05:41.240 --> 00:05:45.510
And inside of that, that's gonna be an object called query.
119
00:05:45.510 --> 00:05:49.570
Now, this is the same thing as typing query: query.
120
00:05:49.570 --> 00:05:51.440
So if you use, and the only reason
121
00:05:51.440 --> 00:05:52.950
why you'd use this second way
122
00:05:52.950 --> 00:05:55.280
is if you had something different for the name.
123
00:05:55.280 --> 00:05:57.940
So say that your state
124
00:05:57.940 --> 00:06:00.990
was actually something like searchValue
125
00:06:04.340 --> 00:06:06.910
and you needed to pass in something called query
126
00:06:06.910 --> 00:06:08.970
and that was the name of the parameter,
127
00:06:08.970 --> 00:06:11.150
then you'd need to do both of these,
128
00:06:11.150 --> 00:06:12.710
but that's part of the reason
129
00:06:12.710 --> 00:06:15.600
why I use the name query here for state
130
00:06:15.600 --> 00:06:19.590
because we're able to use this nice, little syntac,
131
00:06:19.590 --> 00:06:21.070
it's called syntactic sugar.
132
00:06:21.070 --> 00:06:23.180
It's where you can write less code
133
00:06:23.180 --> 00:06:25.320
and accomplish the exact same goal.
134
00:06:25.320 --> 00:06:27.180
So those are our params.
135
00:06:27.180 --> 00:06:29.860
And now let's type in our headers.
136
00:06:29.860 --> 00:06:32.340
So now, I'm gonna break our headers out
137
00:06:32.340 --> 00:06:34.990
into their own variable as well.
138
00:06:34.990 --> 00:06:37.273
Now, these are gonna be called headers.
139
00:06:38.170 --> 00:06:40.190
It's gonna be an object.
140
00:06:40.190 --> 00:06:42.170
And then this is where we're gonna have
141
00:06:42.170 --> 00:06:45.730
the Authorization: Bearer token.
142
00:06:45.730 --> 00:06:48.920
So you can go back and look at the PostFormScreen
143
00:06:48.920 --> 00:06:50.490
to see how this looks.
144
00:06:50.490 --> 00:06:51.750
So we have our headers
145
00:06:51.750 --> 00:06:54.840
and then we have Authorization: Bearer ${token}.
146
00:06:54.840 --> 00:06:56.960
That's where we're sliding that token in.
147
00:06:56.960 --> 00:06:59.610
And I'm just gonna paste that in right here.
148
00:06:59.610 --> 00:07:01.340
So these are our headers.
149
00:07:01.340 --> 00:07:04.480
Now, the cool thing about this, because we've split this out
150
00:07:04.480 --> 00:07:07.870
and also because we've named these with very specific names,
151
00:07:07.870 --> 00:07:10.630
so you have to use the keyword params
152
00:07:10.630 --> 00:07:12.640
and headers for this to work.
153
00:07:12.640 --> 00:07:17.350
What we can do in this object now is we can just list these.
154
00:07:17.350 --> 00:07:20.930
So I can say params comma,
155
00:07:20.930 --> 00:07:23.630
header or headers just like this.
156
00:07:23.630 --> 00:07:28.630
And this is pretty cool because this is really streamlining
157
00:07:29.520 --> 00:07:31.970
exactly how this function is gonna be called.
158
00:07:31.970 --> 00:07:33.330
Because if you can imagine,
159
00:07:33.330 --> 00:07:35.630
if you reference our PostFormScreen,
160
00:07:35.630 --> 00:07:38.360
this is starting to get a little bit much.
161
00:07:38.360 --> 00:07:41.270
We're starting to put quite a bit of information
162
00:07:41.270 --> 00:07:44.880
into a single argument that we're passing to a function.
163
00:07:44.880 --> 00:07:47.890
I really like to be able to streamline those calls.
164
00:07:47.890 --> 00:07:51.450
It makes the code easier to read and easier to manage,
165
00:07:51.450 --> 00:07:53.900
and we're still accomplishing the exact same goal.
166
00:07:53.900 --> 00:07:55.340
We're passing in the parameters,
167
00:07:55.340 --> 00:07:56.960
which in this case is the query.
168
00:07:56.960 --> 00:07:59.950
And then we're passing in the authorization headers.
169
00:07:59.950 --> 00:08:02.190
So everything there looks good.
170
00:08:02.190 --> 00:08:06.550
Now I'm gonna say right after the parens, say then response
171
00:08:07.610 --> 00:08:10.370
and let's just console log this out,
172
00:08:10.370 --> 00:08:13.410
console log the response
173
00:08:14.670 --> 00:08:15.860
from query.
174
00:08:15.860 --> 00:08:19.580
And let's look at the response.data
175
00:08:19.580 --> 00:08:21.483
to see what that data looks like.
176
00:08:22.490 --> 00:08:26.680
And then if there's an error, let's catch that error.
177
00:08:26.680 --> 00:08:29.430
And so we're gonna say we wanna catch that error.
178
00:08:29.430 --> 00:08:32.900
And then we'll just console log the error as well,
179
00:08:32.900 --> 00:08:37.050
console.log "Error running query".
180
00:08:37.050 --> 00:08:39.430
And let's see what the error looks like.
181
00:08:39.430 --> 00:08:41.230
Okay, all of that looks good.
182
00:08:41.230 --> 00:08:43.220
We don't have any syntax errors
183
00:08:43.220 --> 00:08:46.440
and I really think that this is much easier to read
184
00:08:46.440 --> 00:08:48.490
than trying to pack all of our data
185
00:08:48.490 --> 00:08:50.720
into a single function call.
186
00:08:50.720 --> 00:08:53.920
So we have our params, our header, we have our token.
187
00:08:53.920 --> 00:08:55.450
Everything there looks good.
188
00:08:55.450 --> 00:08:58.950
So we already wired up our handleSearch,
189
00:08:58.950 --> 00:09:00.260
so this should work.
190
00:09:00.260 --> 00:09:03.010
Let's open up the terminal.
191
00:09:03.010 --> 00:09:06.620
And I have the Search screen here.
192
00:09:06.620 --> 00:09:08.030
I'm gonna click on this,
193
00:09:08.030 --> 00:09:10.600
and let's type Programming once again
194
00:09:12.530 --> 00:09:15.150
and just press Search.
195
00:09:15.150 --> 00:09:17.440
And if I do this, it looks like it worked.
196
00:09:17.440 --> 00:09:18.950
We didn't get any errors.
197
00:09:18.950 --> 00:09:22.880
And if I scroll up right here, you'll see
198
00:09:24.300 --> 00:09:27.240
we actually have a few programming ones.
199
00:09:27.240 --> 00:09:30.370
Let's see where our output starts.
200
00:09:30.370 --> 00:09:32.580
We definitely have all of the content.
201
00:09:32.580 --> 00:09:35.283
So we have the name, post_image_url.
202
00:09:36.320 --> 00:09:38.250
If there was a user, we get the user.
203
00:09:38.250 --> 00:09:40.820
It has the content, it has everything.
204
00:09:40.820 --> 00:09:45.090
And with programming, it looks like we have one, two,
205
00:09:45.090 --> 00:09:47.640
yeah, it looks like we have a number of those
206
00:09:47.640 --> 00:09:49.910
which is why there are so many of them in the output.
207
00:09:49.910 --> 00:09:52.530
So you're gonna have different ones, obviously.
208
00:09:52.530 --> 00:09:54.080
The way the search engine works
209
00:09:54.080 --> 00:09:58.240
is it looks for the name and the content.
210
00:09:58.240 --> 00:10:00.140
So if you type Programming
211
00:10:00.140 --> 00:10:03.560
but you didn't have any programming memes
212
00:10:03.560 --> 00:10:05.900
or anything that said the word programming
213
00:10:05.900 --> 00:10:07.490
in the content or the name,
214
00:10:07.490 --> 00:10:09.410
then that's not going to come up.
215
00:10:09.410 --> 00:10:14.410
So, like if I typed in, let me switch back to the simulator,
216
00:10:14.970 --> 00:10:16.980
I don't think I used the word coding at all.
217
00:10:16.980 --> 00:10:19.500
So if I type Coding and hit Search,
218
00:10:19.500 --> 00:10:21.770
there we go, it says response from query.
219
00:10:21.770 --> 00:10:23.320
It doesn't give an error or anything,
220
00:10:23.320 --> 00:10:25.450
it simply says there were no posts.
221
00:10:25.450 --> 00:10:28.900
The memipedia_posts array is empty.
222
00:10:28.900 --> 00:10:31.130
So that's working perfectly.
223
00:10:31.130 --> 00:10:35.250
Let's circle back really quick and just review what we did.
224
00:10:35.250 --> 00:10:38.670
So we have a handleSearch function.
225
00:10:38.670 --> 00:10:41.750
This is wired up to if the user types Return
226
00:10:41.750 --> 00:10:42.970
when they're done typing,
227
00:10:42.970 --> 00:10:45.300
or if they press the Search button.
228
00:10:45.300 --> 00:10:46.950
Then from there, what we did
229
00:10:46.950 --> 00:10:49.530
is we took a little bit of a different approach.
230
00:10:49.530 --> 00:10:52.240
We first grabbed our token, that's the same,
231
00:10:52.240 --> 00:10:56.120
but then we created a params object.
232
00:10:56.120 --> 00:10:58.390
This is a params object
233
00:10:58.390 --> 00:11:02.710
that we can pass to our Axios utility here,
234
00:11:02.710 --> 00:11:04.980
and that's where we're passing in query.
235
00:11:04.980 --> 00:11:07.150
So in this case, this last search,
236
00:11:07.150 --> 00:11:09.420
it passed the word coding.
237
00:11:09.420 --> 00:11:12.030
The time before that, it passed the word programming.
238
00:11:12.030 --> 00:11:14.780
And that is what is getting wrapped up
239
00:11:14.780 --> 00:11:17.440
and it's sent to the API.
240
00:11:17.440 --> 00:11:20.490
Now, we're using that shortcut with JavaScript,
241
00:11:20.490 --> 00:11:24.010
so whenever you have the exact same name
242
00:11:24.010 --> 00:11:28.930
that's being used as the key and the value in JavaScript,
243
00:11:28.930 --> 00:11:33.420
you can make it so you only call it one time,
244
00:11:33.420 --> 00:11:35.500
which is a nice, short way of doing it.
245
00:11:35.500 --> 00:11:37.727
And we're doing that not only in params
246
00:11:37.727 --> 00:11:39.800
but we're also doing it here.
247
00:11:39.800 --> 00:11:43.023
That's how we're able to call params and headers.
248
00:11:43.023 --> 00:11:44.820
I don't want this part to be confusing
249
00:11:44.820 --> 00:11:46.120
but I still, at the same time,
250
00:11:46.120 --> 00:11:47.850
because this is an advanced course,
251
00:11:47.850 --> 00:11:50.720
I wanna show you more advanced techniques.
252
00:11:50.720 --> 00:11:53.080
This is exactly the same thing
253
00:11:53.080 --> 00:11:57.310
as like say I called this one paramsObject
254
00:11:58.449 --> 00:12:00.366
and then headersObject.
255
00:12:02.550 --> 00:12:04.960
What I did here is exactly the same
256
00:12:04.960 --> 00:12:07.060
as if I said params and then paramsObject,
257
00:12:08.480 --> 00:12:12.420
and then headers and headersObject.
258
00:12:12.420 --> 00:12:15.140
It's gonna have the identical result.
259
00:12:15.140 --> 00:12:19.210
The only difference is whenever you have the same name
260
00:12:19.210 --> 00:12:21.450
as the key that you're passing in,
261
00:12:21.450 --> 00:12:24.560
you can just have that little shortcut
262
00:12:24.560 --> 00:12:27.880
where you don't need to type that manually,
263
00:12:27.880 --> 00:12:30.630
you don't have to type out the full key-value pair,
264
00:12:30.630 --> 00:12:33.350
but it equates to exactly the same thing.
265
00:12:33.350 --> 00:12:35.700
So I'm gonna get rid of each of those
266
00:12:35.700 --> 00:12:38.410
and we're back to our working version.
267
00:12:38.410 --> 00:12:41.890
So we're running this query to memipedia_queries.
268
00:12:41.890 --> 00:12:45.050
We're passing in our search, our authorization,
269
00:12:45.050 --> 00:12:47.100
and then we're listening for the data
270
00:12:47.100 --> 00:12:48.840
and we saw that it came back.
271
00:12:48.840 --> 00:12:51.780
We also saw that if we passed in
272
00:12:51.780 --> 00:12:53.720
or searched for something that didn't exist,
273
00:12:53.720 --> 00:12:57.000
we get an empty array, which means that at some point.
274
00:12:57.000 --> 00:13:00.680
we are gonna build out the ability to show that to the user.
275
00:13:00.680 --> 00:13:03.080
So that's just to give you a preview
276
00:13:03.080 --> 00:13:04.770
of what we're gonna start building out.
277
00:13:04.770 --> 00:13:08.820
We're gonna build out three types of states
278
00:13:08.820 --> 00:13:12.320
or stages for our application or for the screen.
279
00:13:12.320 --> 00:13:17.090
When the user searches, they're either gonna see the posts
280
00:13:17.090 --> 00:13:20.680
or they're going to see that no posts were there
281
00:13:20.680 --> 00:13:21.730
and we have to tell them that.
282
00:13:21.730 --> 00:13:24.190
We don't wanna just have an empty screen.
283
00:13:24.190 --> 00:13:26.100
And then the other thing that we're gonna do,
284
00:13:26.100 --> 00:13:29.070
the third stage, is we're gonna have a loading
285
00:13:29.070 --> 00:13:34.070
or a is searching type of state as well to let the user know
286
00:13:34.260 --> 00:13:37.200
that we are running that query on the API,
287
00:13:37.200 --> 00:13:39.360
and we're gonna show the little loading
288
00:13:39.360 --> 00:13:40.800
or activity indicator.
289
00:13:40.800 --> 00:13:43.010
And when it's done, we're gonna turn that off
290
00:13:43.010 --> 00:13:44.830
and we're gonna show the posts
291
00:13:44.830 --> 00:13:48.920
or a message that says that no post could be found.
292
00:13:48.920 --> 00:13:50.490
Great job if you went through that.
293
00:13:50.490 --> 00:13:52.560
You now have the ability
294
00:13:52.560 --> 00:13:56.273
to have a full search engine for your application.