1
00:00:08,000 --> 00:00:11,370
Hey guys this is Caleb with Debb slopes dot com and this is it.

2
00:00:11,420 --> 00:00:16,410
We're going to use our swift to set up our table view with real API data.

3
00:00:16,460 --> 00:00:17,360
It's going to be amazing.

4
00:00:17,360 --> 00:00:18,050
Let's do it.

5
00:00:18,080 --> 00:00:24,290
Let's pull open our X code project and in the Laks last video we basically just set up our functions

6
00:00:24,290 --> 00:00:31,460
here to work the way we need figured out some some issues squashed some bugs show them who's boss.

7
00:00:31,640 --> 00:00:36,280
And now we're going to go ahead and set up our trending feed b.s. so click on that.

8
00:00:36,530 --> 00:00:40,230
And of course delete these we do not need them.

9
00:00:40,670 --> 00:00:47,530
And you know what we're actually going to go ahead and comment out our table view data source and table

10
00:00:47,530 --> 00:00:54,020
you delegate delegate methods and we're actually going to get rid of the conformance appear to those

11
00:00:54,020 --> 00:00:58,270
protocols because we're going to set this up the are x swift way.

12
00:00:58,370 --> 00:01:08,180
So go ahead and import our X swift go ahead and import our X cocoa and we can actually get rid of all

13
00:01:08,180 --> 00:01:08,990
of these here.

14
00:01:09,080 --> 00:01:10,210
Bye bye.

15
00:01:10,490 --> 00:01:15,640
And what we can do is we can go ahead and set up our R x y data types.

16
00:01:15,650 --> 00:01:20,810
So first of all we're going to need a Dispose bag of type.

17
00:01:20,810 --> 00:01:21,650
Dispose.

18
00:01:21,680 --> 00:01:22,580
Bag.

19
00:01:22,770 --> 00:01:23,020
OK.

20
00:01:23,060 --> 00:01:27,980
Just like everything else we've done in our X swift and what we're going to do is we're going to set

21
00:01:27,980 --> 00:01:30,670
up a data source for our table view.

22
00:01:30,830 --> 00:01:36,890
But we're going to use a published subject because when we download all of our trending repo's we're

23
00:01:36,890 --> 00:01:42,230
going to pass it in to our published subject and then basically the table view is going to be able to

24
00:01:42,230 --> 00:01:43,970
react in real time.

25
00:01:43,970 --> 00:01:46,400
So as soon as we push it in the table view we'll just update.

26
00:01:46,430 --> 00:01:47,330
It's amazing.

27
00:01:47,330 --> 00:01:55,780
So go ahead and type var data source and that data source is going to be like I said of type publish

28
00:01:55,790 --> 00:02:03,080
subject and we need to give it a type here and it's going to be an array of Ribault we can use our own

29
00:02:03,080 --> 00:02:05,030
custom type which is really neat.

30
00:02:05,030 --> 00:02:07,170
So let's go ahead and instantiate this.

31
00:02:07,310 --> 00:02:11,050
And now we have a table view source that's ready for us to go.

32
00:02:11,050 --> 00:02:14,730
So let's get rid of our old school methods.

33
00:02:14,810 --> 00:02:21,920
And guys I just want to show you how unbelievably easy it is for us to get this data into our table

34
00:02:21,920 --> 00:02:22,100
view.

35
00:02:22,100 --> 00:02:23,160
Check it out.

36
00:02:23,210 --> 00:02:29,390
Let's create a function called fetch data so phunk fetch data.

37
00:02:30,000 --> 00:02:30,820
OK.

38
00:02:30,980 --> 00:02:37,820
And we're going to go ahead and type download service instance and we already wrote the function to

39
00:02:37,820 --> 00:02:38,410
do this.

40
00:02:38,420 --> 00:02:45,350
So we're just going to go ahead and call download trending repo's K which returns an array of repo which

