1
00:00:04,410 --> 00:00:08,770
Them everyone welcome back and Johnny B here with sloop's dot com.

2
00:00:09,000 --> 00:00:13,070
And in this lesson we are going to work on some more stuff.

3
00:00:13,080 --> 00:00:19,270
So in the last lesson we actually got around to creating our first documents here in our collection.

4
00:00:19,270 --> 00:00:19,800
All right.

5
00:00:20,040 --> 00:00:25,890
And in this lesson we going to lay the groundwork so that the lesson after this one we can actually

6
00:00:26,310 --> 00:00:32,190
use fire store to pull down all of these information from our collections database.

7
00:00:32,190 --> 00:00:32,830
All right.

8
00:00:32,840 --> 00:00:34,350
So let's go ahead and get started.

9
00:00:34,350 --> 00:00:40,510
I'm going to jump into X code here and we're going to be working mainly in the storyboard and the I

10
00:00:40,510 --> 00:00:42,590
mean the swift file.

11
00:00:42,630 --> 00:00:56,710
All right and so here's where we are when reference our mockup.

12
00:00:56,750 --> 00:01:00,890
And so this first view here on the left is the one that we're going to be working on and this lesson

13
00:01:01,230 --> 00:01:06,620
we can see that we have a segmented control up here at the top similar to the one in the right view

14
00:01:06,620 --> 00:01:07,490
controller.

15
00:01:07,940 --> 00:01:10,170
And we also have a table view here.

16
00:01:10,640 --> 00:01:16,670
And then each of these cells we have one of our thoughts represented we see that we have the user name

17
00:01:16,790 --> 00:01:26,480
the time stamp the thought text a start image and a label indicating how many likes each post has.

18
00:01:26,480 --> 00:01:28,310
All right so this is what we're going to be working on.

19
00:01:28,310 --> 00:01:29,790
So let's get started.

20
00:01:30,050 --> 00:01:30,400
All right.

21
00:01:30,440 --> 00:01:34,900
First off let's go ahead and get our segment to control in here how to do that.

22
00:01:34,910 --> 00:01:37,900
I'm just going to copy the one in our second controllers.

23
00:01:37,960 --> 00:01:43,730
I'm going to copy it command see and then click on our other controller and say command to copy it.

24
00:01:43,920 --> 00:01:50,840
I'm just going to drag it up here to the top here and we're going to constrain it to say 20 from the

25
00:01:50,890 --> 00:01:59,060
left 16 from the top 20 from the right I'm going to add those three constraints and that's all set up

26
00:01:59,060 --> 00:01:59,790
now.

27
00:02:00,320 --> 00:02:03,470
But we do need to add a nother segment to it don't we.

28
00:02:03,470 --> 00:02:07,910
So here on the right under segment's I'm going to up it to four.

29
00:02:08,070 --> 00:02:14,860
I want to select the fourth one segment 3 and I'm going to change this title to popular.

30
00:02:14,880 --> 00:02:15,300
All right.

31
00:02:15,290 --> 00:02:16,520
That looks good.

32
00:02:16,520 --> 00:02:18,720
Next up we are going to need a table view.

33
00:02:18,830 --> 00:02:23,800
OK so down here to search for table view you don't want to drag that in here.

34
00:02:24,040 --> 00:02:30,100
And let's just put that right up here and drag that down and out and we're going to constrain it to

35
00:02:30,130 --> 00:02:34,930
zero from the left bottom right and then 16 from the top.

36
00:02:35,030 --> 00:02:35,870
There we go.

37
00:02:35,870 --> 00:02:38,180
Next up we're going to need a table of use cell.

38
00:02:38,200 --> 00:02:44,160
So when you drag a table cell in here and then I'm going to go with it selected over here in the table

39
00:02:44,180 --> 00:02:48,050
view so we're going to just kind of drag that down a little bit.

40
00:02:48,050 --> 00:02:51,430
Come on drag down.

41
00:02:51,730 --> 00:02:53,540
Do we want to working.

42
00:02:53,690 --> 00:02:56,810
There we go with the content view selected.

43
00:02:56,840 --> 00:03:01,670
We're going to change the background color just to two different color just so we can kind of see it.

