React, Redux & Firebase App Tutorial #20 - Project Details Data

Key Takeaways

all right they're my friends so we're now successfully outputting the correct data from fire store right here now what I'd like to do is hook it up so that when you click on one of these it takes you to the project details page for that project and shows the contents of that project so how are we going to do that well these things right here these are output inside the project list components so let's head on over to that first of all I've already opened it and this is where we output the project summary for each project now this thing here when the user clicks on one of these project summaries which is one of these things then I want that user to go to the project details page so we need to surround this in a link tag so first of all let's import that link tag so import link from react router DOM and then we can surround this thing with a link tag right here all right so let's copy the closing tag and put it at the end okay so now we need to link this to somewhere and where is it going to link to well if we go back to the APS where we set up our routes we can see that when we want to see a project details page we go to forward slash project and then fold slash the AG D of that project that we want to view so we're going to link to forward slash project like so and then forward slash and then we need the AG D so let's concatenate that on outside the string concatenate project dots ID so remember we have access to the project and on that we have a unique ID and that ID is gonna be this thing right here you see this that we can get via project ID so let us now view this in a browser I'm gonna save that and if we go over to the app and if we click on one of these then we can see that ID right here okay so the content is still dummy content we're just outputting some lorem ipsum but we now have the ID that we need so now let's go over to the project details components so we can figure out how to actually display this document over here so in project details this is where we need to do that now the first thing we need to is actually connect this to firebase but we also want to connect it to our redox state as well so we need those two higher-order components like we did in the last video we need connect and also firestore connect and we need to compose those things together so I'm going to import all of those things right now so first of all import connect this will connect our component to the read up state this is from react - Redux the next thing I want to import is going to be firestore Connect and this is going to be from react Redux firebase and then finally let's import compose because we need to compose those two together and that is from the Redux library okay so let's sort this out down here first of all we need to compose some stuff together then we need to surround our project details okay so the different higher art of components that we want to compose together are going to be connect and firestore connect so first of all let's do connect we'll say connect and this is going to take in the map state - props function now we don't have that defined yet so let's do it we'll say Const map state - props which is equal to an arrow function we take in the states inside this and then inside the function we can return an object remember this object represents what we want to attach to our props we'll fill this in shortly so we've done our connect how you write a component the next one we need to do is the firestore Connect so underneath that will do firestore Connect and inside here we pass in the rate of objects we just want one object and that is going to be the collection projects because we're still listening to the project's collection right here we're still after a project remember a single project so then now let's sort this thing else because now the project is being synced with our state and we have access to that projects collection now on the state via the firestore object much like we saw in the last tutorial so now in here we want to get that single individual project from the project's collection so how are we going to do that well remember we can get the ID of the project that we want like this props don't match the parameter ID that's from the router information so let's also do that down inside this function so we want to say Const ID is equal so props don't match that params the ID but we have a problem here we don't get access to props automatically inside this map state two props but we do pass it in as a second parameter I'm going to call it own props and we can use old props there so this is the props of the component right before we attach anything else to it so we're saying okay we'll get the props dot mark params ID so that's getting us the wrap parameter Idina so we have that so then what we can say is Const projects is equal to the state dot firestore it's on that fire store object remember dot data we have that data property and then dot projects so just to show you that we have this what I'm going to do is console.log the state so show you where I got this from so save that and let's view this in a browser and I'll go to the console and we can see down here we have the fire store then we have the data then we have the projects okay so I said state dot file store data the projects that gets was the projects so this data right here okay now we want the individual project so let's say Const project is then equal to projects question mark so we do an eternal operator here we're making sure that we actually have projects and if that's true then we want projects and then in square brackets the ID so this project right here this thing is an object right and it contains these different properties and the property names is the ID so we're saying okay find me the project on the project's object with that ID and we're putting it inside this constant now okay so now we're returning over here a project property on the props and that's going to be equal to the project that we just grabbed right here does that make sense cool now we need a value for if this is not true if we don't have any project and that would be not okay so only return this if we actually have some projects in the collection okay so let's now try it logging out the props over here so I'm gonna get rid of this stuff so we don't log out the state and this time I'm going to console dot log props and save that so if we save it and view it in a browser then we should see the props over here and now we have if we go down a single project and we can see the author first name the author ID the last name the content the creator etc so now what we could do is output this data inside this component over here so let's do that instead of this let's output the project ID so let's first of all use a bit of destructor it I'm going to get rid of these and I'm going to say Const project is equal to props so I'm just getting the project property from the props right I'm restoring it inside that variable now that constant then I want to check if we actually have a project if we don't have a family project we don't want to output the the project details so I'm going to say if project and then open up these curly braces now this is where we want to return some JSX if we have that project so I'm going to grab all of this thing right here and I'm going to paste it inside here so let's just make that a bit neater I think that's right okay so now we're outputting this if we have a project and what we can do is output the project title so let me uh put that there project title and that will output the title then we want the content instead of all this stuff over here so let's get rid of that and output the project content like so and then we can also output the first and last name so I'm gonna get rid of this and I'm gonna say project dot author first name and then I'm gonna also output project dot author last name like so so without putting both of those there we'll keep the date as is for now we'll come back to this later when we want to format it correctly but for now let's use that template for if we have a project now the else case if we don't have a project we also want to return something so let's take this return statement pop it in there and then in here we'll say a div and we'll say container and this will also be Center to centrally align the text and then inside we'll just do a P tag which says loading project so this will appear when project does not exist yet okay because it might take some time to actually sync that data so when it doesn't exist it's going to show this when it does exist it's gonna update and it's gonna show this stuff all right so let's save that of you this in a browser and take a look and you see we get an error okay so let's have a look what that is and that is stupidly because probably yeah we did not return this JSX over here we need to return it we can't just put it inside an if statement we need to return it so let's scoot that in now and that should now work so fingers crossed let's view this in a browser and now we can see this thing right here but if we refresh then we should see loading project quickly because we didn't have a project then but then when it gets it we see it in the browser awesome so that is now working