All language subtitles for 010 Adding Better User Feedback_en

So let's handle this submission state.

And for this, we need useState

and then manage a new piece of state

here in the Cart component,

and that is the isSubmitting state and setIsSubmitting.

And, initially, that's false, but I wanna set it to true

as soon as the submitOrderHandler gets called.

So here I'll set isSubmitting,

setIsSubmitting to true.

Then I wanna wait for this fetch function to finish.

And for this, we can await this

and turn this into async function.

Here we have no problem with that

because this is not an effect function,

but, instead, this is a regular function

which gets triggered when we submit the form.

So here we then await, and we get back our response,

and we could now use the response to check the status code

and potentially throw an error,

which we then would have to handle

to also show an error message.

I will not do that here to keep this a bit shorter,

and, instead, I'll assume that it always works.

In reality, of course, and maybe as an extra practice,

you might wanna implement error-handling as well

just as we did it a couple of minutes ago

with the hour fetch request for loading the meals

or in the HTTP module.

Here, to save some time, I will not implement it.

Instead, we submit this, or we setIsSubmitting,

then we await this,

and therefore once this request is done

and we got a response, we can setIsSubmitting back to false.

But now I wanna make sure that we show some success message,

and therefore I'll add another state,

the didSubmit state and setDidSubmit.

And, initially, that's also false,

but this should be set to true

as soon as we did submit our data.

So here we can then setDidSubmit to true

once we're done sending that request,

and now we can work with these two states in our component.

To be precise, I wanna swap the entire content of the modal

when we're submitting and once we did submit.

So I'll add a new constant,

a new constant which I'll name cartModalContent.

And in there I'll store all that code here.

Now, since I now have multiple sibling items here

inside of that constant,

I need to wrap that with React.Fragment.

So we wanna wrap this because, as you learned,

sibling JSX code is not allowed.

And for this, of course, we need to import React from react.

With that, we can wrap that all with a fragment,

and now we get the cartModalContent

which I normally want to render here like this.

But I'll now define another constant,

the isSubmittingModalContent,

and that's the content that should be shown

if we are currently submitting.

And here I'll just add a paragraph

where I say Sending order data.

Now, that should be shown if we are submitting.

Therefore, I only wanna show the cartModalContent

if we're not submitting, hence the exclamation mark.

If we are submitting,

I wanna show the isSubmittingModalContent.

Now, last but not least,

we can, of course, also be done with submitting.

So I'll add another constant, didSubmitModalContent,

and that's another paragraph where I say

Successfully sent the order!

And we could, of course, then also say something

like You will be contacted

once we're done preparing your order,

or anything like that.

Here I'll just say Successfully sent the order,

and that should be showing up if we didSubmit,

then the didSubmitModalContent should be rendered.

And, therefore, we should also tweak these two lines

and only show the cartModalContent

if we're not submitting and we did not submit yet,

didSubmit, like this.

So if not submitting and not didSubmit,

then show the cartModalContent.

I always wanna show the isSubmittingModalContent

if we are submitting.

But otherwise, if we didSubmit,

I wanna show the didSubmitModalContent

maybe if we are not currently submitting.

Though, in this app,

we can't really be submitting and have submitted already.

Nonetheless, having this extra check also won't hurt.

I hope this logic is clear.

With that in place, if we now save this,

we got our cart here.

If I click Order, I now need to fill in my data.

Otherwise, I get errors.

So let's enter something here.

And if I now click Confirm, watch closely.

We see our two other states:

isSubmitting and now the Successfully sent the order state.

Of course, we can now still close the modal

by clicking somewhere else.

We can, of course, also add a new button

to the modal here if we want to.

We can wrap this here into a fragment as well

so that we can have two-sibling components:

the paragraph and then next to that, for example, a button.

So here we could grab our modalActions' div

and insert this next to this paragraph,

get rid of that Order button and just keep the Close button,

and give this a class of button instead of button--alt,

and onClick this will then close the modal.

So if we now save this, if I, again, order this,

enter some data here,

oops, Max and Teststreet,

12345, and Test,

now I can close this with this button.

So now we're showing these different states.

Now, as a last step, I wanna clear the cart

once we did submit

because currently it's never cleared.

Our items stay in the cart.

So to clear that cart, we need to go to our cart-context,

to the CartProvider to be precise,

and there we'll need a new action.

We do have actions for adding and removing single items,

but now we need an action to clear the entire cart.

So I'll add a new if check in this reducer here,

which we added here in this cartReducer,

and check for action.type being equal to CLEAR.

And if we do receive this kind of action,

then I wanna return a new state where the cart is empty.

Now, for this, we can return

the defaultCartState simply, like this.

And, of course, therefore,

technically, we could also omit this if check.

If we do dispatch an action

which is not handled by one of our other if checks,

we would have returned the defaultCartState anyways,

but doing it like this is a bit more explicit.

Now, we need to make sure

that this CLEAR action can be dispatched.

And for this, we wanna add a new function here,

the clearCartHandler, where we don't expect any parameters,

but dispatch a new cart action

where the type is set to CLEAR, like this.

And now on the context, we need a new function.

So in cart-context.js, I'll prepare it

so that we get better auto-completion,

the clearCart function.

And in CartProvider, on this concrete cartContext object

which we're constructing,

we now need to add this clearCart function

and point it to the clearCartHandler, like this.

And now from inside the Cart component, we can execute that.

So here in Cart.js,

when we submit our order in the submitOrderHandler,

once we're done here at the end,

I want to use my cartCtx and call clearCart

to clear the cart once we're done submitting.

So if we now save this one more time and go back,

now if I order here and enter something,

if I confirm this, now my cart was cleared and it is empty.

And, of course, on Firebase, on our back end,

we see all those orders.