1 00:00:00,600 --> 00:00:04,920 The last big thing that we have to do around building inside of our application is to make sure that 2 00:00:04,920 --> 00:00:11,040 the number of credits that a user owns is always visible inside the head of our application. 3 00:00:11,040 --> 00:00:16,390 So lets take care of that inside of this section and pretty much wrap up all things around billing. 4 00:00:16,440 --> 00:00:21,090 This is the last kind of big thing that we have to take care of right now around all the billing aspects 5 00:00:21,090 --> 00:00:22,560 of our app. 6 00:00:22,590 --> 00:00:28,980 So inside of my client directory I'm going to find my header component inside of the SIRC components 7 00:00:29,450 --> 00:00:31,820 dot js file. 8 00:00:31,950 --> 00:00:38,220 You'll recall that inside of here we currently have that rendered content function that returns a list 9 00:00:38,220 --> 00:00:38,920 of or a hash. 10 00:00:38,970 --> 00:00:41,080 I should say a array of allies. 11 00:00:41,130 --> 00:00:42,970 If the user is logged in. 12 00:00:42,990 --> 00:00:44,780 So I think it's going to be pretty straightforward. 13 00:00:44,790 --> 00:00:51,460 All we have to do is add in another lie and we'll print out the number of credits that a user has. 14 00:00:51,570 --> 00:00:57,720 Then you'll remember also that the user model which we are already fetching the instant that a user 15 00:00:57,720 --> 00:01:04,250 logs into our application is available inside this component already as this drops off. 16 00:01:04,260 --> 00:01:10,260 So all we have to do is somehow printout this dot props dot dot credits and that should display the 17 00:01:10,260 --> 00:01:14,070 total number of credits that the user has inside of the header. 18 00:01:14,070 --> 00:01:19,260 So let's give this a shot inside of the array right here. 19 00:01:19,260 --> 00:01:24,120 I think that right after the payments button we could put the text that says hey here's how many credits 20 00:01:24,120 --> 00:01:25,200 you have. 21 00:01:25,200 --> 00:01:27,610 So I'll put down an ally. 22 00:01:27,990 --> 00:01:32,090 Remember that we still have to deal with all this key stuff because we are returning an array here. 23 00:01:32,370 --> 00:01:34,740 So I'll give it a key of three. 24 00:01:34,740 --> 00:01:37,590 Again you know they don't have to be in the order or anything like that. 25 00:01:37,590 --> 00:01:43,600 The only requirement is that they are unique and consistent between renters and so we are only rendering 26 00:01:43,600 --> 00:01:44,540 the slowest one time. 27 00:01:44,540 --> 00:01:49,800 It's very static and that's why we are using these hard coded keys like this. 28 00:01:49,800 --> 00:01:51,460 All right so put down or lie. 29 00:01:51,900 --> 00:01:57,970 And then inside this ally we want to display some text that says hey here's somebody credits you have. 30 00:01:58,050 --> 00:02:00,540 So we'll say here's the credits. 31 00:02:00,540 --> 00:02:07,260 And then I want to say specifically how many credits the user has which is available as this props or 32 00:02:07,480 --> 00:02:08,610 credits. 33 00:02:09,000 --> 00:02:13,860 So say this props thought off dot credits like so. 34 00:02:14,510 --> 00:02:14,830 OK. 35 00:02:14,850 --> 00:02:16,060 So let's test this out. 36 00:02:16,210 --> 00:02:17,850 Oh I think I made a little typo here. 37 00:02:17,880 --> 00:02:21,930 I didn't get a comma after the closing ally so I'll make sure I put that in. 38 00:02:22,380 --> 00:02:23,290 That's better. 39 00:02:23,600 --> 00:02:23,860 OK. 40 00:02:23,880 --> 00:02:26,160 So now we can test this out inside the browser. 41 00:02:26,600 --> 00:02:31,390 So when I flip back over I see very simply in the header credits is five. 42 00:02:31,440 --> 00:02:33,360 I have five credits. 43 00:02:33,360 --> 00:02:33,650 All right. 44 00:02:33,690 --> 00:02:34,920 Well that's pretty much it. 45 00:02:34,920 --> 00:02:36,720 Not too bad. 46 00:02:36,780 --> 00:02:41,390 Now you will immediately notice that it looks like the text here is sandwiched up against the button. 47 00:02:41,640 --> 00:02:45,830 And it's also kind of sandwiched up against log out on the right hand side as well. 48 00:02:45,840 --> 00:02:51,480 So we're going out in a little bit of custom styling to just that lie to include a little bit of space 49 00:02:51,540 --> 00:02:53,490 on the left and right hand sides. 50 00:02:54,050 --> 00:03:02,830 So back at that ally right here I to add on a styled prop with a margin of zero pixels on top such as 51 00:03:02,860 --> 00:03:07,450 0 and 10 pixels on the right hand and left hand sides. 52 00:03:07,680 --> 00:03:11,610 If you've never seen this before this is shorthand for defining margin. 53 00:03:11,610 --> 00:03:18,600 If you put in a zero right here the first kind of item in this string right here is used as the margin 54 00:03:18,600 --> 00:03:21,610 to apply to the very top and very bottom of the element. 55 00:03:21,960 --> 00:03:28,170 And then the second little piece here of 10 pixels means use this margin on the left and right hand 56 00:03:28,170 --> 00:03:31,050 sides of the settlment aren't. 57 00:03:31,050 --> 00:03:33,880 So we'll see this and then test it back out again. 58 00:03:35,790 --> 00:03:37,080 And that looks way better. 59 00:03:37,110 --> 00:03:42,270 So now there is some spacing against the add credits button and some spacing against the log out button 60 00:03:42,300 --> 00:03:43,250 as well. 61 00:03:43,790 --> 00:03:44,100 OK. 62 00:03:44,100 --> 00:03:46,770 So this is looking pretty good. 63 00:03:46,890 --> 00:03:48,870 Now we're not quite done with this. 64 00:03:48,870 --> 00:03:55,650 There's one little tiny of edge case here that we're going to run up against that you might not see 65 00:03:56,190 --> 00:03:58,740 when you already have some number of credits like this. 66 00:03:58,740 --> 00:04:00,120 So let's take a quick break. 67 00:04:00,120 --> 00:04:04,320 When we come back in the next section we'll figure out what this kind of edge cases and also talked 68 00:04:04,320 --> 00:04:10,560 about exactly how we make sure that the number of credits that the user has is always up to date especially 69 00:04:10,560 --> 00:04:14,070 after a user goes through the flow of adding some number of credits. 70 00:04:14,100 --> 00:04:16,180 So let's test out this last little bit. 71 00:04:16,200 --> 00:04:17,280 Inside the next section.