Swap out Some Simple Components

[00:00 - 00:09] AntDesign is part of hardware handler now. It's time to start taking advantage of all it affords us and simplifying the code that our app is responsible for in the process.

[00:10 - 00:25] In this lesson, we'll replace some of our more elemental components with ant-d versions and see how it can make our code simpler. One of the most basic components we can start with swapping out is the few instances where we've got button elements in our app.

[00:26 - 00:42] The great thing about the AntDesign system is that it offers standardized versions of even the most basic elements like buttons and checkboxes all the way up to very complex components like tables, trees and forms. To get us going, we'll start with a small, relatively simple element.

[00:43 - 00:57] If you do a search in your code for buttons, you'll find three distinct instances of it in the product.js file, the checkout item.js file, and the product form file. The product.js file seems as good a place as any to begin replacing our components with ant-d versions.

[00:58 - 01:15] So let's open it up in our IDE after we have looked at the button to refresh ourselves for ant. So in order to use the AntDesign button, we will just import button and we will give it a type to determine if it is a primary button, a default button, etc.

[01:16 - 01:26] So let's head on over to our IDE and get started with product.js. So over here, we are going to open up product.js.

[01:27 - 01:37] And if you scroll down on line 24, we have our button. It is a very simple button with that item to check out, so it should be relatively simple to switch out.

[01:38 - 01:46] So we're going to begin by importing a button at the top of our file from ant-d . And here's a best practice.

[01:47 - 02:00] Keep library imports above your custom component imports. One bit of advice that I follow is keeping imports from outside libraries like AntDesign or React more towards the top of the imports list in my files.

[02:01 - 02:10] It's just another way to keep files organized in a manner that other developers can easily recognize and emulate. So if you see me doing this in our apps files, you know why.

[02:11 - 02:20] So with the Ant button, we will scroll down to where the original button is declared and we will swap it out just like so. The lowercase button becomes an uppercase.

[02:21 - 02:35] We give it a type of primary. And we can remove this class name now of primary and we'll give it a size of large so that we can also specify different types of button sizes.

[02:36 - 02:51] We will give it a size of large and we will leave the onclick function completely alone. You'll notice that in order to get our new button to take on the styling provided by ant, we replace the class name primary property with a type of primary instead.

[02:52 - 03:00] We also make the button slightly larger than the default sizing with this size equals large property. And I found this all by reviewing the ant D documentation on the site.

[03:01 - 03:08] It really is useful for this sort of thing. So now if you notice we completely removed a class from this file, the primary class.

[03:09 - 03:13] So let's check and see if we can clean up some CSS because of it. Here's the spoiler.

[03:14 - 03:20] We can. So inside of your product dot CSS file.

[03:21 - 03:28] There is some CSS that we can now delete completely. All this code from line 37 onward, get rid of it.

[03:29 - 03:34] Delete all of it. And at this point, let's check that our products continue to look good.

[03:35 - 03:44] So go ahead and restart your app if it's not already running and navigate over to the My Products page. And here's what we're seeing on the screen.

[03:45 - 03:51] I think that these buttons look pretty close to the originals and look back at the code that we have just deleted in the process. That wasn't so bad.

[03:52 - 03:58] Now, was it? We can do pretty much the same routine to replace the button in our checkout item dot JS file as well.

[03:59 - 04:07] Let's go do that one next. Back in your IDE, go ahead and open up checkout item dot JS.

[04:08 - 04:21] And once again, import the button at the top of this component. And then scroll down to find our original button, which is right here on line 28.

[04:22 - 04:30] And replace that with our ante button. We will take out the type of submit and change that to primary.

[04:31 - 04:39] And also give this one a size equal to large. The on click function, we will leave the same.

[04:40 - 04:55] And from here, we can also clean up our CSS a bit too. So if you open up checkout item dot CSS, we can go ahead and get rid of the checkout item primary CSS that we have on lines 36.