41
00:02:45,350 --> 00:02:46,760
is what our published subject needs.

42
00:02:46,760 --> 00:02:48,420
So go ahead and push enter.

43
00:02:48,530 --> 00:02:52,220
And this is going to be the trending repo array.

44
00:02:52,220 --> 00:02:52,990
What we're going to do.

45
00:02:53,090 --> 00:03:00,520
We're going to call data source data on next and pass in the trending repots array.

46
00:03:00,860 --> 00:03:01,970
I kid you not.

47
00:03:01,970 --> 00:03:05,600
That is exactly what we need to do to pass in the values.

48
00:03:05,600 --> 00:03:07,290
Now of course we're in a closure.

49
00:03:07,460 --> 00:03:08,570
So we need to call self.

50
00:03:08,600 --> 00:03:14,010
But seriously that is it to download the data to pass it in to our data source.

51
00:03:14,010 --> 00:03:20,390
Now we do need to set up our table view to accept this data source and we're going to do that in view

52
00:03:20,390 --> 00:03:20,950
to load.

53
00:03:20,960 --> 00:03:26,870
So on our publish subject we're going to call data source and remember this is just an ordinary data

54
00:03:26,870 --> 00:03:35,540
source and we can call bind too and we can use our bind to function to actually bind this to the table

55
00:03:35,540 --> 00:03:35,810
view.

56
00:03:35,810 --> 00:03:36,560
Check it out.

57
00:03:36,680 --> 00:03:44,960
Call bind 2 and inside we can go ahead and bind it to the table view but we can call our X and we can

58
00:03:45,020 --> 00:03:51,090
access the reactive properties of this table view thanks to our swift and Ark's cocoa.

59
00:03:51,110 --> 00:03:55,640
So go ahead and call DOT items and check it out.

60
00:03:55,640 --> 00:04:02,360
We can access the items with a cell identifier we already have a cell identifier of trending feed cell

61
00:04:02,360 --> 00:04:04,770
right or I guess trending repo's cell.

62
00:04:04,940 --> 00:04:09,800
We should probably check to make sure we're doing the right one but go ahead and select items and the

63
00:04:09,800 --> 00:04:16,910
cell identifier as we were using was trending feed cell or trending repulsor so I'm not sure we need

64
00:04:16,910 --> 00:04:19,430
to double check to be extra safe.

65
00:04:19,520 --> 00:04:19,810
OK.

66
00:04:19,850 --> 00:04:21,040
It's trending Ribault cell.

67
00:04:21,040 --> 00:04:27,050
So let's go ahead and copy that and head back to trending feed D.C. Now the identifier is trending repots

68
00:04:27,050 --> 00:04:31,740
cell and the cell type is just our cell type right.

69
00:04:32,030 --> 00:04:35,870
Ribault or I guess trending Ribault cell.

70
00:04:35,870 --> 00:04:36,890
There we go.

71
00:04:36,890 --> 00:04:37,250
All right.

72
00:04:37,250 --> 00:04:39,240
Super super cool.

73
00:04:39,260 --> 00:04:44,770
So we now have bound our table view cells the exact way that we need to.

74
00:04:44,780 --> 00:04:51,350
And inside of this bind function it's actually a closure and we can go ahead and put some curly brackets

75
00:04:51,350 --> 00:04:57,060
there but we need to set up some properties and you know what these properties are really neat and it's

76
00:04:57,080 --> 00:05:02,480
yelling at us saying in our table view does not conform to protocol re-active compatible.

77
00:05:02,510 --> 00:05:07,780
I think it's just mad at us just go ahead and build and let's set this up first let's see if it's still

78
00:05:07,780 --> 00:05:09,300
yelling at us and then we'll fix it.

79
00:05:09,520 --> 00:05:15,130
But basically the items property is going to go ahead and give us three different properties we can

80
00:05:15,130 --> 00:05:22,540
access the specific row of the table view we can access the individual repo from the published subject

