1
00:00:07,970 --> 00:00:11,120
Hey everybody what's going on this is Caleb with slopes dot com.

2
00:00:11,130 --> 00:00:16,920
And in this video we're going to set up search Fisi and it's table view the X way we're going to use

3
00:00:16,920 --> 00:00:19,450
our X swift hardcore in this video.

4
00:00:19,620 --> 00:00:26,400
And we're basically going to set up our search bar to be able to cause our table view to react to the

5
00:00:26,400 --> 00:00:28,380
data that we're passing into it.

6
00:00:28,380 --> 00:00:34,770
And as we enter search queries or characters we're basically going to be able to make API calls download

7
00:00:34,770 --> 00:00:38,990
all the data and return it to our table view which is really really cool.

8
00:00:39,000 --> 00:00:45,890
So pull open that X code project close the assistant editor and let's go ahead and let's head into search.

9
00:00:45,880 --> 00:00:47,520
VC we've got a lot to do.

10
00:00:47,520 --> 00:00:49,200
So let's get started.

11
00:00:49,200 --> 00:00:53,800
So first we need to of course import our swift.

12
00:00:54,150 --> 00:00:58,820
OK then we need to import our X cocoa so that we can use it with the table view.

13
00:00:59,070 --> 00:01:01,840
We also we're going to need to import Alamo fire.

14
00:01:02,020 --> 00:01:07,950
And yeah let's go ahead and now that we have those imported Let's start by setting up our dispose bag

15
00:01:07,950 --> 00:01:10,550
which is a pretty common way of doing things.

16
00:01:10,720 --> 00:01:12,330
Var dispose.

17
00:01:12,510 --> 00:01:14,450
Equals dispose bag.

18
00:01:14,760 --> 00:01:15,630
All right.

19
00:01:15,630 --> 00:01:17,250
So now we've got to dispose bag.

20
00:01:17,250 --> 00:01:18,540
That's awesome.

21
00:01:18,540 --> 00:01:23,250
Let's go ahead and let's write a function that's going to be our binder function that we're basically

22
00:01:23,250 --> 00:01:30,510
going to use to set up our search bar and bind the results from that search bar to our table view.

23
00:01:30,540 --> 00:01:38,250
So let's go ahead and call phunk bind search bar search bar and we're going to go ahead and start by

24
00:01:38,250 --> 00:01:41,630
just calling a search bar or a search field.

25
00:01:41,850 --> 00:01:44,490
Yeah you know we should rename it search field because it's not really a bar.

26
00:01:44,780 --> 00:01:49,490
OK so a search field is our textfield here.

27
00:01:49,530 --> 00:01:51,060
As you remember from the simulator.

28
00:01:51,260 --> 00:01:51,500
OK.

29
00:01:51,530 --> 00:01:58,110
That's this here the search field so we can actually go in and access the R X property we can access

30
00:01:58,170 --> 00:02:05,760
the text from that textfield and now upon this we can call all kinds of crazy functions right we can

31
00:02:05,760 --> 00:02:09,150
link them together just like we've learned in the first sections of this course.

32
00:02:09,210 --> 00:02:13,960
So we're going to actually start with one we've never talked about called or empty.

33
00:02:13,960 --> 00:02:14,550
OK.

34
00:02:14,820 --> 00:02:22,500
And what or empty does is it basically transforms a property of type nil like an empty string into a

35
00:02:22,500 --> 00:02:23,120
string.

36
00:02:23,130 --> 00:02:25,170
Basically it just sets it up as an empty string.

37
00:02:25,170 --> 00:02:29,300
So if there's nothing it just converts it to an empty string which is pretty cool.

38
00:02:29,520 --> 00:02:33,450
And as we call these functions I'm going to go ahead and put them beneath where they're supposed to

39
00:02:33,450 --> 00:02:34,020
go.

40
00:02:34,350 --> 00:02:40,230
And so let's say that we type in three letters to our textfield we're going to go ahead and map those.

41
00:02:40,230 --> 00:02:42,260
Now so-called dot map.

42
00:02:42,540 --> 00:02:49,170
And then using map we're going to go ahead and enter this little map closure here like so.

43
00:02:49,410 --> 00:02:55,890
And remember when we use map we can access every element that we are using which in this case is every

44
00:02:55,890 --> 00:02:57,280
element of our string.

