1
00:00:00,670 --> 00:00:05,050
Now that we've got our list of surveys showing up inside the browser or at least reloading the data

2
00:00:05,050 --> 00:00:08,820
for it we can start to think about how we're going to render them on the screen.

3
00:00:09,070 --> 00:00:14,080
So I'm going to pull up the materialized CSSA documentation again and we'll get a better sense of exactly

4
00:00:14,080 --> 00:00:17,420
how we're going to make these surveys look a little bit nice.

5
00:00:17,430 --> 00:00:21,420
So inside a new tab I'll navigate to materialise CSSA dot com.

6
00:00:21,760 --> 00:00:25,680
And then again on the left hand search box I'll search for cards.

7
00:00:25,820 --> 00:00:28,150
I want to find cards H.T. amount.

8
00:00:28,830 --> 00:00:33,700
And so I think that we can probably use this basic card right here to pretty good effect.

9
00:00:33,730 --> 00:00:38,680
We'll say that each survey that the user fetches will be displayed inside of one of these individual

10
00:00:38,680 --> 00:00:39,780
cards.

11
00:00:39,820 --> 00:00:45,460
So again remember we basically just need to reuse the e-mail that is provided inside the snippet right

12
00:00:45,460 --> 00:00:46,510
here.

13
00:00:46,510 --> 00:00:51,940
I do want to remind you though that you'll notice that the top two divs in here are a class row and

14
00:00:51,940 --> 00:00:53,940
they also specify a column.

15
00:00:53,980 --> 00:00:57,540
So these two divs right here are really about setting the width of the card.

16
00:00:57,630 --> 00:01:01,510
And so they might not necessarily be super appropriate for what we need.

17
00:01:01,690 --> 00:01:07,780
So I think that we probably just need everything from card blue gray dark Darkon one down.

18
00:01:08,230 --> 00:01:08,560
OK.

19
00:01:08,570 --> 00:01:09,820
So let's get to it.

20
00:01:09,850 --> 00:01:15,070
I'm going to change back over to my code editor and then inside the render method we're going to instead

21
00:01:15,070 --> 00:01:21,250
of just displaying a text survey list right here we're going to call a helper method that will be responsible

22
00:01:21,250 --> 00:01:24,150
for rendering our list of all the different surveys.

23
00:01:24,190 --> 00:01:31,900
I think we'll call it something like this dot render surveys like so let's now define that helper method

24
00:01:32,590 --> 00:01:40,510
renders surveys and inside of here will now iterate over our list of surveys so we'll map over it.

25
00:01:40,510 --> 00:01:43,910
And for every survey where we turn one of these cards.

26
00:01:44,320 --> 00:01:52,030
So I'll return this dot prop's dot surveys dot map every iteration through survey or through the map

27
00:01:52,030 --> 00:01:54,600
statement will be called with a survey.

28
00:01:56,320 --> 00:02:01,810
And then inside of this arrow function we'll return a big blob of GSX.

29
00:02:01,810 --> 00:02:06,050
And so I hope you're ready for some typing because yeah we're getting this entire thing now.

30
00:02:06,400 --> 00:02:07,390
So let's get to it.

31
00:02:07,390 --> 00:02:16,750
We're going to say at the very top level we want a div with a class name of card and Darkon Dash 1.

32
00:02:16,810 --> 00:02:20,470
And remember that we do need to specify a key on this survey.

33
00:02:20,710 --> 00:02:25,900
So are you a key on the Deus Ex blah that's returned because we are rendering a list here.

34
00:02:26,020 --> 00:02:27,680
So we will give this a key

35
00:02:30,370 --> 00:02:37,660
of survey Daut and you might be thinking Id remember Mongoose is the only thing that really respects

36
00:02:37,690 --> 00:02:40,720
this id property in every other location.

37
00:02:40,720 --> 00:02:46,660
So inside the browser and over with like Rob Lango queries its always underscore ID.

38
00:02:46,720 --> 00:02:50,730
Thats how the property ID is actually reflected inside of our database.

