1
00:00:00,110 --> 00:00:00,470
All right.

2
00:00:00,470 --> 00:00:08,000
And once we're done working on the server, now it's actually pulling the data and nicely display on

3
00:00:08,000 --> 00:00:08,760
the front end.

4
00:00:08,780 --> 00:00:15,970
So for starters, let's navigate to our client folder and we want to create four components.

5
00:00:15,980 --> 00:00:19,670
So we'll have stats, container and charts container.

6
00:00:19,670 --> 00:00:25,520
So these ones we want to import and export basically, since we'll use them in the stats page.

7
00:00:25,610 --> 00:00:28,010
Of course we want to access that in the pages.

8
00:00:28,010 --> 00:00:31,790
And then we also want to set up area chart and bar chart.

9
00:00:31,820 --> 00:00:37,520
Now these are going to be local components which we will use in the charts container.

10
00:00:37,520 --> 00:00:41,510
So therefore we don't need to set up import and export.

11
00:00:41,540 --> 00:00:46,760
Now also in the stats, you can probably already guess that we'll use the loader.

12
00:00:46,760 --> 00:00:53,150
So of course we want to set that one up in the app JS as well, so let's start working on that.

13
00:00:53,730 --> 00:00:59,670
First we want to create those components so one by one area chart js.

14
00:01:01,270 --> 00:01:03,100
Let me set up my component.

15
00:01:04,410 --> 00:01:07,170
I think I'm going to go with any one here.

16
00:01:07,940 --> 00:01:08,870
Let me save it.

17
00:01:08,870 --> 00:01:11,210
The same deal for bar chart.

18
00:01:11,450 --> 00:01:19,220
So since I couldn't pick the chart I want to use, and since I also didn't get the definitive answer

19
00:01:19,220 --> 00:01:27,170
in the Twitter poll, I decided to set up both of them the area chart as well as the bar chart, and

20
00:01:27,170 --> 00:01:33,170
then the user can pick whichever makes the most sense to him or her.

21
00:01:33,290 --> 00:01:37,550
Then we want to create those two containers which we're going to import.

22
00:01:37,580 --> 00:01:41,720
So in this case, I'm going to start with Stats Container.

23
00:01:41,750 --> 00:01:44,150
That's actually the first one we're going to work on.

24
00:01:45,420 --> 00:01:50,310
And then also we want to set up the charts container.

25
00:01:50,490 --> 00:01:52,890
So I'm going to go back to the heading one.

26
00:01:53,810 --> 00:01:58,640
New file and no, sorry, not bar, but charts.

27
00:02:00,000 --> 00:02:03,030
Container JSX again.

28
00:02:03,300 --> 00:02:04,440
Let me set it up.

29
00:02:05,100 --> 00:02:09,220
Let's go with heading one and we're almost ready.

30
00:02:09,240 --> 00:02:11,460
We just want to set up those exports.

31
00:02:11,460 --> 00:02:13,740
So let's copy and paste.

32
00:02:13,770 --> 00:02:15,540
Let me select over here.

33
00:02:15,870 --> 00:02:19,010
And we're looking for charts.

34
00:02:20,960 --> 00:02:22,010
Container.

35
00:02:22,010 --> 00:02:26,560
And then the second one is going to be the stats one I believe.

36
00:02:26,570 --> 00:02:29,510
And let's go with stats container.

37
00:02:29,600 --> 00:02:30,620
Okay, awesome.

38
00:02:30,830 --> 00:02:33,680
And now let's navigate to Stats page.

39
00:02:33,920 --> 00:02:36,230
And let's set up everything.

40
00:02:36,230 --> 00:02:38,780
I think I'm going to continue.

41
00:02:40,340 --> 00:02:42,800
Copy and pasting the imports.

42
00:02:42,800 --> 00:02:46,550
I don't think there's really a need to retype that from the scratch.

43
00:02:46,680 --> 00:02:48,830
I just need to pick the correct.

44
00:02:49,370 --> 00:02:50,270
Page over here.

45
00:02:50,570 --> 00:02:55,430
So let me navigate and I think I'm going to set up the loader first.

46
00:02:56,030 --> 00:02:58,760
So export const loader.

47
00:03:00,850 --> 00:03:02,410
It's going to be a sink.

48
00:03:03,180 --> 00:03:04,560
That's my function.

49
00:03:04,710 --> 00:03:07,530
And essentially, for now, let's just return null.

50
00:03:07,860 --> 00:03:13,320
And before we set up any kind of logic, we want to navigate back to App.jsx.

51
00:03:15,010 --> 00:03:17,170
Let me look for one of the loaders.

52
00:03:17,560 --> 00:03:23,400
This will be a stat loader and it's coming from the stats page.

53
00:03:23,410 --> 00:03:29,740
So forward, slash and stat and then let's find it in our object in the dashboard.

