‫So let's now load movie details
‫about individual movies.
‫So essentially whenever this movie details component here
‫is going to mount, we will want to fetch the movie
‫corresponding to the selected ID.
‫So basically loading the currently selected movie.
‫So since we want to do that each time
‫that this component mounts,
‫that means that we will want a use effect.
‫So our effect function.
‫And then as I just said
‫we want this to happen each time the component renders.
‫And so that's simply the empty dependency array.
‫Now, okay, and now we want an async function.
‫And so well that's actually right async.
‫So async function
‫and let's call this one,
‫"Get movie details", okay?
‫And now let's actually come here to our API documentation.
‫And so now here what we want to do is to search by ID.
‫So here the parameter is now this I
‫which will receive exactly this type of IMDB ID
‫that we have been working with.
‫So let's actually grab the fetch from here
‫because it's very similar.
‫So basically just this,
‫and let's place it right here.
‫And so now this is why we hatch the key in a separate value
‫because here we of course need that key again.
‫Now, here it is I and then it is here, the selected ID.
‫Now, all right now you see that VS code.
‫And yes, lin are already complaining here
‫but we will for now not give them what they want basically.
‫So we first want to see what's going to happen.
‫So then let's grab the data here from the response
‫and of course await this data.
‫And then for now, let's just log it to the console, okay?
‫And this should already be working at this point
‫so let's reload.
‫And nothing happens, of course.
‫I mean VS code is even telling me about it by saying
‫that I didn't call the function there.
‫So let's try that again.
‫And immediately, actually it loaded my movie here.
‫So we see that this time we actually get all this data
‫about the movie, which again,
‫we didn't get simply here
‫when we searched for the movies, okay?
‫But now we want to get some of this data here
‫into our visible user interface.
‫So in a visible part of the component.
‫And so how do we do that?
‫Well, as always, we need a new piece of state.
‫So movie and set movie,
‫and here the default will now be an empty object
‫because an object is exactly
‫what we got back here from this API call.
‫And so now instead of logging that to the console
‫let's just do set movie to the data.
‫All right.
‫And so now we should be ready to use
‫that data here in our JSX.
‫So actually let's destructure now the object
‫because I really don't like these variable names here
‫all uppercase.
‫I have no idea why they did it this way.
‫So we will basically now the structure data
‫out of this movie.
‫So the title.
‫We will call title in our own code.
‫Then we will want the year,
‫which is simply called year.
‫We will want the poster,
‫we want the runtime,
‫we want the IMDB rating as well.
‫So this one is actually correct.
‫We want the plot,
‫the released date,
‫so released like this.
‫The actors array,
‫the director,
‫and finally also the genre of the movie.
‫Now, okay, so we have all these variables
‫which you see we haven't used yet.
‫Let's just use them here in
‫our rendering logic just so I can see you.
‫What's going to happen?
‫So maybe the title and the year.
‫And so let's reload.
‫Let's select this one.
‫And then you see that first we get undefined,
‫undefined and then after a second
‫we get the indeed the title and the year.
‫So why is that?
‫Well, here in the very beginning
‫of course when the component is initially mounted
‫then the movie is still this empty object here.
‫And so then title and year read
‫from that empty object are simply undefined.
‫So then this effect here starts and it gets the movie
‫and will then store it into our movie state.
‫And so then the component is rerendered.
‫And then of course this object is no longer empty.
‫And so then the rendering logic here will read all
‫of this data out of the object.
‫And so then we successfully log that
‫to the console over here all but anyway
‫let's now actually use this right in our JSX here.
‫So let's start with a header element.
‫So not a component, but really an element.
‫And in there we have an image,
‫which is the poster and then the alt image
‫or the alt tech actually.
‫So poster of the movie.
‫So this is a template literal
‫so it works a bit differently.
‫So what's the problem here now?
‫Ah, of course I didn't close the image.
‫Next we have a div with the class of details overview.
‫And so envious code, we can actually just type dot
‫and then the class name,
‫then hit tab and well that should actually
‫then create a div with that class.
‫So that has always worked for some reason.
‫Now that's not working.
‫So let's just do it manually then.
‫So H two for the title.
‫And here we are typing a lot of JSX.
‫And if you don't want to do that
‫then you can just get the code here
‫from the final files of this lecture.
‫So here we want to run time.
‫All right, released is not defined.
‫Re oh, well I didn't type that correctly.
‫Now that's already starting to look like something there.
‫Yeah, let's keep going here.
‫Next up we have the genre and then also the rating.
‫So here we're going to have like a star emoji.
‫And then here basically just the IMDB rating.
‫That's actually right, that there IMDB rating.
‫Yeah, that's looking really nice.
‫So that's the header part here.
‫And so now let's do a section element like this.
‫So a paragraph.
‫And in there I want some emphasized text,
‫which is going to be the movie plot.
‫Then staring the actors.
‫So this is just a string
‫And then just directed by the director.
‫All right, and there we go.
‫Nice. We still have the selected ID here
‫which we now no longer need.
‫All right, and now there's just one thing missing.
‫So if you come here,
‫you see that we have this rating component
‫and does this look familiar to you?
‫Well, we spent like an hour or more building that
‫so hopefully this is still familiar to you.
‫And so let's actually now grab
‫that star rating component that we built earlier.
‫So let's write star rating.
‫And I thought that it would actually get
‫automatically imported
‫but let's then do it manually.
‫So I think it should be right here in the same folder.
‫Yeah, so import star rating from, and then star rating.
‫Okay, now here we need the dot for the relative file.
‫And there it is.
‫Now it is a bit too big.
‫And also we want 10 stars, not just five.
‫So on IMDB, if you know the site.
‫then you know that their movies are rated from one to 10.
‫That's also why we have here the 8.8.
‫So here we can now use that API basically
‫that we built for this component.
‫So that's max rating to 10.
‫And then the size of 24, let's say.
‫So that's half the size by default I think.
‫And then let's also place this
‫into a div vertical class name of rating.
‫Okay, beautiful.
‫Now of course for now,
‫this rating is not being stored anyway or anywhere.
‫And so if we reload now and then of course it is gone.
‫But for now,
‫the component here is working pretty nice, isn't it?
‫But watch what happens
‫if I now try to select another movie here.
‫So let's say this one.
‫So nothing happened right now.
‫If I close this and then open up the second one here
‫for example, then you see that it's working fine.
‫But again, if I now click on another one,
‫then we got the same problem our component here
‫is not updating.
‫So why do you think that is?
‫What might be happening here?
‫Well, we told our effect here to load the movie
‫data whenever the component first mounts, right?
‫However, when we click here on one of these other movies
‫this component is actually not mount again.
‫So the initial render will not happen again
‫because the component is already mounted.
‫And the reason for that is the one that we learned
‫in the previous section, it is because this component here
‫so the movie detail component is rendered
‫in exactly the same place in a component tree.
‫And so as we click here on another movie
‫simply another prop will be passed into the component
‫but the component itself will not be destroyed.
‫It will stay in the component tree.
‫And so the only thing that is changing as we click on one
‫of the other movies is the ID prop that is being passed in.
‫So the selected ID prop
‫that's the only thing that is changing.
‫And so therefore, right now
‫this effect here will not run again because again,
‫it is only running when the component mounts
‫which really only happens once.
‫Now of course, if I close this and then go to another one
‫then the component has been unmounted first
‫and then it is mounting again.
‫And so therefore then it is going to work.
‫So how do we solve this?
‫Well, the answer lies again
‫right here in the dependency array.
‫So here, if we now pass in the selected ID
‫which is the prop that changes,
‫then let's see what happens.
‫So you saw that now it did actually work.
‫And so the reason is that now as the selected ID
‫prop changes, then the effect will indeed be executed again
‫because remember, this dependency array is a little bit like
‫an event listener that is listening
‫for one of the dependencies to change.
‫And so now as we click on another movie
‫this prop here will change.
‫And so yeah,
‫our effect is then executed again,
‫which gives us exactly the functionality
‫that we were looking for.
‫So that's really great and really powerful
‫and it's therefore also really important to
‫understand how exactly this dependency array works.
‫And now just one final thing
‫which is that watch what happens when I click
‫on one of the other movies actually here
‫well probably you cannot really see it because
‫you can't really see when I click,
‫but there is a visible delay between the click
‫and something changing here.
‫And so of course that's because in the background
‫the movie needs to be fetched.
‫So just like before,
‫what we want now is a quick loading indicator
‫just to let the user know that something is happening.
‫And so let's do that exactly as before.
‫So we create a new is loading state
‫and then set is loading and we start with faults.
‫And then immediately before we start fetching
‫we set is loading to true.
‫And as soon as it is done,
‫we set it back to faults.
‫So just as simple as this.
‫And by the way, in this time here
‫we are not handling errors
‫but you could do that just like we did in the beginning.
‫So if you want,
‫you can just go ahead and copy that basically.
‫But here, in order to save some time
‫I will just ignore the possibility of there being an error.
‫But anyway, let's now use that loading state.
‫And so let's do it right here.
‫So inside the details,
‫so we always want to return this div here
‫but if we are still loading,
‫so it's loading.
‫Then we want to now use again our loader components.
‫So a reusable component but if not,
‫then we want the header and the section.
‫And immediately you see the problem once again,
‫which is that this piece of JSX
‫has two root elements basically.
‫So it's the header and dissection,
‫which is not possible.
‫And so let's close that.
‫And actually here we need the JavaScript mode.
‫And yeah,
‫so you see the loading indicator there is very short
‫but of course if our network was just a little bit slower
‫then it makes a lot of sense
‫to have that loading indicator right there.
‫Great, so this was another very important part
‫of our application, and we did it pretty fast
‫because some parts were just the repetition of before
‫and we also wrote a lot of JSX here.
‫But yeah, of course the main part is here
‫the effect and understanding how the dependency array works.
‫So make sure to really get that.
‫And then let's move on
‫and actually make this rating here work
‫so that we can add a movie to our watch list.