81
00:05:23,020 --> 00:05:24,700
and we can access the cell.

82
00:05:24,850 --> 00:05:28,820
So let's go ahead and put some parentheses and we can access Roe.

83
00:05:29,080 --> 00:05:38,920
We can access the repo like so of type Ribault we can access the cell of type trending Ribault cell.

84
00:05:38,920 --> 00:05:44,040
And then of course since this is the closure we're going to go ahead and call in at the very end now.

85
00:05:44,140 --> 00:05:45,220
Oops.

86
00:05:45,910 --> 00:05:50,260
Now inside our binding this is where we can access the cell.

87
00:05:50,410 --> 00:05:55,000
And this is where we can configure it with the repo that comes from our published subject so go ahead

88
00:05:55,000 --> 00:05:58,250
and call sell configure sell.

89
00:05:58,330 --> 00:06:03,730
And the cool thing is this is already cast as a training repo so we can pass it the Ribault that comes

90
00:06:03,730 --> 00:06:06,140
in from our published subject.

91
00:06:06,280 --> 00:06:13,660
And then at the very end since we are binding this we can call datt add disposable too and we can pass

92
00:06:13,660 --> 00:06:15,640
it to our dispose bag.

93
00:06:15,640 --> 00:06:16,720
Really really cool.

94
00:06:16,720 --> 00:06:19,780
Now it's still yelling at us let's figure out why.

95
00:06:20,770 --> 00:06:21,570
Oh you know what.

96
00:06:21,570 --> 00:06:28,250
Sorry we should not be calling the one with the cell type if you go back to items you'll notice that's

97
00:06:28,420 --> 00:06:36,350
let's see there's one that includes one with out without the cell type Let's just call that one and

98
00:06:36,380 --> 00:06:40,980
where we have an extra parentheses there and we're just going to call trending repo's cell.

99
00:06:41,190 --> 00:06:42,370
OK just like that.

100
00:06:42,460 --> 00:06:44,760
And now you'll notice that air goes away.

101
00:06:44,800 --> 00:06:54,010
So we have now used our datasource to bind our cell here to our table view the way we want and we have

102
00:06:54,010 --> 00:06:58,630
access to all the stuff we've configured the cell we've added it to the Dispose bag so it's automatically

103
00:06:58,630 --> 00:07:00,710
going to be deallocating memory for us.

104
00:07:00,850 --> 00:07:03,410
And seriously our table view is done.

105
00:07:03,520 --> 00:07:09,570
So let's go ahead and let's call fecche data because that's going to download the data first and push

106
00:07:09,570 --> 00:07:14,500
in the repo array to our published subject then we're going to go ahead and bind that data to our table

107
00:07:14,500 --> 00:07:16,610
view and add it toward postbag.

108
00:07:16,690 --> 00:07:22,720
This is it guys we're going to basically be able to do all of our cells and load them automatically

109
00:07:23,110 --> 00:07:25,020
with this little bit of code.

110
00:07:25,130 --> 00:07:25,940
Let's build and run.

111
00:07:25,960 --> 00:07:27,600
And let's go check out how we did.

112
00:07:27,730 --> 00:07:32,020
This is one thing I love about Ark's cocoa is it really cuts down on the amount of boilerplate code

113
00:07:32,020 --> 00:07:32,940
you have to write.

114
00:07:33,010 --> 00:07:38,470
And it also minimizes your requirement of like conforming to certain delegates and protocols.

115
00:07:38,530 --> 00:07:39,270
So let's check it out.

116
00:07:39,280 --> 00:07:41,090
Let's see we are loading.

117
00:07:41,110 --> 00:07:42,160
But guys look at this.

118
00:07:42,190 --> 00:07:43,360
Oh my gosh.

119
00:07:43,510 --> 00:07:44,120
We get it.

120
00:07:44,170 --> 00:07:45,230
We get the data.

