We Should Watch - Update 2

[Music] it's time for another building in public project update we're talking about the we should watch application which is a application to make groups be a part of those groups add movies TV shows that you want to watch with friends family significant others mainly for my girlfriend and I to keep track of movies outside of a Google Document so we're going to be looking at today some front end stuff last time was more back end focused uh we'll start with these little movie card buttons that we got here movie poster buttons where this was going to have a title but now it won't it's mainly just going to be the image we click on the image and we get this modal pop-up forgivable lines I was messing around with CSS and trying to figure out all my positioning but we have this modal pop-up where you can add to list or go to a Details page and we see the information here so let's start with that you can see over here right now I've got our poster button component and the preview card component inside of that as a child so if we look at the way this is working out I'm populating this right now I've just got a a bogus movie info object here up at the top this is the information we're going to receive on an initial API call we'll do an actual API call later but this is the kind of stuff we're going to get back and this is what this looks like so here's our button we click the button we get the pop-up I don't like the way this looks right now I'll probably mess around with designs that I don't even have a color scheme yet but we've got our image we've got our title we've got a year we've got a rating we map through some genres which actually come through as an array of numbers I'll show how I change that in a minute we've got a description of the movie that we actually chopped down which we'll look at too and we've got some buttons that are going to do some stuff in the future so if we go let's first look at the preview card here and here's our component where actually if you notice typescript is yelling at me here um primarily because this is expecting more props that I'm passing in and the reason for that is the movie database handles movies and TV shows differently let's actually look at my types that I've got over here under my interface file I've got interface media which is all of the properties that the TV shows and movie objects they have in common it's all this stuff at least for our initial call I'll probably have to change some of this later and then I've got a movie which extends media and TV which extends media and that has the the individual properties that they don't share but like title and name those are the same thing I don't know why they handled them differently but whatever we're dealing with it so if we look at preview card here's a bunch of the props that we're passing in by spreading that object and we expect either movie or TV right so typescript knows I don't have both title and name here but we're handling that right now we're just using this to get the poster the image release year we are using a ternary operator to say if we have release date then use that and trim it down to just the year otherwise use first air date media title same thing if we have title ternary operator use that otherwise use name rating actually comes through as like 7.345 or something like that just dropping that down to a single decimal point at the tenths place and then description um we're actually calling this function down here description overview where we pass in the overview which is a string so we call it text and we split it into an array if that array has less than 20 elements to it less than 20 words we're just going to return the original string back otherwise we're going to chop it down and return it with an ellipsis at the end nothing too crazy just to stop this thing from getting gigantic and then we have our genres which genres we actually declared here so I can just do this here and just say oh just um just pop genres right here right rather than having all this stuff in my return We map through each of the genres they're all they're each a number so I've got this fine genre function that's actually in a different utility file over here find genre where here are all the different genres numbers and names that we can have we receive a name we pass it in here we just return the we pass the number and we return the the name back nothing too crazy right we're just pulling it from an object and returning back our match so that's preview card nothing too wild and what we really want to look at which is more fun let's go look at the poster button here's our poster Button getting the same kind of thing right from typescript because we expect movie or TV this time we also have props with children because we do have a child between our opening and closing brackets there we have child visible up front which is set to false that's going to tell us if we have this child is visible or not right based on a button click we do the same thing with media title ternary operator here's our handle click we'll look at that in just a second I declare the modal up top here which is just a div that we're giving a role as backdrop and all this div is it's just a fixed position full screen container flexbox container that just centers whatever element we put as a child element and here's the children that we're passing in that child so we see that gets centered and then if children will look at the if not children in a little bit if children we return a button here is our ternary operator where we say if child is visible return the modal if not nothing right and I've actually got in the handle click which we call if we click that button I've got this if statement up top this conditional to check to see if target.alt is media title because we're going to click on this button or this this image really and you're either going to see if you're clicking on that image or we're clicking on the backdrop etarget.roll to dismiss that modal and the reason I have that set up is because we've got this these two buttons here they're going to do something in the future they don't do anything right now but if I didn't have that conditional clicking on either one of these buttons would bubble that action up right to its parent element and we would then dismiss that modal and call that on click so we avoid that now this other one Eric why do we have this if there's no children well the other thing we want to look at today is this kind of landing page that has trending movies trending shows and trending actors um this I envisioned as like a sliding element right which just this whole thing was supposed to be just a phone application in the beginning uh we'll see if I extend this out to full screen views and stuff but I wanted that sliding motion it feels nice it looks nice it's a very cool feature so I was using swiper JS to handle that for me and let's look at those trending so we'll just uncomment this and reload our page we can see we get a quick loading State here nothing too fancy I'll handle that differently later I think and we get our images in a slide and that's super cool right this this actor component it's very similar to the button we just looked at it's called actor link it expects a person type that I had and it just is a link back out to Media type ID which if we hover you can see Slash person slash ID nothing too fancy there but this image now is also the same thing if you hover you can see Slash TV slash ID slash movie slash ID so if we go back to our poster button that's out of the conditional there right if there's no children passed in here then instead of returning this button that does some stuff I'm just returning a link really you can see here in index right I've got this one that has a child to it but if we go look at trending down here no children right and I'll talk about the reason for that in a minute but let's actually look at the trending file so here we've got props and we've typed out where we're expecting movie or person or TV and you can see that as well on index here we've got trending media type movie TV person we return some different stuff in each case we have data that we're setting data for this particular trending this instance of trending which is going to be either an array of movie or TV or person type or nothing we have a loading State that's set to True initially and we've got these break points here which is just an object of different breakpoints it's what swiper.js uses so we can have this thing look nice when we do some resizing versus it just having one static look to it we make a use effect call we call this get data function in get data it's an async function where we pass in the media type which we looked at before is either movie person or TV that's our prop and we passed this back where they will make an axios get call to my API Movie Database trending where we pass the params media type media type we get whatever data we set the data we set loading to false console logging stuff is testing but actually in I don't remember if I went over them specifically in the back end video but I had three individual files to get this trending data one for movie One for people and one for TV shows the only difference really was this URL and that media type here so rather than having one file for each which is insane I'm now just passing the params back and using that as a variable to set what URL we're going to call out to so we call it to the appropriate URL with my uh my API access key which is being pulled from an environment file right now and we pass that data back up So within trending now if well you can see within trending we have if we're loading is true then we return this floating state which again is just temporary I guess um this if there's no data found media type person here's our swiper container and each we just map through the array of objects that we get back from the API call and for each instance of that each object in that array we put swipe or slide which is how swiper handles all this stuff and we put the actor link if it's not person then we return the same kind of thing but instead we're mapping through either an array of movie data or TV data so we're just passing in poster button which now brings us back to whether we have a child or not on that poster button component let's look together at this swiper container and we can see here we've got transform translate 3D and as I slide this back and forth that number changes right that's how swiper is handling this movement with transform translate what I learned is that anytime you use transform translate 3D any child element that uses a fixed positioning is basically broken rather than this fixed positioning working the way you would expect it to work it actually aligns itself with that parent component so let's actually take a look at what I mean here so now rather than this poster button just being on its own let's actually put in my preview card here we go so now I've got the actual child here so we're returning a different element here right we're turning the button and if I click now you can see that background besides it getting cut off by the other container it's aligning itself with the parent element which is not what I wanted I took a look through a lot of things online to try to find a solution to this and I couldn't find anything from what I can tell this is just the agreed upon behavior of how this is supposed to work so I don't think there's a way around it so rather than try to deal with it and struggle and get frustrated I'm just making those things kind of anytime I have a slight a swiping component it's just going to link right out to the full media detail page which I haven't set up yet but will soon I don't know uh this is working fairly well so far this has been fun to put together nothing too crazy yet so far but I'm happy with better component composition in general and avoiding having to do a lot of prop Drilling and so far it's just a fun little passion project thank you for tuning in and I'll see you next time

Channel: EricWinkDev

Views: 52

Keywords:

Id: JKhAkguAp8Y

Length: 13min 1sec (781 seconds)

Published: Mon Apr 24 2023