44
00:03:01,690 --> 00:03:07,390
I have a light blue here and that's just so we can see the kind of the content area of the table you

45
00:03:07,390 --> 00:03:10,490
said otherwise this kind of look a little bit difficult.

46
00:03:10,490 --> 00:03:14,120
All right so do we need in these cells checking out our mock up again.

47
00:03:14,120 --> 00:03:17,040
So we're gaining a label here here here.

48
00:03:17,240 --> 00:03:18,550
Image of you.

49
00:03:18,770 --> 00:03:19,940
OK so looks pretty simple.

50
00:03:19,940 --> 00:03:22,010
Bunch of label use and an image.

51
00:03:22,010 --> 00:03:28,790
All right so I went to go and just search for a label here and going to drag in a label put it in the

52
00:03:28,790 --> 00:03:34,640
top left drag and another label and this one will be for the time stamp.

53
00:03:34,640 --> 00:03:46,160
One more label for the thought text one label for the number of likes and then an image the you for

54
00:03:46,160 --> 00:03:50,440
the like for the star for the like image.

55
00:03:50,510 --> 00:03:51,220
OK.

56
00:03:51,470 --> 00:03:53,090
Let's go and zoom in here.

57
00:03:53,340 --> 00:03:53,920
There you go.

58
00:03:54,900 --> 00:04:03,240
Enclose the bottom pane here and it looks pretty good and with the image you selected that's when change

59
00:04:03,240 --> 00:04:08,690
its size here and the size inspector 24 width and 24 height.

60
00:04:08,690 --> 00:04:15,090
That we go drag right down here into the bottom left and see here is this table.

61
00:04:15,090 --> 00:04:18,000
You sell a little bit taller.

62
00:04:18,000 --> 00:04:19,230
There we go.

63
00:04:19,230 --> 00:04:19,430
All right.

64
00:04:19,440 --> 00:04:26,320
So I'm going to select all four of these labels at once using command and cooking.

65
00:04:26,610 --> 00:04:28,930
And then let's go to the attributes inspector.

66
00:04:28,950 --> 00:04:32,130
Let's change the color to a dark gray.

67
00:04:32,130 --> 00:04:34,760
Change the font to custom.

68
00:04:34,890 --> 00:04:37,300
And family is the.

69
00:04:37,320 --> 00:04:38,540
Next.

70
00:04:38,550 --> 00:04:40,070
That looks good I say.

71
00:04:40,080 --> 00:04:41,060
Done.

72
00:04:41,790 --> 00:04:48,720
And then with them all selected going to do command equal and that will set the size.

73
00:04:48,750 --> 00:04:53,030
And then let's go ahead and start putting these where they need to be.

74
00:04:53,120 --> 00:04:56,910
I'm going to double click on this one I'm going to put Johnny B in that's going to be kind of placeholder

75
00:04:56,910 --> 00:04:59,130
text for our user name.

76
00:04:59,190 --> 00:05:06,690
And then for the time stamp and say something like October what is today the ninth covered ninth and

77
00:05:06,690 --> 00:05:09,260
it is 9 0 1.

78
00:05:09,400 --> 00:05:13,300
Ok then I'm going to drop down the font size on it.

79
00:05:13,390 --> 00:05:19,700
Somebody come over here and drop it down to about 14 maybe a little bit more about 12.

80
00:05:19,720 --> 00:05:21,080
That looks good.

81
00:05:21,080 --> 00:05:29,970
Now for the user name I'm going to select the font and change the style to medium and then command equal.

82
00:05:29,970 --> 00:05:30,870
There you go.

83
00:05:30,870 --> 00:05:32,790
That looks good.

84
00:05:32,790 --> 00:05:45,270
And then for this one I'm going to say this is my random thought OK and I'm going to drop its size down

85
00:05:45,270 --> 00:05:48,800
to 14 is good.

86
00:05:48,800 --> 00:05:52,870
And then with the image of you you selected Let's go and set an image.

87
00:05:52,910 --> 00:05:55,360
So when I say Star I.

88
00:05:56,120 --> 00:06:04,000
And then here I'm going to set ninety nine and then drop the font size down to 14 as well.

