So here's our application
and generally, it works fine.
Now there is a tiny issue when we place a new order,
if you inspect your order reducer file, you will see that on purchaseBurgerStart which of course
is dispatched when we click on order,
when we send the order to the server,
we set loading to false.
Now that doesn't make any sense at all because here we want to set loading to true and we had it set
to true earlier in this course,
I messed this up when refactoring the reducer.
So this should of course be true, we want to show a spinner if we implement this functionality in our
component when we are sending this to a server,
so this is the first tiny improvement.
Now there's another improvement,
if we are talking about placing an order, let's build a burger there.
Now let's login first, submit this and we are redirected here back to our front page.
Now that shouldn't happen, we fix this in the authentication section that we should be redirected to
checkout
and we were there for a fraction of a second but somehow it decided to redirect us back to the front
page.
So here we did correctly adjust set auth redirect but still it decided that a good place for us would
be the front page,
so it is something else I want to fix. Now
the reason for this problem with this wrong redirection is that we do redirect in the auth container here
this code, there we set or we use our redirect path to redirect the user.
The problem is this happens in the auth container and in our app container, in our root app component
where we render different routes for different authentication statuses, there where we are authenticated,
we don't render the auth component anymore.
Hence the code in the auth component which would redirect us correctly to the checkout page will never
be used.
So to fix this, we can reintroduce the auth route into our set of routes in the authentication state,
now of course the disadvantage is that now authenticated users can visit the auth page, on the other hand, they
can't do any harm there.
You might of course also be able to find other solutions to redirect anywhere else
but this is a quick and easy and safe solution to get back to the original behavior.
Now another issue we face is if I build a burger and I am logged in here, in that burger builder here,
you will see that on certain screen sizes, the burger is positioned incorrectly it's not centered.
The reason for this is that the burger has a width which is adjusted to the viewport but it's always
inside a div which takes 100% of the width of its wrapping element
and that would be this div
which also dictates a a certain width, 80% in this case, the checkoutSummary.
So the checkoutSummary here is dictating a certain width for our burger and that is influencing how
our well burger is displayed here.
To fix that, we can go to our components, to the checkoutSummary we can find it under order, checkout
summary and there where we set the width to 500px for wider displays.
In the end I don't want to do that,
I want to stick to the 80% I have by default and now with that, if we go back to the application
and we build a new burger I am logged in here already,
this burger should now be nicely centered on all device screens, so this is looking much better now,
so now the burger is looking good all the time, no matter where we we're viewing it.
Now there's one other visual glitch I want to get rid of and that is on small devices,
if we open our side nav and I click on a link, it navigates there correctly without errors but
it doesn't close
the side nav, I have to manually do that.
Of course it should close the side nav whenever we click a link here.
Now to fix this we have to go into our sideDrawer where we in the end have our sideDrawer here and
there we have the navigation items
and now we want to ensure that whenever we click a navigation item, we essentially close that drawer.
So we essentially want to emit or execute this closed method, the method we get on the closed prop in
this sideDrawer component.
Now to do that, we could for example simply listen to a click anywhere on the sideDrawer, now that of course
would mean that not only clicking on links would close it. We could also go into the navigation items
and try to register onClick listener there too, I'll go with the general closing strategy here.
So on a click on the sideDrawer in general, let's try to then reach out to props.closed which should
be handled in the parent component of this component and close this side menu.
With that change in place, let's open the sideDrawer, if I click anywhere on it, it closes but that should
be all right, if I click on
orders, it therefore also closes.
So now we got a sideDrawer which does work as we would expect it to work closing when we do navigate
around.
These were a couple of visual glitches we had and fixes to them so that now our application looks and behaves
nicer and more as we would expect it.