1 00:00:02,000 --> 00:00:04,000 Now for this course section, 2 00:00:04,000 --> 00:00:07,000 I updated our project code a little bit. 3 00:00:07,000 --> 00:00:11,000 You find this updated snapshot attached. 4 00:00:11,000 --> 00:00:12,000 What did I do? 5 00:00:12,000 --> 00:00:17,000 I added a new input folder in the components folder. 6 00:00:17,000 --> 00:00:20,000 So in the components folder, there is this new input folder 7 00:00:20,000 --> 00:00:23,000 which contains a bunch of components 8 00:00:23,000 --> 00:00:26,000 which we're going to need in this module. 9 00:00:26,000 --> 00:00:31,000 These are all regular react components, no page components 10 00:00:31,000 --> 00:00:35,000 which we are going to use for fetching user input 11 00:00:35,000 --> 00:00:38,000 and for then talking to the API routes. 12 00:00:38,000 --> 00:00:42,000 Now I have not added any API routes. 13 00:00:42,000 --> 00:00:44,000 The only other changes I made 14 00:00:44,000 --> 00:00:46,000 besides adding these components 15 00:00:46,000 --> 00:00:49,000 is that I'm using these components. 16 00:00:49,000 --> 00:00:53,000 In the events folder, in the pages folder, 17 00:00:53,000 --> 00:00:55,000 in this event ID component 18 00:00:55,000 --> 00:00:58,000 I added the comments components here 19 00:00:58,000 --> 00:01:01,000 at the bottom of this js X code 20 00:01:01,000 --> 00:01:04,000 and in the index.js file. 21 00:01:04,000 --> 00:01:06,000 So in the homepage component 22 00:01:06,000 --> 00:01:10,000 there I added the newsletter registration. 23 00:01:11,000 --> 00:01:13,000 So if you install all dependencies 24 00:01:13,000 --> 00:01:15,000 and you run this updated snapshot, 25 00:01:15,000 --> 00:01:20,000 then on the starting page, you will see that email 26 00:01:20,000 --> 00:01:22,000 this newsletter sign up part here. 27 00:01:22,000 --> 00:01:24,000 And if you explore a single event, 28 00:01:26,000 --> 00:01:28,000 there if you scroll to the bottom, 29 00:01:28,000 --> 00:01:30,000 you'll see the show comments button 30 00:01:30,000 --> 00:01:34,000 which you can click to view the comments forum 31 00:01:34,000 --> 00:01:36,000 and some dummy comments 32 00:01:36,000 --> 00:01:39,000 which we're going to replace with actual comments 33 00:01:39,000 --> 00:01:41,000 throughout this section. 34 00:01:42,000 --> 00:01:44,000 Now that is the starting state. 35 00:01:44,000 --> 00:01:46,000 And now I gotta challenge for you. 36 00:01:46,000 --> 00:01:50,000 I want you to add a couple of API routes 37 00:01:50,000 --> 00:01:54,000 that handle the newsletter signup, 38 00:01:54,000 --> 00:01:58,000 so that in the end handle an incoming email address. 39 00:01:58,000 --> 00:02:02,000 And then for the moment, maybe just log it to the console, 40 00:02:02,000 --> 00:02:06,000 so you don't need to add any code that writes to a file 41 00:02:06,000 --> 00:02:08,000 or talks to a database, 42 00:02:08,000 --> 00:02:12,000 though you can also do that as an extra exercise. 43 00:02:12,000 --> 00:02:14,000 But for this task here, 44 00:02:14,000 --> 00:02:17,000 just make sure that you accept some requests 45 00:02:17,000 --> 00:02:19,000 from which you retrieve to email 46 00:02:19,000 --> 00:02:21,000 and make sure that such a request 47 00:02:21,000 --> 00:02:24,000 is then sent from the front end. 48 00:02:24,000 --> 00:02:27,000 From this newsletter registration component 49 00:02:27,000 --> 00:02:30,000 here in the registration handler. 50 00:02:30,000 --> 00:02:32,000 Make sure you send the request 51 00:02:32,000 --> 00:02:35,000 to that API route, which you should add. 52 00:02:35,000 --> 00:02:39,000 You can also add validation for the user input 53 00:02:39,000 --> 00:02:42,000 to check whether the entered email was valid, 54 00:02:42,000 --> 00:02:46,000 but that is up to you and not something you have to add. 55 00:02:47,000 --> 00:02:50,000 Now, that is the first challenge, the first task, 56 00:02:50,000 --> 00:02:52,000 it's not the only one though. 57 00:02:52,000 --> 00:02:55,000 We also got to this comments section 58 00:02:55,000 --> 00:02:58,000 and there I want you to do a similar thing. 59 00:02:58,000 --> 00:03:03,000 Add another API route that allows users to submit comments 60 00:03:04,000 --> 00:03:09,000 and make sure that this API route is kind of dynamic. 61 00:03:09,000 --> 00:03:12,000 That the ID of the event 62 00:03:12,000 --> 00:03:14,000 to which the submitted common belongs 63 00:03:14,000 --> 00:03:16,000 is part of the URL 64 00:03:16,000 --> 00:03:18,000 of the API route. 65 00:03:18,000 --> 00:03:22,000 So you'll need to create a dynamic API route here. 66 00:03:22,000 --> 00:03:25,000 Then again, handle incoming requests 67 00:03:25,000 --> 00:03:28,000 and make sure you extract that submit a data 68 00:03:28,000 --> 00:03:31,000 and also handle the case data request 69 00:03:31,000 --> 00:03:33,000 is sent to fetch the data. 70 00:03:33,000 --> 00:03:38,000 So you will need to handle two different HTTP methods. 71 00:03:38,000 --> 00:03:42,000 For the newsletter API route, it was only one method, 72 00:03:42,000 --> 00:03:44,000 you should handle post requests there. 73 00:03:44,000 --> 00:03:46,000 But for the comments API route 74 00:03:46,000 --> 00:03:50,000 you should handle two different HTTP methods. 75 00:03:50,000 --> 00:03:54,000 Incoming post requests which add a new comment 76 00:03:54,000 --> 00:03:57,000 and incoming GET requests, which fetch comments. 77 00:03:58,000 --> 00:04:02,000 Again for the moment it is enough if you just log the data, 78 00:04:02,000 --> 00:04:05,000 if you just log something in your API route. 79 00:04:05,000 --> 00:04:08,000 You don't need to write any other logic, 80 00:04:08,000 --> 00:04:11,000 just return some dummy data in the GET request case 81 00:04:11,000 --> 00:04:16,000 and make sure you do send data and fetch data. 82 00:04:16,000 --> 00:04:19,000 We have this add common handler in comments.js 83 00:04:19,000 --> 00:04:24,000 where you should send that comments data to your API route. 84 00:04:24,000 --> 00:04:28,000 And then also find a way of fetching comments 85 00:04:28,000 --> 00:04:32,000 when the list of comments here is shown. 86 00:04:32,000 --> 00:04:34,000 So when that comment list is shown 87 00:04:34,000 --> 00:04:38,000 make sure you then fetch comments from the API route. 88 00:04:38,000 --> 00:04:39,000 And again, for the moment it's okay 89 00:04:39,000 --> 00:04:42,000 if you just return some dummy data there, 90 00:04:42,000 --> 00:04:45,000 just make sure you implement the base logic 91 00:04:45,000 --> 00:04:48,000 and you add those API routes. 92 00:04:48,000 --> 00:04:51,000 Now definitely try it on your own first. 93 00:04:51,000 --> 00:04:53,000 In the next course lectures, 94 00:04:53,000 --> 00:04:57,000 we're going to add those features together step-by-step 95 00:04:57,000 --> 00:05:00,000 and therefore of course also have a look at those lectures 96 00:05:00,000 --> 00:05:04,000 once you've tried it on your own to see how I solved it 97 00:05:04,000 --> 00:05:07,000 and to compare your solution to mine 98 00:05:07,000 --> 00:05:09,000 and maybe improve or fix your solution 99 00:05:09,000 --> 00:05:11,000 if you got stuck somewhere. 100 00:05:11,000 --> 00:05:13,000 And with that, let's dive in.