45
00:02:57,630 --> 00:03:03,030
And we can use a dollar sign zero to access those maps sort of like a for loop that loops through everything

46
00:03:03,840 --> 00:03:07,450
with exception to this being we're typing in the text field here.

47
00:03:07,500 --> 00:03:13,250
We're going to set it up so that if we type characters that are not you are all friendly we're going

48
00:03:13,240 --> 00:03:17,820
to make them you are all friendly like if we were to search for something with a space if you know anything

49
00:03:17,820 --> 00:03:22,430
about you are ell's a space is equal to percent sign to zero.

50
00:03:22,590 --> 00:03:27,930
So what we're going to do is we're basically going to set it up so that any any text that comes in is

51
00:03:28,020 --> 00:03:29,090
you are all compliant.

52
00:03:29,100 --> 00:03:33,430
So we're going to convert everything to make it your L tech so that it doesn't cause any issues.

53
00:03:33,450 --> 00:03:38,220
So go ahead and type dollar sign zero adding percent encoding.

54
00:03:38,220 --> 00:03:43,170
That's what we need to do because we can add that percent in coding for a while with allowed characters

55
00:03:43,200 --> 00:03:51,460
and we're going to allow the character set and inside character set we can access you RL queery allowed

56
00:03:51,990 --> 00:03:57,390
and that's basically going to convert everything into a u r l query.

57
00:03:57,390 --> 00:04:03,690
Now the interesting thing is is what if we don't type anything we shouldn't be converting like an empty

58
00:04:03,690 --> 00:04:07,500
string into a dollar or a percent sign to zero.

59
00:04:07,500 --> 00:04:07,870
Right.

60
00:04:07,940 --> 00:04:10,110
It's not really a space it's just empty.

61
00:04:10,110 --> 00:04:15,120
So if we don't have anything we're going to use the ternary operator to go ahead and just return an

62
00:04:15,120 --> 00:04:16,110
empty string.

63
00:04:16,430 --> 00:04:17,050
OK.

64
00:04:17,370 --> 00:04:22,500
So now anything that we search we're going to go ahead and map to you our LFA it.

65
00:04:22,680 --> 00:04:27,510
And now what we're going to do is we're going to take this and we're going to use flat map in order

66
00:04:27,510 --> 00:04:33,760
to convert the search query into an observable of type repo array.

67
00:04:33,780 --> 00:04:37,450
So go ahead call DOT flat map and.

68
00:04:37,470 --> 00:04:38,850
Whoops sorry.

69
00:04:38,850 --> 00:04:41,910
And the string here that's coming in.

70
00:04:42,000 --> 00:04:45,550
What we're going to do is we're going to call that query.

71
00:04:45,570 --> 00:04:46,240
OK.

72
00:04:46,620 --> 00:04:50,220
Now this is the generic observable convertible type.

73
00:04:50,220 --> 00:04:57,070
What we're going to actually do is we're going to return observable of type array of Repo.

74
00:04:57,150 --> 00:05:03,330
Right because that's what we want we want our table view to update with this observable and we're going

75
00:05:03,330 --> 00:05:05,800
to pass in our trending repo array.

76
00:05:05,850 --> 00:05:06,930
That's what we have been doing.

77
00:05:06,930 --> 00:05:09,020
So we should definitely continue to do that.

78
00:05:09,060 --> 00:05:15,480
If you think about trending feed the sea we use the published subject of type rethrow and we use that

79
00:05:15,540 --> 00:05:21,360
to pass in our trending repo array and that's how our table view can be updated in real time which is

80
00:05:21,360 --> 00:05:22,410
really neat.

81
00:05:22,410 --> 00:05:27,690
So we're using an observable here because we want it to be a little bit generic with how we're using

82
00:05:27,690 --> 00:05:27,780
it.

83
00:05:27,780 --> 00:05:31,740
So go ahead and you know put this on its own line.

84
00:05:31,740 --> 00:05:38,280
And now inside flat map we have a query meaning the text that comes through when we actually use this

85
00:05:38,280 --> 00:05:41,550
it's going to be returned as an observable.

86
00:05:41,550 --> 00:05:43,580
That is of type array of repo.

87
00:05:43,830 --> 00:05:48,420
So if the query is equal to an empty string.