[04:56 - 05:03] All right. And as before, let's give it a quick visual check in the browser to make sure that the checkout items are looking good.

[05:04 - 05:11] We'll add a couple to our checkout. And then we will head over and those look pretty good to me.

[05:12 - 05:13] All right. Last one.

[05:14 - 05:17] Back to the BS code. So product form.

[05:18 - 05:29] Let's open product form up and take a quick look at this. Product form is a little bit different in that this is actually a form component instead of just a button that is in the application somewhere.

[05:30 - 05:41] And I was a little hesitant to tackle that because of this. But when I checked the form documentation in and I saw that they themselves are using a simple button component within the form.

[05:42 - 05:50] So it's completely separate and that makes it really easy. With and we can do upgrades as incremental as this, which is really sweet.

[05:51 - 06:12] So if you open up the form, go ahead and import button at the top of this file, just like all the others from Auntie and then scroll all the way down to line 146 where our button, our submission button is. And this is what we are going to swap out for our Aunt button.

[06:13 - 06:25] We will leave the data test ID of submit. We will switch our type from button to primary and we will remove this class name and replace it with a size equal to large.

[06:26 - 06:37] And that's all we need to do to make that button work. And of course now, since we have taken away from some CSS, we can do the same for our product form.css and clean that up a little bit as well.

[06:38 - 06:49] So down here on line 46, we are going to be able to delete everything. Product form primary and product form primary disabled.

[06:50 - 07:01] We don't need any of that any longer. So one thing that I wasn't sure would work the same for this button was the form validation that we are using to disable and enable the submission button.

[07:02 - 07:14] But lo and behold, Aunt uses the same disabled property on its components and our validation function of is valid continues to work just the same. What a piece of good fortune.

[07:15 - 07:27] Now I'd recommend a quick smoke test that all of these buttons will still work as expected and then let's move on and replace another of our custom components with its aunt equivalent. So let's do a quick browser test of product form.

[07:28 - 07:34] Make sure all of that looks good. So if we go to add new products, we will select a department.

[07:35 - 07:47] We will put in a product name, a brand and a price. And once again, the submit button becomes enabled.

[07:48 - 07:53] If I take that away, it becomes disabled. And if I click submit, a new product is added.

[07:54 - 08:00] And if we go over here to check out our options, here is our test test product. Very good.

[08:01 - 08:04] Okay. So let's move on to another component.

[08:05 - 08:13] So in our app, we have custom designed cards that we use to display the list of products. But aunt has a handy card component that we can sub in there too.

[08:14 - 08:34] We won't be able to remove quite as much of the CSS here because the aunt dec ards default styling is not that close to our original, but we'll do what we can to simplify it. So if we head back over to the product.js file, which we still have open, we will make a second aunt D import along with our button import at the top.

[08:35 - 08:41] This one is just going to be called card. Now let's focus on the very top of our current JSX.

[08:42 - 08:56] These divs with the class of product and product name are both going to disappear when we replace it with card. If you check the aunt card documentation, there's actually a property it accepts called title, which will take the place of our H3.

[08:57 - 09:05] Let's open up this card and look a little bit. So we have card title and then we have card contents below it.

[09:06 - 09:18] So the property that it accepts called title will take the place of our H3 where we've been displaying the product's names. So if we look back into RVS code, here is what we will replace our first couple of divs with.

[09:19 - 09:24] Our new aunt card will still need the key. React needs this to keep track of elements and lists.

[09:25 - 09:40] And we'll supply the product name as the title, keep the borderless property with border equals false, and we'll keep the product class for our extra styling above and beyond aunt card styling. So this is going to become hard.

[09:41 - 09:55] This H3 is going to disappear completely and it will actually be replaced as title is equal to it. So title is equal to product.name now.

[09:56 - 10:12] We will give it a ordered equals false to keep that border from coming back. The key will be equal to product.id and then the class name will equal product.

[10:13 - 10:21] And move this closing card element down to the bottom right before our last div . Okay, good start.

