1
00:00:00,140 --> 00:00:00,590
All right.

2
00:00:00,590 --> 00:00:03,350
And up next, let's start working on the stats page.

3
00:00:03,350 --> 00:00:08,690
And essentially in this page, we'll display how many applications are pending, how many interviews

4
00:00:08,690 --> 00:00:12,320
we have, and also how many jobs are declined.

5
00:00:12,380 --> 00:00:20,630
And also below will display two charts, one area chart and one bar chart, where effectively we'll

6
00:00:20,630 --> 00:00:29,120
show how many applications we have sent out, basically how many jobs we have applied to in last six

7
00:00:29,120 --> 00:00:29,810
months.

8
00:00:29,900 --> 00:00:33,080
Now we're going to start in the server.

9
00:00:33,080 --> 00:00:38,390
So essentially navigate to a job controller and create a new controller.

10
00:00:38,390 --> 00:00:41,840
And then of course, we'll also set up the route and test it out.

11
00:00:41,870 --> 00:00:49,250
Now, I do want to import two more things since we will implement them to set up the functionality and

12
00:00:49,250 --> 00:00:50,450
that is Mongoose.

13
00:00:50,540 --> 00:00:52,970
So lets just import mongoose from Mongoose.

14
00:00:52,970 --> 00:00:56,560
And also we want to set up the JS.

15
00:00:56,570 --> 00:01:03,690
So if you remember we used the JS package already in the client, so we're doing this on the server

16
00:01:03,690 --> 00:01:04,410
as well.

17
00:01:04,440 --> 00:01:08,100
Now if you need to install, just complete the steps.

18
00:01:08,100 --> 00:01:09,720
But if you.

19
00:01:10,350 --> 00:01:18,030
Installed all the packages together with me, then you should have already de JS in the package Json.

20
00:01:18,030 --> 00:01:21,120
And if that's the case of course then you just need to import.

21
00:01:21,540 --> 00:01:27,660
So we're looking for De and this is coming from De JS.

22
00:01:27,780 --> 00:01:28,640
Let's save it.

23
00:01:28,650 --> 00:01:29,970
Let's scroll down.

24
00:01:29,970 --> 00:01:34,770
We're looking for the controller and in my case I'm going to call this show stats.

25
00:01:34,770 --> 00:01:38,520
So export const, show stats.

26
00:01:39,030 --> 00:01:45,810
It's going to be a sync of course, so let's set it up req and res and then in the function body.

27
00:01:45,840 --> 00:01:53,940
For now, let's just go with Res.send and let's call this stats then in the job router, we want to

28
00:01:53,940 --> 00:01:55,530
grab the show stats.

29
00:01:56,590 --> 00:02:02,230
And then in between the forward slash and then forward slash ID set up the stats.

30
00:02:02,230 --> 00:02:04,000
And this is very, very important.

31
00:02:04,030 --> 00:02:10,419
We want to place stats before the ID because otherwise if you place it after Express is just going to

32
00:02:10,419 --> 00:02:14,350
think that stats is the ID that we're passing in.

33
00:02:14,710 --> 00:02:23,950
Since express reads top to bottom, so we're going to go here with router dot route, then forward slash

34
00:02:23,950 --> 00:02:27,460
stats and then we want to set up which.

35
00:02:28,260 --> 00:02:29,850
Method we're looking for.

36
00:02:29,850 --> 00:02:31,440
And in my case that is get.

37
00:02:31,530 --> 00:02:34,140
And of course now I want to go with show stats.

38
00:02:34,170 --> 00:02:40,620
Then we want to navigate to a Thunder client collections, recording job routes.

39
00:02:40,620 --> 00:02:42,120
And let's add one more.

40
00:02:42,150 --> 00:02:47,160
Now since this is a get route, I'll simply just duplicate this one over here.

41
00:02:47,550 --> 00:02:55,380
Then let's right away rename, I'll say show stats and then in here the URL jobs.

42
00:02:55,440 --> 00:02:58,920
We just need to add forward slash stats.

43
00:02:58,950 --> 00:03:00,150
It's a get route.

44
00:03:00,150 --> 00:03:02,070
I send it and check it out.

45
00:03:02,100 --> 00:03:03,690
Now I have 401.

46
00:03:03,720 --> 00:03:07,140
So it looks like I also need to log in.

47
00:03:07,290 --> 00:03:09,330
Let me navigate to a login user.

48
00:03:09,360 --> 00:03:10,560
Let me send it over here.

49
00:03:10,590 --> 00:03:11,640
Okay, good.

50
00:03:11,640 --> 00:03:13,860
And then let me try it one more time.

51
00:03:13,860 --> 00:03:15,900
Show stats and we're good to go.

52
00:03:16,140 --> 00:03:23,400
And the last thing that I want to do in this video is to hardcode the example data we're going to send

53
00:03:23,400 --> 00:03:23,790
back.

54
00:03:23,790 --> 00:03:29,860
So yes, in the following videos, of course, we'll set up the functionality where we'll use MongoDB

55
00:03:29,890 --> 00:03:33,520
aggregation pipeline to count all of those values.

56
00:03:33,520 --> 00:03:39,340
But for now I just want to showcase what the front end is looking for and hopefully this is going to

57
00:03:39,520 --> 00:03:42,160
help us when we're setting up the functionality.

58
00:03:42,160 --> 00:03:46,270
So you'll have a clear guideline what we need to send back.

59
00:03:46,660 --> 00:03:54,040
So long story short, I want to come back to the show stats and let me, like I said, just hard code

60
00:03:54,070 --> 00:03:56,050
here, default stats.

61
00:03:56,050 --> 00:03:57,880
That's my object over here.