89
00:06:06,330 --> 00:06:08,460
How we get started to come together.

90
00:06:08,470 --> 00:06:11,230
Let's go ahead and add our constraints.

91
00:06:11,280 --> 00:06:11,730
OK.

92
00:06:11,890 --> 00:06:17,350
So here at the top left I'm going to constrain the zero from the left and zero from the top.

93
00:06:19,350 --> 00:06:26,010
For the time stamp I'm going to control and drag to the user name label and say center vertically and

94
00:06:26,010 --> 00:06:29,280
so that will just Center those two to each other.

95
00:06:29,340 --> 00:06:29,970
OK.

96
00:06:29,990 --> 00:06:37,170
Or at least it'll center the timestamp to the user name label and then I'm going to pin it from the

97
00:06:37,170 --> 00:06:37,880
left.

98
00:06:38,100 --> 00:06:39,740
So that looks good.

99
00:06:40,050 --> 00:06:47,450
Then for our Random thought here I'm going to go ahead and pin it zero from the left it from the top

100
00:06:47,790 --> 00:06:50,160
and zero from the right.

101
00:06:50,620 --> 00:06:52,640
OK that looks good.

102
00:06:52,680 --> 00:06:58,550
And then over here I'm going to go ahead and constrain the sizes for the width and the height here.

103
00:06:58,690 --> 00:07:02,050
So add two constraints for 24 and 24.

104
00:07:02,640 --> 00:07:08,400
And then with it selected I'm going to also select the label next to it and we're going to put these

105
00:07:08,400 --> 00:07:09,770
two in a stack for you.

106
00:07:09,840 --> 00:07:10,080
All right.

107
00:07:10,080 --> 00:07:13,020
And this is done by this little icon down here.

108
00:07:13,020 --> 00:07:15,510
And when I click and it says embed in stack.

109
00:07:15,510 --> 00:07:17,580
So those are now in a stack of you.

110
00:07:17,810 --> 00:07:26,010
So with the stack you selected to go ahead and give us some spacing here of about maybe 4 maybe about

111
00:07:26,010 --> 00:07:26,510
six.

112
00:07:26,530 --> 00:07:31,070
Six looks good already and then with this stack the you selected this.

113
00:07:31,110 --> 00:07:39,480
Go ahead and put you pound right there and we are going to pin you zero from the left four from the

114
00:07:39,480 --> 00:07:45,630
top and depending on the size of your table you sell.

115
00:07:45,630 --> 00:07:51,590
The bottom is going to be a little bit different for you perhaps but mine is 0.5.

116
00:07:51,650 --> 00:07:57,540
And if you don't have the exact same measurements that I have my table use sell is let's see how tall

117
00:07:57,540 --> 00:07:57,940
you are.

118
00:07:57,950 --> 00:08:00,730
96 so it's 96 tall.

119
00:08:00,860 --> 00:08:01,150
All right.

120
00:08:01,160 --> 00:08:06,060
But what really matters is what's most important is that we have constraints all the way from the top

121
00:08:06,510 --> 00:08:10,900
all the way through to the bottom of the table.

122
00:08:10,920 --> 00:08:17,010
So now what this does is this is one of the prerequisites to be able to have a table view cell that

123
00:08:17,010 --> 00:08:19,650
is dynamically sized for the height.

124
00:08:19,860 --> 00:08:27,560
Because if we look at our mockup here if we zoom in we can see that these cells are not the same height.

125
00:08:27,570 --> 00:08:29,610
Each one for instance has one here.

126
00:08:29,610 --> 00:08:36,540
This first one has only one line for the thought text and so the whole cell is a lot smaller than say

127
00:08:36,570 --> 00:08:40,240
this one which has four lines of text all right.

128
00:08:40,560 --> 00:08:45,390
So that's important that we have these constraints just right so that they flow from top to bottom in

129
00:08:45,390 --> 00:08:48,360
an uninterrupted chain of constraint.

130
00:08:48,360 --> 00:08:52,420
The other thing that we need to change here is selecting this label here.

131
00:08:52,530 --> 00:08:56,940
We need to go into its attributes and set the lines to zero.

132
00:08:56,940 --> 00:09:05,290
What this does is allow the label to expand to display all of the lines for that for that text.