88
00:05:48,500 --> 00:05:51,510
Right because that can come in if it's empty.

89
00:05:51,510 --> 00:05:57,180
What we're going to do is we're going to go ahead and return an observable and we're going to use the

90
00:05:57,240 --> 00:06:03,400
specific type that we need array of repo and we're going to go ahead and type it just.

91
00:06:03,510 --> 00:06:08,340
You should remember using this just allows us to basically create an observable with a single element

92
00:06:08,880 --> 00:06:11,990
and that single element is going to be an empty array.

93
00:06:12,030 --> 00:06:15,560
Right because if our search is nothing then we should have an empty array.

94
00:06:15,570 --> 00:06:16,560
Very cool.

95
00:06:16,920 --> 00:06:22,710
Otherwise meaning if there is a search query if we have typed something we should go ahead and basically

96
00:06:22,710 --> 00:06:23,910
create a u r l.

97
00:06:23,910 --> 00:06:24,410
Right.

98
00:06:24,450 --> 00:06:31,190
We have our search you are l and we need to basically take our query and add it to our search you are.

99
00:06:31,200 --> 00:06:32,470
So check it out.

100
00:06:32,520 --> 00:06:35,940
Constance here and our search you are is this.

101
00:06:35,940 --> 00:06:42,760
Now if you remember our query is going to go after the Q equals so we can do search you r l plus queery.

102
00:06:42,810 --> 00:06:46,360
Right because our queries coming in through our flat map.

103
00:06:46,380 --> 00:06:47,220
All right.

104
00:06:47,220 --> 00:06:56,730
So go ahead and just type let you Arel equals search U R L plus queery And if you remember we created

105
00:06:56,730 --> 00:07:00,570
another segment here to sort them by stars descending.

106
00:07:00,570 --> 00:07:04,200
So we can go ahead and add the stars descending segment to the very end.

107
00:07:04,230 --> 00:07:10,930
So go ahead and do search you r l plus queery plus plus stars descending segment.

108
00:07:11,280 --> 00:07:16,430
And now we have a U R L that is comprised of all of our elements which is amazing.

109
00:07:16,440 --> 00:07:20,760
So now instead of using Alamo fire you know what I think I'm actually gonna go ahead and just get rid

110
00:07:20,760 --> 00:07:23,290
of Alamo fire for this view controller.

111
00:07:23,370 --> 00:07:25,740
I want to show you how to do it with an S you are all session.

112
00:07:25,740 --> 00:07:31,290
OK we do have access to Alamo fire but this isn't an Alamo fire course so I want to show you what is

113
00:07:31,290 --> 00:07:34,940
possible thanks to you are in session.

114
00:07:34,980 --> 00:07:40,440
So basically we're going to go ahead and create a web request using your session then we're going to

115
00:07:40,440 --> 00:07:45,270
go through and parse through all the data we're going to go ahead and create repo's and then return

116
00:07:45,270 --> 00:07:47,860
them as an observable of an array of repo.

117
00:07:47,870 --> 00:07:53,210
So go ahead and just type return you Arel session.

118
00:07:53,460 --> 00:07:54,270
OK.

119
00:07:54,300 --> 00:07:57,880
And we're going to go ahead and access your all session.

120
00:07:57,910 --> 00:08:00,510
Shared our X and this.

121
00:08:00,540 --> 00:08:08,220
The reason we are able to return this session is because thanks to our X Ko-Ko we can access the reactive

122
00:08:08,220 --> 00:08:09,560
part of your session.

123
00:08:09,580 --> 00:08:15,270
OK so this gives us reactive properties and that basically allows us to return things as observables

124
00:08:15,270 --> 00:08:17,280
not just as normal swithe types.

125
00:08:17,340 --> 00:08:23,420
So you are all session shared are X and now we can call datt Jaison.

126
00:08:23,730 --> 00:08:24,750
How cool is that.

127
00:08:24,780 --> 00:08:29,980
And we can basically passen a u r l and it's going to create an observable full of Jason.

128
00:08:30,000 --> 00:08:33,920
So what is r u r l u r l k we already created it.

129
00:08:33,930 --> 00:08:35,160
That's super neat.

130
00:08:35,190 --> 00:08:41,680
So what we can do is oh you know what sorry we need to basically cast this as a u r l.

