1 00:00:00,180 --> 00:00:05,910 All right, and once we have the functionality in place to fetch stats from the server now and set up 2 00:00:05,910 --> 00:00:12,690 the structure for the Stats Bridge, well, starting components will create STAT's container. 3 00:00:13,260 --> 00:00:15,330 That's where we'll have those cards. 4 00:00:15,420 --> 00:00:17,850 Then we'll also have charts container. 5 00:00:18,210 --> 00:00:24,180 And the reason why we have charts container because eventually there will be two charts in our application. 6 00:00:24,360 --> 00:00:26,400 We'll also have the area chart. 7 00:00:26,790 --> 00:00:27,440 A bar chart. 8 00:00:28,170 --> 00:00:29,070 The area chart. 9 00:00:29,400 --> 00:00:36,480 And we also want to set up this stats item, which will be that card for declined interview and pending. 10 00:00:36,960 --> 00:00:40,050 And for all of them, let's just set a simple return. 11 00:00:40,350 --> 00:00:42,840 There's going to be a little bit more work eventually with charts. 12 00:00:42,870 --> 00:00:44,750 That's what we're going to be setting up next. 13 00:00:44,760 --> 00:00:50,460 Once we're done showcasing all the stats and remember import and export. 14 00:00:50,470 --> 00:00:54,660 Now we're exporting only these two from the components. 15 00:00:55,050 --> 00:00:57,210 This one stays local. 16 00:00:57,630 --> 00:01:03,800 And then once we have that one place, I'll talk about the general structure for this. 17 00:01:03,840 --> 00:01:05,160 That's just page. 18 00:01:05,640 --> 00:01:08,940 So let's start here in the components, I guess. 19 00:01:09,330 --> 00:01:12,960 Let's create that stats container. 20 00:01:14,080 --> 00:01:21,010 That's the first one let's create that we need to go and underscore stats container, and I'm going 21 00:01:21,010 --> 00:01:27,160 to go with their first, I'm being I'm just going to say they've said they're having one and then start 22 00:01:27,160 --> 00:01:28,090 container. 23 00:01:28,510 --> 00:01:31,750 Then let's create that single stat item. 24 00:01:32,750 --> 00:01:38,480 So that's that card, so I'm going to go with the file and I'm a criminal check, so it's exactly the 25 00:01:38,480 --> 00:01:38,900 same. 26 00:01:40,040 --> 00:01:45,230 It is a stats item so I can remove this one or delete or rename whatever. 27 00:01:45,770 --> 00:01:49,400 I guess in this case, I'm just going to delete and let's create a new one stats item. 28 00:01:50,480 --> 00:01:53,420 Let's call this that item now. 29 00:01:53,430 --> 00:02:00,110 I'm not exporting that from this folder, but I do want to set it up right away in the container just 30 00:02:00,110 --> 00:02:01,340 so I can see that everything works. 31 00:02:02,000 --> 00:02:03,800 Let's go here with a single. 32 00:02:04,950 --> 00:02:06,930 Single start item. 33 00:02:07,740 --> 00:02:09,780 And then let's import it right away here. 34 00:02:10,320 --> 00:02:14,610 All right, I'm sure you will grab the imports from the trade me, but for the time being, I think 35 00:02:14,610 --> 00:02:19,200 it's going to be fine enough where we will go with the component name. 36 00:02:19,350 --> 00:02:21,210 So right after this, that's container. 37 00:02:21,600 --> 00:02:26,490 Let's go with our start item and let's see whether our or our import works. 38 00:02:27,180 --> 00:02:30,060 So let me set it up, maybe here as a component. 39 00:02:31,190 --> 00:02:38,690 And I'm going to call this stat and that item, and yep, looks like everything worked, let's save 40 00:02:38,690 --> 00:02:39,140 this one. 41 00:02:39,470 --> 00:02:43,070 And then we also want to go with charts container. 42 00:02:44,050 --> 00:02:48,370 Charts container, Drew, yes, let's set up the phone and. 43 00:02:49,220 --> 00:02:55,520 Violence out of hand one and then let's kind of banner import export. 44 00:02:55,850 --> 00:03:05,150 What I'm looking for in the next address, well, we want to go here with stats and container, and 45 00:03:05,150 --> 00:03:06,830 we also want to do the same thing. 46 00:03:07,340 --> 00:03:13,490 We have a chart container, so charts and we're looking for this component. 47 00:03:13,730 --> 00:03:17,600 Now let's grab both of these values that's out here. 48 00:03:18,200 --> 00:03:19,070 Copy and paste. 49 00:03:19,070 --> 00:03:19,490 OK? 50 00:03:19,550 --> 00:03:20,030 Awesome. 51 00:03:20,510 --> 00:03:25,250 And then let's navigate right now to the stats page. 52 00:03:25,970 --> 00:03:29,510 And let's see, what are we looking for out here as far as their in their? 53 00:03:30,430 --> 00:03:37,480 So in here, we'll need to use effect from React, we'll need use up context because I want to get the 54 00:03:37,480 --> 00:03:38,780 show stats function. 55 00:03:38,980 --> 00:03:44,980 I also when I get is loading since won't display the loading spinner and also monthly applications, 56 00:03:44,980 --> 00:03:50,530 but I'll talk about them once we get here in the code, I'll explain why we have here this condition. 57 00:03:50,830 --> 00:03:53,950 And once we're done with imports, I want to invoke my use of fact. 58 00:03:54,400 --> 00:04:03,490 So when Earth page renders, I want to fetch the stats and update the state and why we're loading on 59 00:04:03,490 --> 00:04:06,870 display the loading spinner and we'll place it in the center. 60 00:04:07,330 --> 00:04:14,320 And once we get back to stats, that's when we want to display the stats container as well as the chart 61 00:04:14,560 --> 00:04:15,250 container. 62 00:04:15,760 --> 00:04:23,320 And in order to save a little bit of time, I'll grab all of these ones, the imports, and then we 63 00:04:23,320 --> 00:04:26,110 want to navigate through the stats page. 64 00:04:26,110 --> 00:04:28,510 So refined those pages here. 65 00:04:29,200 --> 00:04:30,550 So have stats over here. 66 00:04:31,430 --> 00:04:33,350 Let's set up those imports. 67 00:04:34,410 --> 00:04:41,760 And then we want to go with our use of context, since I want to grab those things, so show. 68 00:04:42,830 --> 00:04:50,060 Starts first then, and we want to get these loading and then we want to go with monthly applications. 69 00:04:50,840 --> 00:04:58,050 All of that is coming from the USU app and that context, let's invoke it and let's go right away. 70 00:04:58,070 --> 00:05:01,970 What user effect so use effect when this component loads? 71 00:05:02,390 --> 00:05:03,590 This is what we want to do. 72 00:05:04,100 --> 00:05:06,110 The array is going to be empty. 73 00:05:06,390 --> 00:05:11,390 Essentially, I only want to do that once the initial render happens and then we want to go, which 74 00:05:11,390 --> 00:05:12,110 shows that. 75 00:05:12,690 --> 00:05:16,400 Now I'll worry about the return in a second for knowledge. 76 00:05:16,400 --> 00:05:18,140 Just check the loading. 77 00:05:18,800 --> 00:05:26,360 So if we're loading, then we want to go with our loading components or return and then loading component. 78 00:05:27,550 --> 00:05:34,810 And we want to send it in the center, so the center proper, remember that's what we added to our loading 79 00:05:34,810 --> 00:05:35,290 component. 80 00:05:35,680 --> 00:05:41,670 And now let me navigate to my complete application and see loading and not export it. 81 00:05:42,190 --> 00:05:43,270 And I guess, you know what? 82 00:05:43,420 --> 00:05:49,120 When I was setting everything up as far as the loading, I forgot to import it over here. 83 00:05:49,630 --> 00:05:53,380 So let's go back to our components and let's actually fix that. 84 00:05:53,380 --> 00:05:56,200 So here we want to add the loading one. 85 00:05:56,860 --> 00:05:58,000 So let's selected. 86 00:05:59,060 --> 00:06:05,000 Loaning component, and then let's add it to our exports and now everything should work. 87 00:06:05,330 --> 00:06:05,600 Yep. 88 00:06:06,110 --> 00:06:09,230 For a split second, we saw the loading one. 89 00:06:09,530 --> 00:06:20,870 And now if I'll take a look at the state, you see all of my status values, so complex provider or 90 00:06:20,870 --> 00:06:22,100 here alert text. 91 00:06:22,100 --> 00:06:23,540 Okay, that's not what I'm looking for. 92 00:06:23,720 --> 00:06:27,120 What I'm looking for here somewhere there is a start. 93 00:06:27,140 --> 00:06:27,410 Yep. 94 00:06:27,920 --> 00:06:30,980 So I've declined interview and pending. 95 00:06:31,580 --> 00:06:32,630 So that works. 96 00:06:32,870 --> 00:06:35,570 Now I just need to worry about the actual containers. 97 00:06:35,960 --> 00:06:37,940 So let's go back to the stats page. 98 00:06:38,570 --> 00:06:41,930 And here, as far as the return, there's really no wrapper. 99 00:06:42,290 --> 00:06:46,850 We'll just go with a fragment and then I want to set up both of those containers. 100 00:06:47,450 --> 00:06:50,060 So let's go here with stats container. 101 00:06:50,480 --> 00:06:52,820 And the second one will be the charts container. 102 00:06:53,270 --> 00:06:54,980 Now here's the thing about the charts. 103 00:06:56,110 --> 00:07:03,390 I only want to display them if I have any jobs you see with these cards at least eking out zeros, correct? 104 00:07:03,730 --> 00:07:07,240 I can say zero spending zero interior on zero decline. 105 00:07:07,250 --> 00:07:15,100 But when it comes to charts, it's my opinion that it looks somewhat silly if there is no actual data 106 00:07:15,640 --> 00:07:19,570 show and where figure that is by checking the monthly applications. 107 00:07:19,930 --> 00:07:24,580 And if it's empty array, then we don't display the charts container altogether. 108 00:07:24,940 --> 00:07:30,010 So first, let's just showcase that everything works as far as the imports and all that. 109 00:07:30,490 --> 00:07:33,790 So let me display the charts container for time being. 110 00:07:34,120 --> 00:07:37,810 So now I can see stats, containers, singles, that item and then charts container. 111 00:07:38,260 --> 00:07:43,120 But we'll right away set up the expression where I'll check the length for my array. 112 00:07:43,810 --> 00:07:52,570 I'll say if monthly application's length is less than zero, then we won't display the charts container 113 00:07:52,600 --> 00:07:53,290 altogether. 114 00:07:53,500 --> 00:07:59,770 I will do that using the and operator, where I'll say if the length is bigger than zero only, then 115 00:07:59,980 --> 00:08:02,170 we want to display the charts container. 116 00:08:02,560 --> 00:08:07,510 So let me move this sucker up and now we shouldn't see that having one. 117 00:08:08,030 --> 00:08:14,290 And with this in place now, I can start sending up the stats container component.