In the last section we updated our season display component to show an icon.
At present our component or at least the code for it is really not looking too good.
Let me tell you why.
First off as we mentioned we had these two basically duplicated ternary expressions.
So I think that we could probably do a better job of deciding what text in icon to display rather than
putting two expressions in a row.
Now the other thing inside of here that's a little bit awkward is that we assigned the name of the icon
to use to a variable called Icon.
The result of which was that down here when we actually display the icon we had to do a string template
where we said icon icon.
I don't know about you but that's just a little confusing.
I think it would have been a lot better if we had a variable name like icon name or something like that.
And rather than just changing that name right now I want to kind of refactor this entire thing so that
we can get away from these duplicated ternary expressions and then we will worry about also updating
the icon variable name as well.
Now the refactor we're going to do here is going to show you a pattern that we're going to use in many
other locations throughout this course and it's a pattern that I hope that you will use on your own
personal applications as well.
The idea is that we're going to create a sort of configuration object at the top of the file.
Let me show you what I mean at the top of the file above get season.
I'm going to create a new object called season config.
This is going to be an object with two key value pairs inside of it.
The first will be summer.
That's going to be an object and that will have winter and that will be an object as well.
Notice how the keys inside this object match up perfectly with the strings that we are returning from
our Get season function.
I didn't name the something different.
I didn't do something like capsule as summer.
I named it specifically summer like so.
So now these two objects right here are going to tell us exactly what text and what icon name we should
use.
If it is summer or if it is winter so if it is summer we'll say let's hit the beach and I'll designate
an icon name of sun.
I notice I forgot the apostrophe in there.
If you want to put the apostrophe in you can either escape it or you can replace the single quotes over
here with double quotes like so.
So then we can do the same thing down for winter as well.
I'll say text is Brr it is cold and I'll give it an icon name of snowflake.
It's now that we've got the season config object put together we can remove both the Turner expressions
that we have down here.
To get at either of those seasoned config objects so essentially this thing right here that tells us
the text and icon name for summer or the text icon name for winter.
We can then reference back down inside of our component seasoned config season with square brackets
like so that's going to return our object with the text and the icon name inside of it.
So then we can use a little bit of yes 20:15 syntax to pull out that text in icon name and then very
easily reference those properties inside of our turn statement.
So no longer are we going to have those really long kind of duplicated Turnier expressions all the different
options are very plainly spelled out right here.
And if someone ever needs to come back to this component and update the text for summer or the TX for
winter or update the icon name it's going to be very easy for them to do so.
All right so down here we're going to restructure out the text an icon name from seizing config at season
like so and now down inside my GSX I can refer to icon name and icon name.
All right so without a doubt that is a big improvement to the legibility of this component right here.
This looks pretty darn reasonable.
Now if we flip back over we see that our components still works as expected.
All right let's take one more quick break.
When we come back the next section we're going to make sure the icons show up appropriately.
I will also add in a little bit more CSSA this thing as well.
So a quick pause and I'll see you in just a minute.