React Infinite Scroll Challenge | Scotch.io

Key Takeaways

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so it's the weekend I wanted to do something kind of light so I was looking around with different sites to get some ideas and scotch IO which is a site that then I go to pretty often for written tutorials they have some good video ones as well but they also do these code challenges and this one is an infinite scroll unsplash gallery challenge where basically you need to create an image gallery using the unsplash api which is an image sharing service or image providing service they give you these really high quality free stock images and they have an in-depth API so we need to connect to it and as we scroll down once we hit a certain point we need to make another request to the server to bring in some more images so it's basically a never-ending scroll it's a way to add basically pagination to your site or to your application and it doesn't have to be unsplash photos this could be absolutely anything however we're going to change the the goals a little bit so basically the way that they're they're asking to do it is to make the request directly from react or from your front-end we're gonna actually create a server a node server using the unsplash j/s library which will allow us to put in our access key because we have to register an app and so on and you don't really want to put that stuff in the front end so we'll do that and then we can actually fetch photos like this so we'll be able to do unsplash Toto's list photos and then we'll serve the JSON and then in our react app we'll connect to our back-end we'll get those photos and we'll add the infinite scroll of that okay so it's gonna be a little more in-depth and they give you some hints here so if you're using react use the react infinite scroll component which I haven't used before this but it looks pretty cool pretty easy to use and let's see we have to create a new unsplash app to obtain an api key and then the solution as far as Scotch Co goes will be posted on Wednesday February 20th okay if you want to come back and check it out now if you want to kind of pause the video and try it yourself go ahead and do that and then you can kind of see what I did after but we're gonna go ahead and get started and first thing I'm gonna do is just create a register an app with unsplash so this is unsplash.com slash developers and you have to create an account I'm already logged in as you can see and I'm gonna go oops I'm gonna go to your apps and then new application okay so we'll just check all the boxes here and accept and then let's call this infinite scroll challenge and we'll just say I don't know react image gallery so now if we go down here you see we have two things you have an access key and a secret key and like I said when you have these API keys you don't want to put them on your client side so that people can just view the source and and see your API key so we're gonna have a node server like said we're gonna use unsplash j/s on the backend as well so I think that the first step we should take is is that creating our server so let's jump in I just have a folder called unsplash infinite scroll and let's go ahead and generate a package jason with NPM and net - why and you will have to have a little bit of experience with nodejs if you don't I do have a node.js crash course that I created about two weeks ago if you want to check that out and then I also do have an express crash course because we will be using Express to create our endpoint all right so let's install the dependency so npm install its installed Bres unsplash - Jas now unsplash Jas has a few dependencies that we need to install such as Babel register and then it also needs node fetch that's what it uses to basically make the request - to the unsplash api and i'm also going to install universal config - config just so we can have you know universal configuration variables and then I also want to install concurrently and this will allow us to run both the node server and the react front-end dev server at the same time with this with one command all right so we're gonna learn quite a bit inst in this little tutorial so let's install that stuff it should get added to our package Jason and then just one more thing I want to look I need to have to update and PM let me do that real quick so one more thing I want to install is the dev dependency is node Mon which will just whoops I need to do sudo which will just constantly watch our server alright so NPM is now updated now let's do NPM install - upper case D node mine and that should be good for as far as the the nodejs goes alright so now we'll do is create a folder called server dot j s alright and let's also create a folder called config and then in config I'm gonna create a file called server Jas so this is our config file now this is where we want to put like our our application ID our secret our an secret that stuff also the callback so we're going to just module dot exports so that this is accessible elsewhere and let's do application underscore ID okay and I'm gonna set this to process dot e NV dot application ID which will look for what what is that process dot Ian v dot application ID so it'll first look to see if there's a global variable with it or we're gonna just paste in the ID which I'm gonna get right here it's actually the access key alright so we want to paste that in next thing we want is the secret I can spell oh right okay so for the secret let's do process dot E and V dot secrets or and then we want to paste in our secret we're on the backend so it's ok if you're to deploy this you do want to setup global variables on your server but let's go ahead and just grab secret key and I'll paste that in next thing we want is the callback URL so we'll set that to process dots and V dot callback URL or and we're just gonna put our local address in here so it's gonna be the front end so localhost port 3000 we're gonna run the server on 5,000 the node server and then react will run on 3000 all right so we'll save that and let's go into our server j/s and in order for universe what is it unsplash js2 work we need to set the global dot fetch to node fetch so let's say node - fetch okay so let's bring in universal config require a universal - config it just allows us to include our config parameters in a more elegant way and then let's bring in unsplash we want to do uppercase u unsplash because we actually need to instantiate an object from this and let's set this to require and we want to require unsplash and then we just want to do dot default because there's multiple exports so we want the default and then at the same time we also want something called - jason which handles actually you know giving us the jason from the request so let's say - Jason and then the last thing we want to bring in is Express okay so we want to require Express all right now let's go ahead and instantiate unsplash so we're gonna say we want a new unsplash object and this takes in all of our parameters all of our config so first is application ID and we're gonna set it since we're using Universal config we can say config get and then whatever value we want such as application ID okay next thing we want is the secrets so config dot get and we're gonna get secret and then callback URL config gets callback underscore URL alright so now that we have this unsplash object we can use it to make requests to the API so we want to bring an Express so that we can create an endpoint okay so let's do app dot get so make a get request to let's do slash API slash photos okay so in our react app this is the endpoint that we want to hit let's put our request and response and then what I want to do is take unsplash and it has a method or a property called photos which has a method called list photos okay so we want to hit that and that takes in basically a starting point we want to start at one and let's get 30 photos all right now the way that that node fetch works is just like the regular fetch API we're going to do dot then and basically turn it to Jason that's where this comes in and then we do another dot then okay and then we get our jason or get our data and then let's just do a response dot jason and pass in that day okay and that should give us the images now down here we just want to listen app dot listen I'm just going to create a variable to hold our port and we want to set that to process dot E and V dot port in case there's a global variable or port 5,000 on our local machine okay so in here let's pass in port and let's just do an arrow and let's do a console log with some back ticks and we'll say server started on ports oops port and that's it save that and now we should be able to query this API and get this stuff now we need to create a couple NPM scripts so let's go into our package JSON file and we're gonna have first of all just a standard start script script that's gonna run node server and then let's do server which is going to run node Mon so node lon server let's do clients so this will run react which we haven't set up yet and remember the react dev server is NPM start so we want to do NPM start however we want to prefix with client which will go into the client folder and run NPM start and then for dev we want both to run so this is where it concurrently comes in so we say concurrently and the way that we format this is gonna be a back slash double quote and then the first command which is NPM run server and then we want to end this with slash double quote and then we want to do another slash double quote and then NPM run client okay slash double quote and then end it off with a double quote so this will run both of these at the same time with one command so let's save this and for now we're just dealing with the server so I'm just going to npm run server all right looks like we have an error cannot find module unsplash let's see oh I'm sorry it's unsplash - J s here - ok let's try that well it's running good ok so I'm gonna actually use postman to get rid of that to test this out so we want to make a get request to HTTP localhost for five thousand slash API slash photos and there we go so we get what we get here is an array of 30 photos or 30 objects that have everything to do with the photos they have an ID they have the date they have the the width the color the description all the different URLs for different sizes basically links categories a lot of different info all the user info of the person that uploaded the image so it's a really in-depth API there's there's like authentication where you can add photos from your app and stuff like that so it's it's really something to look into for creating more in-depth applications but now at least we know we can get these photos so now we can start to work on the front end so let's go back and we can close those up and now what I'm gonna do is just stop that server and I'm gonna I'm going to create a react app so I'm just going to use npx here so that I can just take create react app and just use it without installing it globally and I'm gonna put it I'm going to put react inside of a folder called client okay so let's run that and if we go back to the challenge page here at scotch do we hit code they basically give you some starting HTML because we're going to just kind of make it look like this it's not gonna look that great but I'm just gonna use this HTML and CSS as far as the JavaScript they just put a bunch of variables in here like the API root count access key and end point and typically you don't want to really you know put your access key on the client side like this at least in like a production app but in yeah we're not going to have to do that because our access key is on the back end but yeah let's go back and now we want to CD into client okay we want to be in our react app and I just want to install a couple things we want Axios so that we can actually make a request to our back-end if you want to use the fetch API that's fine as well we also want the react infinite scroll component which I forget exactly what it's called C or is it right here so this right here react infinite scroll components so we'll just go ahead and grab that paste that in and let's install those all right and while that's going on let's do a little cleanup so inside client let's go to source and let's delete some of this stuff so we don't need apt SJS we don't need index CSS logo SVG or the serviceworker so I'm going to get rid of all that stuff and then in the index JSI am gonna get rid of the import of the index CSS get rid of the serviceworker import and the serviceworker unregister down here okay and save that and then in the app j/s let's just clear out this logo import and then clear out everything within this div so this whole header area here and for now let's just put an h1 and just say app all right so we'll go ahead and save that and then in our public index HTML folder I'm gonna clean this up a little bit and let's change the title here to I don't know unsplash gallery and if we look at the code pen that I was talking about if we go to settings and we look at CSS they're using Balma and this Carter one font so I'm just gonna grab both of those as well so let's copy that and then let's just put a link in here that goes to Balma which is a CSS framework and then let's also grab the font the Carter one font and put that right here okay we'll save it alright so now let's run our server now it we can run both the front end and the back end with NPN run dev because we use concurrently whoops we need to CD dot dot back into the server and then NPM run dev so that whole run node on 5000 and react on 3000 okay so there we go we see our app now the next thing that I want to do is let's grab from the code pen the HTML so this div with the idea of route I'm just gonna grab this whole thing right here and let's go into our app J s and just put that right here in the return and just get rid of this comment right here so this whole area and then this div with the class of images this is where we want to put our output and I'm going to create a whole new component for our images so we'll replace that in a little bit but let's save that and also an app CSS I'm just going to get rid of everything save that actually I think there's a little bit of CSS here so we'll just grab this so we just basically have a container class of images so when we create our images component we'll wrap it in a class of images and then give each one a class of single photo just to kind of go along with this challenge so in app CSS we'll go ahead and paste that stuff in alright so now let's go back to our application and it should look like this alright and I'm just gonna open up my chrome tools here and we've got to do class name so the HTML that I pasted it in I'm just going to grab all the classes here so I'm just doing ctrl D and I'm gonna do class name and then let's create our images components so we want to go into our source client source I'm going to create a folder all the components and inside here let's create a file called images dot jas okay so this is going to be a class based component I have the es7 react redux extension installed so i can just do RCE like that and it'll give me a class we need to bring in a couple things up here so let's do import Axios because we want to make a request to our back-end and let's also bring in our infinite scroll so I'm gonna say import infinite scroll from infinite or react infinite scroll component all right now in our state we don't need to put like you know the access key and stuff like that that's already in the backend oh one you know one thing I wanted to do is create a proxy so that we don't have to make a request to you know localhost 5,000 I just want to be able to do slash API slash photos so I'm just gonna save this for a second and then go to the react so the client package dot Jason and create a proxy here so let's say proxy and let's set that to HTTP localhost port 5000 and save now once you create a proxy you have to restart the server so let's do that okay go back to images oops what happened there we go alright so we'll go back to images and in our state of course we need an array to hold all the images that we get let's set a count of 30 and let's say start we want to start at 1 okay because remember in our back end if we open up our server it's gonna take in basically a starting point and then the number of photos now each scroll when we get down to the bottom we then we basically want to start at 31 okay and we get down we would then want to start it what 61 all right so we because we don't want to get the same we don't want to make the same exact request so this is actually gonna take in some query params and we're gonna replace these hard-coded values and I guess yeah I guess we should do that now so let's replace this one with request dot query dot stars so that will just grab from the URL the start parameter so let me just show you if we do like you know slash API slash photos and we do starts equals one this right here is gonna grab this value okay so we want start we also want the count so I'm going to replace this with request dot query dot count so let's save that and then let's go back and that should be all we need in our state I believe so in let's see and the component did mount is that we're gonna make the initial request so let's say component did mount which is a lifecycle method and I'm gonna pull from the state let's pull the count and the start from this dot state and then let's take Axios and let's make a get request to slash API slash photos and we want to put in a count parameter and actually want to use back ticks here not quotes that way we can put variables right in so we want to put in our count from the state that we just pulled out and then we also want the start which will set to the start that we pulled from the state all right now this will give us a promise back so we want to do a dot then let's do res and then we just want to set the state so this dot set state and what we want to set is the images ok so images now we want to fill with the response data that comes back all right so now as far as this return let's just do let's just say hello I just want a console log and make sure that we cannot we're actually putting that stuff in the state so let's say this dot state alright we'll save that now we have to bring this images component into our app j/s so let's go up here and let's import images from I want to go into components slash images and this div with the class name of images I'm going to just completely replace this with images ok so yeah well go ahead and save that let's see let's go back to our app and now if we look down here nevermind this will fix that so you can see that we're getting our images ok we're fetching these from the back end so let's see the next thing we want to do is it's out put these on the screen because right now it just says hello so in our images component in the render we're going to excuse me let's let's create a class name of images because remember we have that that style in our apps app dot CSS and then inside here we want to put the images but we want to wrap it in the infinite scroll so this is where we use that so we're gonna say infinite scroll and let's see this is going to take in a bunch of props are a bunch of attributes so first one is going to be data length okay and we're gonna set this to the length of the images and the state so let's this dot state dot images dot length okay and then we want to say next so basically when we reach the end what do we want to do we want to call another method that I'm gonna call fetch images we haven't created that yet but we will so we'll call fetch images we're gonna say has more and I'm just gonna set that to true and then we also want to set a loader which if you want to include like a spinner graphic or something you could do that I'm just gonna put in an h4 h4 and we'll just say loading dot dot dot okay and then inside here is where we basically map through the images and output the image okay so let's go ahead and put in our curly braces so we can use an expression and we're gonna say this dot state dot images dot map okay so we basically want to loop through we're gonna say for each one we'll call it image and then let's just return we're gonna have another component for the single image so let's just do image and we'll pass in a key oops key needs to be done unique so we'll take the image dot ID now the way that the random images work is they do repeat images sometimes so we'll probably get the warning saying you know you already have a list item with this key because they will repeat but that's I mean that's fine so that we also want to pass in obviously the image that we get back all right so let's save that and let's create the image component so new file image dot J s alright and this is gonna be very very simple so we'll just do a functional component and it's gonna take in as props it's gonna take in the image so I'm just going to use the structuring here we're just going to say oops I'm gonna pass in image and then in the return let's see we're just gonna return an image and let's see let's give it I remember the class name of single photo we're gonna use that we're just going by the standards of the challenge so single photo and then source is gonna be image okay we're passing in the image which is gonna be an object and then it has URLs and then thumb is what I want that'll give us the actual URL okay and then we'll just we'll just leave the alt blank okay so that's it we'll save that good just double check this okay so now what we need to do is just create that fetch images which is going to be pretty similar to this except we just want to change we want to change the start value or else it's just gonna always be one so let's just copy everything we put in here and let's say fetch images let's make this an arrow okay and then I'm gonna paste all that stuff in except I just want to up the start so I'm gonna say this start set state and let's say for the start value we want to take this dot state dot start and we want to plus the count okay so basically like I said it's gonna start at one but then when we make the next request it'll be at 31 then it will be at whatever 61 and so on alright oops I forgot curly braces so there we go so it's just gonna make the same request except it's gonna change this so that we get different images back alright but we're gonna still set the images to the data so let's save that okay we have to bring in the image component which I didn't do okay and that's embedded right here good so let's try it let's go back to the browser cannot read property images of undefined hmm let's check that out Oh what is this set state all right let's try that okay good so let's go ahead and try this out so we have our initial request and response which comes from the component did mount now as soon as I get down it should load again so we get loading and we're not getting anything let's see what's going on here no errors that's weird hmm all right so let's see this dot fetch images is this even running see if that's even running okay so it is running I must have messed something up here so we're pulling the count oh I just all I did was reset the images we need to add them on so instead of just setting images to res dot data let's do this dot state dot images and then let's can catch as dot data okay so we're not replacing we're adding on all right that should work hopefully let's try it out so let's let's reload for good luck and go down and there we go so now we can just keep going okay so it's just a never-ending scroll and it goes so fast we don't even see the loading okay but it's constantly making requests in fact if I open up my network and you'll see we will get this key to children with the same key because they will repeat images but let's go here and if we go to xhr you can see that whoops right here let's just restart so you can see how this works okay so the initial request starts at one and then once we hit once we get past 30 it should make another request and now it's at 31 keep going now it's at 61 now it's at 91 so you can see how this is working okay it's key it keeps making requests once we reach the bottom so that's it guys we've completed the challenge and we've done a little extra by actually creating a node back-end so hopefully enjoyed this hopefully it made sense this infinite scroll component is really cool and you can again use this in your projects and however way you want just you know you pass in the method just show you real quick so you just pass in for next whatever the method you want to you know keep fetching so if you instead of pagination if you want you can use this which is pretty simple but that's it guys hopefully you enjoy this if you did please leave a like and I'll see you in the next video hey guys I want to thank you for watching my content I genuinely appreciate it and if you'd like to step up your support for this channel and get a few perks like for you to me courses consider becoming a patron even for a dollar per month that shows your support and pushes me to keep making free content and coming up with projects and ideas for you guys so visit patreon.com slash travesty media or click the link in the description below