All right.
And once we're done working on the server, now it's actually pulling the data and nicely display on
the front end.
So for starters, let's navigate to our client folder and we want to create four components.
So we'll have stats, container and charts container.
So these ones we want to import and export basically, since we'll use them in the stats page.
Of course we want to access that in the pages.
And then we also want to set up area chart and bar chart.
Now these are going to be local components which we will use in the charts container.
So therefore we don't need to set up import and export.
Now also in the stats, you can probably already guess that we'll use the loader.
So of course we want to set that one up in the app JS as well, so let's start working on that.
First we want to create those components so one by one area chart js.
Let me set up my component.
I think I'm going to go with any one here.
Let me save it.
The same deal for bar chart.
So since I couldn't pick the chart I want to use, and since I also didn't get the definitive answer
in the Twitter poll, I decided to set up both of them the area chart as well as the bar chart, and
then the user can pick whichever makes the most sense to him or her.
Then we want to create those two containers which we're going to import.
So in this case, I'm going to start with Stats Container.
That's actually the first one we're going to work on.
And then also we want to set up the charts container.
So I'm going to go back to the heading one.
New file and no, sorry, not bar, but charts.
Container JSX again.
Let me set it up.
Let's go with heading one and we're almost ready.
We just want to set up those exports.
So let's copy and paste.
Let me select over here.
And we're looking for charts.
Container.
And then the second one is going to be the stats one I believe.
And let's go with stats container.
Okay, awesome.
And now let's navigate to Stats page.
And let's set up everything.
I think I'm going to continue.
Copy and pasting the imports.
I don't think there's really a need to retype that from the scratch.
I just need to pick the correct.
Page over here.
So let me navigate and I think I'm going to set up the loader first.
So export const loader.
It's going to be a sink.
That's my function.
And essentially, for now, let's just return null.
And before we set up any kind of logic, we want to navigate back to App.jsx.
Let me look for one of the loaders.
This will be a stat loader and it's coming from the stats page.
So forward, slash and stat and then let's find it in our object in the dashboard.
One somewhere here.
Yep.
And where you want to set up.
Loader equals to static loader.
Then let's navigate back to the stats page.
And as far as the logic we want to set up, try and catch.
Now in the try block.
Let's make a request to forward slash jobs, forward slash stats.
Let's set it equal to response.
So await.
Then our custom fetch dot.
Then it's a get request.
Correct.
And then jobs forward slash, and then the stats.
And then after that, let's go with return.
And I actually want to return response data.
So the property which is located in that giant object.
Now, if there is an error, let's just return error.
That's it.
Then I want to access the data and therefore I'm going to go into a stats component.
And remember, basically we're sending back an object with two properties.
Correct.
And we can nicely right away destructure it.
So I'm going to go with default stats.
And also we want to grab the monthly.
Applications.
And we want to set it equal to use loader data.
Let's invoke that.
And then as far as the return, I'm actually going to go with the React fragment.
And then in here, we want to provide both of the components.
So start with stats container and I'll actually pass it down.
So I'll say, Hey listen, there's going to be a default stats prop and we want to set it equal to default
stats.
Let's close our component.
And when it comes to monthly applications, I decided that there's really no point to showcase the applications
if we don't have any.
So what's the point of showing the chart if we have no monthly applications and therefore we'll actually
set up a check?
I'll say, Hey, listen, if.
The length of the array is not bigger than one that don't show the chart's container altogether.
And the way that is going to look like I'm going to go here with the curlies.
We're looking for monthly applications.
I will use my optional chaining since that's my preference and I'll say length.
And if it's bigger than one only, then show it.
So we'll go here with an operator and we want to go with charts container And I also want to pass down
the data.
And in this case the prop is going to be data and it's going to be equal to monthly applications.
Let me close it.
Let's save it.
So now let me navigate to the browser.
If everything is correct, we should see both of these components.
And then in the following videos, of course, we'll work on the stats container as well as the charts
container.
For now, what we're looking for are the two heading ones, and if that's the case, we can move on
to the next step.