131
00:08:41,940 --> 00:08:46,620
So go ahead and put u r l dot hold up.

132
00:08:47,120 --> 00:08:50,180
Let's see you are old.

133
00:08:51,290 --> 00:08:54,350
Maybe it's you are ill with string.

134
00:08:54,350 --> 00:08:54,880
There we go.

135
00:08:54,980 --> 00:08:55,510
OK.

136
00:08:55,670 --> 00:08:57,330
And the u r l is there.

137
00:08:57,570 --> 00:08:59,690
OK because that is of type string.

138
00:08:59,690 --> 00:09:03,820
So now we can do is we can take all of the sun data.

139
00:09:03,870 --> 00:09:06,680
Oh sorry we've got to force unwrap it first.

140
00:09:06,680 --> 00:09:07,830
There we go it's yelling at me.

141
00:09:07,880 --> 00:09:12,620
So go ahead and call that map and we're going to use map actually to take the Jason that comes in.

142
00:09:12,620 --> 00:09:16,140
We're going to cast it as an array of dictionaries like we have been.

143
00:09:16,170 --> 00:09:19,700
We're going to actually go ahead and with a for loop we're going to cycle through.

144
00:09:19,700 --> 00:09:24,270
We're going to create a repot that contains all the information that we need.

145
00:09:24,410 --> 00:09:25,030
Okay.

146
00:09:25,400 --> 00:09:30,040
And then we're going to go ahead and pen that back to our observable just like so.

147
00:09:30,320 --> 00:09:35,700
So we now can go ahead and type results because you know your el session has results.

148
00:09:35,750 --> 00:09:40,660
Type let results and that's going to be equal to dollar sign zero.

149
00:09:40,700 --> 00:09:43,870
Right because that's the sun that comes in from map we're mapping it.

150
00:09:44,090 --> 00:09:49,120
So we're going to take whatever comes in and we're going to go ahead and map it as any object.

151
00:09:49,130 --> 00:09:54,830
Because at this point we're not sure what the Jaison is coming in as it could be anything since it's

152
00:09:54,830 --> 00:10:01,640
coming in as any object we're going to go ahead and pull out the specific array of dictionaries by typing

153
00:10:01,670 --> 00:10:05,690
let items equals results.

154
00:10:05,810 --> 00:10:10,780
Object and you'll see that there is an option here object for key of type any.

155
00:10:11,210 --> 00:10:17,400
And we're going to go ahead and pull out these specific key of type items.

156
00:10:17,420 --> 00:10:23,930
And if you remember in our download service when we first download all of the repo's the initial array

157
00:10:23,930 --> 00:10:28,610
is called items and you know what we could be using Alamo fire.

158
00:10:28,610 --> 00:10:35,390
But the reason we're using you are el session is because we are able to access the X property and Alamo

159
00:10:35,390 --> 00:10:38,320
fire in and of itself doesn't have reactive capabilities.

160
00:10:38,330 --> 00:10:39,400
So here we go.

161
00:10:39,410 --> 00:10:46,340
We now have access to our Jason array of dictionaries called items and in order to actually use this

162
00:10:46,610 --> 00:10:54,610
we're going to go ahead and cast it as an array of dictionaries of type string and any just like so.

163
00:10:54,920 --> 00:10:55,400
OK.

164
00:10:55,490 --> 00:11:00,020
So that's great but we have a potential problem here.

165
00:11:00,020 --> 00:11:02,990
What if we don't get any results back or if we search for something.

166
00:11:02,990 --> 00:11:04,670
And there are no results.

167
00:11:04,670 --> 00:11:09,950
We're going to use the ternary operator to just return an empty array like so.

168
00:11:10,270 --> 00:11:10,760
OK.

169
00:11:10,820 --> 00:11:15,530
So if there's nothing if there are no results we're going to go ahead and return an empty array.

170
00:11:15,800 --> 00:11:17,350
That's just the way we can be safe.

171
00:11:17,360 --> 00:11:24,200
So items is our Jason array of dictionaries for the results that we potentially will get.

172
00:11:24,200 --> 00:11:31,430
So assuming we get a bunch of results go ahead and type for item in items meaning for a particular repository

173
00:11:32,020 --> 00:11:37,090
we're going to go ahead and set up a custom repo that returns the data we need.