54
00:03:29,740 --> 00:03:32,140
One somewhere here.

55
00:03:32,140 --> 00:03:32,560
Yep.

56
00:03:33,610 --> 00:03:34,900
And where you want to set up.

57
00:03:35,120 --> 00:03:38,710
Loader equals to static loader.

58
00:03:39,220 --> 00:03:41,830
Then let's navigate back to the stats page.

59
00:03:41,830 --> 00:03:45,520
And as far as the logic we want to set up, try and catch.

60
00:03:47,000 --> 00:03:48,340
Now in the try block.

61
00:03:48,350 --> 00:03:53,860
Let's make a request to forward slash jobs, forward slash stats.

62
00:03:53,900 --> 00:03:56,090
Let's set it equal to response.

63
00:03:56,330 --> 00:03:57,500
So await.

64
00:03:57,530 --> 00:04:00,250
Then our custom fetch dot.

65
00:04:00,260 --> 00:04:01,550
Then it's a get request.

66
00:04:01,550 --> 00:04:02,090
Correct.

67
00:04:02,090 --> 00:04:06,080
And then jobs forward slash, and then the stats.

68
00:04:06,200 --> 00:04:08,720
And then after that, let's go with return.

69
00:04:09,540 --> 00:04:12,840
And I actually want to return response data.

70
00:04:12,990 --> 00:04:17,040
So the property which is located in that giant object.

71
00:04:17,070 --> 00:04:20,430
Now, if there is an error, let's just return error.

72
00:04:20,459 --> 00:04:21,240
That's it.

73
00:04:21,360 --> 00:04:27,000
Then I want to access the data and therefore I'm going to go into a stats component.

74
00:04:27,000 --> 00:04:30,740
And remember, basically we're sending back an object with two properties.

75
00:04:30,750 --> 00:04:31,320
Correct.

76
00:04:31,320 --> 00:04:33,760
And we can nicely right away destructure it.

77
00:04:33,780 --> 00:04:36,300
So I'm going to go with default stats.

78
00:04:36,300 --> 00:04:39,630
And also we want to grab the monthly.

79
00:04:40,830 --> 00:04:41,850
Applications.

80
00:04:43,420 --> 00:04:46,390
And we want to set it equal to use loader data.

81
00:04:46,600 --> 00:04:48,160
Let's invoke that.

82
00:04:48,160 --> 00:04:53,890
And then as far as the return, I'm actually going to go with the React fragment.

83
00:04:53,890 --> 00:04:58,240
And then in here, we want to provide both of the components.

84
00:04:58,240 --> 00:05:02,710
So start with stats container and I'll actually pass it down.

85
00:05:02,710 --> 00:05:09,880
So I'll say, Hey listen, there's going to be a default stats prop and we want to set it equal to default

86
00:05:09,880 --> 00:05:10,630
stats.

87
00:05:10,750 --> 00:05:12,820
Let's close our component.

88
00:05:12,820 --> 00:05:20,500
And when it comes to monthly applications, I decided that there's really no point to showcase the applications

89
00:05:20,500 --> 00:05:22,530
if we don't have any.

90
00:05:22,540 --> 00:05:28,450
So what's the point of showing the chart if we have no monthly applications and therefore we'll actually

91
00:05:28,480 --> 00:05:29,650
set up a check?

92
00:05:29,740 --> 00:05:31,810
I'll say, Hey, listen, if.

93
00:05:32,500 --> 00:05:39,130
The length of the array is not bigger than one that don't show the chart's container altogether.

94
00:05:39,250 --> 00:05:42,970
And the way that is going to look like I'm going to go here with the curlies.

95
00:05:43,150 --> 00:05:45,220
We're looking for monthly applications.

96
00:05:45,220 --> 00:05:50,830
I will use my optional chaining since that's my preference and I'll say length.

97
00:05:50,980 --> 00:05:54,370
And if it's bigger than one only, then show it.

98
00:05:54,370 --> 00:06:02,020
So we'll go here with an operator and we want to go with charts container And I also want to pass down

99
00:06:02,020 --> 00:06:02,650
the data.

100
00:06:02,650 --> 00:06:08,770
And in this case the prop is going to be data and it's going to be equal to monthly applications.

101
00:06:08,770 --> 00:06:10,090
Let me close it.

102
00:06:10,090 --> 00:06:11,380
Let's save it.

103
00:06:11,500 --> 00:06:13,300
So now let me navigate to the browser.

104
00:06:13,300 --> 00:06:17,530
If everything is correct, we should see both of these components.

105
00:06:17,530 --> 00:06:23,980
And then in the following videos, of course, we'll work on the stats container as well as the charts

106
00:06:23,980 --> 00:06:24,610
container.

107
00:06:24,610 --> 00:06:30,490
For now, what we're looking for are the two heading ones, and if that's the case, we can move on

108
00:06:30,490 --> 00:06:31,810
to the next step.