62
00:03:57,880 --> 00:04:01,720
And effectively we want to send back three properties.

63
00:04:01,840 --> 00:04:09,580
So since the job status has potential values of pending interview and decline, this is what we're going

64
00:04:09,580 --> 00:04:10,390
to count.

65
00:04:10,390 --> 00:04:17,230
So essentially there's going to be functionality where we'll look at our database more specifically

66
00:04:17,230 --> 00:04:22,390
to the jobs that belong to that specific user, and it will count well, how many are pending, how

67
00:04:22,390 --> 00:04:24,850
many have interview and decline?

68
00:04:24,850 --> 00:04:27,040
And again, at the moment I'm just hard coding that.

69
00:04:27,040 --> 00:04:32,700
But eventually this will be dynamic and I'm just going to provide some values over here.

70
00:04:32,700 --> 00:04:39,570
So this will be equal to interview, I'll say 11 and then the client is equal to four.

71
00:04:39,600 --> 00:04:42,480
Again, this part is going to be dynamic.

72
00:04:42,870 --> 00:04:45,060
The main point that I'm trying to make is.

73
00:04:45,800 --> 00:04:50,530
When it comes to the server, this is what we're sending back eventually.

74
00:04:50,540 --> 00:04:55,940
This is what is going to be in our outgoing response.

75
00:04:56,270 --> 00:04:57,230
And you know what?

76
00:04:57,230 --> 00:04:58,280
Let me just.

77
00:04:58,850 --> 00:05:01,400
Provide proper status over here.

78
00:05:01,490 --> 00:05:04,550
We want to go with status codes and then.

79
00:05:04,760 --> 00:05:09,320
Okay, then of course we'll go with Json here, dot Json.

80
00:05:09,320 --> 00:05:16,880
And then as far as the object, I'm just going to pass default stats and also we'll set up monthly applications.

81
00:05:16,880 --> 00:05:23,210
So when it comes to default stats, there are going to be displayed over here in the stack containers.

82
00:05:23,210 --> 00:05:30,170
And then when it comes to the monthly applications, we'll display them over here with the charts library.

83
00:05:30,170 --> 00:05:36,560
And when it comes to monthly applications, like I said, we want to send back last six months.

84
00:05:37,330 --> 00:05:42,520
And essentially how many applications we have sent out.

85
00:05:42,610 --> 00:05:46,750
And therefore, in here I'm going to go with let and monthly.

86
00:05:47,820 --> 00:05:49,080
Applications.

87
00:05:50,130 --> 00:05:51,740
It's going to be equal to an array.

88
00:05:51,750 --> 00:05:54,100
And again, I'm hardcoding right now.

89
00:05:54,120 --> 00:06:00,680
Eventually this will be dynamic and basically the syntax, the front end is looking for.

90
00:06:00,690 --> 00:06:03,440
More specifically, the charts library is following.

91
00:06:03,450 --> 00:06:10,170
We're going to provide date and in this case, I'm just going to go with May 23rd, meaning May of year

92
00:06:10,200 --> 00:06:11,700
2023.

93
00:06:11,700 --> 00:06:15,780
And then how many applications will count is going to be equal to 12.

94
00:06:16,080 --> 00:06:21,030
And I'm not going to write six months, but I will set up three.

95
00:06:21,060 --> 00:06:23,190
So essentially we'll send back.

96
00:06:23,900 --> 00:06:27,890
Account for every month for the last six months.

97
00:06:28,010 --> 00:06:30,230
So in this case, I'm going to go with June.

98
00:06:30,990 --> 00:06:34,680
And then lastly, we also want to set up the July.

99
00:06:34,920 --> 00:06:36,630
Now, keep in mind that.

100
00:06:37,570 --> 00:06:43,690
The order needs to be exact because that's my preference as far as setting up the front end.

101
00:06:43,690 --> 00:06:45,310
So what I mean by that.

102
00:06:45,340 --> 00:06:50,860
Notice how the latest month is actually the last one in the array.

103
00:06:50,980 --> 00:06:56,410
And if we take a look at the front end notice, of course, in this case, this is May since I haven't

104
00:06:56,410 --> 00:06:57,820
created more applications.

105
00:06:57,820 --> 00:07:01,510
But the idea doesn't change where the latest month is going to be.

106
00:07:01,520 --> 00:07:02,470
Last one.

107
00:07:03,070 --> 00:07:05,710
And then we go one before, one before.

108
00:07:05,710 --> 00:07:08,050
And again, we're looking for six months.

109
00:07:08,050 --> 00:07:13,930
And in here I want to add a comma and I'll provide monthly applications.

110
00:07:13,930 --> 00:07:15,400
So this is what we're sending back.

111
00:07:15,400 --> 00:07:17,680
So now let's go back to show stats.

112
00:07:17,680 --> 00:07:18,520
Let's send it.

113
00:07:18,520 --> 00:07:21,070
And again, as far as the front end.

114
00:07:21,100 --> 00:07:27,640
So basically by the time we're done with the functionality on a server, this is what we're going to

115
00:07:27,640 --> 00:07:28,780
be sending back.

116
00:07:28,780 --> 00:07:32,900
And the only difference is that of course it's not going to be hardcoded.

117
00:07:32,920 --> 00:07:36,610
So as far as the structure, yes, it's going to be exactly the same.

118
00:07:36,630 --> 00:07:40,480
Difference, of course, is that it's going to be dynamic.

119
00:07:40,480 --> 00:07:48,400
So we'll calculate based on the jobs that the user has and we'll send back such response.

120
00:07:48,400 --> 00:07:52,030
And with this in place, we can proceed to the next step.