How to build an eCommerce Website using React Redux, GraphQL, Firebase #12 – Search Results

welcome to the 12th video in this video series on building an ecommerce website using react redux graphql and firebase now in today's lesson we're going to be building our product page and as you can see here we'll be rendering out our products with a thumbnail a title price and an add to cart button now before we get started i just want to take this opportunity to encourage you to check out my official youtube channel which is youtube.com forward slash simpletut not only to watch my other videos but also to check out the official playlist for this series which i will be linking to in the description of this video and this is just a great way for you to find the other videos in this series but also get updates and find future videos that i will be posting and sharing in this playlist i also want to encourage you guys to check out the official github repository for this project at the end of each of the videos i'm creating prs and merging with this project on github so if you want to compare your code with mine or maybe you just want to clone the entire project i encourage you guys to do that of course you can check out our official website which will be which is simple.com and of course our facebook page which is facebook.com forward slash simpletot and of course you can use that to not only like and get content updates from us but also to get in touch once again i just like to encourage you guys to like comment and subscribe by the end of this tutorial we will have built our products page but we don't only want to allow users to scroll through our catalog we want to allow them to add products to their cart we want to allow them to search and sort different types of products now in this website we want to allow them to sort between women's and men's clothing or products in general and they'll be able to do that through the ui of the front end website the application now in preparation for this video i've gone into my admin and using the ui that we've built in previous tutorials of this series i've added products now in total i've added nine new products both for men and women i've added six men's products and three women's products and i've done that because within the front end i want to filter between those different types of products and be able to show you not only how it works but how we can write the logic to handle that now in this video i'm going to show you how to actually just simply render out the products and in the next video we're going to actually apply the logic to sort those products on the front end so we can finally make a start and what we want to do is first of all is just create our new page so to do that i'm going to come over to my text editor and i'm sure that by now you are very familiar with the application and the application architecture but if you are new to this series and you have any questions then feel free to revert back to any of the previous lessons in this series to familiarize yourself but what we need to do to create our new page is go into our pages directory we're going to create a new folder and we're going to call this search and we need to add an index.js file into this folder and we need to create our search page component this is going to be a functional component so all we need to import here is react we're going to import that from react itself and then we're going to actually create our component so as i said this is our search page so we're going to call it search and it's a functional component so all we're going to do here is return a a div which i'm going to apply a class name to of my search page and then we're going to export this of course and it is our search component now i'm going to put in some some dummy text here because i want to see that this is rendering in the browser but we need to actually create our route and as you know from previous lessons we do that in our app.js the first thing we need to do is import the component itself so i'm going to import my search page component here under my home page import and we're going to import that from pages slash search and we can come down i'm going to add this route under my my home page route and i'm going to just create that new route the path is going to be slash search the path can be anything that you want and then we're going to use the render prop to actually render our component within our page layout right so what we want to do here is of course we want to use the main layout but then we want to render our search page component so that's actually going to be enough for us to see that in the browser so let's come over to the browser and we're going to have to insert this into the url directly because we don't have a link in the navigation yet we're going to enter that and you can see that the pages appearing we have our dummy text so we know that it's working there's a bit of a margin issue but that's nothing that we can't address so more or less this is looking good so the next thing that we need to do is actually return to our text editor and we need to actually create the component that we will handle our our fetch to get the products from the back end of our application from firebase now the good thing is that this is going to be really easy because we've already written all of our sagas all of our code that will actually go out and get the the products from our firebase store so we need to do is call those same sagas to actually get what we need so what i'm going to do is i'm going to come over to my components folder and i'm going to create another new folder and this time i'm going to call it products and within products i'm going to have my index dot js file i'm also going to have my styles file so it's styles.sc s and within products this is going to of course be another functional component so i'm going to import react from react and then i'm going to have const products it's going to be functional component and we will return for now let's just return a div with a class name of products and then of course we want to export default products okay so the first thing that we need to do is actually fetch our products and then we need to destructure that from our redux store and map it in the component so to do that we need to import a couple of more things so the first thing is we need the use effect hook from react we're going to use this in a similar way to component did mount we're going to use it to dispatch our action of course that means we need to dispatch the action itself that we want to dispatch so we're going to import that from our redux folder products and then our products actions and of course the action is the fetch products start action but of course we'll need some things to handle that so in addition to those we'll need to import from react redux we need the use dispatch hook and we also need the use selector hook so we're going to use use dispatch to dispatch our action so to access dispatch we'll simply say const dispatch equal and call we use dispatch hook um and then that will give us action uh sorry access to dispatch we'll act we'll use that within our use effect hook which takes a function and an array we're going to pass an empty array because it has no dependencies and we never want this to rerun we only want to run this code when this component is initially mounted so all we're going to want to do is just call dispatch and pass it our fetch products start action so that's going to actually go out and fetch the data and update our redux store we're already handling that from the code that we wrote in a previous tutorial but what we now want to do is actually use this use selector hook to actually get hold of the data from our redux store so to do that we're going to need to write a map state function here we're going to read we're going to destructure from our redux store our products data and then what we'll do very simply is we're going to assign products we're going to assign products our products data and products now that we have this mapstate function we simply pass that to our use selector function and then we can access uh products from that and then we can uh return and run some checks so the first thing that we'll do is we'll obviously just add in a guard so i'm going to say array dot is array and we'll say we'll we'll pass products oops products so i just noticed actually that the name of our data that the name of our state which is products is the same name as our products component which is my bad i didn't notice that before so it was a slight oversight so what i'm going to do is i'm going to rename the component no harm done we're not actually using this anywhere i'm going to rename this to product results all right and i'm gonna just update the export and that just means that it's not gonna be the same anymore so i i think it can get a bit confusing if if we left that as as the same name so i think that our state and our component should definitely have a distinction between them in terms of the the actual name um of course we want to check that this is false also so if this is false then we want to return null but then we also want to have an additional guard here and we're going to check that our products dot length is a greater than uh it well we want to check if it's less than one if it's less than one we're going to return something a bit different and what we're going to do is we're going to return um basically this div but we'll have a message here so we'll just enter a maybe a p tag here and we'll just say something to the effect of no search results and then okay so now that we've fetched our products we're ready to render them out so within my products uh div tag here what i'm going to do is i'm going to map my products so i'll say products.map and then i'm going to get the product and the position and then we'll do an explicit return and we're simply going to have another div here for now but what we'll do is we will destructure some things from our product and the things we want to destructure will be our product thumbnail our product name and our product price and then we need to add another guard here right so we need to check for example that this is valid so one thing that we'll do here is we'll check that we have our product thumbnail so if we actually will check that we don't so we'll say product thumbnail if if we don't have it if we don't have our product name and we also need to validate our product price but zero can actually validate to to false but we actually have a value we have zero so what we want to do also here is we want to validate that that it's not null so to do that we'll say type of product price not equal to undefined and then all we'll do here is just return null if any of those are true so actually we want to say equals to undefined if it's equal to undefined it means it's null in which case we need to return null because we need to make sure that we have all of these three things okay so now that we've done that we're mapping over so we need to uh add in our key here because we're mapping and this is react and then we can simply render this out so for now i'm just going to render my product name so i'll do that here and underneath that i'll have my product price as well okay so this has given us something that we can see in the browser so let's go back over to the browser go to our search page again we don't have a link in the navigation so we'll need to insert that into the bar and you can see we are still seeing that dummy text so i forgot that we need to actually render the products component so now just keep in mind here that i've also renamed this to product results and i updated the export here but i didn't update the folder name so i'm going to also update the folder name here to product results update imports say no and then all we need to do is come over to our search component and import our product results component so we're going to import that from um our components folder and inside of this we have our product results component so then all i need to do is simply render this component and if i come back over to the browser you'll see that i'm now rendering all of that all of my products correctly now at the moment it doesn't look like much we're also not rendering out our thumbnail but it is now showing in the browser so the first thing we need to do is make this look a little bit nicer we can do that with a combination of html and css but mostly the more complicated logic has now been written so the first change that i want to make to uh this is that we also want to have um a heading here so i'm going to add in a page heading so i'll add in a h1 and i'm just going to add in here browse products let's save that come over to the browser you can see here that we have still got that margin issue which we can easily fix so we have our products class here i'm just going to apply a class here and we'll add in a margin here something like 20 pixels and bottom we'll say it's display block width of a hundred percent and a padding of zero and maybe 10 pixels right and left okay let's come back over and you can see that it's it's taking a bit more shape actually i'm going to remove the the padding i'm just going to set this to 0 pixels and you can see that this looks you know already a lot a lot nicer so the first thing that we want to do is we actually want to [Music] do a little refactor on our products component so at the moment what we're doing is we're mapping our products and then we're rendering them all all in this component and i think that this component is is getting a little bit too too big a little bit too complicated so within my product results folder i'm going to create another folder just call product and inside of this we need another index dot js file we're going to import react from from react and then again it's a functional component it's just going to be called product from sorry it's not an import and what we want to do is again we want to have an explicit return and we need to export default products and again for now i'm just going to have a class name here of product but then what we'll do is we're going to destructure some things from the props so at the moment as you can see here we have these three uh items here that we are currently rendering within our product so what i'm going to do is i'm now going to import at the top of this file going to import product from product and then what i'll do is rather than render the uh the actual items here within this component i'm just going to render my product but we need to pass it some something so i'm going to say const config product and then i'm going to pass this as a prop to the product component and all i'm going to pass is these three items right so we want to pass our product thumbnail our product name and our product price we're going to use this same god here we're actually going to use the same god within our product component so i'm just going to copy and paste that and of course we also want to ex destructure the same items from our props that this component receives and then we can build this out the same way so if i was to simply return here the product name for example this will work so i can save that and come back over to the browser and you'll see that now i'm just rendering the names but if i actually look and i use my dev tools i go into components you'll see that i'm rendering all of these product cards here right so these are all my product components for each of the different components here and you can see as well if i click in here you can see the the props that are being passed if i move between these items you can see the name is changing the image and the price are the same for all of these products as again these are just placeholder products for us as we develop this layout so what i also want to do is i want to have a three column layout so let's look at how we can build that so what i'm going to do is i'm just going to apply some basic css styling to this so what i'm going to do first of all is i'm going to render out a few different things so the first thing i want to do is render i want to render my my thumbnail right so we're going to say thumb and we're going to render our thumbnail so we'll say um we want to image tag with s with our source which is going to be our thumbnail and then we'll also add an alt alt tag here which will be our product name so that's our thumbnail and then we're gonna have let's let's add our details so within this we're gonna say we're going to have a class of details and we're going to have another unordered list with a few list items so here we're going to render within a p tag or maybe a span we're going to render a product name i'm then going to duplicate this and i'm going to render out my price so as you can see this is starting to take a bit more shape but if i look at this in the browser you'll see that the images are huge they're just kind of duplicated on the page it's it's not looking good so we need to clean this up with some css so that's going to be really easy to do we just need to come over to a product and again this is sas so i can use this tree structure here and i'm actually going to take it out of products i don't want to have this nested within products but what i'm going to do is i'm going to assign a percentage width here so if i look at this and i just pull up my calculator right let's let's actually talk about this so imagine i have a 12 column grid right a grid of 12 columns and i want a three column uh row so i would divide the total number of grid grid columns by the number of columns i want to have in my layout which is three column which gives me four i can then divide that by 12 which is the total number of columns and times that by 100 it gives me a percentage i'm going to take that percentage and apply that as a width i'm going to float this so i'll say float left and i'm also going to add a padding here something like 0 10 pixels i want to make sure that i have a margin and i'm going to assign a fixed height of something like maybe let's say for now 250 pixels so this is ram so i'll say 2 25 rams and then what i'll do is um if i come back over here i need to just fix that image so i have this thumbnail class which is here and i'm going to target that thumb um i'm just going to assign this as display block width of one hundred percent and then i need to target the actual image make sure that's display block that has a width of a hundred percent and a margin of zero and actually double thinking this i'm gonna increase the height here to around 550 pixels now i'm using rems so considering my root font size is 10 pixels i just divide that by 10 so if i wanted 550 i just do 5. 55.0 ram it gives me 550 pixels and also i want to have a bottom margin here so on the product in general i'm going to have a 20 pixel bottom margin and then what i can do is come back over to the browser and show you what this looks like so this looks pretty nice you can see that the images are there everything's kind of starting to take more shape but we also need to style the the details here so we have the price and we have the um we have the price and we have the product name so what i'm going to do is come back over to the browser and what we need to do is just beside the the actual price here we're going to add our currency symbol right which is for me it's pound for you it might be dollars if you wanted to get really advanced you could add a currency selector and actually have currency within the site but for this application we're just going to hard code this to be either g to be great british pound or us dollar for me it's going to be pound and then all we need to do is actually assign to this spans a class name right so for this it's going to be my headline or or name and the price is just going to be price so here we'll say price so within details so underneath my thumb class here i'm going to target details and again this is going to be display block width of 100 percent margin zero we don't want any padding either and then we'll target our unordered list and our list item make sure that we have zero margin and zero padding on that but then what we'll do is we'll target our list items we'll say list style type none and we want to make sure that this is also displayed block with a width of a hundred percent um and probably at a margin on the list items something to the effect of maybe 5 pixels so that would be 0.5 ram and then what we'll do is we'll target those classes so first of all we have name right so for name we want this to be a font size of something like maybe 30 pixels we want a line height of 1.2 and then we'll have a font weight of let's say 400 and we will um we need to add in also here uh text align left and i think that should be fine but then for our price so we'll we'll target price um what we'll do is we'll set the price font size to something like maybe 12 pixels so be 1.2 ram and the line height of this will be one because it will always be on the same line and again the font weight here should be 400 now let's check that in the browser and see what that looks like so it's not actually targeting it if i come back over to the browser ah it's because i've treated this as if it was a class on the list item it's not it's actually a span inside of the list item so we don't need the end and there you go it kind of looks what i want it's not quite right i don't think the sizes are right let me tweak that a little bit i think this should be smaller maybe 25 or maybe 20 i think maybe 22 pixels and i think i'll increase this to maybe 16. so that looks a lot better i think i like that a lot more i think we need a bit of space i think i might reduce the overall size so i think maybe i'll i'll increase i'll decrease the height of the product container maybe to 400 pixels and i think also we should have a bit of a margin um on our details i'm going to add that as just as padding here so i'm going to add something like 10 10 pixels on the top and bottom but not on the left and right and yeah that looks a lot better i think it should be something like i think we do need a bit more of a height though i think i think it should be 450 on the product yeah that looks a lot better that looks a lot better we have some extra padding around the outside if you kind of look at the products here you can see we have padding on each on the left and right side of each of these product cards which is is causing it to misalign with our heading here so what we can do is the wrapper here that we have so on products or product results we're going to wrap our product results here right so let's let's wrap this in another div let's add our product results on say class name products results and what i'll do is within my styles up here for products i'm going to have product results with a negative margin right of 10 pixels so we'll say minus 10 pixels come back over to the browser you'll see this now aligns perfectly with our heading which is what we want so this looks really nice we have our products but one thing that you'll notice is that they're not ordered and this is also true for our manage products page if i come back over to my admin you'll see that i've added products but we have women one men's one and i did add them in the correct order so what i'll do is i'll come over to my firebase store and as you can see from products we have this created date which was a new timestamp so what i can do is i can use this created date and actually update where we actually fetch products so this is just going to be a really small refactor but we're going to come back over to let's come over to redux products and our products helpers and this is our helper function that we use to fetch products so we're fetching from our firestore our products collection and what we're going to call is order by and we're just going to order by default the created date when we change it when we make that change if i come over now to manage products for example you'll see everything is now ordered so we have men's product one two three four and then likewise with women and any product that we add here let's do the same thing let's come over to our search page here and let's look at our products and you can see that they are now also ordered correctly but we are also rendering all the products we're not sorting them yet so you can see women's and men's are here on the same page they're not being sorted so we do need to add a little bit more to the ui and the logic to handle that but for now this is perfectly fine okay so things are looking pretty good right now and i am happy with it but i want to highlight one small problem and that is just with the height of these individual product cards so if i just show you what we've done here um if i come over to devtools if i select the one of these products here this is one of the product cards you'll see and you know that we've added this fixed height and we've done that for a couple of different reasons which i won't get into but the problem with assigning a height like that here is that as we scale responsibly the height will always remain the same right so these cards are always going to have the same height but things inside them like for example the image itself is scaling right because it's it's scaling because it's 100 width and the width of these cards is a percentage so it is scaling um but the actual height of the wrapper the actual card does not which is a bit of a problem now you could add in media queries at breakpoints to reduce the size of things but it's it's never really going to work that well but there is a solution to this and that is using css flexbox and it's actually really easy it's a really simple change to make and i'm going to show you how to use that so let's come back over here to our styles here and as you can see we have this fixed height we want to remove that height and rather than doing what we were doing here with floating left let's just remove that but we still want the percentage width that does not change what we're going to do instead is on product results we're going to add display flex and then we want to add flex wrap and wrap come back over to the browser is that these columns will now scale right so what this does is it looks at each of these rows which is determined by the width of them right so as you know i wanted a three column row which is what this has created right and what it does is it looks at the tallest item on the row the tallest column and it sets all of the [Music] columns on that row to be of an equal height so it will scale responsively and it will always be the same height as the tallest column on that row now the reason i sometimes avoid using css flex is because the support on legacy browsers i'm talking about ie 11 specifically is not that good and even in some versions of edge for example you will find issues with using things like css flex or css grid and you know certainly if you're if you're working in a large company using flex you will have to add in full backs and support for older legacy browsers so these are all considerations that you need to make my advice is use it sparingly and just really consider where you're using it and that doesn't mean don't use it but just make sure that you test on all the devices and all the browsers before you deploy to production if you are working on a large scale application and that matters to you but of course this is looks a lot nicer it's it's much better so more or less this is in a very good place so the final thing that we need to do here is we need to add in our add to add product to cart button so let's go ahead and work on that okay so the next thing that we need to do is add in our add to cart button this is going to be a button that we want to sit at the bottom of these cards and it's just going to say add to cart and we're actually going to program those those buttons in a later tutorial when we start working on our cart but we want to get the button in place in this tutorial so to do that let's come back over to our text editor and as you can see here in our components folder we have already created a button component in a earlier tutorial and this is very reusable we can use this because it allows us to pass other props and it's already styled which helps with consistency throughout the site so what we're going to do is within our product component here we're going to import our button component from the component itself so we'll go into our components folder we have our forms and our button component and then all we'll do is we will render that so we'll create another list item here and we'll just insert our button component right now what we want to do is we want to say add to cart and then we need to actually configure it right so we'll say here const config add to cart button and then we can pass any pop any props that we want so the first prop is going to be type and we're going to add type of button now we will need to configure this further in a later tutorial so we will return to this but for now that's really all we need to do now otherwise let's just come back over here to our results component and this looks pretty good i am happy with this but i do think we need a bit more of a margin here so what i'm going to do is i'm going to wrap this in a div tag so what i'll do is i'll just wrap this in a div and i'll add a class name of add to cart i think i oh i i wrote card i meant caught i did the same thing on the constant so we're going to need to fix that apologies and if you caught that well done okay let's come back over to the style sheet and again where we're looking let's do this what we want to do is just add a margin here of let's say 20 pixels come back over to the browser and it just spaces it out a little bit and i think that looks really nice so this looks really good um i think we need a bit more space here so i'm going to come back over here and i'm gonna add let's say something like 30 pixels here that just adds a bit of a space so i think that looks really nice and i'm really happy with that okay so the final thing that we want to do in this tutorial is add a link to this page in our navigation so to do that it's going to be really easy we already have the component all i need to do i'm just going to close these to make it a little easier for you to follow in our components folder we have our header we'll come into that and we have these call to actions which is our navigation and we have our logo here what i'm going to do is i'm going to insert a new navigation right so this is actually going to be our nav so i'm going to wrap this in a nav and i'm going to have my unordered list and my list item and we're going to have two links here right we have one for home and one for our search page what we're going to need to do is is actually import something else from react router dom so we'll import from react router dome we want to import our link component and then we can use it so all we have to do here is just insert our link right and what we actually want to do is just specify the to path which in this case is going to be forward slash search and then um we just have to add in the actual text so we'll just say search now i'm actually going to add another link here because i also want a link in the navigation to go home so it's just going to be forward slash and then what we can do is actually look at this in the browser ah okay so i'm getting a error because i already had imported link so i don't need to re-import that i made a small mistake there but as you can see it's not really looking like how i want it to look it's it's kind of broken the header so we're going to need to fix that so what we'll do is we'll come back over to our header css here and we'll need to make a small change so our call to action is positioned absolute and our logo is also absolute so what we're going to do is we're going to target our nav right and we want to set this to be display block width of 100 margin of zero and we'll also set the padding here to 0 as well we want to target the unordered list and the list item inside we want to make sure that the padding and the margin is 0 on that too but then we'll target the unordered list we'll set the list style type to none and we want to make sure that this is something like display inline block on the unordered list i'm going to set the text align to center and then what we'll do is we'll target the link itself inside of that and we want to make sure that we set the same styling here as we have on our call to actions so that's going to be a font size of 18 pixels and as you can see the rest as you can see here so let's just see what that looks like it looks pretty good actually um but it's we're not we're not centered uh vertically so to fix that what we'll do is we're going to set the height of the nav to 100 and we're going to set the height of our unordered list and list item to also be 100 percent um and then our line height we will set to 100 and a vertical align of middle okay so let's check that in the browser so it's still not vertically centered it let's just check that so i'm not sure why so all of this is 100 percent the height of the header is 6.5 rem so instead of setting this to 100 the line height to 100 what i'll do is i'll set that to 6.5 rem and that centers it right so that works so what we'll do is now just add a bit of space so on the list items i'm going to add another margin from the right and left something like 10 pixels and that looks good so we now have a link to search and we have a link to the home page and that brings us to the end of this video tutorial where i showed you how to create our front-end product page um now one thing i will mention here is that i have been talking to you guys about adding in that functionality to sort between the different categories that the men and women's products i will be showing you how to do that in the very next episode of this tutorial series i don't want to make this tutorial too long because i think it will be harder to follow and i think it would be worth its own dedicated tutorial but of course we now have the products rendering out on the page so we'll be able to focus entirely on adding in that sort functionality that does bring us to the end of this video tutorial so i just want to thank you once again for following i look forward to the next video and of course once again please like comment and subscribe

Channel: SimpleTut

Views: 4,619

Keywords: ecommerce, react, react redux, GraphQL, React Context API, Node, Node JS, redux, online store, stripe, stripe api, shopping card, paypal, firebase, react router, react router dom, routes, routing, Google Sign-In, Google Auth, Google Sign In Authentication, login, signin, react hooks, useEffect, useSelector, useDispatch, redux hooks, useState, redux saga, saga, user roles, admin backend, products, search, search results

Id: JzeRhFUDy7s

Length: 47min 50sec (2870 seconds)

Published: Sun Sep 06 2020