Now that we've got our list of surveys showing up inside the browser or at least reloading the data
for it we can start to think about how we're going to render them on the screen.
So I'm going to pull up the materialized CSSA documentation again and we'll get a better sense of exactly
how we're going to make these surveys look a little bit nice.
So inside a new tab I'll navigate to materialise CSSA dot com.
And then again on the left hand search box I'll search for cards.
I want to find cards H.T. amount.
And so I think that we can probably use this basic card right here to pretty good effect.
We'll say that each survey that the user fetches will be displayed inside of one of these individual
cards.
So again remember we basically just need to reuse the e-mail that is provided inside the snippet right
here.
I do want to remind you though that you'll notice that the top two divs in here are a class row and
they also specify a column.
So these two divs right here are really about setting the width of the card.
And so they might not necessarily be super appropriate for what we need.
So I think that we probably just need everything from card blue gray dark Darkon one down.
OK.
So let's get to it.
I'm going to change back over to my code editor and then inside the render method we're going to instead
of just displaying a text survey list right here we're going to call a helper method that will be responsible
for rendering our list of all the different surveys.
I think we'll call it something like this dot render surveys like so let's now define that helper method
renders surveys and inside of here will now iterate over our list of surveys so we'll map over it.
And for every survey where we turn one of these cards.
So I'll return this dot prop's dot surveys dot map every iteration through survey or through the map
statement will be called with a survey.
And then inside of this arrow function we'll return a big blob of GSX.
And so I hope you're ready for some typing because yeah we're getting this entire thing now.
So let's get to it.
We're going to say at the very top level we want a div with a class name of card and Darkon Dash 1.
And remember that we do need to specify a key on this survey.
So are you a key on the Deus Ex blah that's returned because we are rendering a list here.
So we will give this a key
of survey Daut and you might be thinking Id remember Mongoose is the only thing that really respects
this id property in every other location.
So inside the browser and over with like Rob Lango queries its always underscore ID.
Thats how the property ID is actually reflected inside of our database.
So again to say underscore ID as the key now inside of this card will say div with the class name of
card dasht content.
And then inside of that div will start to put down some of the actual content of the survey.
So a place a span with the class name of car dash title close off the span and we'll give this thing
serve a title.
Make sure you get your semi-colon or some of your curly braces in there.
After this span we'll do a paragraph tag that contains the survey question not question but use the
body that's the property that we care about.
After the paragraph tag we'll do another paragraph tagged with a class name of right and this one is
going to be meant to specify when this survey was sent.
So let's say sent on loops on.
And remember that when we pull this date out of our database when we actually save this scent on property
we go back to our root models directory and look at our survey file.
So here's our schema we had sent that said that we call this a date center property and that would be
a date object.
Now when we send this entire model over the Internet to the browser when it shows up in the user's browser
it's not going to be a date object anymore.
Instead it will be a string like a pure time stamp that specifies exactly when this survey was originally
sent.
So when we try to show it inside the browser we need to recognize that it's going to be a very raw very
kind of computer looking date.
So we want to format it into something that looks kind of nice.
So to do so we'll say inside of curly braces new date will pass into that the survey dot and the property
name was date sent and then to nicely format this thing will say to local locale.
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
like so.
And so this is going to return just a very nice looking pretty reasonably formatted date for us.
Get.
So I think that's it for the card content.
Now as a sibling Div 2 card content.
So between these two closing div tags we're going to add in one more div with a class name of card dash
action.
And just to get this are the kind of data here to be stylized nicely where we can use an anchor tag.
Even though this is not really meant to handle any type of navigation.
So you see how on the example over here they've got this is a link and they are using anchored tags
to get that styling.
So we're not actually going to be doing any navigation here.
Nonetheless we're going to do just a little bit of a hack and use an anchor tag here to show the actual
yes votes and no votes.
So a little bit of a hack.
Definitely not semantically correct.
M L but let it go this one time.
So say here's the number of yes votes which is to me survey.
Yes.
And then another anchor tag with no votes which is going to be surveyed dot no.
OK so let's flip over to the browser and test this thing out see how we're doing.
Flip backwards the reactor application and hot dog it actually looks pretty reasonable.
Now I think that we probably got a class name a little bit wrong because the cards are see through.
When we kind of expected them to be a little bit darker I think that we left off the blue gray class
name.
So let's go back in and add that so we get the kind of nice darker theme going on.
So if I look back at the top level div right here here's card Darkon one.
And so yeah we did leave off the class name.
It was blue dash gray blue dash gray like so.
So let's try this out again.
Here's our reload and OK and a little bit dark now.
Well I don't know.
I'm conflicted.
I think I'll leave it on just because I'm crazy.
You know what.
It's got to come off.
Well actually we can leave it on.
But the text has got to go to White I think without a doubt.
So I think the rule without the class name was text white.
So we can pretty much toss that on the inner div here that shows the actual content of the card.
Let's try that out.
No not text white.
Well OK forget it then I'll leave it up to you.
I'm going to take off the blue gray will keep the whole thing is white for now.
OK.
That's good enough.
Now if we scroll through the list you'll notice that most of these have yes and no votes of zero because
we haven't actually really clicked on a lot of these or anything like that.
However if we go down towards the bottom you'll see here's our souple super final test card with four
yes votes.
So I think that this is definitely working out correctly but maybe we should take one quick break come
in the next section and maybe manually go into our Mangu database and update a little bit of data to
make some of these things look at least a little bit more interesting.
So quick break come back in the next section and let's do a couple of final little tweaks.