Transcript for:
Creating a Post Show Page in React

hello everyone today we're going to continue with where we left off last time and that is going to be with adding some more of the functionality so right now we just have the post index page let's go ahead and let's create the uh post show page in our react app and then for our description we'll just copy the title again not a good practice but for the sake of a video nobody cares what I type in here and let's go ahead and let's say create a branch we'll create this Branch for us click create Branch copy this we can move it over and then we will once again do a git checkout for our rails app here and then we can go ahead and start our rail server with a rails us again we come over to our V app or react app and continue on with our lives so for doing the show page we're gonna have to do a little bit of magic here because out of the box react is a single page application so we have to pretend that we have a way to Route here to do our routing we're going to have two if I move this over hopefully we're going to have to set up a react router so in our app.jsx here instead of just doing this return I want to actually wrap all of this inside of a router component and then to do this we are going to have to import something which is going to be a tool called uh react router Dom and then that's going to require us to import the browser router as just the word router then let's do a npmi for our react Dash router Dash Dom so that'll go ahead and install this dependency for us we can do an npm run Dev afterwards and we should hopefully be fine but this is going to be upset with us because of this router tag right here because I put the router in the wrong place because JavaScript is hard uh except this is pretty much just standard HTML stuff that I'm complaining about right now uh but okay we now have this let's go ahead and let's take a look at how we want to use this I think a good place to start would be to maybe do like a quick little nav bar so we can do this nav bar above uh our post list it's going to throw in error because we don't have a nav bar yet so let's go ahead and let's import a nav bar just wherever this is going to come from from our components and our navbar now we could put this in features uh but I thought I'd also throw something into components you have an example of using each so let's do a net oops a nav bar Dot jsx and then in our navbar.jsx this might actually be a good time to if you're a little bit familiar with react just see if you can figure out how to do this effectively what I want is I want a post list link which is like our root path uh and then next to that I want to have a link to create new post which is like our post form right post form something like that see if you can figure out how to do that if you've used react before and then we'll go ahead and we'll take a look at this it's not going to be pretty uh because I'm not a Styler but hopefully you'll forgive me so to do this we're going to have to import react a lot of the importing react we're mostly just doing for uh like our just testing later so it doesn't complain at us but we'll import react and then we're also going to import link from our react router down we'll then do a function nav bar and this link and a lot of the react routing is going to change depending on the version you're using if you're working at a company you might not be using a version I think six in which case some of the stuff we'll use like navigate and I think it's like the history API and other stuff and after version six some of this changes to just using links so that's ultimately going to depend on what you're working with but okay we're going to do a return and then in our return here we're gonna have a nav because it's a nav bar and then we'll start with a link to our posts list which again yeah uh Visual Studio code is figuring out right here because of copilot it sees this comment and it pretty much knows what I'm going for here so it's like all right our root path is our post list and then we need a link to the post Slash new if we want to go there or we can just go to Slash new whatever you want to do uh maybe I'll leave you the Slash new here just because and then in the middle we want to just have a pipe similar to this one so we'll just use some braces to preserve the spacing inside the string we can go ahead and save this now this isn't going to work right now because we once again need to export default our navbar to get this to actually work and now if we do this you'll see we have two links here I click on the new it'll take us to Slash new but nothing will change because it doesn't Trigger or re-render yet we can also go to post list which is what our root path is going to be so right now the only thing this really does is changes our URL bar up here but I think that's okay for now let's come over to our app.jsx and let's see if we can actually make this do something so to do something instead of rendering the post list here we're going to just render a app routes and then we can get rid of this post list for now the reason why we're rendering the app routes is because we can create another component here we can say import app routes from uh dot slash you go with that slash routes you go with that slash components whatever you want to do we'll just name it app routes and then in our components we can right click new file call this app routes.jsx and then in our app routes.jsx we can set this up a bit so once again we're going to import react from react we can then import a couple of Route things which will be our route and our routes plural and this this is going to be coming from react router Dom then we're going to have to import whatever components we want so in this case we have our post list for right now I'll just go with that we'll do a function for our app routes and then down here we can once again export our app routes as needed and then in here we can do a return and then in this return we will return some routes and then for this first route we'll just do a route with a path of Slash and the element that we pass in will be our post list so now when we go to slash as the root of our application this will take us to uh this post list component of course right now this can't be dot slash features it actually needs to be dot dot slash features because we're inside of the components directory we can go ahead oops we can go ahead and do this we'll save this and now we can see we have our component back here but we can do another one right we can do a route for the path equal to like Slash new I think we said and then our element can just be right like an H1 that just says new post form so if we click on new post you'll just see the H1 that appears that says new post form for now we can go back to the post list and this is all of our posts and anytime we want to add a new route you just add it in here and this will work just fine you would do something similar if you had like authentication here where you'd have to wrap the routes a little bit differently uh but it's ultimately vaguely resemble resemble this but okay let's go ahead instead of doing a new here let's do one more which will be a oops a route with a path equal to the posts slash colon ID for our post show page and for this we'll do an element equal to and we'll call this I think I call this post details so this needs oops this needs to be like this and then like this and get rid of the space so this is going to be our post details component whenever we go to the route for the Post ID right so our post details we're going to have to import that it's going to look similar to this post list but instead we're going to call this post details it's going to come from our features as well so features posts post details so let's go ahead and let's implement this and now this is where you can sort of see where once you get this this logic set up a bit it gets a little bit easier because we just copy and paste a new route and then we just come in here and we say in our posts right click new file post uh post details I think we called it uh Dot jsx and then in our post details we're going to do a couple things again first of all as usual we're going to function our post details oops or post details and then we're going to export default our post details and then at the top here we need to once again do a import for our uh you state and then react comma like that and then uh we're gonna have links for our params and stuff so we're gonna have to use params use navigate and a link don't know how many of those we're going to be using and then for some of this other stuff I'm gonna have to refactor it as we go uh because I already have it set up in a service and we kind of want to do this a bit differently so for our post we're going to say post set post and we'll use a use state so we can change this for our ID we'll say we want to use params because we want to get the ID from our parameter so we can actually just use this thing called use params from react router Dom which will just go ahead and get this for us then uh down here we're going to have to use effect again right and then for this one let's do this and we want this to change based on the ID so we put the ID in the array there okay now for this we're going to say this needs to have a fetch Uh current post which will be async and come down here and close this if we need to oops it's just like that and then for this we want to do a try and then we want to do a const response equals a weight Fetch and this is going to be a fetch to the uh what was it it's going to be the one sec uh API like this let's say dollar sign API URL slash and then the ID right which means we do need to import that API URL from dot dot slash dot dot slash constants then after we get this uh this response hopefully we can do a check if our response is okay otherwise throw an error if a response is okay we want to say await the response.json which is going to look very similar to our um it's going to look similar to our posts uh index page get request right but instead we're waiting for the response for a specific post and then we can just say all right if this works get the response.json and then call set post on that singular response.json which will give us access to it you can then after we do this because we have a try right here right after we do the try we can do a catch and then we can just console log if something went wrong right now this is going to be our entire fetch current post right here afterwards we want to call this function which will get rid of that error because it's no longer not being used and then the other thing we want to do here is uh and I think actually we we might not be using navigate I think navigate is used for deletion so we'll worry about that in a little bit and then down here we can do a return or our div and then we can close this div uh we want to do a return for a H2 which will be our post.t title again just like that and then we could do a P tag for our post dot body post dot body and then if we want to you could do like your edit link here or you could do a link to your root path if you want to or you could have your delete button here but for now let's just leave it like this so now if we come over to what would be like slash post slash one I guess I don't know if we currently have a post one uh but if we come over to our app here we can hopefully see so now let's go ahead and let's try to go to like slash post slash I don't remember what numbers we had let's try to go 10. right now 10 isn't going to work it's going to tell us I cannot read property null from our title so our set post right here our use effect to fetch the current post isn't currently working so why do you think that is maybe pause this for a second see if you can diagnose what this error is then we can come back to it it's actually I mean it's it's just as obvious as you think it is uh but maybe just take a look at it and see what you can come up with okay so the reason why is we're not checking if the post is null so if the post post is currently null maybe you want to say like you're you're returning loading instead uh because you'll see it shows up here but initially it is going through here it does this await this happens it gets down here before it finishes like before it does the check to the API and gets the response and all of that so it doesn't always exist and when it doesn't exist you just very quickly want to return loading so maybe like in your post controller here if we come up to our app our controllers our API V1 post controller if we go to the show page let's just do like a I don't know let's sleep for three seconds for example right and then we can come over here or sorry over here when we refresh the page you'll see loading appears for about three plus some change seconds and then it changes so if there's ever a delay in your application it's actually going to get to that point where it tries to return this post before it gets the response from the API so in that case you're going to want to do that check just see if it exists and then if it doesn't leave it as a loading this is also where you might have like a state that you're using that you then end up setting so this is where the loading and the set error came from earlier where you would want to change this to loading you would then want to set the loading to false after you do this so like set loading false right here and then right here you would want to do not a check for if if not post you might want to do something that just says if loading is true return loading for example that ultimately depends on how you want to set this up I'm just going to leave it like this for now because I think this is a bit clearer for anyone looking at this that we're just checking if the post doesn't exist yet but okay that's going to do it for our post show page next time we'll take a look at editing or deleting a post or creating it whatever I feel like doing but for now that's going to do it so let's go ahead and let's Commit This code so let me exit out of here and then let's do a git status and check what we've changed we change the package.json makes sense our app.jsx our components and our post details cool git add dot get commit Dash M add routing and post show page which makes sense because our Branch was the create the post show page and we needed routing to do that and now we have the post show page so we get push let's push this up we can come over to our our GitHub page again we can go to the code we'll see this PR is ready to be created for this Branch so let's compare and create pull requests we'll say this addresses uh number three I think we called it number three create the post show page create the pull request and come down here if you ever wanted to see what was changed just click on files change and you can do a review of your PR and see all of the silly little mistakes you did and then go ahead and change them push up those changes and it'll automatically update here and then you can go ahead and merge the pull request and this should also close our issue for us so we can see now we have two closed issues so yeah that's gonna do it for this video thank you so much for watching and hopefully I will see you in the next one