174
00:11:37,100 --> 00:11:41,260
Now we're not going to use all of it of course because we don't have the contributors count.

175
00:11:41,270 --> 00:11:43,580
We don't have an image et cetera et cetera.

176
00:11:43,640 --> 00:11:47,360
So we're going to use guard let to ensure that we definitely do have the data we want.

177
00:11:47,360 --> 00:11:52,820
So go ahead and type guard let And just like before we're going to go ahead and create a property for

178
00:11:52,880 --> 00:11:54,710
each of the properties we want.

179
00:11:54,710 --> 00:11:57,730
And then at the end we will call else return.

180
00:11:57,890 --> 00:11:59,330
If we don't have what we want.

181
00:11:59,330 --> 00:12:01,390
So guard let name.

182
00:12:01,460 --> 00:12:07,610
It's going to be equal to item or remember item singular because each one is a dictionary.

183
00:12:07,910 --> 00:12:13,700
And in that item we're going to go ahead and pull out the name and whips and cast it optionally as a

184
00:12:13,700 --> 00:12:15,200
string.

185
00:12:15,200 --> 00:12:22,940
Now we're going to go ahead and type let description equals item wups

186
00:12:26,650 --> 00:12:30,600
description as string

187
00:12:33,460 --> 00:12:37,940
then we're going to go ahead and type Let us language.

188
00:12:38,020 --> 00:12:40,650
We do need that equals item

189
00:12:44,300 --> 00:12:46,830
as string.

190
00:12:46,830 --> 00:12:47,230
What else.

191
00:12:47,240 --> 00:12:50,990
It's looks like we have indented improperly here we should not have.

192
00:12:51,030 --> 00:12:51,900
All right cool.

193
00:12:51,930 --> 00:12:54,240
So we have the language.

194
00:12:54,240 --> 00:12:55,010
Next we're going to do.

195
00:12:55,020 --> 00:13:03,740
Let forks count equals item and the key here is fork's underscore count.

196
00:13:03,930 --> 00:13:06,220
We're going to cast that as string as well.

197
00:13:06,240 --> 00:13:17,940
Then let repot u r l equals item and it's going to be HVM l underscore u r l as string K and we are

198
00:13:17,940 --> 00:13:19,620
now at the end of what we need.

199
00:13:19,650 --> 00:13:21,440
So we can go ahead and say else.

200
00:13:21,450 --> 00:13:24,150
Whoops that should be a string else.

201
00:13:24,150 --> 00:13:26,080
And think about this we're inside of a for loop.

202
00:13:26,100 --> 00:13:29,250
So we want to break out of the for loop and then go to the next item.

203
00:13:29,250 --> 00:13:30,990
So we're just going to call break.

204
00:13:31,170 --> 00:13:31,990
All right.

205
00:13:32,340 --> 00:13:32,940
That's great.

206
00:13:32,940 --> 00:13:38,640
So now that we have gone through we've created this guard let for all of our properties to ensure that

207
00:13:38,640 --> 00:13:40,640
we get them every time.

208
00:13:40,650 --> 00:13:45,820
So now we can go ahead and create a repository and then we will return that to our observable.

209
00:13:45,840 --> 00:13:47,370
So go ahead and type let.

210
00:13:47,440 --> 00:13:50,130
Repo equals repo.

211
00:13:50,640 --> 00:13:52,950
And let's go ahead and let's fill in everything we have.

212
00:13:52,950 --> 00:13:58,970
So we have name we have a description we have a fork's count.

213
00:13:59,400 --> 00:14:04,390
We have a language number of contributors we don't have what we do have a repo you l.

214
00:14:04,560 --> 00:14:09,330
Now since we're not actually going to be using this we could have created it as an optional type and

215
00:14:09,330 --> 00:14:12,280
returned nil and to be honest we probably should have done that.

216
00:14:12,370 --> 00:14:18,720
But I'm just going to go ahead and return 0 then for the image we're going to go ahead and return you

217
00:14:18,780 --> 00:14:26,200
I image named and the name is search icon large and we're going to force unwrap it.

218
00:14:26,340 --> 00:14:26,890
OK.

219
00:14:27,120 --> 00:14:31,750
So there's a repot But what are we going to do with that repo's the question.

220
00:14:32,000 --> 00:14:33,010
What's the problem.