[10:22 - 10:39] With our JavaScript file updated, we can clean up our corresponding CSS2. So inside of our product.css file, we can delete the border radius of five pixels from under the product class up at the top here.

[10:40 - 10:46] So delete that, the aunt card handles it now. And we can delete all the CSS for the product name class.

[10:47 - 10:54] It no longer exists at all. And we can remove the top two lines under the dl element, border top and padding top.

[10:55 - 11:01] Those are no longer needed either. There's one more thing that we need to do before we can go check our cards in the browser.

[11:02 - 11:13] And that is something that I forgot when I was initially talking through this lesson. So head back over to the product.js file and go ahead and delete this div that is wrapping everything else.

[11:14 - 11:21] This is no longer necessary because of the card component. So save that change and then head over into your browser.

[11:22 - 11:32] So it looks like our cards are pretty right now except they have a white line separating the title from the body. So let's override that to be the dark line that matches our font color once more.

[11:33 - 11:40] This particular element in the browser has the class of aunt card head. So we'll just use that to reset the color.

[11:41 - 11:45] We look down here at one of our aunt card products. Op it open.

[11:46 - 11:50] There's aunt card head. So that is what we're going to change the color of.

[11:51 - 12:19] So back over in your VS code IDE and in your product.css online eight we are going to add a new class of aunt card head and give it a border bottom of two pixels solid and then the CSS variable of dash dash navy which is our font color that we have defined . And there's one more small change that we can make.

[12:20 - 12:35] I checked the card options in the aunt default source code just to see what was available to us and one thing that caught my eye was the property of at card background. We can set this variable in our crayco config.js file instead of in our product styling.

[12:36 - 13:09] This way any new cards that come along will automatically inherit the same golden color from the outset. So delete the background color line from our product.css online to and open up our crayco config.js and down at the bottom under body background go ahead and add a new one that we're going to call at card background and give it our golden color which is hash c9 b16 e.

[13:10 - 13:24] Okay the last simpler component that we're going to swap out in this lesson has to do with the react tostify alerts. We're going to replace them with aunt denotifications and eliminate an extra library that will no longer be relevant.

[13:25 - 13:36] So if we look at the aunt denotifications for a minute in the browser here is what they look like. We have a success info warning and error.

[13:37 - 13:55] They're a little bit less colorful than the react tostify but because they have these different notifications with icons they should work quite well for what we need . So if we head back over into VS code there are three files that currently employ the toasts in addition to the main import in our app.js.

[13:56 - 14:15] So if we look over here and do a search for tostify and if I narrow it down to just be .js files we see that we have app.js checkout product form product list. So we'll begin with the product form component since we've already got it open.

[14:16 - 14:38] So where we brought in our button we are also going to import notification at the top of our file. Notice that this is lowercase not uppercase and then scroll down to our two toast instances which are on lines 58 and 60 and we will look again at the aunt documentation to understand what it takes in.

[14:39 - 15:16] So back over in the browser if we look here at our notification with icon we see that it has a notification type and a message and description. So what this is going to translate into over in our code is instead of toast success we will have a notification dot success so we still get to use that same success or failure and the description will become the add new product success message and we will also give it a close icon which will just for now be an empty div and I'll explain that shortly.

[15:17 - 15:39] So you may be wondering about the second property inside of this notification object the close icon. For all its customizations for some reason aunt doesn't allow hiding the close icon property in its notifications but I found a helpful stack overflow post that I have linked to in the lesson of someone else who is looking to hide it as well and the simple elegant solution of providing an empty div worked like a charm.

[15:40 - 15:45] So that's what we used. So here's what our new notification message looks like.

[15:46 - 16:10] It's a little simpler and a little less colorful but I'm pleased with the results still. So if I take out that success so if we look back over in our browser on the add new products page and we add a new product and we hit the submit button voila new product successfully added not bad.

