The last big thing that we have to do around building inside of our application is to make sure that
the number of credits that a user owns is always visible inside the head of our application.
So lets take care of that inside of this section and pretty much wrap up all things around billing.
This is the last kind of big thing that we have to take care of right now around all the billing aspects
of our app.
So inside of my client directory I'm going to find my header component inside of the SIRC components
dot js file.
You'll recall that inside of here we currently have that rendered content function that returns a list
of or a hash.
I should say a array of allies.
If the user is logged in.
So I think it's going to be pretty straightforward.
All we have to do is add in another lie and we'll print out the number of credits that a user has.
Then you'll remember also that the user model which we are already fetching the instant that a user
logs into our application is available inside this component already as this drops off.
So all we have to do is somehow printout this dot props dot dot credits and that should display the
total number of credits that the user has inside of the header.
So let's give this a shot inside of the array right here.
I think that right after the payments button we could put the text that says hey here's how many credits
you have.
So I'll put down an ally.
Remember that we still have to deal with all this key stuff because we are returning an array here.
So I'll give it a key of three.
Again you know they don't have to be in the order or anything like that.
The only requirement is that they are unique and consistent between renters and so we are only rendering
the slowest one time.
It's very static and that's why we are using these hard coded keys like this.
All right so put down or lie.
And then inside this ally we want to display some text that says hey here's somebody credits you have.
So we'll say here's the credits.
And then I want to say specifically how many credits the user has which is available as this props or
credits.
So say this props thought off dot credits like so.
OK.
So let's test this out.
Oh I think I made a little typo here.
I didn't get a comma after the closing ally so I'll make sure I put that in.
That's better.
OK.
So now we can test this out inside the browser.
So when I flip back over I see very simply in the header credits is five.
I have five credits.
All right.
Well that's pretty much it.
Not too bad.
Now you will immediately notice that it looks like the text here is sandwiched up against the button.
And it's also kind of sandwiched up against log out on the right hand side as well.
So we're going out in a little bit of custom styling to just that lie to include a little bit of space
on the left and right hand sides.
So back at that ally right here I to add on a styled prop with a margin of zero pixels on top such as
0 and 10 pixels on the right hand and left hand sides.
If you've never seen this before this is shorthand for defining margin.
If you put in a zero right here the first kind of item in this string right here is used as the margin
to apply to the very top and very bottom of the element.
And then the second little piece here of 10 pixels means use this margin on the left and right hand
sides of the settlment aren't.
So we'll see this and then test it back out again.
And that looks way better.
So now there is some spacing against the add credits button and some spacing against the log out button
as well.
OK.
So this is looking pretty good.
Now we're not quite done with this.
There's one little tiny of edge case here that we're going to run up against that you might not see
when you already have some number of credits like this.
So let's take a quick break.
When we come back in the next section we'll figure out what this kind of edge cases and also talked
about exactly how we make sure that the number of credits that the user has is always up to date especially
after a user goes through the flow of adding some number of credits.
So let's test out this last little bit.
Inside the next section.