And once we're done setting up everything on the back end, now, let's switch over to the front.
And the good news is that we can right away start working in the short container component.
Why?
Well, let's take a look at our context.
So if you navigate to the source context and app context, and if you remember when we were getting
the stats actually right away, got the monthly applications.
Now, originally it was an empty array, but I can guarantee you that the data is there.
So I'm not going to show you the reducer for this fiscal year.
We're passing Mr. Producer.
And then we set up the state.
And if you remember, we invoked it in the stats page.
So let me open up that one as well.
And you'll notice that once the component mounts, we go to show stats.
And just so it's definitely clear, let me navigate to my browser.
And then if I take a look over here in the state, we should see some monthly applications as well.
So we have that user.
Yep.
Various artists.
Those are our six hours.
And one last thing that I want to mention remember that in the stats page, we were checking for the
length.
And if we had some jobs in the monthly operation, then we display the charged container.
That's why we can see the charged container text in the browser and once we're clear on that now, it's
actually set up the logic or first start by creating two components bar chart area chart.
Because if you take a look at the complete application, you'll notice that we'll be toggling between
the two.
And essentially, it's because I couldn't come up with the actual look.
Sergeant decided that, you know, I'll set up both now where you were.
User can actually decide which chart they prefer best.
So I'm going to go here with bar chart.
Now these ones, we're not exporting as far as the index, so we're simply set it up as a component.
Let's go with heading two and I'll say bar chart.
And we want to do the same thing with area chart, area chart.
That's our component.
And then it's going underscore another having to.
Area and sharp.
Let's save this and let's go over the set up in the charts container.
So since it be toggling between those two charts, I'll grab you straight from React.
And we want to get both of these components.
So our Richard and Bar chart and yes, will set up way more logical over there.
We also want to get use context because instead of.
Placing this data in each of the components, I decided that I'm just going to pass it as a problem,
because why not?
In order to get that data, we do need to use use context.
We also have a little bit of styling.
That's what I will grab the wrapper from the wrappers.
More specifically from the charts container.
And then we also want to set up the federal state.
Now, let's not worry about the target state right now.
Simply what I want to do is just render both the bar chart and area chart in the wrapper and also get
the monthly applications, and I'll give it an alias of data.
So in the following videos one will set up, the chart will know that there is going to be a prop in
both of them by the name of data, and that's data that we're getting back from the state.
So let's start here by grabbing those imports so we can save our time on that.
So I'm looking for my charts container in this case.
And that's the search container.
Sorry, I'm bad.
Actually wanted a chart container for some reason I of find it.
Let me grab the proper imports, and once I have them in place, let's actually look for our monthly
applications that are coming from the state.
Now I'll give an analysis of data because it's going to be faster.
We use used context here.
We want to use the wrapper.
And like I said, for time being, let's just pass in both towers.
A bar chart.
And let's browsed the data server component, and I'm not going to console.log it.
I mean, this should be pretty straightforward.
So let's copy and paste and we want to go here with Area Chart as well.
Save that one.
And if everything is correct, we should see both components displayed, which is just awesome.
Now let's add that toggle functionality.
Well, first, we want to set up, so I'm going to show the value my case.
I'm going to call this bar chart because that is going to be my default one.
So set bar chart.
That's the function.
And by default, set it equal to true say here.
And before we set up the button that will toggle this value.
Why don't we set up the expression?
Or I'll say f bar chart?
If true, then I want to display the bar chart.
And if not, then it's going to be an area chart.
So first one, it's going to be the bar chart for when we went to the.
And after that, we want to set up the area chart.
So if it's true and all by bar chart not, then area chart, I don't think I need to go to the browser
to showcase what we'll have as a result.
Then let's go above it.
First, let's set up a heading for, let's say, monthly.
Applications and then I'll just go with a button that actually will toggle this type will be button
and also set up the on click.
Now we do want to pass in the arrow function and then we want to invoke set bar and that chart and let's
pass in the opposite value.
So if this is true, then passing the false, if it's false, then it's going to be true.
That's the button.
And we also want to set up text over here, where again, the same deal.
I'm going to check four bar chart value, state value.
And if it's true, then I'll actually display area chart.
Why?
Well, think about it.
If I have already bar chart displayed, I mean, this should be opposite.
All right.
So now I'm saying, if you click here, then it's going to be error chart or for that, it's clear.
So therefore we'll go opposite area and chart.
And if it is false lateral display bar chart, let's save it.
And now our functionality should be in place where we have the button.
And as I'm clicking on a button, I'm actually displaying different component.
Now what I think I'll add here a space now you don't have to, but that is actually my preference area
chart and bar chart.
And with this in place now, we can install the library we'll use for our chart.