133
00:09:05,310 --> 00:09:09,500
All right so now that we have that let's go ahead and get rid of this ugly blue background on the content

134
00:09:09,500 --> 00:09:10,190
of vu.

135
00:09:10,230 --> 00:09:13,170
We're just going to change the background to default.

136
00:09:13,190 --> 00:09:13,680
All right.

137
00:09:13,680 --> 00:09:14,480
That looks good.

138
00:09:14,520 --> 00:09:18,590
Save that and a couple of other things that we need to do with our table.

139
00:09:18,590 --> 00:09:20,270
You still selected.

140
00:09:20,550 --> 00:09:22,040
Let's see here selection.

141
00:09:22,080 --> 00:09:23,950
Change that to none.

142
00:09:24,010 --> 00:09:27,240
What this is is that's when you click on a cell.

143
00:09:27,240 --> 00:09:32,770
If we don't have a certain number then it'll highlight a gray ugly color case that's good.

144
00:09:32,790 --> 00:09:37,400
Now with our table you selected we don't want any dividers.

145
00:09:37,590 --> 00:09:44,460
So let's see here where is that table view we want that in table view and that's here under separator

146
00:09:44,490 --> 00:09:45,470
is.

147
00:09:46,440 --> 00:09:48,460
So that looks good.

148
00:09:48,900 --> 00:09:54,280
All right so we have our storyboard set up for our main see.

149
00:09:54,300 --> 00:09:57,640
Let's go ahead and add those outlets right.

150
00:09:57,680 --> 00:10:05,430
So we're going to hold option and click on Main Visi that swift and let's see here we just need a couple

151
00:10:05,430 --> 00:10:09,220
of the last one for the segment control and one for the table view.

152
00:10:09,450 --> 00:10:16,230
So here inside of the class to make a little header for outlets and then I'm going to control drag from

153
00:10:16,230 --> 00:10:18,680
the segmented control.

154
00:10:18,870 --> 00:10:26,240
I'm going to say segment control and that's an outlet and connect is good.

155
00:10:26,240 --> 00:10:31,050
And then I'm going to select the table view not the table view cell but the table view learn to control

156
00:10:31,050 --> 00:10:34,980
and drag and create a new outlet called Table View.

157
00:10:34,980 --> 00:10:41,000
And when they say connect all ready and then go ahead and close our assistant editor jump into main

158
00:10:41,010 --> 00:10:46,110
VC swift and let's get set up for our Table View Controller.

159
00:10:46,110 --> 00:10:46,380
All right.

160
00:10:46,400 --> 00:10:51,090
So we're going to lay out the skeleton for our table view.

161
00:10:51,090 --> 00:10:51,620
All right.

162
00:10:51,920 --> 00:10:57,630
Let's get rid of this did receive memory warning and to work with our table view we need a couple of

163
00:10:57,630 --> 00:11:04,560
things right we need a couple of protocols we need to implement those are you table value data source

164
00:11:04,980 --> 00:11:11,040
and you Table View table view delegate.

165
00:11:11,170 --> 00:11:12,500
There you go.

166
00:11:12,530 --> 00:11:15,710
So we are to our data source and our delegate.

167
00:11:15,940 --> 00:11:21,570
And we need to set the data source and delegates from the same table view that delegate is equal to

168
00:11:21,570 --> 00:11:27,370
self and table view that data source is equal to self.

169
00:11:27,600 --> 00:11:33,090
So now that we have set the delegate and data source let's go ahead and implement the methods that are

170
00:11:33,090 --> 00:11:36,830
required to conform to these protocols.

171
00:11:37,050 --> 00:11:39,720
And those are we have two of them.

172
00:11:39,720 --> 00:11:46,960
One is number of rows N.S. and phrenologist return 0.

173
00:11:47,460 --> 00:11:51,700
And the second is cell for a row at index path.

174
00:11:51,960 --> 00:11:55,740
And for now all this return a generic table.

175
00:11:55,760 --> 00:11:59,840
You said OK we'll see that.

176
00:11:59,880 --> 00:12:05,250
All right so now we have the bare minimum of what is required for a table view to function.

