1 00:00:02,000 --> 00:00:03,000 So from the front end, 2 00:00:03,000 --> 00:00:05,000 we wanna send requests 3 00:00:06,000 --> 00:00:09,000 to our newly added comments API route. 4 00:00:09,000 --> 00:00:11,000 And it's the new comments component 5 00:00:11,000 --> 00:00:13,000 where I wanna start with this. 6 00:00:13,000 --> 00:00:17,000 Here, we have the send comment handler, 7 00:00:17,000 --> 00:00:20,000 and in there we get all the user input 8 00:00:20,000 --> 00:00:23,000 and we then have some client side validation 9 00:00:23,000 --> 00:00:25,000 which we shouldn't trust, 10 00:00:25,000 --> 00:00:27,000 but which is still there. 11 00:00:27,000 --> 00:00:30,000 And we then call on add comment on props 12 00:00:30,000 --> 00:00:32,000 which should be a function, 13 00:00:32,000 --> 00:00:36,000 where we pass an object with email name and text 14 00:00:36,000 --> 00:00:39,000 And on add comment, then in the end is a function here 15 00:00:39,000 --> 00:00:43,000 in the comments JSX file, this add comment handler 16 00:00:43,000 --> 00:00:45,000 which has passed as a function 17 00:00:45,000 --> 00:00:48,000 through the on add comment prop 18 00:00:48,000 --> 00:00:50,000 on the new comment component. 19 00:00:50,000 --> 00:00:52,000 And here we then receive that comments data 20 00:00:52,000 --> 00:00:54,000 which should be sent as a request. 21 00:00:56,000 --> 00:00:58,000 Now I actually do need to connect my 22 00:00:58,000 --> 00:01:02,000 send comment handler to the form. 23 00:01:03,000 --> 00:01:04,000 So here with on submit 24 00:01:04,000 --> 00:01:09,000 I point at send comment handler to connect that. 25 00:01:09,000 --> 00:01:12,000 And then in comments JS we wanna send a request. 26 00:01:13,000 --> 00:01:16,000 So here again, we can use the fetch function for it is 27 00:01:16,000 --> 00:01:20,000 and the route now is slash API slash 28 00:01:20,000 --> 00:01:22,000 and then it's comments, 29 00:01:22,000 --> 00:01:24,000 because of that comments folder 30 00:01:24,000 --> 00:01:27,000 slash and then this file. 31 00:01:27,000 --> 00:01:32,000 But of course, with a concrete value for the event ID. 32 00:01:32,000 --> 00:01:34,000 Now that event ID is something 33 00:01:34,000 --> 00:01:38,000 which we get through props here in the comments component. 34 00:01:38,000 --> 00:01:42,000 It's a Indian passed in by this page 35 00:01:42,000 --> 00:01:43,000 by this event ID page. 36 00:01:43,000 --> 00:01:48,000 So this Real page, not the API route, but this Real page. 37 00:01:49,000 --> 00:01:50,000 They're into comments. 38 00:01:50,000 --> 00:01:53,000 I pass in this event prop which points 39 00:01:53,000 --> 00:01:55,000 at the ID of the event we're loading here. 40 00:01:57,000 --> 00:02:01,000 Hence in the comments JSX file, 41 00:02:01,000 --> 00:02:03,000 we get this event ID prop 42 00:02:03,000 --> 00:02:06,000 and that is what we should add as a concrete value 43 00:02:06,000 --> 00:02:08,000 to the route here, to the path. 44 00:02:10,000 --> 00:02:12,000 Then it should be a post request. 45 00:02:12,000 --> 00:02:17,000 Hence we add this second argument to configure the request 46 00:02:17,000 --> 00:02:19,000 and set the method to post 47 00:02:19,000 --> 00:02:22,000 and the body then to our data. 48 00:02:22,000 --> 00:02:27,000 And here I'll use JSON stringify to send my comment data, 49 00:02:27,000 --> 00:02:29,000 which is this data package we get 50 00:02:29,000 --> 00:02:31,000 from the new comment component. 51 00:02:31,000 --> 00:02:35,000 Which contains email, name and text. 52 00:02:35,000 --> 00:02:37,000 And here I'm using these property names, 53 00:02:37,000 --> 00:02:41,000 email, name and text, and hence it's these property names 54 00:02:41,000 --> 00:02:44,000 which you should be looking for in your API route, 55 00:02:44,000 --> 00:02:47,000 Email, name, and text. 56 00:02:47,000 --> 00:02:51,000 So that the data can be retrieved correctly. 57 00:02:51,000 --> 00:02:54,000 Because I'm just forwarding that data 58 00:02:54,000 --> 00:02:57,000 with my HTTP request to the API route. 59 00:02:58,000 --> 00:03:02,000 Then I'll add these extra headers to clarify the 60 00:03:02,000 --> 00:03:04,000 the content type I'm sending here, 61 00:03:04,000 --> 00:03:09,000 application JSON and we should be good. 62 00:03:10,000 --> 00:03:13,000 Now we can again wait for a response 63 00:03:14,000 --> 00:03:15,000 and parse that 64 00:03:16,000 --> 00:03:18,000 and then as a next step 65 00:03:19,000 --> 00:03:22,000 thereafter get back some data 66 00:03:22,000 --> 00:03:26,000 which you for example console log, like this. 67 00:03:27,000 --> 00:03:29,000 With all that implemented, 68 00:03:29,000 --> 00:03:31,000 if we save everything and go back 69 00:03:31,000 --> 00:03:35,000 if I try to submit as empty form, I get an error here 70 00:03:35,000 --> 00:03:38,000 because I have some built in client side validation. 71 00:03:40,000 --> 00:03:44,000 If I disable this client side validation 72 00:03:44,000 --> 00:03:47,000 if I go to the new comments JSX file, 73 00:03:47,000 --> 00:03:50,000 and I comment out this code here, 74 00:03:52,000 --> 00:03:53,000 and I submit this, it is submitted, 75 00:03:53,000 --> 00:03:57,000 but now in the network tab, 76 00:03:57,000 --> 00:03:59,000 if we opened that and submit this 77 00:03:59,000 --> 00:04:02,000 we see that the request actually fails it's red 78 00:04:03,000 --> 00:04:06,000 and it has this 422 status code. 79 00:04:06,000 --> 00:04:09,000 Which we do send back from the API route, 80 00:04:09,000 --> 00:04:12,000 if our service side validation fails. 81 00:04:12,000 --> 00:04:15,000 And then that server side validation 82 00:04:15,000 --> 00:04:18,000 unlike the client side application can't be tricked. 83 00:04:18,000 --> 00:04:21,000 So it is good to add logic like this. 84 00:04:21,000 --> 00:04:24,000 Nonetheless, I'll bring back that client side validation 85 00:04:24,000 --> 00:04:26,000 because of course for the user experience, 86 00:04:26,000 --> 00:04:30,000 it's better if we already validate the data 87 00:04:30,000 --> 00:04:33,000 and show an error before we even send a request. 88 00:04:34,000 --> 00:04:38,000 So with that back, let's now enter some valid data here. 89 00:04:38,000 --> 00:04:42,000 Let's enter an email address and a name 90 00:04:42,000 --> 00:04:47,000 and some texts, this is my comment and click submit. 91 00:04:47,000 --> 00:04:51,000 And now this succeeds, we have the 201 status code. 92 00:04:51,000 --> 00:04:53,000 And in the response we see 93 00:04:55,000 --> 00:04:58,000 the message and this comment object 94 00:04:58,000 --> 00:05:02,000 with the dummy ID, which was created on the backend. 95 00:05:02,000 --> 00:05:04,000 We're also logging it into console here. 96 00:05:04,000 --> 00:05:08,000 So this works and if we have a look at the server side log 97 00:05:08,000 --> 00:05:11,000 so the terminal where we run npm run dev, 98 00:05:11,000 --> 00:05:15,000 we also see that object here. 99 00:05:15,000 --> 00:05:18,000 So that works and we do send that data. 100 00:05:18,000 --> 00:05:22,000 Now last but not least before we then add some real logic 101 00:05:22,000 --> 00:05:26,000 talking to a database to our API route, 102 00:05:26,000 --> 00:05:29,000 let's also fetch comments in the comments JSX file 103 00:05:29,000 --> 00:05:31,000 when we do show our comments. 104 00:05:32,000 --> 00:05:34,000 Now for showing the comments 105 00:05:34,000 --> 00:05:36,000 we have the toggle comments handler, 106 00:05:36,000 --> 00:05:40,000 and that is executed whenever this button here is clicked. 107 00:05:40,000 --> 00:05:43,000 And whenever we do show comments, 108 00:05:43,000 --> 00:05:46,000 I want to load the comments 109 00:05:46,000 --> 00:05:51,000 by sending a get request to these comments API route. 110 00:05:51,000 --> 00:05:55,000 So I wanna trigger this part of this handler functioning. 111 00:05:56,000 --> 00:05:59,000 And to achieve this we got various different ways. 112 00:05:59,000 --> 00:06:02,000 We could go into this toggle comments handler function 113 00:06:02,000 --> 00:06:05,000 for example, and here we changed the state 114 00:06:05,000 --> 00:06:09,000 but this will not be processed instantly by React. 115 00:06:09,000 --> 00:06:11,000 It will be scheduled. 116 00:06:11,000 --> 00:06:12,000 And then the next line thereafter 117 00:06:12,000 --> 00:06:14,000 the state will not be updated yet. 118 00:06:14,000 --> 00:06:19,000 So here we could check if show comments is true 119 00:06:20,000 --> 00:06:24,000 which means the current state is show comments. 120 00:06:24,000 --> 00:06:27,000 Then the button was clicked and dysfunction executes again. 121 00:06:27,000 --> 00:06:30,000 So the goal is to hide them now. 122 00:06:30,000 --> 00:06:32,000 And therefore we could check if not show comments 123 00:06:32,000 --> 00:06:34,000 which means to current status 124 00:06:34,000 --> 00:06:36,000 that the comments are not shown, 125 00:06:36,000 --> 00:06:37,000 then dysfunction executes 126 00:06:37,000 --> 00:06:40,000 and the new state is that they will be shown. 127 00:06:40,000 --> 00:06:42,000 So now we should fetch data 128 00:06:42,000 --> 00:06:44,000 and that's something we could do. 129 00:06:44,000 --> 00:06:49,000 Or alternatively, we use good old useEffect here 130 00:06:50,000 --> 00:06:53,000 and also import that from React 131 00:06:53,000 --> 00:06:55,000 and in here simply add 132 00:06:55,000 --> 00:06:57,000 show comments as a dependency 133 00:06:58,000 --> 00:07:00,000 and in the effect function 134 00:07:00,000 --> 00:07:03,000 we then check if show comments is true 135 00:07:03,000 --> 00:07:06,000 which means that comments are shown. 136 00:07:06,000 --> 00:07:10,000 And if that is true, we wanna fetch the comments. 137 00:07:10,000 --> 00:07:13,000 So then here we can send our request to 138 00:07:13,000 --> 00:07:18,000 slash API slash comments slash event ID. 139 00:07:18,000 --> 00:07:21,000 So this concrete event ID. 140 00:07:21,000 --> 00:07:23,000 We don't need to configure it 141 00:07:23,000 --> 00:07:27,000 because it will be a get request, not a post request. 142 00:07:27,000 --> 00:07:29,000 So the default is fine. 143 00:07:29,000 --> 00:07:33,000 And then we also get our data and parse that. 144 00:07:34,000 --> 00:07:38,000 So that we have the real data here eventually 145 00:07:38,000 --> 00:07:39,000 with which we can work. 146 00:07:40,000 --> 00:07:41,000 Now once we got that data, 147 00:07:41,000 --> 00:07:45,000 we wanna use the data to set the actual comments 148 00:07:45,000 --> 00:07:48,000 which should be rendered here with help of comment list. 149 00:07:49,000 --> 00:07:53,000 So for that we can manage another piece of state 150 00:07:53,000 --> 00:07:57,000 with use state, a list of comments, 151 00:07:57,000 --> 00:08:00,000 where I have my comments 152 00:08:00,000 --> 00:08:04,000 and set comments to update them, like this. 153 00:08:04,000 --> 00:08:06,000 And I wanna set comments once I get them. 154 00:08:06,000 --> 00:08:08,000 So here in this then block 155 00:08:08,000 --> 00:08:12,000 once we got a response, I'll set my comments. 156 00:08:12,000 --> 00:08:13,000 And then the API route 157 00:08:13,000 --> 00:08:16,000 will send back object with a comments key 158 00:08:16,000 --> 00:08:19,000 which then contains this array of comments. 159 00:08:19,000 --> 00:08:21,000 So when we work with that data 160 00:08:21,000 --> 00:08:25,000 I wanna set comments equal to data dot comments, 161 00:08:25,000 --> 00:08:27,000 to access that array of comments, 162 00:08:27,000 --> 00:08:30,000 which is set in that response data package, 163 00:08:30,000 --> 00:08:33,000 which has this comments key as we just saw. 164 00:08:33,000 --> 00:08:36,000 That then sets that comments state 165 00:08:36,000 --> 00:08:38,000 to those fetched comments. 166 00:08:38,000 --> 00:08:42,000 And that means that we can then use them to render them. 167 00:08:42,000 --> 00:08:46,000 So this comments state could then be passed to comment list. 168 00:08:46,000 --> 00:08:50,000 Let's say through items prop, like this, 169 00:08:52,000 --> 00:08:56,000 and now in comment list we need to work with this items prop 170 00:08:56,000 --> 00:08:59,000 And of course you can name that prop differently. 171 00:08:59,000 --> 00:09:02,000 In there I'm not expecting any props right now 172 00:09:02,000 --> 00:09:03,000 but we should change this, 173 00:09:03,000 --> 00:09:05,000 add the props parameter 174 00:09:05,000 --> 00:09:08,000 and extract items from props. 175 00:09:08,000 --> 00:09:10,000 And then we can use items to render 176 00:09:10,000 --> 00:09:12,000 these list items dynamically. 177 00:09:12,000 --> 00:09:15,000 So we just go through items 178 00:09:15,000 --> 00:09:19,000 and map every item into a list item 179 00:09:19,000 --> 00:09:21,000 with content like this. 180 00:09:21,000 --> 00:09:23,000 So cut this and add it here 181 00:09:23,000 --> 00:09:26,000 and get rid of these dummy list items down there. 182 00:09:26,000 --> 00:09:29,000 And then here add a key on every list item 183 00:09:29,000 --> 00:09:31,000 which should be item dot id 184 00:09:32,000 --> 00:09:35,000 here as a text we wanna output item dot text 185 00:09:37,000 --> 00:09:42,000 And for the address here, we wanna output item dot name. 186 00:09:43,000 --> 00:09:46,000 So the name of the user who wrote to comment. 187 00:09:47,000 --> 00:09:49,000 And with that we have our list items, 188 00:09:49,000 --> 00:09:50,000 which should be rendered 189 00:09:50,000 --> 00:09:52,000 and we can now check whether that works. 190 00:09:52,000 --> 00:09:54,000 Let's reload this page 191 00:09:54,000 --> 00:09:57,000 for a single event and click on show comments. 192 00:09:57,000 --> 00:09:59,000 And we see the comments showing up there 193 00:09:59,000 --> 00:10:01,000 and in the network tab, 194 00:10:01,000 --> 00:10:03,000 we can also see the request there. 195 00:10:03,000 --> 00:10:05,000 If I hide the comments 196 00:10:05,000 --> 00:10:08,000 and I click show again they are fetched again. 197 00:10:08,000 --> 00:10:10,000 And hence we see the request here 198 00:10:10,000 --> 00:10:13,000 and we see that it carries the comments in the response. 199 00:10:13,000 --> 00:10:15,000 I guess that's kind of obvious 200 00:10:15,000 --> 00:10:17,000 because we all also a rendered them successfully here. 201 00:10:17,000 --> 00:10:20,000 So it clearly works. 202 00:10:20,000 --> 00:10:25,000 And these are the core tasks which I gave you solved. 203 00:10:25,000 --> 00:10:27,000 We added the newsletter registration. 204 00:10:27,000 --> 00:10:31,000 And now also those comments feature for storing comments 205 00:10:31,000 --> 00:10:35,000 or for at least submitting the comments I guess 206 00:10:35,000 --> 00:10:37,000 and for fetching the dummy comments. 207 00:10:37,000 --> 00:10:40,000 Now it's not very realistic yet though 208 00:10:40,000 --> 00:10:43,000 because we are only working with dummy data 209 00:10:43,000 --> 00:10:46,000 and we're not storing the submitted comment anywhere. 210 00:10:46,000 --> 00:10:49,000 Therefore in the next step, 211 00:10:49,000 --> 00:10:52,000 let me show you an example of how we could talk 212 00:10:52,000 --> 00:10:55,000 to a real database to store our data there 213 00:10:55,000 --> 00:10:58,000 and to get our data from there.