Solid JS Tutorial #17 - Final Touchs & SolidStart Preview

Key Takeaways

All right then gang, so we're reaching the end of the project now, but there's one more thing I want to do and that's to add a little message right here when we click on the add to cart button to say, "Yep, we've just added this product to the cart." And also, maybe I want to disable this button for a second or two when we're adding to the cart so we can't spam click this over and over. So, what we'll do is go to the product component and right here we're adding a product, right? So, it's at this point that I want to do those two things. I want to show the message and maybe the button. Now, to do this we're going to use a signal. So, let me create that signal right about here. So, we'll say const and we'll call this adding and also set adding and we set that equal to use signal. Like so and the initial value for that is going to be false. So, the idea being that this is going to be changed to true when we add a product just for about 2 seconds, okay? So, I need to make sure we're importing use signal or not use signal, sorry. It should be create signal, shouldn't it? Create signal, like so. And that comes from solid js create signal, okay? So, now inside add product, what I could do is I could set adding to be true because we're adding a product and then I will use a set timeout to fire a function and that function is going to fire after 2 seconds, so 2,000 milliseconds. And all we're going to do inside this function is set adding to be false again. So, basically every time we add a product, it becomes true for 2 seconds and then it becomes false again. Okay? So, now we can update the UI down here dependent on that value. So, there's two things I wanted to do like I said. So, first of all, I want to make the button disabled while adding is true for those 2 seconds. So, disabled is equal, oops. Make sure you spell this correctly. My spelling is atrocious at the minute. Disabled equals and it's adding like so. And then after the button, I want to conditionally output some kind of message. So, I only want to show this message when adding is true. Now, to do that we can use the show component. So, let me paste this in and we say show when adding. So, when it's true, after we've just clicked on the button for 2 seconds, we show this div right here with these styles. So, we give it margin, padding, border amber, border two, rounded, inline block and we show the title of the product and we say it was added to the cart. So, this is going to show for 2 seconds next to the button when we click the button, but then when adding becomes false again after 2 seconds, it's not going to show anymore. All right? So, let's cross our fingers, hope this works. I'm going to add to cart and we can see this message right here for 2 seconds. And also, if I click on this, it becomes disabled for 2 seconds as well. You can tell because of the icon. You could style the disabled state a little better if you wanted to, but you can tell because the icon's an arrow while it's disabled and not the pointer. All right? All right then gang, so that's the project pretty much complete and that's also the tutorial series complete as well. There are other features you can add to the site if you want to practice using Solid a little bit more. For example, you could add a delete button next to each item to delete those from the cart or you could add a quantity input on the product details page to let users add more than one of a product at a time. So, definitely try adding those features yourself if you want a bit more practice. But also, I want to show you something really quickly called SolidStart as well. And this is something I really want to make a tutorial about in the future. It's still in alpha at the moment, but when we do get a stable release, I definitely will make a course about it. So, SolidStart is essentially to Solid what Next is to React or what Nuxt is to Vue. It's a meta framework built on top of Solid that implements server-side rendering out of the box, static site generation if that's what you want, component-based routing, API routes, etc. So, it looks really exciting and it's definitely something I'm looking forward to working with a little bit more. And like I said, when we get a stable release, I will hopefully be making a new course all about that as well. So, keep your eyes peeled. So then my friends, I really, really hope you enjoyed this series and you learned something along the way. If you did, please, please, please, don't forget to share, subscribe and like. That really means a lot. And if you want to access all of my YouTube courses without adverts, also get access to premium courses and early access courses as well, you can do at netninja.dev. You can sign up for Net Ninja Pro, which is just $9 a month and also half price for the first month with this promo code right here. And for that, like I said, you get access to every course without adverts, without YouTube adverts. You also get access to exclusive courses not found anywhere else. You get access to my premium courses on Udemy and also early access to all of my YouTube courses as well. So, the link to this page to sign up is going to be down below. Again, I really hope you enjoyed this series and I'm going to see you in the very next one. [Music]