177
00:12:05,290 --> 00:12:07,060
However we need a data source right.

178
00:12:07,060 --> 00:12:12,050
We need somewhere to store the thoughts that are going to be downloaded.

179
00:12:12,330 --> 00:12:18,330
And and so what we're going to need is we're going to need a class for and I need a model to put those

180
00:12:18,330 --> 00:12:19,170
into.

181
00:12:19,170 --> 00:12:24,150
All right so here on the model I'm going to reichlich and see a new file and this is just going to be

182
00:12:24,150 --> 00:12:25,250
a swift file.

183
00:12:25,250 --> 00:12:29,030
I'm going to say next and we're going to call this thought.

184
00:12:29,120 --> 00:12:29,700
OK.

185
00:12:29,750 --> 00:12:35,040
So this is going to be a Class A blueprint for the thoughts that are downloaded from our fire store

186
00:12:35,040 --> 00:12:36,120
database.

187
00:12:36,410 --> 00:12:44,070
And this is going to be a Class C class thought and then we're going to go ahead and put in our properties.

188
00:12:44,070 --> 00:12:49,140
Remember it's like a blueprint so we have properties and attributes of our thought to class and what

189
00:12:49,140 --> 00:12:49,940
are those.

190
00:12:50,040 --> 00:12:53,940
Well we have most of them here and our constants already category.

191
00:12:53,940 --> 00:12:57,680
The number of Commons Number likes thought text timestep use a name.

192
00:12:57,740 --> 00:12:59,310
Actually the category isn't one of them.

193
00:12:59,910 --> 00:13:01,640
But anyway so here is the thought.

194
00:13:01,650 --> 00:13:04,120
Let's go ahead and write those out.

195
00:13:04,500 --> 00:13:15,140
So those are private set of our username of type string.

196
00:13:15,780 --> 00:13:16,350
OK.

197
00:13:16,500 --> 00:13:23,190
And so you may be wondering what this private set is what this means is that the you can read from it

198
00:13:23,190 --> 00:13:29,410
from anywhere but only the class inside of the class is allowed to set the value of the variables.

199
00:13:29,500 --> 00:13:35,580
OK so I'm going to just copy this and paste it.

200
00:13:35,640 --> 00:13:37,260
We have six of them.

201
00:13:37,500 --> 00:13:39,170
And then I just go through and change these.

202
00:13:39,240 --> 00:13:39,670
OK.

203
00:13:39,780 --> 00:13:44,480
So next we have our time stamp and that is of type date.

204
00:13:45,120 --> 00:13:49,990
Then we have our thought text that is of type String.

205
00:13:50,230 --> 00:13:59,610
We were a number of likes that is of type int here for a number of comments and that is of type.

206
00:13:59,670 --> 00:14:05,430
And then we have our Dokument ID and that is of type string.

207
00:14:05,820 --> 00:14:07,010
And so this is new.

208
00:14:07,080 --> 00:14:08,000
So what is this.

209
00:14:08,250 --> 00:14:15,420
So each thought needs to have the document ID property so that we can reference it at a later time because

210
00:14:15,420 --> 00:14:21,150
later we're going to have that star that we can click on and and add likes to each post to do that we

211
00:14:21,150 --> 00:14:27,180
need to modify the data for that document and to do that and we need to have be able to reference the

212
00:14:27,180 --> 00:14:28,960
path to that document.

213
00:14:29,010 --> 00:14:33,010
And so we need to know the document IDs so that has to be part of its class.

214
00:14:33,330 --> 00:14:37,820
All right let's go ahead and initialize this in the same unit and the parameters are.

215
00:14:37,860 --> 00:14:53,920
All of these are going to say user name of type String time stamp type date fat text of type string.

216
00:14:53,960 --> 00:15:08,440
You need a colon not a comma string num likes of type and numb comments of type int and document I d

217
00:15:08,710 --> 00:15:11,540
of type string.

218
00:15:11,560 --> 00:15:12,100
There you go.

219
00:15:12,190 --> 00:15:19,330
And then we're just going to set those values and say self adad use a name is looks like we have a couple

220
00:15:19,330 --> 00:15:20,020
of typos here.

221
00:15:20,020 --> 00:15:21,580
This should be string.

