1 00:00:00,830 --> 00:00:04,670 In the last section we updated our season display component to show an icon. 2 00:00:05,030 --> 00:00:09,360 At present our component or at least the code for it is really not looking too good. 3 00:00:09,530 --> 00:00:10,780 Let me tell you why. 4 00:00:10,850 --> 00:00:16,120 First off as we mentioned we had these two basically duplicated ternary expressions. 5 00:00:16,220 --> 00:00:21,410 So I think that we could probably do a better job of deciding what text in icon to display rather than 6 00:00:21,410 --> 00:00:23,370 putting two expressions in a row. 7 00:00:24,360 --> 00:00:28,860 Now the other thing inside of here that's a little bit awkward is that we assigned the name of the icon 8 00:00:28,860 --> 00:00:31,060 to use to a variable called Icon. 9 00:00:31,170 --> 00:00:36,870 The result of which was that down here when we actually display the icon we had to do a string template 10 00:00:37,290 --> 00:00:39,560 where we said icon icon. 11 00:00:39,630 --> 00:00:42,100 I don't know about you but that's just a little confusing. 12 00:00:42,300 --> 00:00:46,560 I think it would have been a lot better if we had a variable name like icon name or something like that. 13 00:00:46,850 --> 00:00:51,570 And rather than just changing that name right now I want to kind of refactor this entire thing so that 14 00:00:51,570 --> 00:00:56,400 we can get away from these duplicated ternary expressions and then we will worry about also updating 15 00:00:56,550 --> 00:00:59,080 the icon variable name as well. 16 00:00:59,100 --> 00:01:03,210 Now the refactor we're going to do here is going to show you a pattern that we're going to use in many 17 00:01:03,210 --> 00:01:07,260 other locations throughout this course and it's a pattern that I hope that you will use on your own 18 00:01:07,260 --> 00:01:09,690 personal applications as well. 19 00:01:09,690 --> 00:01:14,870 The idea is that we're going to create a sort of configuration object at the top of the file. 20 00:01:14,940 --> 00:01:18,960 Let me show you what I mean at the top of the file above get season. 21 00:01:18,960 --> 00:01:22,450 I'm going to create a new object called season config. 22 00:01:23,970 --> 00:01:28,140 This is going to be an object with two key value pairs inside of it. 23 00:01:28,140 --> 00:01:29,490 The first will be summer. 24 00:01:29,670 --> 00:01:34,080 That's going to be an object and that will have winter and that will be an object as well. 25 00:01:34,080 --> 00:01:39,800 Notice how the keys inside this object match up perfectly with the strings that we are returning from 26 00:01:39,830 --> 00:01:41,610 our Get season function. 27 00:01:41,610 --> 00:01:42,890 I didn't name the something different. 28 00:01:42,900 --> 00:01:44,860 I didn't do something like capsule as summer. 29 00:01:44,910 --> 00:01:47,310 I named it specifically summer like so. 30 00:01:47,760 --> 00:01:54,030 So now these two objects right here are going to tell us exactly what text and what icon name we should 31 00:01:54,030 --> 00:01:54,340 use. 32 00:01:54,360 --> 00:02:03,820 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 33 00:02:03,880 --> 00:02:07,360 an icon name of sun. 34 00:02:07,440 --> 00:02:09,510 I notice I forgot the apostrophe in there. 35 00:02:09,510 --> 00:02:15,150 If you want to put the apostrophe in you can either escape it or you can replace the single quotes over 36 00:02:15,150 --> 00:02:17,000 here with double quotes like so. 37 00:02:18,560 --> 00:02:20,700 So then we can do the same thing down for winter as well. 38 00:02:20,710 --> 00:02:31,110 I'll say text is Brr it is cold and I'll give it an icon name of snowflake. 39 00:02:31,180 --> 00:02:36,970 It's now that we've got the season config object put together we can remove both the Turner expressions 40 00:02:36,970 --> 00:02:38,270 that we have down here. 41 00:02:39,780 --> 00:02:44,670 To get at either of those seasoned config objects so essentially this thing right here that tells us 42 00:02:44,670 --> 00:02:48,310 the text and icon name for summer or the text icon name for winter. 43 00:02:48,360 --> 00:02:54,510 We can then reference back down inside of our component seasoned config season with square brackets 44 00:02:54,510 --> 00:03:01,350 like so that's going to return our object with the text and the icon name inside of it. 45 00:03:01,650 --> 00:03:07,920 So then we can use a little bit of yes 20:15 syntax to pull out that text in icon name and then very 46 00:03:07,920 --> 00:03:11,180 easily reference those properties inside of our turn statement. 47 00:03:11,430 --> 00:03:16,560 So no longer are we going to have those really long kind of duplicated Turnier expressions all the different 48 00:03:16,590 --> 00:03:19,410 options are very plainly spelled out right here. 49 00:03:19,410 --> 00:03:24,300 And if someone ever needs to come back to this component and update the text for summer or the TX for 50 00:03:24,300 --> 00:03:29,370 winter or update the icon name it's going to be very easy for them to do so. 51 00:03:29,400 --> 00:03:41,460 All right so down here we're going to restructure out the text an icon name from seizing config at season 52 00:03:41,460 --> 00:03:49,750 like so and now down inside my GSX I can refer to icon name and icon name. 53 00:03:49,890 --> 00:03:54,590 All right so without a doubt that is a big improvement to the legibility of this component right here. 54 00:03:54,590 --> 00:03:56,490 This looks pretty darn reasonable. 55 00:03:56,600 --> 00:04:01,330 Now if we flip back over we see that our components still works as expected. 56 00:04:01,470 --> 00:04:04,010 All right let's take one more quick break. 57 00:04:04,010 --> 00:04:07,700 When we come back the next section we're going to make sure the icons show up appropriately. 58 00:04:07,700 --> 00:04:10,800 I will also add in a little bit more CSSA this thing as well. 59 00:04:10,910 --> 00:04:13,140 So a quick pause and I'll see you in just a minute.