1 00:00:00,560 --> 00:00:01,190 All right, guys. 2 00:00:01,190 --> 00:00:08,900 So in this video, what we're going to do is just go through and do some fixes for some minor bugs that 3 00:00:08,900 --> 00:00:11,210 have popped up over the past couple months. 4 00:00:11,210 --> 00:00:13,790 So the course has been released for a couple of months. 5 00:00:13,820 --> 00:00:15,320 We have some small fixes. 6 00:00:15,320 --> 00:00:21,470 And then in the next video we have a pretty large security fix that has to do with PayPal. 7 00:00:21,620 --> 00:00:22,040 All right. 8 00:00:22,040 --> 00:00:27,200 So I have two documents, one for this video, one for the next one. 9 00:00:27,230 --> 00:00:31,220 They'll be in the the premium docs at Travis Media.com. 10 00:00:31,220 --> 00:00:37,220 But I'm also going to include them in the course files if you're watching this on Udemy or somewhere 11 00:00:37,220 --> 00:00:37,880 else. 12 00:00:38,210 --> 00:00:38,570 All right. 13 00:00:38,570 --> 00:00:41,480 So basically I just have these numbered. 14 00:00:41,480 --> 00:00:43,670 We have what, six I think. 15 00:00:43,790 --> 00:00:47,840 Yeah, we have six different fixes that I want to go through. 16 00:00:47,840 --> 00:00:50,630 So the first one is in the search box component. 17 00:00:50,630 --> 00:00:55,850 Basically, I want to prevent the keyword state from being undefined. 18 00:00:55,850 --> 00:00:59,150 So we just need to add or an empty string here. 19 00:00:59,300 --> 00:00:59,660 All right. 20 00:00:59,660 --> 00:01:01,230 So let me. 21 00:01:02,560 --> 00:01:11,500 Go into our front end and we're going to go to source components and we want to go to our search box 22 00:01:11,500 --> 00:01:17,200 and we're simply going to add right here, URL keyword or an empty string. 23 00:01:17,830 --> 00:01:18,130 Okay. 24 00:01:18,130 --> 00:01:19,150 So that's the first one. 25 00:01:19,150 --> 00:01:20,380 Very, very simple. 26 00:01:20,380 --> 00:01:27,450 And then let's see, we're going to go to number two, which is restrict uploads to images only. 27 00:01:27,460 --> 00:01:30,280 So this was kind of a flub on my part. 28 00:01:30,310 --> 00:01:36,820 I have a check file type or we have a check file type function that I defined in the upload routes, 29 00:01:36,820 --> 00:01:38,590 but I never actually used it. 30 00:01:38,590 --> 00:01:46,660 So if we go to our back end now, we can close that up and we go to our routes, upload routes, You'll 31 00:01:46,660 --> 00:01:51,580 see that there's a check file function here, but I never actually used it anywhere. 32 00:01:51,580 --> 00:01:54,220 I didn't include it in the middleware. 33 00:01:54,700 --> 00:01:59,800 Now what we're going to do is just replace that with. 34 00:02:00,320 --> 00:02:04,250 This file filter, which is essentially the same thing. 35 00:02:04,670 --> 00:02:07,820 It just checks the file types and mime types. 36 00:02:07,820 --> 00:02:11,960 So I'm going to just replace that with the file filter function. 37 00:02:11,960 --> 00:02:19,850 And then where we call this, this is upload equals malter, and then we pass in our storage instead 38 00:02:19,850 --> 00:02:27,200 of doing just passing in storage, we also want to pass in right here, file filter, and then we're 39 00:02:27,200 --> 00:02:33,830 going to create a function called upload single image that is going to be this single method on the 40 00:02:33,830 --> 00:02:34,820 upload object. 41 00:02:34,820 --> 00:02:38,660 So I'm just going to grab those two lines and we're going to replace that. 42 00:02:40,080 --> 00:02:46,140 Okay, so now the last thing we want to do is implement this, this function here, upload single image, 43 00:02:46,140 --> 00:02:47,370 that's our middleware. 44 00:02:47,370 --> 00:02:54,870 So if we go back to that document, I'm going to grab this post request right here. 45 00:02:55,980 --> 00:02:57,480 And then we're going to. 46 00:02:58,560 --> 00:03:01,620 Replace this one because this one isn't. 47 00:03:01,650 --> 00:03:06,780 Well, it is using the middleware function, but it wasn't using the check file. 48 00:03:06,930 --> 00:03:08,790 So I'm going to paste that in. 49 00:03:08,790 --> 00:03:14,820 And now we're passing in upload single image as, as a middleware function. 50 00:03:15,660 --> 00:03:16,050 All right. 51 00:03:16,050 --> 00:03:19,080 So if we save that, we can now test it out. 52 00:03:19,290 --> 00:03:26,880 So let's go to our application and I'm going to go to products Create Product. 53 00:03:29,240 --> 00:03:32,720 And that's on the second page here because I have pagination set. 54 00:03:32,810 --> 00:03:33,110 All right. 55 00:03:33,150 --> 00:03:38,450 Now I'm going to edit that new product and choose a file, and I'm going to choose something that is 56 00:03:38,450 --> 00:03:39,380 not. 57 00:03:40,270 --> 00:03:40,690 Let's see. 58 00:03:40,690 --> 00:03:41,920 I'll go to my downloads. 59 00:03:41,920 --> 00:03:42,700 What do we have here? 60 00:03:42,700 --> 00:03:45,040 I'll choose something that's not an image. 61 00:03:45,040 --> 00:03:47,100 So let's see. 62 00:03:47,110 --> 00:03:48,490 I have a lot of images here. 63 00:03:48,490 --> 00:03:54,310 I'll choose a PSD because remember, it has to be if we look at that file filter, it has to be one 64 00:03:54,310 --> 00:03:57,100 of these Jpeg, PNG or WebP. 65 00:03:57,520 --> 00:03:59,980 So let's choose the PSD. 66 00:04:02,080 --> 00:04:04,450 And you'll see images only. 67 00:04:04,860 --> 00:04:05,160 Okay. 68 00:04:05,170 --> 00:04:06,730 So that addresses that. 69 00:04:06,850 --> 00:04:13,360 Now, the next thing we want to do, if we go back to the documentation here, is remove an unneeded 70 00:04:13,360 --> 00:04:14,080 dependency. 71 00:04:14,080 --> 00:04:20,560 So for some reason we have this pro shop to dependency in the package.json. 72 00:04:20,589 --> 00:04:22,660 You may or may not have it. 73 00:04:24,340 --> 00:04:26,530 I'm sorry, it's in the front end dependencies. 74 00:04:26,530 --> 00:04:34,090 So if we go to front end and then package.json right here, if you have this, just go ahead and get 75 00:04:34,090 --> 00:04:34,930 rid of that. 76 00:04:37,350 --> 00:04:37,740 All right. 77 00:04:37,770 --> 00:04:46,560 Now the next thing we're going to do is check for a valid MongoDB object ID So every product, every 78 00:04:47,490 --> 00:04:50,190 every entry has an object ID. 79 00:04:50,490 --> 00:04:54,780 Now, we are kind of doing this if I if we go to error middleware. 80 00:04:55,410 --> 00:04:57,350 So right here, our middleware. 81 00:04:57,360 --> 00:04:58,710 I'm checking right here. 82 00:04:58,710 --> 00:05:02,250 But there there were some issues that this cause. 83 00:05:02,250 --> 00:05:04,830 So there's a better way to do this. 84 00:05:04,830 --> 00:05:08,790 And we're going to create a new file, a new middleware file. 85 00:05:08,790 --> 00:05:16,350 So if we go back to that documentation, we're going to create a check object ID, dot JS file in the 86 00:05:16,350 --> 00:05:23,610 middleware, and then add this function because Mongoose actually has a function called is valid object 87 00:05:23,610 --> 00:05:25,890 ID, so we can use that instead. 88 00:05:25,890 --> 00:05:35,190 So in middleware let's create a file called check object ID, dot JS, and then we're just going to 89 00:05:35,190 --> 00:05:36,180 paste that in there. 90 00:05:36,180 --> 00:05:36,870 Very simple. 91 00:05:36,870 --> 00:05:42,960 We're just using this function here to say if it's not a valid ID, whatever is passed in the URL, 92 00:05:42,990 --> 00:05:46,710 then we're going to send a 404 and we're going to throw an error. 93 00:05:46,800 --> 00:05:48,390 So we'll save that. 94 00:05:48,390 --> 00:05:55,110 Now in order to use this check object ID and we can get rid of the this line, these lines here now 95 00:05:55,210 --> 00:05:56,350 we don't need that. 96 00:05:56,350 --> 00:05:58,450 So we'll just kind of cleaning this up a little. 97 00:05:58,450 --> 00:06:04,690 But in order to use that, we're going to go to our product routes and wherever we use colon ID, which 98 00:06:04,690 --> 00:06:08,980 is here, and then these here, these functions, we need to use that middleware. 99 00:06:08,980 --> 00:06:12,100 So let's say import check. 100 00:06:13,340 --> 00:06:16,520 Checked object ID, and then we're going to pass it. 101 00:06:17,090 --> 00:06:18,560 So right here. 102 00:06:18,560 --> 00:06:21,050 Since this uses an ID, we're going to pass it. 103 00:06:22,050 --> 00:06:28,560 As the middle argument here, Second argument, and then here where we have get product ID, it's actually 104 00:06:28,560 --> 00:06:29,910 going to be the first. 105 00:06:31,690 --> 00:06:37,720 First argument here and then let's see this one put this uses the protect and admin middleware. 106 00:06:37,720 --> 00:06:39,820 So we're going to add it right after that. 107 00:06:40,590 --> 00:06:42,620 And same right here. 108 00:06:42,630 --> 00:06:43,410 Check. 109 00:06:43,740 --> 00:06:44,940 Object ID? 110 00:06:44,970 --> 00:06:45,560 Good. 111 00:06:45,570 --> 00:06:54,090 So now if I were to go to, let's say, product slash one, two, three, which obviously isn't an object 112 00:06:54,090 --> 00:06:57,210 ID, we're just going to we're going to get this error message. 113 00:06:58,140 --> 00:07:00,180 Okay, so that's that now. 114 00:07:01,410 --> 00:07:03,720 The next thing that we're going to do. 115 00:07:04,620 --> 00:07:06,780 Is the the error display. 116 00:07:06,780 --> 00:07:11,580 So basically there's a few screens where we show an error, but. 117 00:07:12,370 --> 00:07:16,000 I'm not showing the right thing in the message component. 118 00:07:16,000 --> 00:07:22,060 So instead of error here, we want to show the error dot data dot message. 119 00:07:22,060 --> 00:07:25,180 And if that's not there, then we're going to do error dot error. 120 00:07:25,210 --> 00:07:26,890 This is just an object. 121 00:07:26,890 --> 00:07:30,670 So we actually want to get the string to show in the error. 122 00:07:30,670 --> 00:07:34,060 So we'll start off with order screen dot JS. 123 00:07:34,060 --> 00:07:37,030 So I'll just copy this right here. 124 00:07:37,980 --> 00:07:41,880 And then let's go back into the front end and close that up. 125 00:07:42,090 --> 00:07:47,340 So source screens and then let's see order screen. 126 00:07:47,340 --> 00:07:48,720 We're going to go down. 127 00:07:51,040 --> 00:07:55,480 Two right here and just replace this error with that. 128 00:07:56,430 --> 00:08:00,640 Okay, Now there's a couple other pages or screens that we want to do this with. 129 00:08:00,660 --> 00:08:03,660 So the next one is the Place order screen. 130 00:08:03,660 --> 00:08:06,990 So we're going to add an error data message here. 131 00:08:08,540 --> 00:08:09,500 So let's see. 132 00:08:09,500 --> 00:08:10,670 This is the place. 133 00:08:10,670 --> 00:08:11,570 Order! 134 00:08:11,870 --> 00:08:13,250 Come down. 135 00:08:14,180 --> 00:08:15,140 It's in the list. 136 00:08:15,140 --> 00:08:16,700 Groups, I believe. 137 00:08:18,170 --> 00:08:19,010 Yeah, right here. 138 00:08:19,010 --> 00:08:23,300 So this error, I'm just going to replace that with error data message. 139 00:08:24,760 --> 00:08:25,300 Okay. 140 00:08:25,300 --> 00:08:26,650 And then we have. 141 00:08:28,070 --> 00:08:30,680 The next one, which is product edit screen. 142 00:08:30,770 --> 00:08:34,490 That's also going to have the error data message. 143 00:08:35,460 --> 00:08:41,669 Um, product edit screen that's going to be in the admin screens, product edit. 144 00:08:42,840 --> 00:08:46,560 And down in the render here. 145 00:08:48,300 --> 00:08:49,020 Right there. 146 00:08:49,020 --> 00:08:52,350 And then the other one is, I believe, product list. 147 00:08:56,030 --> 00:08:57,080 And right here. 148 00:08:59,150 --> 00:08:59,480 All right. 149 00:08:59,480 --> 00:09:02,990 So those should that should be it and that should show the correct error. 150 00:09:03,740 --> 00:09:04,490 All right. 151 00:09:04,820 --> 00:09:05,150 Let's see. 152 00:09:05,150 --> 00:09:06,710 I think we have one more. 153 00:09:08,960 --> 00:09:13,250 So yeah, a user inherits the last user's cart and shipping. 154 00:09:13,250 --> 00:09:15,080 So this one is kind of a big one. 155 00:09:15,110 --> 00:09:21,290 Basically, if a user has something in their cart and they have their shipping address in local storage, 156 00:09:21,290 --> 00:09:24,770 they log out and then another person logs in on that machine. 157 00:09:24,800 --> 00:09:31,280 They're going to have the the old user stuff in their, you know, in their cart and shipping address. 158 00:09:31,280 --> 00:09:33,520 So we want to make sure that we fix that. 159 00:09:33,530 --> 00:09:40,880 So in the auth slice, let's go to front end and slices and then auth slice. 160 00:09:41,860 --> 00:09:49,720 So down here when we log out, we are we're clearing user info and expiration time, but we want to 161 00:09:49,720 --> 00:09:52,420 clear the entire local storage. 162 00:09:52,420 --> 00:09:57,280 So all we have to do here is get rid of these two and just do local storage clear. 163 00:09:57,280 --> 00:10:03,880 And that will definitely clear the shipping address, the cart, anything that's in local storage, 164 00:10:03,880 --> 00:10:04,990 that'll fix. 165 00:10:05,290 --> 00:10:05,620 All right. 166 00:10:05,650 --> 00:10:10,600 Now there is another another thing we want to do here. 167 00:10:10,600 --> 00:10:12,260 We want to reset the cart. 168 00:10:12,280 --> 00:10:17,980 So let's go to our cart slice and we're going to go down to the bottom. 169 00:10:20,210 --> 00:10:20,600 Let's see. 170 00:10:20,600 --> 00:10:22,580 So the last one here is clear cart items. 171 00:10:22,580 --> 00:10:27,410 I'm going to go under that and I'm going to create reset cart. 172 00:10:27,410 --> 00:10:29,310 And this is going to be very simple. 173 00:10:29,330 --> 00:10:33,230 All we're going to do here is set the state to the initial state. 174 00:10:33,230 --> 00:10:36,680 So we'll have state. 175 00:10:37,590 --> 00:10:40,920 And then let's set that. 176 00:10:42,860 --> 00:10:47,960 And we'll say state equals initial state. 177 00:10:50,020 --> 00:10:51,070 So that should do it. 178 00:10:51,070 --> 00:10:54,220 And then we want to want to export that so that we can use it. 179 00:10:54,220 --> 00:10:58,450 So let's say reset cart, save that. 180 00:10:58,450 --> 00:11:01,150 Now we just want to go into the header component. 181 00:11:01,150 --> 00:11:09,580 So let's see, we want to go components and then header and I'm going to bring in say import. 182 00:11:11,560 --> 00:11:17,230 Reset cart and that's going to be from the cart slice. 183 00:11:18,070 --> 00:11:18,310 Oops. 184 00:11:18,310 --> 00:11:18,460 What? 185 00:11:18,460 --> 00:11:19,930 I put an equal sign there. 186 00:11:21,370 --> 00:11:22,360 And let's see. 187 00:11:22,360 --> 00:11:26,440 We want to we want this to run in the logout handler. 188 00:11:26,440 --> 00:11:27,370 So. 189 00:11:28,080 --> 00:11:30,390 We have our dispatch log out. 190 00:11:31,190 --> 00:11:37,670 And then before we we redirect to login, that's where we want to dispatch our reset card. 191 00:11:39,690 --> 00:11:39,990 All right. 192 00:11:39,990 --> 00:11:41,040 And that should do it. 193 00:11:41,720 --> 00:11:44,930 So now the entire car will be reset. 194 00:11:44,930 --> 00:11:52,160 Anything that's in the shipping, local storage or the the card itself will be gone when the user logs 195 00:11:52,160 --> 00:11:56,150 out so that it's refreshed for the next user on that machine. 196 00:11:56,510 --> 00:11:56,870 All right. 197 00:11:56,870 --> 00:11:58,730 So that's going to be it for now. 198 00:11:58,730 --> 00:12:03,140 If I run into any other small bugs, I'll address those. 199 00:12:03,170 --> 00:12:10,190 In the next video, we're going to address a pretty big bug that has to do with PayPal. 200 00:12:10,190 --> 00:12:15,800 And if someone is really tech savvy, they could actually get away with getting a free getting free 201 00:12:15,800 --> 00:12:16,190 items. 202 00:12:16,190 --> 00:12:18,410 So we definitely want to address that.