222
00:15:21,610 --> 00:15:22,740
Then we go.

223
00:15:22,740 --> 00:15:23,070
All right.

224
00:15:23,070 --> 00:15:33,430
So self the user name is equal to user name itself that time stamp is equal to time stamp that text

225
00:15:33,430 --> 00:15:42,770
is equal to that should be self self-taught that text is equal to thought text self-doubt.

226
00:15:43,190 --> 00:15:43,730
What's next.

227
00:15:43,730 --> 00:15:54,720
Numb legs numb legs is equal to numb likes and self that numb comments is equal to numb comments and

228
00:15:54,720 --> 00:15:55,810
self-doubt.

229
00:15:56,450 --> 00:16:00,340
Document idea is equal to document ID.

230
00:16:00,760 --> 00:16:04,540
All right so now we have our class and our initialiser here.

231
00:16:04,780 --> 00:16:05,750
Very good.

232
00:16:05,890 --> 00:16:10,080
So now we can come back to our list here assigning a property to itself.

233
00:16:10,140 --> 00:16:14,190
So if that time stamp you got to take a step.

234
00:16:14,290 --> 00:16:14,800
There you go.

235
00:16:16,080 --> 00:16:19,300
All right so let's jump back to our mean visi.

236
00:16:19,650 --> 00:16:28,000
So now here what we can do is we can create a variable that holds a an array of these thoughts.

237
00:16:28,040 --> 00:16:28,430
OK.

238
00:16:28,570 --> 00:16:39,090
It's going to save our or private of our thoughts is equal to an array of the class thought and we'll

239
00:16:39,090 --> 00:16:40,500
initialize it right here.

240
00:16:40,770 --> 00:16:46,380
And this reminds in private that our outlets actually could be private as well.

241
00:16:46,380 --> 00:16:52,950
And this is a good practice because it's actually possible to modify your outlets from another class

242
00:16:52,950 --> 00:16:54,260
if they're not set to private.

243
00:16:54,270 --> 00:16:54,700
OK.

244
00:16:54,870 --> 00:16:57,910
So our variables are private as well should our outlets be.

245
00:16:58,170 --> 00:17:03,750
And so let's do then add thought we see as we're also here going to change these outlets to private

246
00:17:03,810 --> 00:17:04,630
as well.

247
00:17:04,680 --> 00:17:10,740
I'm just going to copy that paste and paste it so that's good.

248
00:17:10,740 --> 00:17:12,320
All right so back to the sea.

249
00:17:12,600 --> 00:17:15,760
OK so now we have our array of thoughts.

250
00:17:15,870 --> 00:17:22,230
And so now here is the number of rows in section instead of returning zero we can actually return thoughts

251
00:17:22,350 --> 00:17:23,940
that count.

252
00:17:24,360 --> 00:17:26,160
All right very good answer.

253
00:17:26,160 --> 00:17:28,470
Now let's take a look at this cell for Rove.

254
00:17:28,500 --> 00:17:29,730
Index path.

255
00:17:29,730 --> 00:17:32,700
We don't want to return a generic white table view cell.

256
00:17:32,730 --> 00:17:38,080
We want to return a custom cell class of our thought cell.

257
00:17:38,490 --> 00:17:39,820
But first we need to create that.

258
00:17:39,870 --> 00:17:41,480
So let's go right here in our view.

259
00:17:41,490 --> 00:17:47,520
Let's go ahead and right click and say new file and go to Cocoa touch class next.

260
00:17:47,870 --> 00:17:53,940
And this is going to be a subclass of white people B-cell is going to be called thought cell and we're

261
00:17:53,940 --> 00:17:59,210
going to say next and create all right.

262
00:17:59,220 --> 00:18:05,600
So we're not going to be using the cell selected method so I can delete that and save it and jump into

263
00:18:05,600 --> 00:18:07,390
our main story board.

264
00:18:07,760 --> 00:18:13,670
And here we're going to set the table view you sell to this new custom class that we just created.

265
00:18:13,670 --> 00:18:18,850
So if the table view cell selected go to his identity inspector and change the class to.

266
00:18:19,110 --> 00:18:20,260
Thought so.

