All right, guys.
So in this video, what we're going to do is just go through and do some fixes for some minor bugs that
have popped up over the past couple months.
So the course has been released for a couple of months.
We have some small fixes.
And then in the next video we have a pretty large security fix that has to do with PayPal.
All right.
So I have two documents, one for this video, one for the next one.
They'll be in the the premium docs at Travis Media.com.
But I'm also going to include them in the course files if you're watching this on Udemy or somewhere
else.
All right.
So basically I just have these numbered.
We have what, six I think.
Yeah, we have six different fixes that I want to go through.
So the first one is in the search box component.
Basically, I want to prevent the keyword state from being undefined.
So we just need to add or an empty string here.
All right.
So let me.
Go into our front end and we're going to go to source components and we want to go to our search box
and we're simply going to add right here, URL keyword or an empty string.
Okay.
So that's the first one.
Very, very simple.
And then let's see, we're going to go to number two, which is restrict uploads to images only.
So this was kind of a flub on my part.
I have a check file type or we have a check file type function that I defined in the upload routes,
but I never actually used it.
So if we go to our back end now, we can close that up and we go to our routes, upload routes, You'll
see that there's a check file function here, but I never actually used it anywhere.
I didn't include it in the middleware.
Now what we're going to do is just replace that with.
This file filter, which is essentially the same thing.
It just checks the file types and mime types.
So I'm going to just replace that with the file filter function.
And then where we call this, this is upload equals malter, and then we pass in our storage instead
of doing just passing in storage, we also want to pass in right here, file filter, and then we're
going to create a function called upload single image that is going to be this single method on the
upload object.
So I'm just going to grab those two lines and we're going to replace that.
Okay, so now the last thing we want to do is implement this, this function here, upload single image,
that's our middleware.
So if we go back to that document, I'm going to grab this post request right here.
And then we're going to.
Replace this one because this one isn't.
Well, it is using the middleware function, but it wasn't using the check file.
So I'm going to paste that in.
And now we're passing in upload single image as, as a middleware function.
All right.
So if we save that, we can now test it out.
So let's go to our application and I'm going to go to products Create Product.
And that's on the second page here because I have pagination set.
All right.
Now I'm going to edit that new product and choose a file, and I'm going to choose something that is
not.
Let's see.
I'll go to my downloads.
What do we have here?
I'll choose something that's not an image.
So let's see.
I have a lot of images here.
I'll choose a PSD because remember, it has to be if we look at that file filter, it has to be one
of these Jpeg, PNG or WebP.
So let's choose the PSD.
And you'll see images only.
Okay.
So that addresses that.
Now, the next thing we want to do, if we go back to the documentation here, is remove an unneeded
dependency.
So for some reason we have this pro shop to dependency in the package.json.
You may or may not have it.
I'm sorry, it's in the front end dependencies.
So if we go to front end and then package.json right here, if you have this, just go ahead and get
rid of that.
All right.
Now the next thing we're going to do is check for a valid MongoDB object ID So every product, every
every entry has an object ID.
Now, we are kind of doing this if I if we go to error middleware.
So right here, our middleware.
I'm checking right here.
But there there were some issues that this cause.
So there's a better way to do this.
And we're going to create a new file, a new middleware file.
So if we go back to that documentation, we're going to create a check object ID, dot JS file in the
middleware, and then add this function because Mongoose actually has a function called is valid object
ID, so we can use that instead.
So in middleware let's create a file called check object ID, dot JS, and then we're just going to
paste that in there.
Very simple.
We're just using this function here to say if it's not a valid ID, whatever is passed in the URL,
then we're going to send a 404 and we're going to throw an error.
So we'll save that.
Now in order to use this check object ID and we can get rid of the this line, these lines here now
we don't need that.
So we'll just kind of cleaning this up a little.
But in order to use that, we're going to go to our product routes and wherever we use colon ID, which
is here, and then these here, these functions, we need to use that middleware.
So let's say import check.
Checked object ID, and then we're going to pass it.
So right here.
Since this uses an ID, we're going to pass it.
As the middle argument here, Second argument, and then here where we have get product ID, it's actually
going to be the first.
First argument here and then let's see this one put this uses the protect and admin middleware.
So we're going to add it right after that.
And same right here.
Check.
Object ID?
Good.
So now if I were to go to, let's say, product slash one, two, three, which obviously isn't an object
ID, we're just going to we're going to get this error message.
Okay, so that's that now.
The next thing that we're going to do.
Is the the error display.
So basically there's a few screens where we show an error, but.
I'm not showing the right thing in the message component.
So instead of error here, we want to show the error dot data dot message.
And if that's not there, then we're going to do error dot error.
This is just an object.
So we actually want to get the string to show in the error.
So we'll start off with order screen dot JS.
So I'll just copy this right here.
And then let's go back into the front end and close that up.
So source screens and then let's see order screen.
We're going to go down.
Two right here and just replace this error with that.
Okay, Now there's a couple other pages or screens that we want to do this with.
So the next one is the Place order screen.
So we're going to add an error data message here.
So let's see.
This is the place.
Order!
Come down.
It's in the list.
Groups, I believe.
Yeah, right here.
So this error, I'm just going to replace that with error data message.
Okay.
And then we have.
The next one, which is product edit screen.
That's also going to have the error data message.
Um, product edit screen that's going to be in the admin screens, product edit.
And down in the render here.
Right there.
And then the other one is, I believe, product list.
And right here.
All right.
So those should that should be it and that should show the correct error.
All right.
Let's see.
I think we have one more.
So yeah, a user inherits the last user's cart and shipping.
So this one is kind of a big one.
Basically, if a user has something in their cart and they have their shipping address in local storage,
they log out and then another person logs in on that machine.
They're going to have the the old user stuff in their, you know, in their cart and shipping address.
So we want to make sure that we fix that.
So in the auth slice, let's go to front end and slices and then auth slice.
So down here when we log out, we are we're clearing user info and expiration time, but we want to
clear the entire local storage.
So all we have to do here is get rid of these two and just do local storage clear.
And that will definitely clear the shipping address, the cart, anything that's in local storage,
that'll fix.
All right.
Now there is another another thing we want to do here.
We want to reset the cart.
So let's go to our cart slice and we're going to go down to the bottom.
Let's see.
So the last one here is clear cart items.
I'm going to go under that and I'm going to create reset cart.
And this is going to be very simple.
All we're going to do here is set the state to the initial state.
So we'll have state.
And then let's set that.
And we'll say state equals initial state.
So that should do it.
And then we want to want to export that so that we can use it.
So let's say reset cart, save that.
Now we just want to go into the header component.
So let's see, we want to go components and then header and I'm going to bring in say import.
Reset cart and that's going to be from the cart slice.
Oops.
What?
I put an equal sign there.
And let's see.
We want to we want this to run in the logout handler.
So.
We have our dispatch log out.
And then before we we redirect to login, that's where we want to dispatch our reset card.
All right.
And that should do it.
So now the entire car will be reset.
Anything that's in the shipping, local storage or the the card itself will be gone when the user logs
out so that it's refreshed for the next user on that machine.
All right.
So that's going to be it for now.
If I run into any other small bugs, I'll address those.
In the next video, we're going to address a pretty big bug that has to do with PayPal.
And if someone is really tech savvy, they could actually get away with getting a free getting free
items.
So we definitely want to address that.