121
00:07:45,370 --> 00:07:47,710
There's all the information there's Alamo fire.

122
00:07:47,710 --> 00:07:55,060
Awesome iOS reactive Cocco swift guide Swiftie Jaison awesome swift so so cool.

123
00:07:55,060 --> 00:07:57,710
Now I am noticing a bit of a problem.

124
00:07:57,760 --> 00:08:02,330
We are definitely overlapping here on our images and I know how to fix that.

125
00:08:02,380 --> 00:08:06,220
Go into Maine but storyboard select your image view.

126
00:08:06,250 --> 00:08:07,530
There it is.

127
00:08:07,600 --> 00:08:12,580
And select clips to bounce and I notice that the background here sometimes is transparent.

128
00:08:12,580 --> 00:08:16,920
So let's go ahead and set a background color of white so that it always comes in as white.

129
00:08:16,930 --> 00:08:18,370
That will make it look really nice.

130
00:08:18,400 --> 00:08:19,830
And let's go build and run it again.

131
00:08:19,870 --> 00:08:22,150
And then we can see how our work really looks.

132
00:08:22,150 --> 00:08:24,460
That should perfect the process.

133
00:08:24,460 --> 00:08:27,770
But guys we just downloaded everything and loaded it in.

134
00:08:27,770 --> 00:08:31,150
It's so cool so so so very cool.

135
00:08:31,150 --> 00:08:33,300
Here we go loading loading.

136
00:08:33,310 --> 00:08:34,280
That's it guys.

137
00:08:34,300 --> 00:08:35,710
That is it.

138
00:08:35,710 --> 00:08:38,800
Boom we have all of our values right there.

139
00:08:39,010 --> 00:08:40,990
Super super cool.

140
00:08:41,230 --> 00:08:45,810
Although you know what we are definitely getting squished here.

141
00:08:45,940 --> 00:08:51,670
And I think that's due to the stack you just being set to center if we choose Phil. It's going to spread

142
00:08:51,670 --> 00:08:52,860
it out a little bit.

143
00:08:52,960 --> 00:08:55,840
But let's go ahead and let's set some constraints on this.

144
00:08:55,990 --> 00:09:03,510
Well no maybe not some constraints but maybe let's just do some cushioning on the sides.

145
00:09:03,550 --> 00:09:10,000
Maybe now let's go ahead and set a constraint because really we're not going to be getting that crazy

146
00:09:10,000 --> 00:09:10,430
of data.

147
00:09:10,430 --> 00:09:12,760
I'll just set it to be maybe 300.

148
00:09:12,760 --> 00:09:14,950
No that's too wide.

149
00:09:14,960 --> 00:09:18,310
Maybe 250 to narrow.

150
00:09:18,330 --> 00:09:20,220
Oh no guys I'm sorry you know what.

151
00:09:20,240 --> 00:09:22,720
With constraint is not going to do it.

152
00:09:22,770 --> 00:09:27,820
We're going to need to I think set some invisible views in here.

153
00:09:28,020 --> 00:09:33,930
Let's go ahead and let's copy and paste of you put it on top of that stack view.

154
00:09:33,930 --> 00:09:34,600
There we go.

155
00:09:34,800 --> 00:09:35,700
Let's do it again.

156
00:09:35,700 --> 00:09:39,100
Copy and paste and put that at the bottom.

157
00:09:39,290 --> 00:09:41,070
That will give us some tips.

158
00:09:41,070 --> 00:09:42,140
That's not right.

159
00:09:43,790 --> 00:09:46,030
That's still not right.

160
00:09:46,640 --> 00:09:47,110
There we go.

161
00:09:47,150 --> 00:09:47,770
OK.

162
00:09:47,990 --> 00:09:53,100
And of course we can choose both of those and set their background color to be clear.

163
00:09:53,240 --> 00:09:56,540
And that's going to go ahead and push in those a little bit from the left and right.

