1 00:00:00,320 --> 00:00:00,650 All right. 2 00:00:00,650 --> 00:00:06,200 So now we want to be able to create and read reviews on the product page. 3 00:00:06,200 --> 00:00:11,540 So I want to have it down here so we already have our back end endpoint to create reviews. 4 00:00:11,540 --> 00:00:17,810 So let's go to our front end and like always, we're going to start in our slice. 5 00:00:17,810 --> 00:00:27,290 Let's go to our products API slice and we're going to add down here under delete product, let's say 6 00:00:27,290 --> 00:00:28,310 create. 7 00:00:29,220 --> 00:00:34,200 Or we'll just call it Create review, which is going to be a mutation. 8 00:00:35,340 --> 00:00:37,830 And it's going to take in some data. 9 00:00:37,860 --> 00:00:44,340 Our URL is going to be our products URL data, dot product ID slash reviews. 10 00:00:44,400 --> 00:00:46,110 It's going to be a post request. 11 00:00:46,140 --> 00:00:53,070 Have our body data and then I'm also going to do the invalidate tags and set that to product. 12 00:00:53,640 --> 00:00:55,770 Okay, now let's export that. 13 00:00:56,880 --> 00:00:58,740 So we'll say use. 14 00:00:59,470 --> 00:01:02,150 Use, create or view mutation. 15 00:01:02,170 --> 00:01:08,080 Now, we don't need a query to get the reviews because remember, it's included with the product and 16 00:01:08,080 --> 00:01:10,030 we're already getting the product data. 17 00:01:10,240 --> 00:01:13,570 So now we want to go to our product screen. 18 00:01:14,180 --> 00:01:17,270 So screens and then product screen. 19 00:01:17,870 --> 00:01:21,740 And we're going to bring in let's go up to the top here. 20 00:01:21,740 --> 00:01:25,670 And we're we're taking in stuff from our slice. 21 00:01:25,700 --> 00:01:27,080 Let's bring in. 22 00:01:27,980 --> 00:01:30,620 Use we want. 23 00:01:31,040 --> 00:01:32,090 Let's see. 24 00:01:32,090 --> 00:01:33,350 Use. 25 00:01:34,640 --> 00:01:35,390 What was it called? 26 00:01:35,390 --> 00:01:36,260 Create? 27 00:01:36,300 --> 00:01:36,640 Yeah. 28 00:01:36,650 --> 00:01:37,910 Create review. 29 00:01:37,940 --> 00:01:39,050 Mutation. 30 00:01:39,950 --> 00:01:41,720 And then let's see. 31 00:01:41,810 --> 00:01:44,930 Do we have we have dispatch, but we also need to get. 32 00:01:45,850 --> 00:01:49,540 Stuff from the states who are also going to use use selector. 33 00:01:51,010 --> 00:01:54,580 And then we also need the toast component. 34 00:01:54,580 --> 00:01:56,620 So let's bring that in as well. 35 00:02:00,800 --> 00:02:02,720 No, that should be from React. 36 00:02:03,140 --> 00:02:04,700 React to Defy. 37 00:02:05,100 --> 00:02:10,520 Okay, now let's initialize our use create review mutation. 38 00:02:10,520 --> 00:02:12,020 So we'll put this. 39 00:02:13,430 --> 00:02:14,660 Right here. 40 00:02:18,610 --> 00:02:25,270 And let's see, we don't we're not going to be using the error anyway so we can get rid of that. 41 00:02:25,270 --> 00:02:26,440 And then this. 42 00:02:27,200 --> 00:02:28,100 The is loading. 43 00:02:28,100 --> 00:02:30,890 I'm going to rename that to loading. 44 00:02:31,650 --> 00:02:34,530 A product review. 45 00:02:35,460 --> 00:02:39,570 And the name of the function is going to be create review. 46 00:02:40,710 --> 00:02:41,070 All right. 47 00:02:41,100 --> 00:02:45,300 Now we need to add a couple pieces of component state. 48 00:02:45,300 --> 00:02:49,960 So we're bringing in use state already and we have the quantity right here. 49 00:02:49,980 --> 00:02:53,220 We're also going to want a couple other things. 50 00:02:53,610 --> 00:02:55,860 So we want the rating. 51 00:02:56,930 --> 00:02:58,190 So rating set. 52 00:02:58,220 --> 00:03:01,130 Rating set that to zero by default. 53 00:03:01,130 --> 00:03:05,540 And then we also want the comment, which will be an empty string by default. 54 00:03:05,570 --> 00:03:08,390 Now we want to get the user info as well. 55 00:03:08,390 --> 00:03:14,570 So I'm going to go right down here and we can get that from our state dot auth. 56 00:03:15,150 --> 00:03:20,510 Okay, get our user info and let's see. 57 00:03:22,380 --> 00:03:24,660 After we get. 58 00:03:24,990 --> 00:03:27,840 So after we submit the review, we want to refetch the data. 59 00:03:27,840 --> 00:03:33,960 So right here where we're getting this stuff from the product details query I'm also going to add in 60 00:03:33,960 --> 00:03:35,430 here Refetch. 61 00:03:37,360 --> 00:03:39,460 So now we're going to come down. 62 00:03:39,700 --> 00:03:43,600 And where we have this, we have is loading and then we check for an error. 63 00:03:43,600 --> 00:03:45,970 If there's no error, then we go ahead and load this row. 64 00:03:46,000 --> 00:03:52,870 I'm going to open up a fragment here and then where this row ends at the very bottom. 65 00:03:53,850 --> 00:03:56,460 We're going to put another closing fragment. 66 00:03:57,300 --> 00:03:57,690 Okay. 67 00:03:57,690 --> 00:03:59,370 And then under this. 68 00:03:59,920 --> 00:04:03,280 Ending row is where I want to put a new row. 69 00:04:03,320 --> 00:04:03,970 Whoops. 70 00:04:04,120 --> 00:04:05,280 Didn't want to do that. 71 00:04:05,350 --> 00:04:07,750 So I want to put a new row here. 72 00:04:08,290 --> 00:04:15,400 I don't know why it keeps pushing it over, but this is going to have a class or class name of review. 73 00:04:18,390 --> 00:04:23,610 And then we're going to have a six hour column is going to be six wide because I don't want it to take 74 00:04:23,610 --> 00:04:24,510 up the whole screen. 75 00:04:24,510 --> 00:04:24,990 Basically. 76 00:04:24,990 --> 00:04:30,870 I want it to be like from here to here, you know, half the half the page. 77 00:04:30,870 --> 00:04:32,520 So let's do that. 78 00:04:32,520 --> 00:04:36,060 And then inside the column we're going to have our heading. 79 00:04:36,060 --> 00:04:42,240 So reviews, and then we want to make sure that if there's no reviews, we just have a message. 80 00:04:42,240 --> 00:04:51,180 So we'll say if the product dot reviews length is zero, then let's show a message and we'll just say 81 00:04:51,180 --> 00:04:52,680 no reviews, okay? 82 00:04:52,680 --> 00:04:55,530 And then underneath that we're going to have a list group. 83 00:04:55,800 --> 00:04:57,150 Let's close that up. 84 00:04:57,770 --> 00:05:02,150 And in this last group, we want to want to map through the reviews. 85 00:05:02,150 --> 00:05:09,080 So let's say product, so product dot reviews and then dot map. 86 00:05:10,280 --> 00:05:13,850 And we'll say for each review. 87 00:05:14,470 --> 00:05:21,910 Then we're going to have some parentheses and we want a list group item for each one and we'll have 88 00:05:21,910 --> 00:05:24,040 the ID as the key. 89 00:05:26,230 --> 00:05:26,590 Okay. 90 00:05:26,590 --> 00:05:33,090 And then in the list group item, let's do a strong tag with the review name. 91 00:05:33,100 --> 00:05:34,750 Then we're going to have the rating. 92 00:05:34,750 --> 00:05:38,410 And remember, we have a rating component, so we're going to use that here as well. 93 00:05:38,410 --> 00:05:40,740 Let me just make sure that we brought that in. 94 00:05:40,750 --> 00:05:47,020 Yeah, we did, because we're using it somewhere else as well for the for the product. 95 00:05:47,020 --> 00:05:54,760 So let's see underneath that, underneath the rating, we're going to have the Createdat and then the 96 00:05:54,760 --> 00:05:57,730 actual text, the comment of the review. 97 00:05:58,960 --> 00:06:04,060 So, yeah, let's actually just save that and see what we get. 98 00:06:05,550 --> 00:06:08,640 Okay, so no reviews, I think. 99 00:06:08,670 --> 00:06:14,280 Do we have I don't think we have any with reviews actually, in the sample data, we didn't do that, 100 00:06:14,280 --> 00:06:16,020 so that's fine for now. 101 00:06:16,200 --> 00:06:19,710 Underneath it, I want an area to create a review. 102 00:06:19,710 --> 00:06:21,000 So. 103 00:06:21,710 --> 00:06:22,460 Let's see. 104 00:06:22,460 --> 00:06:24,680 We're going to go under. 105 00:06:25,470 --> 00:06:30,460 Under this right here, because that's where the the map ends. 106 00:06:30,470 --> 00:06:32,930 We're going to create another list group item. 107 00:06:33,410 --> 00:06:34,850 Let's close that up. 108 00:06:35,390 --> 00:06:40,550 And in here we're going to have an H two that says write a review. 109 00:06:40,580 --> 00:06:44,330 We're going to check for the loading product review. 110 00:06:44,990 --> 00:06:46,160 That's what I called it. 111 00:06:46,160 --> 00:06:46,370 Right. 112 00:06:46,370 --> 00:06:47,720 Let me just double check. 113 00:06:47,750 --> 00:06:48,170 Yeah. 114 00:06:48,170 --> 00:06:51,110 So loading product review, we're going to check for that. 115 00:06:51,290 --> 00:06:54,920 And if it is loading, then we're going to show the loader. 116 00:06:55,190 --> 00:07:00,200 And then underneath that, we only want this to show if the user is logged in. 117 00:07:00,200 --> 00:07:04,940 So we're going to say user info then. 118 00:07:06,210 --> 00:07:08,430 Then we'll show something else. 119 00:07:09,150 --> 00:07:10,920 Then we'll show something else. 120 00:07:10,920 --> 00:07:14,730 So in here, in the first one, we're going to have our form. 121 00:07:15,810 --> 00:07:19,710 And this is going to have actually I'll do the the handler after. 122 00:07:19,720 --> 00:07:21,450 So let's just have a form tag. 123 00:07:21,450 --> 00:07:26,700 We'll have a form group, give it a control ID of rating. 124 00:07:26,700 --> 00:07:32,820 I'm also going to give it a class name of my too, just to add some margin on the top and bottom. 125 00:07:32,820 --> 00:07:34,680 We'll close the form group. 126 00:07:35,300 --> 00:07:41,750 And then let's do our form label, which will say rating, and then our form control, which is actually 127 00:07:41,750 --> 00:07:47,670 going to be a select because we're going to be able to select a number from one 1 to 5. 128 00:07:47,690 --> 00:07:50,050 So the value will be the rating. 129 00:07:50,060 --> 00:07:56,780 We'll have an Onchange that will set the rating to whatever we select, and we're also just casting 130 00:07:56,780 --> 00:07:57,890 it as a number. 131 00:07:58,460 --> 00:08:02,120 And then we can close that and then we'll have our options. 132 00:08:02,120 --> 00:08:04,250 The first one will just say select. 133 00:08:04,280 --> 00:08:06,260 The next one will be one. 134 00:08:06,410 --> 00:08:09,530 So we'll basically do one through five. 135 00:08:11,250 --> 00:08:13,230 And then we'll close that up. 136 00:08:13,830 --> 00:08:14,580 Okay. 137 00:08:14,580 --> 00:08:17,940 And that should do it for the first. 138 00:08:19,170 --> 00:08:20,250 For the rating. 139 00:08:20,250 --> 00:08:24,090 Now we also want a text area form group as well. 140 00:08:24,090 --> 00:08:25,820 So let's create another one. 141 00:08:25,830 --> 00:08:27,630 Call this one comment. 142 00:08:28,250 --> 00:08:29,390 Close that up. 143 00:08:29,810 --> 00:08:33,650 And then inside here, we're going to have a label that says comment. 144 00:08:33,650 --> 00:08:39,200 And then the form control this time is going to be a text area and we'll put row three. 145 00:08:39,200 --> 00:08:41,429 If you want to change the size of it, you can. 146 00:08:41,450 --> 00:08:44,930 Value is going to be the comment in our state on change. 147 00:08:44,930 --> 00:08:51,800 We'll set that comment and then we end our form control and then we just want a button underneath that 148 00:08:51,800 --> 00:08:52,730 form group. 149 00:08:52,730 --> 00:08:59,750 So right here button and we're going to disable it if it's loading and it's going to be a type submit 150 00:08:59,750 --> 00:09:01,730 variant primary. 151 00:09:02,420 --> 00:09:08,780 And we're not going to have an on click because we're going to have an on submit on the form and then 152 00:09:08,780 --> 00:09:10,340 we'll just have the text of submit. 153 00:09:10,370 --> 00:09:16,400 Now, if there if the user isn't logged in, then here we're just going to show a message and we're 154 00:09:16,400 --> 00:09:20,180 going to say, please log in to write a review. 155 00:09:22,020 --> 00:09:23,370 And we'll close that up. 156 00:09:24,690 --> 00:09:26,910 All right, So let's save that. 157 00:09:28,090 --> 00:09:33,550 And if we check it out, you should see write a customer review. 158 00:09:34,400 --> 00:09:39,050 And we can choose a number from 1 to 5, write a comment. 159 00:09:39,080 --> 00:09:44,360 We don't have a handler for this yet, but I just want to make sure that if we log out. 160 00:09:45,830 --> 00:09:47,990 And then we go to a product. 161 00:09:49,420 --> 00:09:53,070 It says, please sign in to write a review, which is what we want. 162 00:09:53,080 --> 00:09:56,890 So now I'm going to sign in as John, not the admin user. 163 00:09:56,890 --> 00:10:00,220 So let's say John at I think it's Gmail. 164 00:10:05,040 --> 00:10:05,640 Okay. 165 00:10:05,640 --> 00:10:06,570 And then. 166 00:10:07,680 --> 00:10:10,500 Let's go to a product and now we see our form. 167 00:10:10,500 --> 00:10:13,860 So let's do let's handle the submit now. 168 00:10:14,130 --> 00:10:20,460 So we're going to go back up to our form tag right here and let's say on. 169 00:10:21,760 --> 00:10:22,810 On submit. 170 00:10:22,810 --> 00:10:24,250 Then we're going to call. 171 00:10:25,180 --> 00:10:26,470 Submit. 172 00:10:27,010 --> 00:10:27,490 Submit. 173 00:10:27,520 --> 00:10:28,300 Handler. 174 00:10:29,790 --> 00:10:30,270 Okay. 175 00:10:30,270 --> 00:10:31,650 And then we'll go up. 176 00:10:33,350 --> 00:10:35,000 Up above the return. 177 00:10:36,570 --> 00:10:39,900 And let's create our submit handler. 178 00:10:40,020 --> 00:10:43,350 So first we want to just prevent the default. 179 00:10:44,440 --> 00:10:49,840 And then what we're going to do is, first of all, open up a try catch. 180 00:10:52,130 --> 00:10:58,640 And in the try we we want to call create review, which is coming from our mutation. 181 00:10:59,070 --> 00:10:59,450 Okay. 182 00:10:59,450 --> 00:11:05,600 So let's actually let's make this a sink because we need to await. 183 00:11:06,710 --> 00:11:09,920 On create review. 184 00:11:09,920 --> 00:11:13,340 And what we're going to pass in here is an object. 185 00:11:13,340 --> 00:11:17,120 And we want the product ID, The rating. 186 00:11:18,140 --> 00:11:19,190 The rating. 187 00:11:20,170 --> 00:11:21,700 And the comment. 188 00:11:23,370 --> 00:11:27,660 And we're just going to tack on to this unwrap as well. 189 00:11:29,110 --> 00:11:29,620 Okay. 190 00:11:29,620 --> 00:11:37,390 And then we're going to Refetch after that, let's say Refetch just so the data is fresh, so Refetch. 191 00:11:37,390 --> 00:11:39,850 And then we're going to have a toast. 192 00:11:40,240 --> 00:11:41,680 So let's say toast. 193 00:11:41,680 --> 00:11:42,790 Success. 194 00:11:43,840 --> 00:11:45,250 And. 195 00:11:46,600 --> 00:11:48,550 We could setrillionight Now, that's fine. 196 00:11:48,550 --> 00:11:49,300 We'll just. 197 00:11:51,520 --> 00:11:52,510 Yeah, actually, you know what? 198 00:11:52,540 --> 00:11:54,910 Let's just set this back to the default. 199 00:11:55,330 --> 00:11:55,700 Okay. 200 00:11:55,720 --> 00:11:57,130 Now, if there's an error. 201 00:11:57,160 --> 00:11:57,820 Wait a minute. 202 00:11:57,820 --> 00:11:58,150 That should. 203 00:11:58,210 --> 00:11:59,830 That should have been in the try. 204 00:11:59,860 --> 00:12:02,740 So let's just cut that and put that. 205 00:12:03,700 --> 00:12:08,830 In the try block And then for the catch, we're going to do toast. 206 00:12:09,060 --> 00:12:10,720 Toast dot error. 207 00:12:12,850 --> 00:12:15,160 And the way our message is formatted. 208 00:12:15,160 --> 00:12:19,210 We want to do error dot data message or error. 209 00:12:20,010 --> 00:12:21,630 Okay, So let's save that. 210 00:12:23,700 --> 00:12:24,240 Let's see. 211 00:12:26,220 --> 00:12:26,700 Yeah. 212 00:12:26,700 --> 00:12:28,380 So we shouldn't have any warnings. 213 00:12:28,380 --> 00:12:29,370 So let's try it out. 214 00:12:29,370 --> 00:12:36,270 Let's just go ahead and select five and I'll just say this is a great product. 215 00:12:37,200 --> 00:12:38,430 And we'll submit. 216 00:12:39,590 --> 00:12:40,120 There we go. 217 00:12:40,130 --> 00:12:43,040 Review submitted and it shows up here. 218 00:12:43,040 --> 00:12:49,190 So John Smith, it shows the number of stars and the date and also the comment. 219 00:12:50,560 --> 00:12:54,490 Now, if I try to do this again with the same user. 220 00:12:55,430 --> 00:13:01,220 I get product already reviewed so the same user can't keep reviewing the product. 221 00:13:01,250 --> 00:13:01,850 All right, cool. 222 00:13:01,850 --> 00:13:05,540 So now that that's all set, we're going to move on to pagination.