1 00:00:02,000 --> 00:00:03,000 Now with all that done 2 00:00:03,000 --> 00:00:06,000 there's one last thing I wanna implement 3 00:00:06,000 --> 00:00:09,000 one last feature and that is that I can click 4 00:00:09,000 --> 00:00:12,000 on one of these posts here and if I do that 5 00:00:12,000 --> 00:00:14,000 it simply opens as an overlay. 6 00:00:14,000 --> 00:00:16,000 Just as new post but with the details 7 00:00:16,000 --> 00:00:18,000 of that post which I clicked. 8 00:00:19,000 --> 00:00:23,000 To make that happen we must add a new route first of all. 9 00:00:23,000 --> 00:00:26,000 And that should be a route nested into this post route 10 00:00:26,000 --> 00:00:29,000 since I want to have that same overlay effect 11 00:00:29,000 --> 00:00:31,000 as I do for a create post. 12 00:00:31,000 --> 00:00:33,000 So I'll add a new route definition here. 13 00:00:33,000 --> 00:00:36,000 And now the question is what should be the path 14 00:00:36,000 --> 00:00:40,000 and the path in the end should be slash 15 00:00:40,000 --> 00:00:43,000 and then the idea of the post 16 00:00:43,000 --> 00:00:45,000 for which I wanna load the details. 17 00:00:45,000 --> 00:00:47,000 And that's really important. 18 00:00:47,000 --> 00:00:51,000 I need to have that idea included in the path 19 00:00:51,000 --> 00:00:53,000 so that once the route becomes active 20 00:00:53,000 --> 00:00:54,000 I can take a look at the path, 21 00:00:54,000 --> 00:00:57,000 get the idea off the post for which I 22 00:00:57,000 --> 00:00:59,000 wanna load the details from there 23 00:00:59,000 --> 00:01:01,000 and then load those details from the backend 24 00:01:01,000 --> 00:01:03,000 and display them on the screen. 25 00:01:04,000 --> 00:01:06,000 Therefore we actually have different 26 00:01:06,000 --> 00:01:08,000 values for this path here. 27 00:01:08,000 --> 00:01:11,000 For one post it could be this ID 28 00:01:11,000 --> 00:01:13,000 and for another post it would be this ID. 29 00:01:14,000 --> 00:01:16,000 Of course we can't register all these routes here 30 00:01:16,000 --> 00:01:18,000 because we don't know in advance how many IDs 31 00:01:18,000 --> 00:01:21,000 we'll have and what the concrete values will be. 32 00:01:22,000 --> 00:01:25,000 Instead we add a placeholder by adding a colon here. 33 00:01:25,000 --> 00:01:29,000 And then any name of our choice like ID or Post ID 34 00:01:29,000 --> 00:01:30,000 that's up to you. 35 00:01:30,000 --> 00:01:31,000 I'll pick just ID. 36 00:01:32,000 --> 00:01:35,000 We can also add a slash here to make this an absolute path 37 00:01:35,000 --> 00:01:38,000 or omit the slash to make it a relative path 38 00:01:38,000 --> 00:01:42,000 simply appended after the path of the parent route 39 00:01:42,000 --> 00:01:44,000 we could have done the same thing for create post. 40 00:01:44,000 --> 00:01:46,000 That's up to you. 41 00:01:46,000 --> 00:01:48,000 Here I'll stick to absolute paths but that's not required. 42 00:01:50,000 --> 00:01:52,000 So that's how we set up a dynamic route 43 00:01:52,000 --> 00:01:55,000 as it's called with a dynamic path parameter. 44 00:01:56,000 --> 00:01:59,000 Now we also need a new component that should be 45 00:01:59,000 --> 00:02:02,000 rendered when this route becomes active. 46 00:02:02,000 --> 00:02:05,000 And for that attached you find the post details component 47 00:02:05,000 --> 00:02:08,000 with its JSX file and its module CSS file. 48 00:02:09,000 --> 00:02:12,000 Now this component here renders simply some 49 00:02:12,000 --> 00:02:15,000 details about the post which was loaded 50 00:02:15,000 --> 00:02:18,000 here included in a model and also with some fallback content 51 00:02:18,000 --> 00:02:23,000 if no post was found for the ID that was provided. 52 00:02:23,000 --> 00:02:26,000 And I'm using use loader data to get hold of the post. 53 00:02:26,000 --> 00:02:29,000 So I'm expecting to use a loader for loading the post 54 00:02:29,000 --> 00:02:33,000 for that route here when it becomes active. 55 00:02:33,000 --> 00:02:36,000 So we'll add that loader function in just a second. 56 00:02:36,000 --> 00:02:41,000 As a first step I instead wanna simply import this post 57 00:02:41,000 --> 00:02:44,000 details component from routes post details 58 00:02:45,000 --> 00:02:48,000 and then assign it here as an element 59 00:02:48,000 --> 00:02:50,000 post details like this. 60 00:02:52,000 --> 00:02:55,000 With that it's this component the post details component 61 00:02:55,000 --> 00:02:58,000 that will be rendered on the screen 62 00:02:58,000 --> 00:03:02,000 if we visit slash and then any post ID. 63 00:03:02,000 --> 00:03:04,000 However as mentioned of course here 64 00:03:04,000 --> 00:03:07,000 we need some loader data because I'm expecting 65 00:03:07,000 --> 00:03:11,000 to get my post data with help of a loader 66 00:03:11,000 --> 00:03:15,000 and they offer all export an async function 67 00:03:15,000 --> 00:03:17,000 called loader here in this newly 68 00:03:17,000 --> 00:03:19,000 added post details component. 69 00:03:20,000 --> 00:03:24,000 And back in main JSX we can also import 70 00:03:24,000 --> 00:03:27,000 this loader and assign an alias 71 00:03:27,000 --> 00:03:29,000 and that is why we use aliases by the way. 72 00:03:29,000 --> 00:03:32,000 Otherwise we would have two loader functions here 73 00:03:32,000 --> 00:03:35,000 and that would be a name clash that is not allowed. 74 00:03:35,000 --> 00:03:37,000 So therefore here I also assign in alias 75 00:03:37,000 --> 00:03:41,000 and name us post details loader for example 76 00:03:42,000 --> 00:03:45,000 and assign this to the loader property 77 00:03:45,000 --> 00:03:47,000 of this route definition down there. 78 00:03:49,000 --> 00:03:51,000 So with that we also got a loader here. 79 00:03:51,000 --> 00:03:55,000 And now in that loader of the post details component. 80 00:03:55,000 --> 00:04:00,000 I wanna send a request to this backend route here 81 00:04:00,000 --> 00:04:02,000 where I also have such a placeholder 82 00:04:02,000 --> 00:04:06,000 but that is express JS has nothing to do with React router 83 00:04:06,000 --> 00:04:08,000 it's just a common way of solving 84 00:04:08,000 --> 00:04:10,000 such dynamic path segments. 85 00:04:10,000 --> 00:04:12,000 But in the end we need to send a request 86 00:04:12,000 --> 00:04:15,000 to our backend domain slash posts 87 00:04:15,000 --> 00:04:19,000 and then slash the idea of the post which we want to fetch. 88 00:04:19,000 --> 00:04:23,000 And therefore here I'll again use the fetch function 89 00:04:23,000 --> 00:04:27,000 sent my request to HTTP local host 80 80 slash posts 90 00:04:27,000 --> 00:04:31,000 and then slash plus the ID 91 00:04:31,000 --> 00:04:35,000 of the post for which this route was activated. 92 00:04:35,000 --> 00:04:37,000 Now of course that will be different IDs 93 00:04:37,000 --> 00:04:41,000 so we need a way of getting the actual ID that was loaded 94 00:04:41,000 --> 00:04:44,000 for this exact time where this route was activated. 95 00:04:44,000 --> 00:04:47,000 And we can get that from a data object 96 00:04:47,000 --> 00:04:49,000 that's passed to loader. 97 00:04:49,000 --> 00:04:51,000 Just as action receives an object which 98 00:04:51,000 --> 00:04:53,000 for example includes a request property 99 00:04:53,000 --> 00:04:56,000 with details about that request object 100 00:04:56,000 --> 00:04:59,000 that was generated by a React router. 101 00:04:59,000 --> 00:05:02,000 The loader also receives an object 102 00:05:02,000 --> 00:05:04,000 which also it would've a request object 103 00:05:04,000 --> 00:05:07,000 but which more importantly has a Params object. 104 00:05:08,000 --> 00:05:12,000 This by the way also exists for action functions. 105 00:05:12,000 --> 00:05:14,000 And this Params object simply allows us 106 00:05:14,000 --> 00:05:18,000 to access the ID for this route here. 107 00:05:18,000 --> 00:05:22,000 And here I'm using dot ID because I chose ID 108 00:05:22,000 --> 00:05:25,000 as a placeholder here in the route definition. 109 00:05:25,000 --> 00:05:27,000 If you chose something different here 110 00:05:27,000 --> 00:05:31,000 like Post ID you would have to use that same identifier 111 00:05:31,000 --> 00:05:32,000 here like Post ID. 112 00:05:34,000 --> 00:05:36,000 This will give you the actual post ID that's 113 00:05:36,000 --> 00:05:40,000 included in the URL when this route is visited. 114 00:05:40,000 --> 00:05:43,000 And the will send such a request to the backend 115 00:05:43,000 --> 00:05:45,000 to fetch fetched details for that post. 116 00:05:46,000 --> 00:05:50,000 Now here we can await that to get our response. 117 00:05:50,000 --> 00:05:52,000 We can then get our response data 118 00:05:52,000 --> 00:05:56,000 by awaiting response dot Json. 119 00:05:56,000 --> 00:05:59,000 As we're doing it for fetching all the posts 120 00:05:59,000 --> 00:06:01,000 it's essentially the same code. 121 00:06:02,000 --> 00:06:07,000 And then here I simply wanna return rest data dot post 122 00:06:08,000 --> 00:06:11,000 dot post because my backend sends back an object 123 00:06:11,000 --> 00:06:15,000 with the post key that contains the post that was fetched. 124 00:06:15,000 --> 00:06:17,000 Or under find if no post was found 125 00:06:17,000 --> 00:06:20,000 but I handled that use case here in my component. 126 00:06:22,000 --> 00:06:24,000 So therefore now we're returning the single post here 127 00:06:24,000 --> 00:06:26,000 we're getting access to it here 128 00:06:26,000 --> 00:06:29,000 with use loader data in post details 129 00:06:29,000 --> 00:06:34,000 and we have registered this loader for this details route. 130 00:06:34,000 --> 00:06:35,000 Now with that all added 131 00:06:35,000 --> 00:06:39,000 we also must make sure that we can reach this route. 132 00:06:39,000 --> 00:06:43,000 And to achieve this I'll go back to my posts list component 133 00:06:43,000 --> 00:06:46,000 where I render my posts and therefore to the post component 134 00:06:46,000 --> 00:06:49,000 where I have the actual post. 135 00:06:49,000 --> 00:06:52,000 And here I wanna wrap that with a link. 136 00:06:52,000 --> 00:06:55,000 So I'll import the link component again 137 00:06:55,000 --> 00:06:57,000 from react-router-dom 138 00:06:58,000 --> 00:07:02,000 add it here and wrap the content here with that link. 139 00:07:02,000 --> 00:07:04,000 And then set the to path here 140 00:07:04,000 --> 00:07:07,000 to the ID to which I wanna navigate. 141 00:07:07,000 --> 00:07:09,000 Now this again should be dynamic because 142 00:07:09,000 --> 00:07:11,000 different posts have different ideas. 143 00:07:11,000 --> 00:07:13,000 Hence I expect to get the idea of 144 00:07:13,000 --> 00:07:16,000 my different posts as prop values here 145 00:07:16,000 --> 00:07:19,000 just as author and body are different for different posts. 146 00:07:19,000 --> 00:07:22,000 And then I set this to value here 147 00:07:22,000 --> 00:07:25,000 to a dynamic value which is near my ID 148 00:07:25,000 --> 00:07:28,000 generating a relative path to that ID. 149 00:07:28,000 --> 00:07:31,000 So it's simply appended after the currently active path. 150 00:07:32,000 --> 00:07:35,000 That should give us a link that leads to 151 00:07:35,000 --> 00:07:37,000 a post with a specific ID 152 00:07:37,000 --> 00:07:40,000 and to make sure it's styled properly 153 00:07:40,000 --> 00:07:43,000 I'll go to post module CSS and add a 154 00:07:43,000 --> 00:07:47,000 short new style here maybe below the post 155 00:07:47,000 --> 00:07:50,000 exact position doesn't matter where I'll target 156 00:07:50,000 --> 00:07:52,000 the anchor tech that's rendered by the link component 157 00:07:52,000 --> 00:07:55,000 and set text decoration to none. 158 00:07:56,000 --> 00:07:58,000 With that we just have to make sure that the 159 00:07:58,000 --> 00:08:01,000 value for the ID is passed to post. 160 00:08:01,000 --> 00:08:03,000 So in posts list where I render my posts 161 00:08:03,000 --> 00:08:05,000 I'm now also setting the ID prop 162 00:08:05,000 --> 00:08:10,000 and I set it to post dot ID because my posts now have IDs 163 00:08:10,000 --> 00:08:12,000 since they're coming from the backend 164 00:08:12,000 --> 00:08:13,000 and there an ID is added. 165 00:08:14,000 --> 00:08:17,000 We could also use that ID for the keynote by the way 166 00:08:17,000 --> 00:08:20,000 since it's a better unique identification criteria 167 00:08:20,000 --> 00:08:22,000 than the body. 168 00:08:22,000 --> 00:08:24,000 But we have to set the ID prop here on post 169 00:08:24,000 --> 00:08:27,000 so that there it can be used for the link. 170 00:08:27,000 --> 00:08:30,000 And with all that these items are now clickable 171 00:08:30,000 --> 00:08:34,000 and if we do click them we view the details about a post 172 00:08:34,000 --> 00:08:36,000 and we can click the backdrop to close this. 173 00:08:36,000 --> 00:08:38,000 So that's working as it should.