164
00:09:56,620 --> 00:10:01,490
But now let's go ahead and build let's make sure that our image is going to extend the fall outside

165
00:10:01,520 --> 00:10:02,300
of our cell.

166
00:10:02,300 --> 00:10:04,540
And guys we are so so close to being done.

167
00:10:04,540 --> 00:10:05,850
Let's let's check this out.

168
00:10:06,770 --> 00:10:09,290
So it loads it downloads everything.

169
00:10:09,300 --> 00:10:10,710
There we go look at that.

170
00:10:10,800 --> 00:10:12,530
Really cool.

171
00:10:12,690 --> 00:10:14,250
That is amazing.

172
00:10:14,250 --> 00:10:21,990
So our images are filling it to the full outside edge of the border but our button is now super stretched.

173
00:10:21,990 --> 00:10:23,270
That is not what we want.

174
00:10:23,280 --> 00:10:25,290
So we're going to go ahead.

175
00:10:25,530 --> 00:10:30,520
Maybe we will just remove the button from the stack view and just put it in.

176
00:10:30,570 --> 00:10:32,760
Down below.

177
00:10:33,660 --> 00:10:39,720
Although you know what we need to fix the stack a few constraints first because they are extending to

178
00:10:39,720 --> 00:10:41,710
the full outside edge.

179
00:10:41,970 --> 00:10:46,920
Let's go ahead and let's just remove the bottom constraint for now and let's move it out of the way

180
00:10:47,810 --> 00:10:49,100
we'll fix it in a second guys.

181
00:10:49,230 --> 00:10:50,760
Let's take the button here.

182
00:10:50,760 --> 00:10:56,520
Pull it out of the stack view and we're going to go ahead and just constrain this with a with constraint

183
00:10:56,550 --> 00:11:02,250
and a height constraint and then we'll pin it maybe 10 from the bottom and we're going to go ahead and

184
00:11:02,250 --> 00:11:04,560
horizontally pendant in the container.

185
00:11:04,560 --> 00:11:11,040
And you'll notice that it fixes itself there and then the stack view we can drag it back down.

186
00:11:11,040 --> 00:11:16,620
We can position it right above the button there and then we can go ahead and update the constraints

187
00:11:16,650 --> 00:11:23,430
to have a bottom constraint of 10 which will space it nicely and make everything look super pretty So

188
00:11:23,430 --> 00:11:24,540
let's build and run.

189
00:11:24,600 --> 00:11:30,270
This is just kind of make the button look really nice and we won't have that weird extra wide stretching

190
00:11:30,270 --> 00:11:31,260
issue.

191
00:11:31,260 --> 00:11:34,050
Probably should have done that from the beginning but let's just see how we did

192
00:11:38,660 --> 00:11:39,220
right.

193
00:11:39,240 --> 00:11:43,210
Look at this we are getting everything coming in the way we want.

194
00:11:43,230 --> 00:11:44,680
This is amazing guys.

195
00:11:44,810 --> 00:11:46,280
Super duper cool.

196
00:11:46,290 --> 00:11:50,100
I do also notice that the text is going way out here to the outside edge.

197
00:11:50,100 --> 00:11:51,240
I don't like that.

198
00:11:51,240 --> 00:11:52,870
So let's choose our stack view.

199
00:11:52,890 --> 00:11:58,080
Let's set the trailing space to be 10 and the leading space to also be 10.

200
00:11:58,710 --> 00:12:04,630
And that will keep that from touching the outside borders.

201
00:12:04,710 --> 00:12:09,600
Let's see I noticed that some of these come in with a nice capital letter and some of them come in with

202
00:12:09,600 --> 00:12:13,030
just stay you know like underscored name.

203
00:12:13,110 --> 00:12:17,480
Well I guess that's fine because that's how the original contributor intended it.

204
00:12:17,760 --> 00:12:18,480
And that's great.