221
00:14:33,300 --> 00:14:36,080
Oh I see forks count doesn't actually come in as a string.

222
00:14:36,090 --> 00:14:37,370
It comes in as an integer.

223
00:14:37,410 --> 00:14:40,850
And that will make that error go away like so.

224
00:14:40,840 --> 00:14:42,340
Boom there we go.

225
00:14:42,340 --> 00:14:45,730
So OK thinking about what we're doing here.

226
00:14:45,810 --> 00:14:50,380
If the query is empty We're returning an observable of an empty array of repose.

227
00:14:50,490 --> 00:14:56,370
Now what we're doing here is basically we're looping through all the repos for our search query and

228
00:14:56,430 --> 00:14:58,430
we need to be returning them to some kind of array.

229
00:14:58,440 --> 00:15:01,990
So up here we're going to go ahead and create that array like so.

230
00:15:02,000 --> 00:15:02,490
So type.

231
00:15:02,510 --> 00:15:11,650
Var Well var search repo's and that's going to be equal to an array of Repo.

232
00:15:11,820 --> 00:15:14,210
OK so let's just go ahead and just instantiate it.

233
00:15:14,390 --> 00:15:18,990
And when we create a repo after we loop through in our For loop we're going to go ahead and just call

234
00:15:18,990 --> 00:15:24,600
Search repo's like so and append our repo.

235
00:15:25,020 --> 00:15:28,270
OK so that is now appended.

236
00:15:28,470 --> 00:15:36,660
But at the very end we need to go ahead and return search Tripos K to the observable because remember

237
00:15:36,840 --> 00:15:42,870
we can pass in an empty array or we can return our observer and actually you know what we should return

238
00:15:42,950 --> 00:15:50,060
on an observable of type array of repo's and are not repo's singular Ribault.

239
00:15:50,150 --> 00:15:57,630
And go ahead and call just and the element here is going to be search repo's because that's our that's

240
00:15:57,630 --> 00:15:57,950
our right.

241
00:15:57,950 --> 00:15:59,260
That's what we should be returning.

242
00:15:59,490 --> 00:16:07,190
So now we go look at this it says cannot convert expression of type observable repo to return type array

243
00:16:07,190 --> 00:16:07,560
of repo.

244
00:16:07,560 --> 00:16:13,710
So I guess it does want us to just return an array of repo's I guess because this r x property of u

245
00:16:13,710 --> 00:16:16,020
r l session is already creating an observable.

246
00:16:16,020 --> 00:16:22,050
So we just return we return the array and then the u r l Session returns the observable.

247
00:16:22,140 --> 00:16:23,310
That makes sense.

248
00:16:23,310 --> 00:16:28,380
OK so basically what we need to do now is we need to set this up to be observed so beneath you you'll

249
00:16:28,380 --> 00:16:33,230
see if you can check with the brackets there flat map is appear at the top and at the end of flat map

250
00:16:33,240 --> 00:16:37,360
we need to call observe on and it's asking for a schedular.

251
00:16:37,380 --> 00:16:42,690
We basically need to just tell this that we want to observe this on the main schedular because we are

252
00:16:43,200 --> 00:16:48,750
immediately affecting UI changes so go ahead and call main schedular instance.

253
00:16:49,110 --> 00:16:50,220
OK so that's cool.

254
00:16:50,220 --> 00:16:53,100
That's going to allow us to observe it on the main schedular.

255
00:16:53,200 --> 00:16:54,370
OK so that's cool.

256
00:16:54,390 --> 00:16:56,900
That's observing on the main schedular.

257
00:16:57,060 --> 00:17:03,450
And now our search field is bound and it's ready to basically take in search results and it's going

258
00:17:03,450 --> 00:17:08,890
to return observables of an array of repo which is really cool.

259
00:17:09,090 --> 00:17:12,910
So the only thing we have to do next is to set up our table view.

260
00:17:12,930 --> 00:17:13,470
OK.

261
00:17:13,710 --> 00:17:17,940
So we're going to go ahead and bind our table view and this is the easy part guys we already did this

262
00:17:18,150 --> 00:17:23,950
in trending feed Visi you'll remember this is all we had to do to bind our table view.

263
00:17:24,090 --> 00:17:24,930
Super easy.