39
00:02:50,800 --> 00:02:58,660
So again to say underscore ID as the key now inside of this card will say div with the class name of

40
00:02:59,070 --> 00:03:00,720
card dasht content.

41
00:03:02,920 --> 00:03:06,990
And then inside of that div will start to put down some of the actual content of the survey.

42
00:03:07,180 --> 00:03:15,160
So a place a span with the class name of car dash title close off the span and we'll give this thing

43
00:03:15,640 --> 00:03:17,190
serve a title.

44
00:03:17,230 --> 00:03:20,240
Make sure you get your semi-colon or some of your curly braces in there.

45
00:03:20,890 --> 00:03:29,530
After this span we'll do a paragraph tag that contains the survey question not question but use the

46
00:03:29,530 --> 00:03:33,770
body that's the property that we care about.

47
00:03:33,990 --> 00:03:41,520
After the paragraph tag we'll do another paragraph tagged with a class name of right and this one is

48
00:03:41,520 --> 00:03:44,980
going to be meant to specify when this survey was sent.

49
00:03:45,180 --> 00:03:49,250
So let's say sent on loops on.

50
00:03:49,920 --> 00:03:56,760
And remember that when we pull this date out of our database when we actually save this scent on property

51
00:03:57,120 --> 00:04:01,520
we go back to our root models directory and look at our survey file.

52
00:04:01,530 --> 00:04:06,840
So here's our schema we had sent that said that we call this a date center property and that would be

53
00:04:06,840 --> 00:04:08,480
a date object.

54
00:04:08,490 --> 00:04:14,370
Now when we send this entire model over the Internet to the browser when it shows up in the user's browser

55
00:04:14,400 --> 00:04:16,760
it's not going to be a date object anymore.

56
00:04:16,950 --> 00:04:23,640
Instead it will be a string like a pure time stamp that specifies exactly when this survey was originally

57
00:04:23,640 --> 00:04:24,990
sent.

58
00:04:24,990 --> 00:04:30,000
So when we try to show it inside the browser we need to recognize that it's going to be a very raw very

59
00:04:30,000 --> 00:04:32,070
kind of computer looking date.

60
00:04:32,070 --> 00:04:34,940
So we want to format it into something that looks kind of nice.

61
00:04:34,950 --> 00:04:45,000
So to do so we'll say inside of curly braces new date will pass into that the survey dot and the property

62
00:04:45,000 --> 00:04:53,630
name was date sent and then to nicely format this thing will say to local locale.

63
00:04:53,790 --> 00:04:59,460
I don't know how or you want to pronounce that notice that there's an e on the end so low cal date string

64
00:04:59,700 --> 00:05:00,430
like so.

65
00:05:00,770 --> 00:05:06,370
And so this is going to return just a very nice looking pretty reasonably formatted date for us.

66
00:05:08,270 --> 00:05:08,560
Get.

67
00:05:08,580 --> 00:05:11,250
So I think that's it for the card content.

68
00:05:11,250 --> 00:05:14,300
Now as a sibling Div 2 card content.

69
00:05:14,400 --> 00:05:22,410
So between these two closing div tags we're going to add in one more div with a class name of card dash

70
00:05:22,500 --> 00:05:25,340
action.

71
00:05:25,630 --> 00:05:31,770
And just to get this are the kind of data here to be stylized nicely where we can use an anchor tag.

72
00:05:31,780 --> 00:05:35,290
Even though this is not really meant to handle any type of navigation.

73
00:05:35,290 --> 00:05:40,240
So you see how on the example over here they've got this is a link and they are using anchored tags

74
00:05:40,240 --> 00:05:41,080
to get that styling.

75
00:05:41,080 --> 00:05:44,310
So we're not actually going to be doing any navigation here.

76
00:05:44,350 --> 00:05:49,450
Nonetheless we're going to do just a little bit of a hack and use an anchor tag here to show the actual