205
00:12:18,480 --> 00:12:20,120
So let's just leave it that way.

206
00:12:20,140 --> 00:12:22,980
But you know what.

207
00:12:22,980 --> 00:12:23,790
This is awesome.

208
00:12:23,790 --> 00:12:24,780
This looks so good.

209
00:12:24,780 --> 00:12:26,490
We're downloading all of our data.

210
00:12:26,550 --> 00:12:31,710
The only thing I could think of is to add a refresh control so that we can automatically reload that

211
00:12:31,710 --> 00:12:33,350
data however we want.

212
00:12:33,360 --> 00:12:37,350
So let's go ahead and let's set that up because it's pretty easy in order to do that.

213
00:12:37,350 --> 00:12:43,710
We're going to just go ahead and create an instance of you I refresh control like so let refresh control

214
00:12:44,070 --> 00:12:50,700
equal UI refresh control and then we're going to basically just set the table view to have a refresh

215
00:12:50,700 --> 00:12:51,450
control.

216
00:12:51,630 --> 00:12:56,070
So Table View refresh control equals refresh control.

217
00:12:56,070 --> 00:12:57,030
Now it has one.

218
00:12:57,270 --> 00:13:00,160
And now we're just going to customize the refresh controls view.

219
00:13:00,240 --> 00:13:07,650
So go ahead and type refresh control dot tint color and we use a color literal because that will let

220
00:13:07,650 --> 00:13:10,070
us get our exact color of dark blue.

221
00:13:10,380 --> 00:13:12,820
So that's what the spinner will look like it will be dark blue.

222
00:13:13,260 --> 00:13:20,340
Then what else let's think we're going to go ahead and set refresh control to have an attributed title

223
00:13:20,790 --> 00:13:28,020
of type and attribute title or I guess NASA attributed string is what I meant to say.

224
00:13:28,230 --> 00:13:32,280
And as you look through here we can pass in a string and attributes.

225
00:13:32,430 --> 00:13:33,840
That's exactly what we want.

226
00:13:33,990 --> 00:13:39,620
Now we want it to say fetching hot get Herb repo's.

227
00:13:39,640 --> 00:13:40,540
Whoops repo's.

228
00:13:40,560 --> 00:13:41,920
And you know what just for fun.

229
00:13:42,120 --> 00:13:45,630
Let's go ahead and drop in a fire emoji by the way.

230
00:13:45,630 --> 00:13:51,810
I did a control command and space to bring up the emoji bar but sometimes there are issues so I'll just

231
00:13:51,800 --> 00:13:55,920
search for fire and click on fire.

232
00:13:55,920 --> 00:13:56,370
Beautiful.

233
00:13:56,370 --> 00:13:57,220
There we go.

234
00:13:57,510 --> 00:14:01,740
And now our attributes we're going to go ahead and just call.

235
00:14:02,040 --> 00:14:08,970
Let's see we need to set the foreground color although it might not let us access that we might need

236
00:14:08,970 --> 00:14:14,790
to type an s attributed string key to get to that.

237
00:14:14,820 --> 00:14:16,110
Yeah that's right.

238
00:14:16,110 --> 00:14:18,800
And the color is going to be a color literal.

239
00:14:18,810 --> 00:14:21,230
We're going to use our blue cane.

240
00:14:21,240 --> 00:14:22,170
That's great.

241
00:14:22,470 --> 00:14:23,040
What else.

242
00:14:23,040 --> 00:14:28,700
Next we need to set the font OK because we want it to have the same font as the rest of our app.

243
00:14:28,830 --> 00:14:33,300
So then type and s attributed string key dot font and.

244
00:14:34,040 --> 00:14:34,800
It's a dictionary.

245
00:14:34,800 --> 00:14:40,920
So give it a colon there and we're going to use UI font and it's going to be a huge font.