267
00:18:20,530 --> 00:18:26,500
And while we're here in the attributes inspector let's set the identity of the reuse identifier so to

268
00:18:26,510 --> 00:18:26,810
say.

269
00:18:26,820 --> 00:18:29,020
Thought so.

270
00:18:29,420 --> 00:18:29,980
OK.

271
00:18:30,260 --> 00:18:33,010
And remember that because we're going to need it in a minute.

272
00:18:33,050 --> 00:18:35,440
So with that copied let's jump.

273
00:18:35,430 --> 00:18:36,130
All right let's go ahead.

274
00:18:36,140 --> 00:18:40,130
Open the assistant editor for thought sell that Swift.

275
00:18:40,640 --> 00:18:45,440
So with this open we can set the Iby outlets for our prototype cell.

276
00:18:45,830 --> 00:18:48,310
So let's go ahead and do that.

277
00:18:48,350 --> 00:18:52,140
I'm going to click on and see here thought so content to view.

278
00:18:52,370 --> 00:18:56,830
So our user name a label and a control click and drag.

279
00:18:57,010 --> 00:18:59,720
We're going to see user name label.

280
00:18:59,870 --> 00:19:08,200
That's an outlet well go and put my header here like I like to do outlets there we go.

281
00:19:08,530 --> 00:19:08,740
All right.

282
00:19:08,740 --> 00:19:15,550
Next up is the time stamp label someone a control drag and say time stamp label.

283
00:19:15,650 --> 00:19:17,640
That's an outlet so connect it.

284
00:19:18,130 --> 00:19:26,150
And then in a control and drag from the thought text the label thought text label.

285
00:19:26,410 --> 00:19:28,950
And that's an outlet to connect that.

286
00:19:29,170 --> 00:19:32,160
And then we need here in the stack to be you.

287
00:19:32,240 --> 00:19:39,190
We need the icon or the star image or something to control and drag and say like this image.

288
00:19:39,530 --> 00:19:41,560
And that's an outlet.

289
00:19:41,590 --> 00:19:48,540
And then lastly the likes number label likes label.

290
00:19:48,670 --> 00:19:49,550
OK so that's good.

291
00:19:49,550 --> 00:19:51,750
Going to connect that as well.

292
00:19:51,760 --> 00:19:52,180
All right.

293
00:19:52,180 --> 00:19:52,910
Awesome.

294
00:19:52,920 --> 00:19:54,350
So that looks good.

295
00:19:54,350 --> 00:20:02,510
Going to going to close our assistant editor and jump into our cells just again and save this.

296
00:20:03,040 --> 00:20:08,140
And next up we're going to create a function called configure cell.

297
00:20:08,140 --> 00:20:15,190
And what this cell does is every time in our main Visi does swift that sulphurea index path is called

298
00:20:15,550 --> 00:20:18,760
We are going to pass into this function the configure cell.

299
00:20:18,760 --> 00:20:24,820
The thought that corresponds with the index path from our thoughts array and from there we are going

300
00:20:24,820 --> 00:20:31,420
to use that thought and it's information it's properties such as the username time stamp that text et

301
00:20:31,420 --> 00:20:35,850
cetera to set the values for these Iby outlets.

302
00:20:35,920 --> 00:20:36,420
OK.

303
00:20:36,850 --> 00:20:46,480
So here we're going to say phunk configure cell and we are going to pass into it a thought of class

304
00:20:47,020 --> 00:20:47,410
type.

305
00:20:47,410 --> 00:20:52,350
Thought it's going to save that and jump in main Visi that swift.

306
00:20:52,510 --> 00:20:58,240
And so here instead of returning a generic people view VSL instead what we wanted to do is we're going

307
00:20:58,240 --> 00:21:08,140
to say if let cell is equal to table view Doddie Q reusable cell and the identifier is the one that

308
00:21:08,140 --> 00:21:15,450
we set in storyboard which was thought cell for index path index path that we go.

309
00:21:15,760 --> 00:21:18,780
And we need to cast it as a thought.

310
00:21:19,050 --> 00:21:19,710
So.

311
00:21:20,040 --> 00:21:20,790
Okay.

