All right, and once we have the functionality in place to fetch stats from the server now and set up
the structure for the Stats Bridge, well, starting components will create STAT's container.
That's where we'll have those cards.
Then we'll also have charts container.
And the reason why we have charts container because eventually there will be two charts in our application.
We'll also have the area chart.
A bar chart.
The area chart.
And we also want to set up this stats item, which will be that card for declined interview and pending.
And for all of them, let's just set a simple return.
There's going to be a little bit more work eventually with charts.
That's what we're going to be setting up next.
Once we're done showcasing all the stats and remember import and export.
Now we're exporting only these two from the components.
This one stays local.
And then once we have that one place, I'll talk about the general structure for this.
That's just page.
So let's start here in the components, I guess.
Let's create that stats container.
That's the first one let's create that we need to go and underscore stats container, and I'm going
to go with their first, I'm being I'm just going to say they've said they're having one and then start
container.
Then let's create that single stat item.
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
same.
It is a stats item so I can remove this one or delete or rename whatever.
I guess in this case, I'm just going to delete and let's create a new one stats item.
Let's call this that item now.
I'm not exporting that from this folder, but I do want to set it up right away in the container just
so I can see that everything works.
Let's go here with a single.
Single start item.
And then let's import it right away here.
All right, I'm sure you will grab the imports from the trade me, but for the time being, I think
it's going to be fine enough where we will go with the component name.
So right after this, that's container.
Let's go with our start item and let's see whether our or our import works.
So let me set it up, maybe here as a component.
And I'm going to call this stat and that item, and yep, looks like everything worked, let's save
this one.
And then we also want to go with charts container.
Charts container, Drew, yes, let's set up the phone and.
Violence out of hand one and then let's kind of banner import export.
What I'm looking for in the next address, well, we want to go here with stats and container, and
we also want to do the same thing.
We have a chart container, so charts and we're looking for this component.
Now let's grab both of these values that's out here.
Copy and paste.
OK?
Awesome.
And then let's navigate right now to the stats page.
And let's see, what are we looking for out here as far as their in their?
So in here, we'll need to use effect from React, we'll need use up context because I want to get the
show stats function.
I also when I get is loading since won't display the loading spinner and also monthly applications,
but I'll talk about them once we get here in the code, I'll explain why we have here this condition.
And once we're done with imports, I want to invoke my use of fact.
So when Earth page renders, I want to fetch the stats and update the state and why we're loading on
display the loading spinner and we'll place it in the center.
And once we get back to stats, that's when we want to display the stats container as well as the chart
container.
And in order to save a little bit of time, I'll grab all of these ones, the imports, and then we
want to navigate through the stats page.
So refined those pages here.
So have stats over here.
Let's set up those imports.
And then we want to go with our use of context, since I want to grab those things, so show.
Starts first then, and we want to get these loading and then we want to go with monthly applications.
All of that is coming from the USU app and that context, let's invoke it and let's go right away.
What user effect so use effect when this component loads?
This is what we want to do.
The array is going to be empty.
Essentially, I only want to do that once the initial render happens and then we want to go, which
shows that.
Now I'll worry about the return in a second for knowledge.
Just check the loading.
So if we're loading, then we want to go with our loading components or return and then loading component.
And we want to send it in the center, so the center proper, remember that's what we added to our loading
component.
And now let me navigate to my complete application and see loading and not export it.
And I guess, you know what?
When I was setting everything up as far as the loading, I forgot to import it over here.
So let's go back to our components and let's actually fix that.
So here we want to add the loading one.
So let's selected.
Loaning component, and then let's add it to our exports and now everything should work.
Yep.
For a split second, we saw the loading one.
And now if I'll take a look at the state, you see all of my status values, so complex provider or
here alert text.
Okay, that's not what I'm looking for.
What I'm looking for here somewhere there is a start.
Yep.
So I've declined interview and pending.
So that works.
Now I just need to worry about the actual containers.
So let's go back to the stats page.
And here, as far as the return, there's really no wrapper.
We'll just go with a fragment and then I want to set up both of those containers.
So let's go here with stats container.
And the second one will be the charts container.
Now here's the thing about the charts.
I only want to display them if I have any jobs you see with these cards at least eking out zeros, correct?
I can say zero spending zero interior on zero decline.
But when it comes to charts, it's my opinion that it looks somewhat silly if there is no actual data
show and where figure that is by checking the monthly applications.
And if it's empty array, then we don't display the charts container altogether.
So first, let's just showcase that everything works as far as the imports and all that.
So let me display the charts container for time being.
So now I can see stats, containers, singles, that item and then charts container.
But we'll right away set up the expression where I'll check the length for my array.
I'll say if monthly application's length is less than zero, then we won't display the charts container
altogether.
I will do that using the and operator, where I'll say if the length is bigger than zero only, then
we want to display the charts container.
So let me move this sucker up and now we shouldn't see that having one.
And with this in place now, I can start sending up the stats container component.