246
00:14:40,980 --> 00:14:43,880
We're going to use the initializer here with a name.

247
00:14:43,990 --> 00:14:44,600
OK.

248
00:14:44,880 --> 00:14:48,330
Get rid of the initialiser and then yes the font.

249
00:14:48,330 --> 00:14:53,230
Of course we're going to use Avenir next Demi bold.

250
00:14:53,250 --> 00:14:56,180
That's how you have to type it with a UI font.

251
00:14:56,190 --> 00:15:00,480
And we want it to be size sixteen point zero which is pretty sweet.

252
00:15:00,480 --> 00:15:03,050
That will return it the way we want.

253
00:15:03,060 --> 00:15:09,030
Now of course attributed strings need to be forced wrapped because that's how we're actually going to

254
00:15:09,030 --> 00:15:13,080
set the you know attributed title to be equal to the right thing.

255
00:15:13,710 --> 00:15:18,480
Although you know what it looks like it's not going to make me it looks like it's mad at me for doing

256
00:15:18,480 --> 00:15:18,630
that.

257
00:15:18,630 --> 00:15:22,310
So let's go ahead and just set it to be and as a tribute attributed string just like so.

258
00:15:22,650 --> 00:15:26,690
And next up we're going to go ahead and just type refresh control.

259
00:15:26,910 --> 00:15:32,970
And this is how we're going to basically determine what the refresh control actually controls.

260
00:15:32,970 --> 00:15:33,580
OK.

261
00:15:33,840 --> 00:15:39,440
And so we're going to type add target and this is basically like setting up like a tap gesture recognizer.

262
00:15:39,510 --> 00:15:43,640
We're going to pass it a function and every time we refresh it's going to call that function.

263
00:15:43,860 --> 00:15:51,030
So go ahead and for the target that's going to be self the action is going to be a selector.

264
00:15:51,030 --> 00:15:58,320
So we're going to do the pound selector and then this is where we pass in the function K and the UI

265
00:15:58,320 --> 00:15:59,480
control events.

266
00:15:59,550 --> 00:16:02,960
Basically we're going to go ahead and call value changed.

267
00:16:03,120 --> 00:16:08,010
So any time the value changes meaning if we pull down the value changes it's going to refresh and call

268
00:16:08,010 --> 00:16:09,330
the right function.

269
00:16:09,330 --> 00:16:16,140
So the selector we need to pass in our function and thankfully we have a fetch data function which is

270
00:16:16,140 --> 00:16:16,740
really cool.

271
00:16:16,740 --> 00:16:21,300
So it's going to let us basically add that as the function that is called whenever we pull the refresh

272
00:16:21,300 --> 00:16:26,020
control although it's yelling at us we need to expose this function to Objective-C.

273
00:16:26,010 --> 00:16:27,630
So click fix.

274
00:16:27,750 --> 00:16:30,690
It adds at 0 BJC to fetch data.

275
00:16:30,930 --> 00:16:36,430
And that should allow us to go ahead and refresh that data whenever we pull down on it.

276
00:16:36,450 --> 00:16:39,570
Now it's yelling at us that C-y.

277
00:16:39,910 --> 00:16:41,840
Oh so it looks like we do need to force on.

278
00:16:41,840 --> 00:16:42,820
Are you a font there.

279
00:16:42,830 --> 00:16:45,880
We're basically saying I promise that that font is there.

280
00:16:46,080 --> 00:16:52,530
So we now have added a refresh control change the color set up its title and add in the target.

281
00:16:52,530 --> 00:16:55,100
So whenever we pull it's going to reload that data.

282
00:16:55,140 --> 00:16:57,590
So let's go ahead and let's build and run.

283
00:16:57,750 --> 00:17:03,730
Let's see how we did and let's check it out and see if we actually have a cool UI refresh control.

284
00:17:05,540 --> 00:17:06,500
Launching our app

285
00:17:10,850 --> 00:17:15,560
here we go OK so it's loading.