264
00:17:24,930 --> 00:17:32,220
So basically all we have to do is just continue on in our function for bind search field and you know

265
00:17:32,220 --> 00:17:32,670
what.

266
00:17:32,760 --> 00:17:33,850
It's not very descriptive.

267
00:17:33,870 --> 00:17:39,160
I'll just call this bind elements because we're binding the search field here to our table view.

268
00:17:39,330 --> 00:17:45,950
And basically this this is going to end up returning at very very and it's returning an observable of

269
00:17:45,960 --> 00:17:47,010
type array of repo.

270
00:17:47,010 --> 00:17:49,810
So we should actually create a property for this.

271
00:17:49,830 --> 00:17:56,340
We should say let maybe search results observable.

272
00:17:56,800 --> 00:18:02,550
OK so it's going to be equal to search results observable and well I guess we should indent all of this

273
00:18:02,550 --> 00:18:09,870
and make it go in really far like so because it's supposed to be directly beneath all of this but it

274
00:18:09,870 --> 00:18:12,220
just starts to get really convoluted.

275
00:18:12,300 --> 00:18:14,190
I'm going to move it back I don't like that.

276
00:18:14,280 --> 00:18:16,230
So you get the idea.

277
00:18:16,380 --> 00:18:17,440
It's supposed to be here.

278
00:18:17,550 --> 00:18:23,850
And this now is equal to a property right and this property if we look into it it's an observable type

279
00:18:23,850 --> 00:18:24,960
array of repo.

280
00:18:25,110 --> 00:18:31,260
So let's go ahead and let's set up our table for you now to be bound to this.

281
00:18:31,260 --> 00:18:38,970
So go ahead and call Search Result observable and now just like before in training feed the C we took

282
00:18:39,060 --> 00:18:45,180
our data source which was of type published subject which is an observable and we bound it to the table

283
00:18:45,180 --> 00:18:45,390
view.

284
00:18:45,390 --> 00:18:56,610
So on this observable call bind 2 and we can call table view X and then we can call it Dot items and

285
00:18:56,610 --> 00:18:59,920
we can call a cell identifier which we've already created.

286
00:18:59,940 --> 00:19:04,980
The cell identifier is search cell K super easy.

287
00:19:04,980 --> 00:19:11,850
Now what we have to do is we can call row repo and cell just like before.

288
00:19:11,850 --> 00:19:20,210
So inside of this little function here we can call row Ribault of type repo and cell type search cell

289
00:19:21,840 --> 00:19:22,510
k.

290
00:19:22,620 --> 00:19:24,060
So we now have access to this.

291
00:19:24,060 --> 00:19:30,240
But in order to show that this is a closure we need to include the in keyword so now that we have that

292
00:19:30,270 --> 00:19:38,610
we can call cell which is of type search cell Dom configure cell passes the repo and the table view

293
00:19:38,610 --> 00:19:39,310
is done.

294
00:19:39,330 --> 00:19:45,780
Now we can actually access that but it's giving us a problem it says result of BIND is unused.

295
00:19:45,840 --> 00:19:48,420
That's because we need to go ahead and add it to our dispose bag.

296
00:19:48,420 --> 00:19:50,220
So add it to the Dispose bags.

297
00:19:50,220 --> 00:19:52,040
We don't waste any memory.

298
00:19:52,190 --> 00:19:56,250
Go ahead and return that so that it goes down below where it is supposed to be.

299
00:19:56,250 --> 00:19:58,490
And guys we are super duper close.

300
00:19:58,500 --> 00:20:01,520
I think we should go ahead and just give this a shot.

301
00:20:01,530 --> 00:20:06,720
We should go see if we can actually search and present search results because basically what this is

302
00:20:06,720 --> 00:20:10,110
going to do is it's going to take whatever chunk of text we type.

303
00:20:10,110 --> 00:20:17,790
It's going to pass it in to the u r l that we create right here and then that your end is going to generate

304
00:20:17,790 --> 00:20:18,660
all of the results.

305
00:20:18,660 --> 00:20:20,210
So let's go ahead and build and run.

306
00:20:20,220 --> 00:20:22,710
Let's go try this out and see how we did.

307
00:20:22,710 --> 00:20:28,920
I know this is really intense reactive programming stuff we haven't done yet but the simple stuff is