77
00:05:49,450 --> 00:05:51,760
yes votes and no votes.

78
00:05:51,860 --> 00:05:53,010
So a little bit of a hack.

79
00:05:53,020 --> 00:05:55,210
Definitely not semantically correct.

80
00:05:55,390 --> 00:05:58,370
M L but let it go this one time.

81
00:05:58,600 --> 00:06:01,850
So say here's the number of yes votes which is to me survey.

82
00:06:01,870 --> 00:06:02,860
Yes.

83
00:06:03,250 --> 00:06:11,020
And then another anchor tag with no votes which is going to be surveyed dot no.

84
00:06:11,060 --> 00:06:15,900
OK so let's flip over to the browser and test this thing out see how we're doing.

85
00:06:16,220 --> 00:06:23,020
Flip backwards the reactor application and hot dog it actually looks pretty reasonable.

86
00:06:23,120 --> 00:06:28,210
Now I think that we probably got a class name a little bit wrong because the cards are see through.

87
00:06:28,280 --> 00:06:33,020
When we kind of expected them to be a little bit darker I think that we left off the blue gray class

88
00:06:33,020 --> 00:06:33,400
name.

89
00:06:33,410 --> 00:06:37,500
So let's go back in and add that so we get the kind of nice darker theme going on.

90
00:06:38,030 --> 00:06:42,660
So if I look back at the top level div right here here's card Darkon one.

91
00:06:42,680 --> 00:06:45,280
And so yeah we did leave off the class name.

92
00:06:45,470 --> 00:06:49,630
It was blue dash gray blue dash gray like so.

93
00:06:50,160 --> 00:06:52,900
So let's try this out again.

94
00:06:52,970 --> 00:07:00,360
Here's our reload and OK and a little bit dark now.

95
00:07:00,860 --> 00:07:02,230
Well I don't know.

96
00:07:02,240 --> 00:07:03,620
I'm conflicted.

97
00:07:03,620 --> 00:07:06,530
I think I'll leave it on just because I'm crazy.

98
00:07:06,640 --> 00:07:07,010
You know what.

99
00:07:07,070 --> 00:07:08,050
It's got to come off.

100
00:07:08,130 --> 00:07:09,690
Well actually we can leave it on.

101
00:07:09,830 --> 00:07:12,730
But the text has got to go to White I think without a doubt.

102
00:07:12,740 --> 00:07:15,410
So I think the rule without the class name was text white.

103
00:07:15,440 --> 00:07:20,320
So we can pretty much toss that on the inner div here that shows the actual content of the card.

104
00:07:20,720 --> 00:07:23,130
Let's try that out.

105
00:07:23,310 --> 00:07:24,480
No not text white.

106
00:07:24,680 --> 00:07:27,780
Well OK forget it then I'll leave it up to you.

107
00:07:27,890 --> 00:07:30,730
I'm going to take off the blue gray will keep the whole thing is white for now.

108
00:07:34,980 --> 00:07:35,380
OK.

109
00:07:35,470 --> 00:07:36,340
That's good enough.

110
00:07:36,430 --> 00:07:37,690
That's good enough.

111
00:07:37,690 --> 00:07:42,130
Now if we scroll through the list you'll notice that most of these have yes and no votes of zero because

112
00:07:42,130 --> 00:07:46,240
we haven't actually really clicked on a lot of these or anything like that.

113
00:07:46,240 --> 00:07:52,330
However if we go down towards the bottom you'll see here's our souple super final test card with four

114
00:07:52,330 --> 00:07:53,620
yes votes.

115
00:07:53,620 --> 00:07:58,270
So I think that this is definitely working out correctly but maybe we should take one quick break come

116
00:07:58,270 --> 00:08:03,640
in the next section and maybe manually go into our Mangu database and update a little bit of data to

117
00:08:03,640 --> 00:08:06,460
make some of these things look at least a little bit more interesting.

118
00:08:06,670 --> 00:08:11,110
So quick break come back in the next section and let's do a couple of final little tweaks.