- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.640 --> 00:00:03.540
In this guide we're gonna finish up our search screen.
2
00:00:03.540 --> 00:00:06.450
Right now the only thing that I think we really need
3
00:00:06.450 --> 00:00:09.290
is to give the users some feedback
4
00:00:09.290 --> 00:00:11.320
as they're using the application.
5
00:00:11.320 --> 00:00:13.490
So in the search screen right here,
6
00:00:13.490 --> 00:00:17.640
imagine that a user types in something that doesn't exist.
7
00:00:17.640 --> 00:00:20.490
So there are no results that match the query.
8
00:00:20.490 --> 00:00:22.700
If they type return right here,
9
00:00:22.700 --> 00:00:26.500
it worked but the user doesn't know that it worked.
10
00:00:26.500 --> 00:00:30.370
And then also what happens if we have a really slow query?
11
00:00:30.370 --> 00:00:32.560
I can't really mimic anything like that right now
12
00:00:32.560 --> 00:00:35.510
but let's imagine that they typed in Programming
13
00:00:35.510 --> 00:00:39.680
and it took a few seconds to get the result set back.
14
00:00:39.680 --> 00:00:42.670
If the server is really busy, that could definitely happen.
15
00:00:42.670 --> 00:00:46.970
Well with that in mind I think that we have to build out
16
00:00:46.970 --> 00:00:48.540
our other two states.
17
00:00:48.540 --> 00:00:50.170
Now we mentioned this earlier.
18
00:00:50.170 --> 00:00:54.920
We need to show the user when the items are loading,
19
00:00:54.920 --> 00:00:58.190
and then we also need to show the user some feedback
20
00:00:58.190 --> 00:01:00.550
for when no results were found.
21
00:01:00.550 --> 00:01:03.370
So let's add a few pieces of state
22
00:01:03.370 --> 00:01:05.600
and we're also gonna clean up our dependencies.
23
00:01:05.600 --> 00:01:08.280
We are not using the Text tag anymore,
24
00:01:08.280 --> 00:01:11.860
and we're not using the ActivityIndicator yet
25
00:01:11.860 --> 00:01:14.470
but we are about to so we'll keep that one.
26
00:01:14.470 --> 00:01:18.280
Okay now down here in our list of state items
27
00:01:18.280 --> 00:01:21.130
I'm gonna add two new elements.
28
00:01:21.130 --> 00:01:24.230
I'm gonna say const, isLoading, setIsLoading
29
00:01:27.190 --> 00:01:29.840
and then I'm gonna say useState.
30
00:01:29.840 --> 00:01:31.910
And by default this is gonna be false
31
00:01:31.910 --> 00:01:35.720
because by default when the screen loads up
32
00:01:35.720 --> 00:01:37.250
we're not looking for anything.
33
00:01:37.250 --> 00:01:40.340
We're waiting for the user to type their search query in.
34
00:01:40.340 --> 00:01:42.870
So by default we want this to be false.
35
00:01:42.870 --> 00:01:46.210
Then I wanna add in something
36
00:01:46.210 --> 00:01:48.690
that keeps track to see if the user
37
00:01:48.690 --> 00:01:52.540
entered something that doesn't have any post results in it.
38
00:01:52.540 --> 00:01:55.920
If that's the case, I'm gonna say emptyQuery.
39
00:01:57.230 --> 00:01:58.790
That's gonna be the name of the state,
40
00:01:58.790 --> 00:02:00.390
and then I'll say setEmptyQuery.
41
00:02:03.070 --> 00:02:07.130
And then this is also gonna default to false.
42
00:02:07.130 --> 00:02:10.290
Okay with both of those elements in place
43
00:02:10.290 --> 00:02:13.710
what we can do now is inside of handleSearch,
44
00:02:13.710 --> 00:02:15.370
we can trigger these.
45
00:02:15.370 --> 00:02:17.710
Because we do now want these to run too early
46
00:02:17.710 --> 00:02:21.320
we wanna run them as soon as the user has hit Enter
47
00:02:21.320 --> 00:02:23.390
or they've clicked the search icon.
48
00:02:23.390 --> 00:02:28.070
So let's say setIsLoading should be true,
49
00:02:28.070 --> 00:02:31.000
and then also same thing setEmptyQuery.
50
00:02:32.440 --> 00:02:33.880
Oh, and actually you know what?
51
00:02:33.880 --> 00:02:36.190
For setEmptyQuery I almost typed true.
52
00:02:36.190 --> 00:02:40.750
We wanna make sure that setEmptyQuery is false at this state
53
00:02:40.750 --> 00:02:42.730
and I'm gonna show you why in a second.
54
00:02:42.730 --> 00:02:45.760
Why we need to put this in here at this stage.
55
00:02:45.760 --> 00:02:47.680
So this is gonna be false.
56
00:02:47.680 --> 00:02:52.640
Okay now let's come down here and we're gonna check to see
57
00:02:52.640 --> 00:02:55.200
if we had any posts.
58
00:02:55.200 --> 00:02:57.270
So this is where that's going to occur.
59
00:02:57.270 --> 00:02:59.160
So we're always going to make sure
60
00:02:59.160 --> 00:03:01.740
that our loading state is tuned off,
61
00:03:01.740 --> 00:03:03.780
whether we get posts or we don't
62
00:03:03.780 --> 00:03:06.940
That one is going to always be false.
63
00:03:06.940 --> 00:03:08.690
So let's change that, setIsLoading,
64
00:03:09.860 --> 00:03:12.350
and we want it to be false right here.
65
00:03:12.350 --> 00:03:14.360
And then if we get an error
66
00:03:14.360 --> 00:03:17.800
we also want to have that be false.
67
00:03:17.800 --> 00:03:19.840
And let's also add a little alert.
68
00:03:19.840 --> 00:03:24.573
So I'm gonna say alert, error running query.
69
00:03:26.690 --> 00:03:28.210
Something like that.
70
00:03:28.210 --> 00:03:30.890
Okay so now that we have that,
71
00:03:30.890 --> 00:03:32.690
let's just test this out
72
00:03:32.690 --> 00:03:33.970
and make sure we don't have any bugs.
73
00:03:33.970 --> 00:03:36.620
So I hit save, nothing's gonna change obviously
74
00:03:36.620 --> 00:03:39.580
'cause we didn't change anything in the render function yet
75
00:03:39.580 --> 00:03:43.670
but it looks like we don't have any errors or any issues.
76
00:03:43.670 --> 00:03:45.340
So now we're gonna check to see
77
00:03:45.340 --> 00:03:48.050
do we have any posts when this comes in?
78
00:03:48.050 --> 00:03:50.990
So in other words is this an empty array
79
00:03:50.990 --> 00:03:53.030
or are there elements in it?
80
00:03:53.030 --> 00:03:54.920
So I'm going to add a conditional here
81
00:03:54.920 --> 00:03:59.813
that says if response.data.memididia_posts.length
82
00:04:01.830 --> 00:04:04.540
is greater than zero,
83
00:04:04.540 --> 00:04:08.360
then I want to set the posts here.
84
00:04:08.360 --> 00:04:11.910
And then else we don't even have to worry about.
85
00:04:11.910 --> 00:04:14.190
Now the other thing we wanna do here though
86
00:04:14.190 --> 00:04:17.870
is we don't wanna do anything with posts
87
00:04:17.870 --> 00:04:20.880
because that's gonna be an empty array.
88
00:04:20.880 --> 00:04:24.480
And let's see yeah so setEmptyQuery.
89
00:04:24.480 --> 00:04:28.110
This is where we want setEmptyQuery.
90
00:04:28.110 --> 00:04:31.000
This is gonna be true.
91
00:04:31.000 --> 00:04:32.373
Okay, and actually you know what?
92
00:04:32.373 --> 00:04:33.630
I just thought of something.
93
00:04:33.630 --> 00:04:35.600
So let's walk through the logic of this one
94
00:04:35.600 --> 00:04:39.260
'cause I think I just caught myself making a little mistake.
95
00:04:39.260 --> 00:04:42.370
So imagine a scenario where the user
96
00:04:42.370 --> 00:04:44.940
has typed in one search query.
97
00:04:44.940 --> 00:04:46.960
And so we have our set of posts
98
00:04:46.960 --> 00:04:48.730
and it's filling up the screen.
99
00:04:48.730 --> 00:04:50.670
And then they run a different search
100
00:04:50.670 --> 00:04:53.930
and there are no items returned.
101
00:04:53.930 --> 00:04:56.750
Well with the way this system would work,
102
00:04:56.750 --> 00:04:59.760
the new posts, or that empty array of posts
103
00:04:59.760 --> 00:05:03.023
would not get overwritten, and that would not be good.
104
00:05:03.901 --> 00:05:04.734
So let's fix that.
105
00:05:04.734 --> 00:05:06.670
So we can actually streamline this
106
00:05:06.670 --> 00:05:08.860
we can refactor this, I like this one.
107
00:05:08.860 --> 00:05:10.680
And so let's say this.
108
00:05:10.680 --> 00:05:15.680
What if we say that response.data.memipedia_posts.length
109
00:05:15.900 --> 00:05:19.000
is triple equals to zero?
110
00:05:19.000 --> 00:05:22.160
What we can do is say is I wanna set the empty query
111
00:05:22.160 --> 00:05:25.310
to be true, but no matter what happens
112
00:05:25.310 --> 00:05:26.720
we don't need an else.
113
00:05:26.720 --> 00:05:30.390
No matter what happens, we want to set the posts.
114
00:05:30.390 --> 00:05:34.590
Because remember if we run a query and it's empty,
115
00:05:34.590 --> 00:05:37.170
this is gonna be an empty array.
116
00:05:37.170 --> 00:05:39.450
This would simply turn into that.
117
00:05:40.670 --> 00:05:43.870
So we don't actually even need to change anything there.
118
00:05:43.870 --> 00:05:45.750
We simply need to run one check
119
00:05:45.750 --> 00:05:50.720
to see if the length is zero then it's empty.
120
00:05:50.720 --> 00:05:54.020
So let's hit save here and let's test it out
121
00:05:54.020 --> 00:05:55.700
to make sure everything is still working.
122
00:05:55.700 --> 00:05:58.870
So Programming, search for that.
123
00:05:58.870 --> 00:06:01.220
Everything's still working, so we're all good there.
124
00:06:01.220 --> 00:06:04.130
Now let's build out a render function.
125
00:06:04.130 --> 00:06:06.780
So right now, we have our search bar
126
00:06:06.780 --> 00:06:09.010
and then we have our PostList.
127
00:06:09.010 --> 00:06:11.670
So I'm gonna create a new function here
128
00:06:11.670 --> 00:06:15.123
and it's gonna be called queryRenderer, queryRenderer.
129
00:06:17.200 --> 00:06:19.400
And it's gonna just be a fat arrow function
130
00:06:19.400 --> 00:06:21.180
that won't take in any arguments.
131
00:06:21.180 --> 00:06:22.930
And this is where we're gonna walk though
132
00:06:22.930 --> 00:06:24.530
those three stages.
133
00:06:24.530 --> 00:06:29.440
So I'm gonna say if isLoading is true,
134
00:06:29.440 --> 00:06:33.133
then I want to return the ActivityIndicator.
135
00:06:34.090 --> 00:06:36.603
That's our little spinning icon.
136
00:06:37.630 --> 00:06:42.300
Else if, and then we can say right here.
137
00:06:42.300 --> 00:06:43.890
This one we can say what's the name
138
00:06:43.890 --> 00:06:45.493
of our piece of state?
139
00:06:47.066 --> 00:06:49.210
EmptyQuery, so then we can say
140
00:06:49.210 --> 00:06:54.210
okay if not emptyQuery, and then here
141
00:06:54.840 --> 00:06:59.840
we're gonna return a View tag and a Text tag.
142
00:07:00.130 --> 00:07:02.730
Actually got rid of the Text tag a little bit too early
143
00:07:02.730 --> 00:07:04.513
so we can import that.
144
00:07:05.950 --> 00:07:07.710
And we have to import up the top
145
00:07:07.710 --> 00:07:10.360
'cause auto import didn't work that time.
146
00:07:10.360 --> 00:07:13.993
So here we want to pull in the Text tag.
147
00:07:15.230 --> 00:07:18.040
And what we wanna show is we just wanna say
148
00:07:18.040 --> 00:07:19.920
hey we don't have any data here.
149
00:07:19.920 --> 00:07:24.920
So say something like there were no posts
150
00:07:26.140 --> 00:07:27.693
matching your search.
151
00:07:29.260 --> 00:07:31.060
And then we'll add some style,
152
00:07:31.060 --> 00:07:33.320
some quick styles to that in a bit.
153
00:07:33.320 --> 00:07:36.613
And then lastly, we'll say else.
154
00:07:37.450 --> 00:07:42.200
And that's where we're just gonna return our PostList.
155
00:07:42.200 --> 00:07:44.830
So we can cut this.
156
00:07:44.830 --> 00:07:47.050
And if you wanted to get really particular
157
00:07:47.050 --> 00:07:48.810
and wanted to really watch out for bugs,
158
00:07:48.810 --> 00:07:53.240
the other thing you could say is else if posts
159
00:07:53.240 --> 00:07:58.230
and posts.length is greater than zero
160
00:07:58.230 --> 00:07:59.670
then you could have this there.
161
00:07:59.670 --> 00:08:03.200
And then lastly, you could say else return null.
162
00:08:03.200 --> 00:08:07.750
We can do that just as a final nil guard there.
163
00:08:07.750 --> 00:08:10.130
So let's call our queryRenderer now
164
00:08:10.130 --> 00:08:11.640
and see if this is working.
165
00:08:11.640 --> 00:08:14.950
So inside of curly brackets call queryRenderer.
166
00:08:14.950 --> 00:08:18.820
Hit save and so far so good, we don't have any errors.
167
00:08:18.820 --> 00:08:21.090
Let's search for Programming.
168
00:08:21.090 --> 00:08:23.070
We should see for a split second,
169
00:08:23.070 --> 00:08:26.400
we should see a little ActivityIndicator right there.
170
00:08:26.400 --> 00:08:27.980
Hit search and it did pop up.
171
00:08:27.980 --> 00:08:29.270
So that is working.
172
00:08:29.270 --> 00:08:32.510
These queries are very fast so you're only gonna see it
173
00:08:32.510 --> 00:08:34.460
for a split second, that's good.
174
00:08:34.460 --> 00:08:36.980
And now let's look for something that doesn't exist.
175
00:08:36.980 --> 00:08:39.040
Coding, hit return.
176
00:08:39.040 --> 00:08:41.230
And there we go, it's hard to see
177
00:08:41.230 --> 00:08:42.740
but it does have it right there.
178
00:08:42.740 --> 00:08:45.590
Let's add some styles to our View.
179
00:08:45.590 --> 00:08:49.680
So for our View we're going to add in style.
180
00:08:49.680 --> 00:08:54.680
Let's add paddingRight at 15, paddingLeft at 15.
181
00:08:56.320 --> 00:09:01.320
And then for the Text, a style of color white.
182
00:09:04.500 --> 00:09:07.630
Hit save, let's try it out one more time.
183
00:09:07.630 --> 00:09:10.580
Coding, there we go, it says there were no posts
184
00:09:10.580 --> 00:09:12.160
matching your search.
185
00:09:12.160 --> 00:09:15.443
Let's try this out and replace it with Programming.
186
00:09:16.720 --> 00:09:20.210
And you can see that it no longer says that anymore.
187
00:09:20.210 --> 00:09:23.030
That got replaced by our PostList.
188
00:09:23.030 --> 00:09:24.840
So this is all looking really good.
189
00:09:24.840 --> 00:09:27.660
If I just type something else out, let me see.
190
00:09:27.660 --> 00:09:29.860
I forget some of the names I typed out.
191
00:09:29.860 --> 00:09:31.640
Oh yeah I guess I could type like Asdf
192
00:09:31.640 --> 00:09:33.260
or something like that.
193
00:09:33.260 --> 00:09:36.610
If I do that, that works perfect.
194
00:09:36.610 --> 00:09:39.460
Now I'll switch back to Programming, hit search
195
00:09:42.970 --> 00:09:45.200
and it replaces the result set.
196
00:09:45.200 --> 00:09:47.450
So this is all looking really good.
197
00:09:47.450 --> 00:09:50.460
I think our search functionality is done
198
00:09:50.460 --> 00:09:52.010
and I'm happy with it.
199
00:09:52.010 --> 00:09:53.980
In the next guide, we're gonna see
200
00:09:53.980 --> 00:09:58.980
how we can build out that cool pull to refresh functionality
201
00:09:59.350 --> 00:10:02.480
that you see in all kinds of different applications