‫So let's now display some nicely formatted notifications
‫which in the world of web design
‫and development are also called toasts for some reason.
‫So for that, let's bring in yet another third party library.
‫And this is a really small one
‫but it's still better than built all of this stuff by hand.
‫So React Hot Toast is the name of this library.
‫And then we will actually need to set that
‫up right here again in our application.
‫So in this component right here in our component tree.
‫So similar to these global styles and these dev tools
‫we need to add yet another self-closing component here
‫in this case, one that is responsible
‫for providing some options to our toaster.
‫So let's actually do that down here
‫in order not to clutter or mark up too much.
‫And so this component is called a toaster
‫because it'll produce toasts.
‫And again, toasts are the name that we give
‫to these notifications that we see.
‫So these kind of alerts, so toaster
‫and then this receives a few props.
‫Once again, you can look all
‫of these props up in the documentation.
‫So if you just Google React Hot Toast, then yeah
‫the best toast in town.
‫And so here you can already see what's that gonna look like.
‫And then here you have examples of all kinds of stuff.
‫And yeah, if you want
‫you can check out how this works over there.
‫So here I want to display this.
‫In the top center, the gutter should be 12
‫which is the space between the window and the toaster.
‫Then the container style should be
‫and so here we need to specify now an object of styles.
‫So let's give it a margin of eight pixels.
‫And then here we can specify some toast options.
‫So we can, for example, define
‫for how long a success toast will stay on the screen.
‫So success and then duration.
‫And let's set it to three seconds.
‫So 3000 milliseconds.
‫And then we can do the same for the error.
‫So let's make this a bit longer
‫so that the user can see what's actually wrong.
‫And finally, we can define some more styles here.
‫So let's say the font size should be 16 pixels,
‫the max width I'm gonna make it 500 pixels.
‫Add some padding so that it's similar
‫to the rest of the app.
‫And then also let's give it a background color
‫to also match our app's design.
‫And so here we can actually now reference our CSS
‫variables that we created earlier.
‫So gray zero.
‫And then let's do the same for the text color.
‫So here, 700.
‫And with this, we are now ready to use this toaster.
‫So right here, let's now replace these alerts with toast.
‫So this is the function
‫that we can import from React Hot Toast.
‫And then on there we can create a bunch of different toasts
‫so styles of toasts.
‫So here we want an arrow toast.
‫And here we want a toast dot success.
‫And so this will then get different icons.
‫And also as we defined earlier, this one will be displayed
‫for three seconds and this one for five.
‫So let's again create ourselves an error
‫by changing this over here.
‫And so now as we delete,
‫ah, this looks a lot nicer than before, doesn't it?
‫So it stays here for a few seconds and then it disappears.
‫And we could even add a close button there if you want it.
‫But let's keep it simple.
‫All right.
‫And now let's place it back here.
‫And just again, to simulate that situation, for example
‫where two different employees of the hotel are working
‫on the cabins at the same time.
‫Let's just duplicate the tap.
‫So let's say that one employee here deletes a cabin now
‫so let's see if that works and yeah, nice.
‫And so now if the other employee is using the application
‫and navigating around
‫then also that cabin will disappear for them.
‫And so that's again, the power of re-validating the queries
‫and in general of using React Query in the first place.
‫So it gives us all this functionality so easily
‫out of the box.
‫Now here, let's just fix this.
‫Maybe let's give ourselves another new cabin here.
‫Actually, just so this looks a bit nicer
‫for four people and a discount, let's say like this.
‫And again, immediately it will show up here.
‫And finally, now let's just fix something in our layout.
‫So first of all, here we will want some space
‫between this title and this table, and also
‫watch what happens when we make this page really large.
‫So then this table and all this content here
‫simply stretches to fit the entire available width.
‫So that's not what we wanted.
‫And so actually let's come back to our app layout.
‫And here we will just wrap our page
‫inside another component.
‫So let's call this just the standard name of container.
‫And so this will be a styled div.
‫And so let's give this a max width of 120 rem.
‫And then in order to center it
‫let's use the margin zero auto trick
‫and then let's we need to wrap our page in there.
‫So container.
‫And there we go.
‫So I think that looks correct, and indeed it does.
‫So now it just stays nicely centered
‫and doesn't occupy all too much space.
‫And now to create the space between this element
‫and the next one, let's also use the container.
‫So that's a lot nicer than to just add some random spacing
‫to this element right there.
‫So again, we can just do this on the parent using flex box.
‫So display flex and then flex direction column.
‫And then we can simply define a gap.
‫So 3.2 rem.
‫And there we go.
‫Great, so this application is starting to look better
‫and better, and I'm really happy the way that it's turning
‫out, and now, next up
‫let's actually add a form to create new cabins so
‫that we no longer have to always come here to add new ones.