[16:11 - 16:42] So now that we've got one of these working it's a pretty simple matter to do the same for our failure message. So to get out of our toast error down here we are going to do a notification dot error and that will take in a description which we will copy right out of our toast error above it so copy that and paste that into the description and then finally also add the close icon again with the empty div and delete your toast error and go ahead and save that.

[16:43 - 16:53] So to finish up this file let's go ahead and delete the now unused react tost ify import at the top of this file and we will continue on our merry way. Very good.

[16:54 - 17:21] Okay so our next two files where we're swapping toasts are very similar to what we just did so let's move through them a little bit more quickly. If we open up the checkout dot js file we will import the notification at the top of our file just as we have before notification from ant D and we are going to replace our two toast elements and delete the react tostify import.

[17:22 - 18:10] So our toast elements here are with the remove item from checkout so we are going to replace this with a notification dot success and we will give it a description which will be product removed from checkout success and the close icon the empty div and then we will delete that toast and then the same thing for our toast error notification dot error description of remaining checkout items and close icon of empty div. Delete that and then delete the unnecessary import.

[18:11 - 18:14] Very good. And then we will do the same thing for product list.

[18:15 - 19:08] So one more time import notification from ant D scroll down to lines 72 through 74 and this is where our new notification dot success will go with a description of product added to checkout success and a close icon of an empty div and we can delete that line now and a notification of error with a description of product added and a close icon of an empty div. All right delete that and then at the top of this file remove react tostify.

[19:09 - 19:20] Good we are making very good progress. Okay so removing that last toast replacement now gives us a unique opportunity to clean our code up a little bit more.

[19:21 - 19:31] Since there are no longer any toasts being used anywhere in our app we can completely remove this react tostify package from our app. That's a pretty nice bonus of bringing in the ant library if you ask me.

[19:32 - 19:40] We get to simplify the rest of the packages that our app has to rely upon. So to completely get rid of this package we will need to clear it out of the app.js file.

[19:41 - 19:57] So now two of our toast related imports can be deleted there. So open up app.js and remove the toast container on line three and remove the import of react tostify's CSS on line ten.

[19:58 - 20:10] Next container that we can remove there inside of our JSX and then in the apps. css we have a little bit of toast tostify here as well that we can also delete now.

[20:11 - 20:20] So finally with all of our toast related content removed we can delete our react tostify import from our package JSON. So go ahead and open that up.

[20:21 - 20:35] Find react tostify delete it save and just to be completely sure that we got everything I like to rerun my yarn install and restart the app to make sure that everything loads and works the same. So stop your server if it's running.

[20:36 - 20:46] Go ahead and run yarn and then restart your application. So if we check out our app now let's try and add a couple of products.

[20:47 - 20:50] Looks like they are adding. Let's try to add one that's already been added.

[20:51 - 20:54] Yep. I would say that our new toasts are working.

[20:55 - 21:04] So switching out our components for ants component with a little help from the documentation wasn't so hard. Just knowing what to rename certain properties was pretty straightforward.

[21:05 - 21:10] In our next lesson we'll take on replacing some of our more complex components. Here's one thing to note.

[21:11 - 21:37] There will undoubtedly be broken end to end tests because the selectors that we used to check on certain elements in the browser are no longer present like the classes for react toasts for instance. However, if you were to run the integration test that we wrote previously, the ones we wrote with React testing libraries eye towards testing as a user would by interacting with the DOM, you'll be pleasantly surprised to see that all of those tests still pass.

[21:38 - 21:45] I stopped the server and run yarn test right now. Let's see what happens.

[21:46 - 22:02] All of our tests still pass and this is because we successfully refactored this app to use ant components but we still maintained all the elements and functionality of our original code. And this is an excellent example of how RTL's testing strategy is superior.

[22:03 - 22:10] We changed out components, removed classes, even deleted an entire library and yet not one integration test broke. That's amazing.

[22:11 - 22:17] If you'd like to take the time to fix up the E2Es now, go for it but I'll leave that up to you. We're going to our next lesson.