How to build an eCommerce Website using React Redux, GraphQL, Firebase #11 – Admin Manage Products

welcome to the eleventh video in this tutorial series on building an e-commerce website using react Redux graph QL and firebase now in today's video we're gonna be building our admin dashboard we're going to be working on building out the functionality to enable an admin to manage products now please check out my official YouTube channel that's youtube.com forward slash simple type not only to find my other videos but please check out the official playlist for this series I also want to ask you guys to check out the official github repository for this project again I'll be posting links to all of these within the description of this video our official website is simple tank comm but the most important thing I want to ask you guys to do is like comment and subscribe now in this in preparation for this tutorial I've managed it a little bit differently I've already built the the UI for our admin dashboard and I've also built the form that we'll be using to actually handle creating new products in our database now the reason that I've done that is for two reasons the first reason is that I'm very aware that if I was going to build what is quite a complex UI here within the tutorial I believe that two that the video would become too long and also I would end up focusing a little bit too much on just building out the UI when really what I want to focus on is the logic behind it that actually as I said interacts with the api's and handles the data the second reason is that all of the code that I'm writing in this tutorial is available in the repository for this project ok so the first thing that I'm going to do is just walk through the components that I've written to build my admin dashboard so the first thing that I've done is I've created two new layout components now if you have watched previous videos in this tutorial series then you will be more familiar with the architecture of our current project but just to show you that in the code this is our source directory we have layout components and I've created these two new two new layout components one for my admin dashboard and one for the standard users dashboard now these layouts components are used within our routes which we have in our app j/s so I import these layouts at the top of the file and then for the routes for example our admin route I'm simply using this layout component to wrap my page component so let's have a look at my admin layout and actually let's actually take a look at this in the browser so you guys can envision this a bit more so as you can see this is my admin layout and all it really has is a left-hand side vertical nav and this main content area with this option to toggle and add add new product form so if we look at this in the code let's come over to our admin layout and as you can see here I have my header and my footer but in between this I have two divs one for my vertical nav and one for the main content and of course the main content is actually just coming from the admin page component so if we look at that in our route this is our layout we're passing a nested component here which is our admin page component and I'm gonna show you that in a second but let's just return to our layout so the main thing that you'll see here is that I've added a vertical nav computer is just pass an unordered list with two links right so I have a link that just returns them to the home page of our admin and I also have a link to logout now if we actually look at the school nav component so I'll just come over here all I'm doing here is I'm rendering the unordered list that I passed to this component and I've styled that already within the CSS for the vertical nav but the other thing that I'm doing is I'm actually getting the current user from a Redux store and I'm passing that to a user profile component and if we look at this in the browser all that it does is it just renders the user's name the user that is logged in and just an icon for a user profile image and currently have just defaulted that to to this image here and this is the default image that I've used for that let's take a look at our add new product form now this is actually a very simple form all it has is a category select for men and women's as I will show you in a moment those are hard-coded options now you can extend those options you can make them dynamic it's completely up to you but for this tutorial I've just hard-coded these two it also has a product name field you can enter the URL for a thumbnail and you can enter a price now this of course is coming from our admin page component now it's really important that you guys understand how our pages and our layouts work and again this would help if you had and again it would help a lot if you guys had watched the other videos in this series but the way that it works is of course if we look at our route we're using our admin layout and we're wrapping that around our page component so within our admin layout component we have we are rendering the component passed to it and in that and in this case it is our admin page component and all our admin page component has is we've used our form button component that we created in an earlier video to create our toggle button and this just toggles a boolean value we store in state to display a pop-up and we do have a pop-up component I've created a modal component and this just toggles whatever we pass to it based on the value that we're toggling here and this just contains our form so the form fields that we need is just a category select which I'll show you in a second a product name a main image URL and a price as well as a button a submit button now this form select now if I show you that in the browser it just allows us to select the category that we'll be adding a new product for now at the moment I've hard coded I've hard coded two options one for men and one for women's and again if you come back over to the code you'll see that this is just hard coded and you can extend this you can add more options you can make these options dynamic it's completely up to you but for the purposes of this tutorial and the series we are only going to have two options and I've just hard-coded them here now in terms of the other input fields that we have these are form components that we created in an earlier video in this series and you can see them by going to the components folder forms we have a form input and a form button component and those are the components that were using here and they just render the input field with the props that we're passing now the only additional form component I created for this tutorial was a form select and of course this is just an option a drop down that that is passed and you guys can easily create this on your on your own it's just a standard form select field and in the same way that we handled the change event I'm passing the handle change function the handle change function here - which updates the state on our parent component and of course here as you can see I'm just mapping through the options that are being passed to our form select I'm passing them again as I mentioned before I'm passing them here in the props okay so let's get started now I'm gonna assume that you guys have already created the same form that I'm going to be working with and that is our add new product form you guys already know the fields that it requires and at the moment this form doesn't actually do anything if I click add product it doesn't submit it doesn't handle any of the data we enter into this form so that's the first thing that we're gonna fix we want to actually allow the user to enter information into this form and then actually add that product to our database so to do that we need to come back over to our text editor and let's take a look at our form so that form is inside of our page component within our admin and as you can see when this form is submitted on the on submit event we call an unsubmitted function and we have access to all the values in that form here because we store it within the state the local state within our admin page component so within our handle submit function we want to be able to actually dispatch an action that will handle this event but at the moment we don't have any action to do that so of course we need to go ahead and create that action so to do that I'm gonna come into my Redux folder and I'm gonna create a new folder for my product state so I'm just gonna cool this products and we're gonna need to create a number of files within our products folder right so the first one is going to be products types J s and we're going to define our types within this file now I already know the types that we're going to need to create so I'm gonna create a console products types jas sorry which is a which is an object that is going to contain our types and we're going to export this by default we're going to export product types so as you guys know the first thing that we want to do is we want to add a new product so I need to add product type so we're gonna call this add new product start and it's going to contain the same value which is a string as the name of the key and I'm going to save that now of course we need an action that we can dispatch so within the products folder I'm going to create another file called products actions ojs and inside of this file I'm gonna import at the very top my products types and I'm going to import that from the file I created called product types ok so we need to first of all create an action that we can dispatch from within our component so to do that I'm just going to export constant this is gonna be our action so it's gonna be add product start and this is just gonna take the product data and then it's just going to return a simple action object which is going to have a type which is going to be product types dot add product start and the payload of this will simply be the product data that we passed to it ok so now that we have our action we can use this inside of our app main component so looking at our form and on the on submit event of this form we call the handle submit function where we can actually dispatch our action so to do that we need to import a couple of things so the first thing we need to import is from react Redux which is the use dispatch hook will need to have access to dispatch within the component so we'll say Const dispatch equals use dispatch and call that as a function but of course we also need the action itself before we can dispatch it so at the top of the file I'm also going to import from my Redux folder products and my products actions I'm going to import that add product start action we just created and I'll be able to dispatch that within my handle submit function by calling dispatch and dispatching the action directly but of course we need to pass a payload with this action and the value that that will contain is all that we have in our local state so if we look at our form components on the handle change event we're using the update function from youth state to update our local state with the value of the form field so whenever a user enters a value in the form field we're updating our local state with the values from the form so I can take these values and pass that in my payload so of course that's going to include our product category our product name our product thumbnail and our product price so this is now going to be the payload that we submit with this action now of course I've now of course we're using Redux saga so in my products folder I'm also going to have to create another new file called products dot sagas j/s and within this file we need to import a few things so that we can handle this action so the first thing I need to do is import some effects from redux saga so from redux saga effects we need to import take latest put all and call again if you watched other videos you guys will be very familiar with what those are but if not I'm gonna explain them in just a moment so we also need to import product our products types that we created a few moments ago we need to import that from our product types so the first thing that we need to do is we need to actually listen for for this action whenever this gets dispatched right add products start we need to listen for that because the way that redux saga works is whenever an action gets dispatched it will intercept that action it will handle some asynchronous event and then it will dispatch another action with a payload to update the Redux store it just gives us more control over the asynchronous code within our react Redux ecosystem so again let's just work on the code and I'll explain it more as we go but again if you watch other videos in this series you guys will already have a strong grasp of what that what that is so let's create that so what we need to do is export our generator function which we're gonna call on add product start right and all this is going to do is yield take latest and we want to first of all pass the action type that we are that we're listening for and then it needs another generator function that's actually going to handle this asynchronously so we'll create another asynchronous sorry will create another generator function which we're just gonna call add product right and this will receive the entire payload of the action but from that payload we want to D structure all the values that we were previously passing when we dispatched the action originally right so let's fix the indentation now I'm gonna come back to this function in just a few moments but first of all what we need to do is we need to pass that to our take latest now before I actually write my add product saga I need to export my products sagas so that they can be used within my route saga so if you remember this is my route saga and I this is what we're passing to our Redux store if we look at our create store we import our route saga here and of course this is where we actually pass it to our Redux store so if I didn't export my sagas in this way then Redux wouldn't be aware of them so it wouldn't actually we wouldn't be able to intercept the actions when they get dispatched within our Redux store so that's how it works so at the bottom of the file we need to export our sagas from this file so to do that we simply say export default we need to create a generator function here we're gonna call it products sagas and all it's going to do is yield all and this is another effect we're importing here so we say all and we pass an array where we call our our generator functions here our start generator functions so I only need to export my my add product start generator function and the only reason I have to export this one is because it actually calls the add product generator functions so I don't need to worry about exporting add product so now that I exported this all I have to do to include it within written my Redux store is just come over to my roots August file and import that so I'll import that under my user sagas import so I'll say products sagas from products product sagas and then in the same way as I did before I simply add a comma Col and pass my product sagas so we can save that and now any of the sagas that I export from my products sagas file will be passed to the Redux store ok so we're now ready to work on our add product generator function now there are a number of ways that you can handle your asynchronous code with with something like redux saga the pattern that we've adopted is we actually use helper functions and we resolve a promise so what I'll do is I'm gonna create a try-catch within my add product generator function so here we'll be able to catch any errors and what I'll do by default is I will just log out the error but for now I'm gonna comment it out but as I said we need a helper function so I'm gonna create a new file within my products directory called products dot helpers j/s and within this file I'm gonna be able to import my firestore and this is something I exported from my firebase utils so I'll be able to import my firestore and again if you look at the utility file we created this is a file we created in in an earlier video of this series so if you guys watch that you'll be familiar but one of the things we export from the file is our fire store and then as I said we need to create a helper function so I'm gonna call this Const and willing to export this but we'll say Const handle add product and what is going to take is the product that we want to create so the product itself and then what we'll be able to do is return a new promise and of course that takes resolve and reject and then what we'll do is we'll use firestore and the first thing we want to do is we want to say farce or collection we want to look for the products collection and then we want to create a new document and then we want to set the values of this document to the values we pass here which is the product now of course what we can then do is we can use the then callback and if this succeeds what we'll be able to do is resolve this promise however if we can if we catch an error right then of course what we can do is we can reject and pass the error right so now what we can do is we can take this helper function come back over to our product sagas we'll need to import what we the helper function we just created so we'll import from products helpers and we want to import handle add product and then within our try-catch of our add product generator function we will say yield handle add product and this is where we're going to set the fields that we want to add to our products document so I'm going to take all the values that we destructured from the payload but I also want to add two additional fields right so the first additional field I'm going to add is the ID of the admin that is currently logged into the application and it is and is adding this product right so I'm gonna call this product admin user ID right actually it's going to be UID and to get that at the top of our file we need to import something else so I'm going to import from again our firebase utils file I want to import off and what I'll be able to do here is say both the current user dot UID and this is going to give me the UID of the logged in user and then what I'll do is simply add the created date so to do that just above just at the top of the try I'm gonna create a new consult time stamp and this is just gonna equal a new date and I'm gonna pass that here so I'll create another key called created date and just pass the time step so this is actually going to add new product to our database right and again just to show you guys if I come back over to my firebase database you can see there's currently no no products collection so let's come back over and out to our application let's fill in this form and let's enter a random name so let's just say it's a nice bag we have a URL to an image and let's just set the price to something like 10 pounds right now let's add the product and as you can see I now have a products collection we've created a new document and all the values that was entered into the form are now stored in the products collection so now that we're actually adding these products to our database we need a way of actually rendering them on our dashboard right so to do that we need to come back over to our code and we need to head over to our products types we need to add two new types the first one is just going to be fetch products start again this is just gonna take the same value as the name of the key and then we need a way of actually storing these in our Redux store so I'm going to call this set products right and again that's just going to have the same value as the name of the key now currently we haven't created our products reducer so to do that within my products file folder I'm going to create a new file called products dot reducer is now the first thing that we need to do is we need to import our product types we can import that from our product types file and then we need to actually create the reducer itself so we'll say Const products reducer equals function we're gonna pass in some initial state so we'll say state equals we need to create the initial state so we'll say constant initial state it's just gonna be an object with products which is going to be an empty array we'll pass that as the default state and it's going to take some action this is going to return a switch function which will take the action dot payload sorry the action dot type and then based on that we'll return the state but the default case is just going to return the state that was given to it and of course we need to make sure that we're exporting this so we'll export default the products reducer so the only case that we're actually going to need to have in this products reducer at least for now is going to be the case for case product types dot set products so this is where we actually return the state but we add we actually set the product so we'll say product equals the action dot payload so this is where we are actually able to set the products now in the same way that we updated our route saga we need to update our route reducer with our new products state so what we'll do is we'll import our products reducer we'll import that from our new file so we have products and our products reducer and we're going to call this state our products data and it's just going to equal our products reducer so that's all we need to do there now although we've created these two new types we need to create the corresponding actions for them so within my actions file I'm going to create two new actions right so the first is going to be to dispatch the fetch start type so we'll say exports Const fetch products start and this is just going to return an object with a type which will be products types dot fetch products start and of course we also need another action to set the products so whilst the export Const set products which is going to take products and it's going to return a type which will be products types dot set products with a payload of the products we passed to this function now within our admin page component we want to do two things we want to dispatch an action whenever the component mounts that will fetch the products and then we want to also subscribe to the products and the redux store in the redux or so that we can access that state and render the actual products out on the page so to do that what we're going to do is import at the top of the file this use effect hook right and then what we'll be able to do is within this component itself we're going to use the use effect hook which takes two things one is a function and the second is an array of dependencies so what we want to do is the same way we imported our add products start action we want to import fetch products start now this doesn't expect anything alright so we can just dispatch this we don't have to pass anything here and this is going to dispatch the action that will be used to that will be used within our saga to actually fetch the products now I want to note here that I'm not passing any dependencies but I'm still defining an empty array the reason that I do that is that it ensures that this only runs on that first initial render of the component if I didn't pass this empty array here so I did something like this it would re render and it would dispatch this action every single time that the component updates but we don't want that to happen so what I'm gonna do is I'm only going to I'm gonna pass an empty array here right so that's very important so now although we're actually dispatching this fetch products action we don't actually have access to the products from the Redux store yet so to do that as well as importing use dispatch I'm going to import use selector and then what we'll be able to do is create a map state function so I'll say Const map state which is going to equal and then we'll be able to D structure the products data state right and what we want is the products which we can get from products data dot products right so to access this from a Redux store all we have to do is call the use selector hook pass it our map state function and then we'll be able to D structure products from what it returns now although we have access to products our products state we need to write the code that will actually handle fetching it so at the moment we're only dispatching this action we're not actually listening for this action we're not actually running any code to fetch it from the API so to do that we need to come back over to our products sagas and we need to create our new generator functions so to do that I'm gonna create a new one which is called export generator function and we're going to say on fetch products start right and all we're gonna do is yield take latest we're gonna pass product types dot fetch products start and again we need to give it the name of the generator function that will be used to actually handle this async code right so we'll just call this fetch products and that's going to it would take the entire payload but as there is nothing passed here we don't need to worry about that we're just gonna pass the name of this generator function here and we need to remember to export this at the bottom of the file because that's very important so as as we did before we need to create a helper function that will actually return a promise so we need to write the helper function that we're going to use to actually handle this asynchronous request so to do that what we're gonna do is say export Const handle fetch products it's not going to expect anything but we are going to return a promise so we'll say new promise which is going to take resolve and reject and then what we're going to do here is we're going to use our firestore we're going to target our products collection and then we need to get a snapshot we need to get a reference document right which we can then use in our success callback so it's gonna take the snapshot and then what we'll be able to do is create a and then we want to create a new products array using our snapshot so to do that we're simply going to say snapshot and we're going to map the docs that are on our snapshot we're going to get each individual document and then we're simply going to return the data on it so to do that we simply say doc dot data which is a method we can call but this will not include the documents ID which we need a little bit later in this tutorial so what we'll do is we'll say document ID and that is on the actual doc itself so we'll just say doc ID and then of course once we've done that all we need to do is simply resolve and pass our products array cool now if this errored at any point we want to catch that error and we are going to reject use our reject method call that and pass the error now as you know if we come back over to our products sagas we can use that by using a try-catch so I'm going to catch any errors where I can log that so I'll just log out the error but for now I'm going to comment that out and then we'll be able to use the helper function we just created to fetch the products asynchronously so at the top of the file where I imported my helpers I'm gonna import the handle fetch products helper function I just created and we can use that to fetch our products so we'll say Const products equals yield and we'll call our helper function and this yield key world and this yield keyword will ensure that we await the response of our helper function so what I can then do is I can dispatch another event to update our products state in our Redux store with the value that we get back from the API so to do that I'll say yield I'm going to use the put effect and we need to import the action that we created to update our products state so we can import that from our products action and that was called set products and you can see this in the file so we created set products it expects the products array and it just gives that to our reducer with our products so what we need to do now we've imported set products is dispatch this action with the value our products of our products array right so now let's come back over to the browser and let's head over to our admin page and you can see because of our logger middleware when the component mounted we dispatched fetch products start and then we dispatched set products and if we looked at our state and our products data and our products you can see here that we have successfully fetched the the product that we added to our collection earlier in this tutorial so you can see here we're now fetching products successfully right so let's come back over to our component so as you guys already know we have access to products in our admin page component and now that we are fetching the products we're ready to render them out on the page so what I'm going to do is I want to render my products here so I'm gonna create a new div I'm gonna give this a class of managed products and we're gonna map our data here our products data in a table so we're gonna have table we need to set a tea body with a table row and a table heading and this is just going to be a h1 and I'm gonna just set this to be manage products we're gonna add another table row and this is gonna contain the data that we need to we need to map right so this is actually going to contain a table data cell but then I'm gonna create another table inside of this so we'll need to create another tea body a table row with a table data but of course this is where I want to map it so I'm gonna map each row which will be the container for each one of my products so what we'll do is we'll say products dot map we're gonna get the product and the index position right and then what we want to do is we want to simply return our table row with our table data and this is where we're actually going to build out our our actual items right so to do that we need to get the data from the product the current product and what we want to get back is going to be the product name the product thumbnail and the product price and then where we actually want to render this the first thing that we want to do is we want to have an image so I'm going to have an image here and the source of the image is going to be product thumbnail we're gonna have another table data here which is just going to contain the product name and we're gonna have another one here which is going to be for our price and I'm going to add like a dollar sign here okay so that looks pretty good but I do want to apply some styling to this so what I'm going to do is I'm gonna come over to my style sheet for my admin page and I want to target this manage products class that I've applied to the rapper and what I want to target first of all is the table right the table itself and the table rows and what I want to do is for each even row right which I can target using the enth child even I want to change the background color to something like D 3 D 3 D 3 which is just a nice light gray and then finally I just want to target that thumbnail and I want to make sure that it doesn't break the layout so I'm gonna enforce a width of 150 pixels which for me is 115 point 0 REM and I'm just going to remove any margin that might be on that too and finally I'm just going to add a margin as well to my h1 within this wrapper I'm just gonna add a margin top of something like 15 15 pixels right so that's pretty cool the last thing I want to do is on the actual table here my tables I want to define some attributes so the first thing is going to be a border of 0 the cellpadding of 0 and cell spacing of 0 and I want to do the same for my other nested table right but I actually want to add some padding of about 10 pixels so what I'll now do is come back over to the browser and see how this looks so if I head over to my admin you'll see that we're now fetching products which looks great and we are actually showing them and out on the page too ok so before we move on I just want to touch on the user experience so currently if we add a product so let's just say we add another bag here we can select women's I'll enter an image URL and we'll set the price to like I don't know 15 pounds and if I add the product right so what's currently happening it's not what I want to happen so I clicked on add product but the form didn't close and I didn't and and that new product hasn't appeared in my admin right so that's what I think should happen if we look at our products collection you'll see that the product I just added has actually indeed been created what should happen is we should reset the form we should close it and we should then fetch and automatically see that product added to manage products so let's see how we can implement that in the code because it's actually going to be pretty easy to do that so the first thing we want to do is come back over to our admin component and as you can see this is where we dispatch our add product start action we need to create a new function here which is going to be called reset form right and we're just going to reset all of our state back to the default values so the first thing we'll do is we'll call set product category and we're going to default this back to men's we're gonna call set product name we're gonna default that back to an empty string we're gonna default the product thumbnail again back to an empty string and we'll default the price again back to 0 and of course we also want to close the the pop-up so I'll default that state back to true as well right so let's just make sure we're adding our semi colons and then what we'll do is where we dispatch this action after it's been dispatched we're going to immediately reset the form which will also close the form now what I also want to have happen and I'll just show you now I'm just going to show you what this does in the browser so let's come back over so let's come back over to our manage products and let's come to our add product form so let's just cool to something like a red bag and enter a URL again I don't know 15 pounds whatever and let's add the product you'll see that now we're actually toggling the form so the values have all been reset and the form also closed but we still haven't gone and fetched that additional product so how can we do that well it's going to be really easy all we need to do is come back over to our products sagas and as you know we have this add product generator function this is where we actually actually add the product to our database so what we need to do is dispatch in action after this event which will tell redux to go and fetch the products again right so what we'll do is simply import at the top here when we import our set products action we need to import fetch products start right and again this doesn't expect anything if we look at this action fetch products start it doesn't do anything but return in action with a type so within again our ad product generator function under our helper function here we're gonna yield use the put effect and we're simply going to dispatch fetch product start and the rest is going to be taken care of for us by the code we've already written so now let's come back over to our admin and let's now add another product so let's just say this is a blue bag and we need to enter another thumbnail let's add a price and now let's add product and you'll see that now the bag is fetch the product is fetched immediately from the back end I just want to update the styling of the table slightly so previously I was targeting every even row and adding a background color and because I have a parent a parent table around my results with a table row it happens to be that this second table row which is even contains the entire results table which is adding a background color to everything so what I'm gonna do is I'm actually going to target the results table specifically so if I come back now and around my results table I'm gonna add a class which is just going to be results and if I come back over to the browser go to my admin page you'll see that the styling being applied is much more accurate to what I intended okay so at this point we have added the functionality to enable an admin to add products to our database but I want to add an additional feature that will allow them to delete products as well so to do that we need to create a new type so let's come back over to our code let's head over to our products types and we need to create another type which is gonna be delete product start right and again this is gonna have the same value as the name of the key and we need to create a corresponding action for that so let's create so let's create that action we're gonna call this action export Const on delete product start it's going to take the product ID and it's going to return a simple action with a type and payload so the type is going to be products types dot delete product start and the payload is simply going to be the product ID itself so we can use this action right within our admin page component so we're already importing the button component that we created previously I'm going to add another table data cell to my table row so we'll say table data we're going to add a new button component here and we'll just say delete and we'll have an on click event right and what this will do is it will call dispatch and we're going to dispatch the action directly so I import the actions here so I'll say delete products start and then on the on click event will simply dispatch this at this action but again we need to get something from the product we need to get the document ID right and pass that to the action page in the browser you'll see each one of these now has a delete button on this item row but this is currently not doing anything we need to come and create the sagas for it so let's come over to our products sagas and I'm just gonna collapse all of these to make it a bit easier for us to work with the first thing we're going to do is create our start saga so we'll say export generator function on delete product start ok and again it's just going to yield take latest will say products types dot delete product start and we need to give it the generator function that will handle this asynchronously so we'll say export function it's a generator function delete product and that will receive the entire payload while the entire action we're going to D structure the payload and the document ID and then we simply pass delete product here and we need to remember to export this at the bottom of the file so we're now ready to write the asynchronous code that's gonna actually handle this so we're gonna insert this into a try-catch so we're gonna catch the error and we can console.log it out but for now I'm not going to do anything with the error and again as I explained previously we're going to need to create a helper function that we can use within this generator function so let's come over to our helper file this is where we write all of our helper functions and what I want to do is write this function so it's gonna be export Const handle delete product and it's just gonna take the document ID and it's going to return a promise so we'll say return new promise which will take resolve and reject and the first thing we need to do is call our fire store we need to find the collection for products and then we need to find the document itself using the document ID that we have passed and then we're going to attempt to delete the document directly now if this is successful then what we're going to do is we're simply going to call resolve but if it fails we're going to catch the error and we're going to call reject and pass the error to reject so now that we have created our helper function we can come back over to our sagas we need to import that helper function at the top of the file and what we want to do is we want to simply attempt to delete this by calling yield handle delete product that's our helper function and pass it the document ID that we D structured from the payload now if this has succeeded we then going to update our Redux products state so to do that the same way that we did previously we're going to dispatch another action which is fetch products start it does not expect anything so we don't need to pass anything it's a simple action and that will update the page by researching the products without the product that we have removed right so it's not actually deleting these so and I think I might have made a mistake in the code so I'm just gonna check my action ok and so the mistake I made is that the product ID is actually stored directly in the payload it's not an object so if I look at my saga here I was trying to destructure the document object from the payload but the payload actually is the document object so in actuality what I need to do is pass the payload here to the helper function because that actually is the document ID I also seem to have forgotten the yield keyword here that's very important so we'll need to remember to do both of those things and let's come back over to the browser head back to my admin page let's try and delete something and as you can see we're now able to successfully delete products and that brings us to the end of this video tutorial but before I sign off I just want to remind you guys that I'm gonna be putting a direct link to the in the description of this video to the official github repository for this project i do create PRS at the end of each of these tutorials so you will be able to find all the code that I've written in this repository of course I have the official playlist for this series but I do want to ask you guys please like comment and subscribe and I'll catch you in the next one

Channel: SimpleTut

Views: 9,624

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

Id: 97i9zrgASgY

Length: 60min 55sec (3655 seconds)

Published: Mon Jun 22 2020