308
00:20:28,920 --> 00:20:30,170
sometimes the stuff that gets you.

309
00:20:30,180 --> 00:20:32,240
We forgot to call bind elements.

310
00:20:32,250 --> 00:20:33,260
Let's go ahead and do that.

311
00:20:36,040 --> 00:20:37,020
And let's build and run.

312
00:20:37,030 --> 00:20:39,370
And let's go check to see how we did

313
00:20:43,080 --> 00:20:45,450
OK here we go it's running.

314
00:20:45,450 --> 00:20:49,200
We load our initial stuff that's great but let's go to our search field.

315
00:20:49,200 --> 00:20:54,540
Let's enter a search query and let's type our and we get results back.

316
00:20:54,540 --> 00:20:55,230
Look at this.

317
00:20:55,260 --> 00:20:56,820
Look at all those results.

318
00:20:56,820 --> 00:21:01,690
Let's search for our X swift and look at that man.

319
00:21:01,800 --> 00:21:05,720
We get all of our results back exactly as we wanted.

320
00:21:05,730 --> 00:21:06,640
That's amazing.

321
00:21:06,660 --> 00:21:07,370
All of our stuff.

322
00:21:07,380 --> 00:21:08,500
But you know what I notice.

323
00:21:08,520 --> 00:21:09,720
Look at this.

324
00:21:09,810 --> 00:21:14,760
We are going to be getting a crash because every single time we type in a character we're going to be

325
00:21:14,760 --> 00:21:17,420
getting an API call right.

326
00:21:17,610 --> 00:21:21,510
Every single time that we type a letter we're trying to spam the API and that actually is causing a

327
00:21:21,510 --> 00:21:23,820
crash in our application.

328
00:21:23,820 --> 00:21:27,270
But if you remember we have a really helpful function called debauches.

329
00:21:27,270 --> 00:21:34,260
So after the or empty call go ahead and type debauches set the do time interval to half of a second

330
00:21:34,680 --> 00:21:38,110
and the scheduler is the main scheduler instance.

331
00:21:38,220 --> 00:21:42,090
Now when we search it's going to wait half a second until we're done typing.

332
00:21:42,090 --> 00:21:47,340
So go ahead and build and run and then we're going to go ahead and take a look to see if what we did

333
00:21:47,430 --> 00:21:51,650
is going to help us to avoid crashes.

334
00:21:51,660 --> 00:21:52,320
Here we go.

335
00:21:52,350 --> 00:21:56,990
So let's go search our X Swift.

336
00:21:57,020 --> 00:21:57,920
OK so there's that.

337
00:21:57,920 --> 00:22:01,850
And let's go ahead and let's delete something fast and type a letter T.

338
00:22:02,760 --> 00:22:10,920
Didn't make a search didn't make a search didn't make a surface to do really fast didn't make a search

339
00:22:10,920 --> 00:22:11,670
and go back.

340
00:22:12,870 --> 00:22:13,280
OK.

341
00:22:13,280 --> 00:22:14,370
And it makes a search.

342
00:22:14,510 --> 00:22:19,850
So this is going to help us avoid API spamming and causing unnecessary crashes in our application.

343
00:22:19,850 --> 00:22:21,070
But guys this is amazing.

344
00:22:21,110 --> 00:22:23,990
We have a hub search engine that we just built.

345
00:22:23,990 --> 00:22:25,480
Look how cool this is.

346
00:22:25,490 --> 00:22:27,110
OK so amazing.

347
00:22:27,170 --> 00:22:33,140
In the next video we're going to set up the custom delegate for this table view because at the current

348
00:22:33,140 --> 00:22:38,840
moment we're not using the table view delegate or data source so how can we make a call for a specific

349
00:22:38,840 --> 00:22:39,230
cell.

350
00:22:39,230 --> 00:22:41,810
How can we know what happens when we tap on a cell.

351
00:22:41,840 --> 00:22:46,340
We're going to set a custom reactive delegate in the next video and we're going to basically set it

352
00:22:46,340 --> 00:22:49,660
up so that we can use those extensions with an R X delegate.

353
00:22:49,670 --> 00:22:50,840
Very very cool.

354
00:22:50,840 --> 00:22:52,700
Let's move on to the next video and let's do it.

355
00:22:52,700 --> 00:22:55,380
Amazing progress guys let's keep going.