286
00:17:15,620 --> 00:17:22,360
Very cool so if I pull you'll notice that there is our refresh controller and it just reloaded with

287
00:17:22,360 --> 00:17:26,290
new data and there's new data but it's still showing up here.

288
00:17:26,320 --> 00:17:31,960
So I think what we should do is inside our fetch data function basically after we push in the array

289
00:17:31,960 --> 00:17:34,240
we should tell the refresh control to stop refreshing.

290
00:17:34,240 --> 00:17:37,650
So go ahead and call self that refresh control.

291
00:17:37,990 --> 00:17:42,600
And refreshing and that's basically going to cancel it and pull back the table view.

292
00:17:42,700 --> 00:17:45,400
Let's let's test it let's build and run.

293
00:17:45,400 --> 00:17:47,250
See how it looks.

294
00:17:48,590 --> 00:17:49,540
Pretty cool.

295
00:17:56,540 --> 00:17:57,260
OK there we go.

296
00:17:57,260 --> 00:17:57,950
Loads the data.

297
00:17:57,950 --> 00:17:59,780
When I pull to refresh.

298
00:18:00,230 --> 00:18:01,070
All right cool.

299
00:18:01,070 --> 00:18:04,370
So it downloads everything and it refreshes the data.

300
00:18:04,370 --> 00:18:05,310
I really like that.

301
00:18:05,510 --> 00:18:06,640
That's awesome.

302
00:18:06,650 --> 00:18:09,950
So that's exactly what we need.

303
00:18:09,950 --> 00:18:15,590
Looks like we're good when we pulled down it fetches everything and reloads it just for a test.

304
00:18:15,590 --> 00:18:20,380
I'm going to actually turn off my Wi-Fi for a second and I'm going to pull down to see if we can refresh.

305
00:18:20,420 --> 00:18:25,340
And as you can see if it's not connected it's not going to refresh for anything but the second I turn

306
00:18:25,340 --> 00:18:27,080
the Wi-Fi back on.

307
00:18:27,080 --> 00:18:28,510
It's not going to reconnect.

308
00:18:28,520 --> 00:18:33,740
But basically if I were to quit the app go back in you'll notice that it is working and we could set

309
00:18:33,740 --> 00:18:38,780
it up so that if you know connectivity is lost then it could automatically reload.

310
00:18:38,780 --> 00:18:40,100
We could set that up in the app delegate.

311
00:18:40,100 --> 00:18:44,870
But for this app we're not necessarily going to do that although we certainly could.

312
00:18:44,870 --> 00:18:48,460
So right for now we can pull down and it can reload new data for us.

313
00:18:48,470 --> 00:18:50,030
So amazing.

314
00:18:50,030 --> 00:18:51,760
Guys this is really really cool.

315
00:18:51,830 --> 00:18:56,980
And you know what a lot of the code that we already wrote is going to go into our search function we're

316
00:18:56,990 --> 00:19:02,810
going to do it even more reactively in search Visi So we're going to go ahead and head over to the next

317
00:19:02,810 --> 00:19:07,700
video where we're going to build out search AVC we're going to make it look really cool and we might

318
00:19:07,700 --> 00:19:10,370
even tweak some of trending feed visi.

319
00:19:10,460 --> 00:19:11,300
I noticed.

320
00:19:11,300 --> 00:19:16,460
Actually you know if you look really close you can see between each cell there is that little dividing

321
00:19:16,460 --> 00:19:17,220
line.

322
00:19:17,300 --> 00:19:18,360
I think that's ugly.

323
00:19:18,410 --> 00:19:22,890
And also if you tap on a cell it kind of permanently graze it out and we don't want that.

324
00:19:22,970 --> 00:19:27,230
So we're going to go ahead and fix those things and build out search Visi in the next video.

325
00:19:27,230 --> 00:19:28,610
Let's head over there now.