312
00:21:21,520 --> 00:21:29,410
And what are we going to do with this so what are we going to do is say so that configure our cell and

313
00:21:29,410 --> 00:21:30,880
we're going to pass into it.

314
00:21:31,000 --> 00:21:39,880
The thought that corresponds to the row that is being queued and we're going to get that out of our

315
00:21:40,030 --> 00:21:41,390
FAZZARI right here.

316
00:21:41,620 --> 00:21:45,710
And so the flow here what we need to say that path that row.

317
00:21:46,260 --> 00:21:53,080
So how the flow is going to be once we get everything hooked up in the next lesson is we we fetch the

318
00:21:53,080 --> 00:22:01,640
results from our database in our store and we're going to store those in our thoughts array here that

319
00:22:01,660 --> 00:22:07,900
we're going to reload the table view which is going to call all of the table view methods and then each

320
00:22:07,960 --> 00:22:14,080
cell is going to be skewed and we're going to fill up our table view array from the data stored in our

321
00:22:14,080 --> 00:22:15,340
database.

322
00:22:15,340 --> 00:22:15,640
All right.

323
00:22:15,670 --> 00:22:22,460
So then once we configure a cell we're just going to return it to a return cell and if we're not able

324
00:22:22,460 --> 00:22:29,030
to teach you a cell which never happens really to say else and then we're going to return a generic

325
00:22:29,540 --> 00:22:31,270
table view.

326
00:22:31,850 --> 00:22:36,440
All right let's go ahead and run this and we won't see anything because we don't have any data in our

327
00:22:36,440 --> 00:22:41,780
thoughts array but let's just make sure it doesn't crash and make sure we didn't forget anything so

328
00:22:41,780 --> 00:22:42,650
far.

329
00:22:42,800 --> 00:22:44,210
All right it's looking looking good.

330
00:22:44,210 --> 00:22:45,850
We have our segment control appear.

331
00:22:45,860 --> 00:22:49,280
We're not seeing anything in our table but that is to be expected.

332
00:22:49,280 --> 00:22:50,140
And I think we did.

333
00:22:50,150 --> 00:22:55,940
I think we have laid the groundwork so that in the next lesson we can go ahead and jump right into actually

334
00:22:55,940 --> 00:23:02,510
using fyrst or downloading that data parsing it out storing it in this thoughts array and then hopefully

335
00:23:02,510 --> 00:23:07,890
we should be able to see those that data displayed right in our table view.

336
00:23:08,210 --> 00:23:11,510
But I do realize that we forgot one thing.

337
00:23:11,760 --> 00:23:16,460
We talked about having the cell to be dynamically sizing and there's a couple of more things that we

338
00:23:16,460 --> 00:23:22,730
need to do to make that happen where we need to do is we need to supply an estimated row height for

339
00:23:23,550 --> 00:23:23,980
the table.

340
00:23:23,980 --> 00:23:27,750
So when say table you dot estimated rawhide.

341
00:23:27,880 --> 00:23:33,680
And we're going to see about 80 and then the last thing that we need to do bring to the table view that

342
00:23:35,180 --> 00:23:37,270
throw height is equal to.

343
00:23:37,430 --> 00:23:39,100
And this is where the magic happens.

344
00:23:39,140 --> 00:23:44,480
We say table view and we want automatic a dimension.

345
00:23:44,480 --> 00:23:44,950
OK.

346
00:23:44,960 --> 00:23:50,810
And with those two lines of code in conjunction with the other things that we did in the storyboard

347
00:23:50,820 --> 00:23:57,170
setting the lines to 0 and having the constraints from top to bottom of our table cell that will let

348
00:23:57,170 --> 00:23:58,610
it be dynamically sizing.

349
00:23:58,610 --> 00:23:59,130
All right.

350
00:23:59,270 --> 00:24:00,510
So some pretty exciting stuff.

351
00:24:00,510 --> 00:24:03,790
I hope you guys are exciting for the next one where we work more with firestorm.

352
00:24:03,800 --> 00:24:06,080
That's where the that's where the really cool stuff is.

353
00:24:06,170 --> 00:24:06,430
All right.

354
00:24:06,440 --> 00:24:07,940
And so I'll see you in the next one.