How to build an eCommerce Website using React Redux, GraphQL, Firebase #13 – Search Filters

welcome to the 13th video in this video series on building an ecommerce website using react redux graphql and firebase now in today's video we're going to be looking at search filters as you can see here this is our search page we have a filter here users can select different filters and we'll be able to filter products based on their selection before we get started i'd just like to take this opportunity to encourage you guys to visit my official youtube channel which is youtube.com forward slash simpletut not only to look at my other videos but i also have an official playlist for this series that you can use to not only find previous and future videos but to keep a reference of all the videos in this series and again i will be posting a link to this in the description of this video and of course i also want to encourage you guys to check out the official github repository for this project if you'd like to compare the code that i've written in these tutorials with that you have written yourself of course please do visit our official website which is simpletut.com but as always please like comment and subscribe in the last tutorial we worked on our search route this is a page we set up so that users could visit it and see all the products currently listed on our website now in this tutorial we want to set up filters which means that we'll have to review our url structure for our search page so that we can allow users to visit search slash for example men's and see only men's products or women's and see only women's products so to do that we need to head back over to our text editor and to our routes which are currently in our app.js file and we want to find that search route and we want to duplicate that entire route on the second route what we want to do is add in that url parameter so to do that i'll just add this as filter type and this just means that whatever value is currently in the url structure here we'll be able to get dynamically within our component and have access to that and i'll show you how to do that in a few moments now there is one problem here and that is that the way that react router works and the switch component is that whatever route matches first is what's going to get returned it will ignore all the other routes so for example here in this case because search will match here it will return this route but it won't even hit this route the problem is that as you can see we have slash search and slash search here both are the same and this is actually enough to return for both routes which means that even if the user has a filter type in the the url that they're currently visiting it would never actually hit this route because it would have matched search already so to avoid that on this first one i have to add the exact prop which means that this will only match if it is literally only slash search if the user has a filter type this will not match because this route does not expect a filter type okay so hopefully that makes sense and if not then hopefully it will as we continue through the tutorial and you see a few more areas of our code let's save those changes and move on so as you can see now if i come back over to the browser i can visit for example search women's and the search route matches and of course if we look at the code again the actual route itself is identical we've not made any changes we're not doing anything with the filter type right now so of course nothing will look any different the next thing that we need to do is work on our ui we need to create some ui components that users can use to filter different types of products so i'm going to set up a form select that users can use to toggle those so let's head back over to the code and i'm going to go into my components folder and as you know we have this product results component this is where we actually fetch and we dispatch our action to fetch the products and this is where we're going to have to render out our select form component now in an earlier video in the series we worked on some form components one of them was a form select component and we've used this already in a number of different places and we're going to use it again here so the first thing that we need to do is import this form select component into our product results component so let's go ahead and import that so i'll say import form select from the folder so it's in forms form select and i then want to render this out under my h1 but of course i need to configure it if i look at this component it expects a number of things we're going to want to pass these three props options a default value and a handle change event so to do that i'm going to create up here outside of my return statement i'm going to say const config config filters equals and objects and this is where i'll configure everything so the first thing will be my actual options this is going to be an array of objects it will have two keys a name and a value the first one will be show all and the value will be blank the second and i'll need to set up the name and value keys again but the options here are going to be men's and in the value it will be men's as well but it will be lowercase and then finally we want another one so again name and value keys but this one will be women's and again lowercase in the value key so those are our options but we also need to have some kind of handle change event so whenever a user for example selects a different option from this menu we want to uh actually capture that event and update and handle that in in some way so to do that i need to actually create that function so i'm going to create a new const called handle filter and this is going to be a function that takes an event and we're going to come back to actually coding this a little bit later but what we want to do first of all is actually pass that to our form select so it expects that as handle change so again come back down to where we configure filters we want to pass this into handle change which is very easy we just pass it our handle filter function and i'm not going to configure the default value of this select field yet but i am going to pass the config object to the form select so we can save those changes come back over to the browser and we can actually see what this is going to look like so you can kind of see how this works users will just be able to toggle between the different categories that we have configured so of course this isn't actually doing anything what we want to do here is actually push the user to a different route whenever they select another option on this menu so to do that we're going to have to come back over to our code and what we want to do is come back over to our handle filter function and we get the event and from the event we can extract the option that the user has selected so we can do that by actually destruct well we can actually just say that this is the uh the next filter and this will equal the event.target.value and then we can actually use something another hook from the react router dome library so i'm going to import that at the top so i'll say import from react router dom and what it is that we want to import is use history the use history hook and similarly to how we gained access to dispatch what i'm going to do is say const history equals use history and call that as a function what i can then do within my handle filter function is call history.push and i can push a new path so the new path is going to be slash search slash r next filter of course the way that we need to insert that is a little bit different when you say search and then pass in our next filter so let's save that and come back over to the browser and see what it does so if i now select for example men's you'll see that the route is pushed and i'm now on men's if i if i select women's i'm on women's if i go back to old i'm just on the basic search path so that's working perfectly but what we need to do is we need to dynamically get hold of whatever this filter type is in our url parameter here and that we'll be able to use um not only within the ui but to filter our products on on the back end so to do that we need to make use of another hook from react router dom which is use params right and again the way that this works is a little bit different to history right so we're going to call this use params again as a function but we'll be able to destructure whatever the filter type is so again if i come back over to app my app.js file we called this url param filter type and that's exactly the name that has been assigned to the value so i'm going to get the filter type and then again if i come back over here you'll see that it expects this default value so what i'll do is i'm going to pass that in as an option so the default value is going to be the value we get from the filter type and from the url params so the default value here is going to be filter type okay so that's pretty much all we need to do here for our form select if i come back over now to for example this page and if i was to visit this route you'll see men's i have men's if i'm on this basic route the default value is show all and again i can change this manually just using the component and and the ui so that's great and the ui is is now in place and everything is kind of working on the front end but now we need to look at this on the back end right we need to actually filter the products based on this url param or whatever we select from the ui because currently currently we're updating the ui but we're not changing anything in terms of filtering the products so to do that it's going to be really really easy so what we want to do is again we want to get hold of this filter type and then we're going to pass this in to our fetch products start action right when we dispatch it i'm going to pass that in within an object but we don't only want to run this code when the component mounts because this code is responsible for going out and fetching the products from our firebase store but think about it we also need to go out and fetch it whenever a user selects a different type from our filter we need to go out and fetch it again so within our use effect hook we need to pass the filter type into our dependency array and the reason that we want to do this is because whenever the filter type changes ie the user selects a different filter we need to re-run this code and we need to redispatch the action to fetch the products with the filter type the new filter type and that will allow us to actually get back our filtered products so of course this is perfectly fine now within our product results component but we need to actually make use of this so first of all let's actually look at our action and as you can see here we are are now passing our filters but as you can see previously we were only our action only contained a type it didn't have a payload so we now need to pass our payload so we're just going to pass our filters which is that object that contains our filter type but i'm just calling this filters because in the future we might want to extend this and this would be perfectly fine and this fetch product start where we were passing in our filters we just need to make sure that we by default if nothing is passed into this function we want to make sure that we pass an empty object and then what we'll do is we need to come over to our saga our product sagas and as you can see we have various sagas here but we want to look for specifically our own products our own fetch product start and of course this is the saga here this is our generator function that handles actually getting those products now of course this receives the entire payload so we can destructure the value that we want we want to destructure the filter type and of course this is our helper function here that actually is what's going to make the async make the asynchronous code sorry call so we want to pass our filter type to this helper function once we've passed that we can actually come back into our helper function this is it so this is handle fetch products and this is where we're actually going to use our filter type so we had to pass it around a few places in our application so what we want to do is chain on an additional query that we want to run which will be where the product category equals our filter type but the thing is we may not always want to filter by a filter type we may not have a filter type and we may not want to filter this based on this maybe in the future we'll have some other filters and we want to have different queries that we can run but we really don't want to have to have more than one helper function so i think we can refactor this code to make it a little bit more reusable so what i'm going to do is i'm going to create a ref so i'll say let ref and that will equal the firestore we're going to pause we're going to chain on our collection which is products we want to order by the created date at least for now and then i'm going to say if we have a filter type then i want to also say ref equals ref dot well i'll actually just take this code we want to say where product category equals the filter type and then finally here i can just say ref and again we'll come back to the rest of the code as it was where we say then get and etc uh we run the rest of this code that that really just stays the same okay so that looks pretty good let's come now over to the browser make sure you save all of those changes that we've made let's reload and what you're going to see is that we are not getting any results now that might look a little bit worrying at first but i can actually reassure you this is expected and that is because we are now doing a slightly more advanced query right so the query query we're making it requires us to create some indexes within our firebase database so to do that it's really easy we're just going to come over now to um our firebase application and within our cloud firestore within our database and our our data base here what we're going to do is we're going to go to our indexes tab and we're going to create a new index right and what we're going to do is we're going to pass in the collection id which in my case is products and then finally what we need to do is we need to actually pass in the um the fields that we need to set up here so if i come back over to the code you'll see first of all we want to use our product category and secondly we have our created date those are the two that we're using within our query and then finally we have to define the query scope which is the collection we're only running these query on our collections our products collection we're not going to be running this on multiple collections so we can just say create index and i will give you a heads up that this is going to take a few minutes it's not quick but once this has completed um our code will return results okay so this just finished for me but before i continue i just want to bring something to your attention really quickly i've set both of these fields to a ascending order now if i was to show you the ui again you can select descending but it will change the front end code so for example if i come back over to my text editor if you had set this to descending you'd have to in the order by pass in dsc here like that otherwise this wouldn't work because it wouldn't match now i don't have to set that because by default it is ascending so i can leave that undefined because it's default to ascending but i will remind you that if you do set this to be um descending here you will need to um actually set that to in in the front end okay so now that we've covered that this is completed what i can now do is return over to my app and as you can see now if i just reload this i'm getting results again but if i was to filter this so for example if i select men's you'll see that i only have men's products if i select women's i only have women's products and if i go over and select all i see both and if i was to manually enter something for example men's here then again i get only men's products and the default value in the filter is selected to men's so you can see that this is working now before i end this tutorial i just want to remind you guys that at the end of each of these videos i am pushing all of my changes to this official github repository i will be merging this into um the master branch once i complete this tutorial and that means that you will be able to view all the code that i'm writing in this tutorial and throughout the series within this repository that means that you can clone the entire project you could just look at a specific file that i've written compare your code with mine so i really encourage you to check out this repository i will be sharing a link in the description of this video and all the other videos that are in this series and of course please do star the project fork it i do appreciate the support and of course again a reminder that this is a complete series on building an ecommerce website with react redux graphql and firebase this is the official playlist i will be sharing another link in the description of the video so please check that out use that to find previous and future videos and keep a reference and again i appreciate it please like comment and of course subscribe and i look forward to seeing you in the next tutorial

Channel: SimpleTut

Views: 3,316

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, search, search filters

Id: sHmXr3uoZu4

Length: 22min 29sec (1349 seconds)

Published: Sun Sep 13 2020