React e-commerce: Build an e-commerce cart without Redux!

hey guys welcome to the stripe master class course in this course we'll take a deep dive into the amazing stripe payments platform this is a hands-on course where you'll build a fully functional ecommerce application using stripe react node express and firebase the course is practical and very much hands-on where you'll be shown step by step how to build an e-commerce platform from scratch now the main focus of this course is how to integrate strike payments to this end we'll be looking at the different ways we can integrate stripe including using the stripe hosting site to accept payments creating a custom checkout experience accepting credit card details right on our site and also customer credit card management now this is not a beginner's course in programming fundamentals and you're expected to have at least a basic understanding of programming control flow and the javascript syntax we're going to be building a full stack application and for the front end we'll be using the react library whilst we'll be building everything from scratch you are expected to have a working knowledge of react and how components are created you are also expected to have a basic understanding of css and flexbox layouts however this will not be a focus and i'll provide all of the css styles for the css we'll be using sas to make writing css easier so a basic understanding of sas is also required we're also going to be using modern javascript features so we'll be making heavy use of es6 especially on the front end arrow functions async await variable destructuring and much more we're going to build a backend that we'll use to set up payments with stripe and this means that you need to have a basic understanding of apis and the wrist architecture as we'll be creating our own api endpoints and also making requests to the stripe api we're going to take a quick tour of what we're going to be building throughout the stripe master class course we're going to build this site from scratch and it has a hero section and a featured collection section now if you click through to the product it will take you to the single product view and you can add the item to the cart and we can proceed to the checkout and we can check out with stripe so i'm going to enter an email and then we'll click on the checkout button we'll be taken to the stripe hosted page for checking out so here we can enter a shipping address and we can use the test credit card to check out once the pay button is clicked we are then taken back to our site so this is an example of the stripe hosted checkout which will be building from scratch we're also going to be integrating the payment process right on our site so if we go to this tab here and then we go to the shop page and we add a few items to the cart and then we sign in now that we're signed in if you go to the checkout page we need to fill in a shipping address and then we're going to click on the continue button here previously we had this information hosted on the stripe checkout page now this is hosted on our own site and we could take the credit card number the credit card expiry date and the credit card cvc so i'm going to use the test credit card we also have the option to save the credit card with stripe so if i click on save card here and then i make payment the payment has successfully gone through and has been processed with stripe now if you go back to the shop page and then we select two more items and go back to the checkout and fill out our shipping address information and then click on continue now we are given the option to use a saved credit card so this is what you would typically see on e-commerce sites so if i select my saved card so this is the card that i previously made payment with and then i can pay with that saved card and that payment has successfully gone through so we're going to be building all of these features from scratch and we're going to integrate stripe payments into our e-commerce site to get started we need to bootstrap a react app and to do that we'll simply use the brilliant create react app tool to build for us a react application if you're not familiar with the create react app tool you can read more about it on its dedicated website here but basically create react app is a tool that's been built by developers at facebook that gives you a massive head start when building react applications it saves you from time consuming setup and configuration we simply run a command create react um sets up the tools that are needed to start a react application now i already have this installed on my machine so what i'm going to do is i'm going to type npx create react app and we'll call the project react e-commerce and i'm going to hit return what this is going to do is it's going to install all the dependencies that are needed for the project and it's going to take a few minutes to do this now once installed finishing all of dependencies what we're going to do is we're going to cd into the react ecommerce folder and i'm going to clear the screen here and if we list all of the files that we have we can see that the create react app tool has created for us a source file or a source folder and it's also installed all of the node modules that we're going to need for the react application so what i'm going to do next is i'm going to start the react application by typing yarn start i'm going to hit enter what this does is it immediately starts the react application and it takes us to the browser and we have now the react application running on localhost 3000. now when we have the react application started we use the yarn command instead of npm now yarn works exactly the same way as mpm does but with some slight differences and if you don't have yarn installed on your machine and you'd like to follow along by using yarn you can go to the yarn website here and just find the correct operating system so whichever one you're using i happen to be using mac and install yarn and it works exactly the same way as the npm package manager does as well with some slight differences and sometimes it can be slightly faster when installing modules so npm works exactly the same way but i'm going to be using yarn for the react front end and you can follow along with npm just make sure that you replace yarn with npm if you're using that as a package manager now what we're going to do is we're going to open the react e-commerce project using macro visual studio now you can use whichever code editor that you wish but microsoft visual studio is the one of the best code editors out there at the moment so i'm going to open a new tab and i'm going to duplicate this current tab here so that it takes me straight to the location and what i'm going to do is i'm going to type code and then followed by a full stop or a period and this opens the react ecommerce folder in microsoft visual studio so what i'm going to do is i'm going to put this in a new window like so and i'm going to close the welcome message here so if you open up the source folder here we can see we have the boilerplate that we create react app has created for us now we're going to need most of this stuff here so what i'm going to do is i'm going to delete this here and i'm just going to write react e-commerce just to start us off and we're not going to use the logo so i'm going to delete that like so and i'm going to delete a few files here i'm going to delete the app.test.js file so i'm going to move that to trash and i'm also going to delete the logo file as well so i'll just move that to trash as well and what i'm going to do is i'm going to go into the app.css file here i'm going to select everything i'm just going to delete this as well i'm going to save that out and then go back to the react application here and if you refresh we can see that our application is still working so if we inspect and open the console just to make sure we're not getting any warnings or errors there so our react application is working just fine so what i'm going to do is i'm going to move the terminal i'm going to put the code editor in the middle here so i can access both easily so now that we've deleted some of these files here what we're going to do next is we're going to go into the index.js file the entry point and we're going to delete the strict mode wrapper here now we're going to delete this because we're going to be using the use reducer hook from react and what the strict mode does is that it calls the action creators twice and what that does is it creates a bug in the application in development mode only and it doesn't do this in production so we don't really need this so i'm going to do is going to delete the react strict mode so i'm going to remove that wrapper from our application here i'm just going to indent that slightly and if we save that out and then go back to the web browser here our page is still working nicely now to build the e-commerce site we're going to use bulma as a css framework now bulma is an alternative to something like bootstrap that you might have heard of before now we're going to install boma as a dependency using the yarn package manager so i'm going to go yon and i'm going to say bulma and we're also going to need the node sas because we're going to use sas for the css so i'm going to type node says so what this is going to do is going to install bulma and it's going to also install the node sas module for us once that installs successfully that means we have the boma css framework and we also have node sets installed in our react application so i'm just going to clear this screen and then if we go to our package.json file here and just to double check that we have these here so we've got the node says here and we also have the bom module so that's been installed successfully for us so next what we're going to do is we're going to go to the app.css file and we're going to rename this to apple.scss to make it a sas file so i'm just going to rename that to app.css and now this is going to be a css file that we're going to be using going forward so we're going to do a few things here so we're going to first set the character set so i'm going to type a chart set and we're going to set that to utf-8 and then with bulma the good thing about it is that we can import the things that we need so we don't have to import the whole walmart module here which can make your final bundle quite large so we're only going to import the things that we're going to be using for this project so we're going to import a few files so these are the files that we're going to need for our project here so we're going to import the utilities the button and the container and the hero hero components of the bomber framework now what we're going to do is we're going to do a few things here so we're going to add some css so i'm going to add this really quickly because we really want to be focusing on the react e-commerce side of things and we're not really going to be focusing on the css as much so i'm going to be putting lots of css code in here and i'm going to briefly go over what each part is actually doing so this just to save us time in terms of the development so here i've added some css to the app.scss file here and it's just going to do some basic basic things here so we're going to go over what some of the main things are doing so what we're going to do is we're going to have a container i'm going to set that to 60 and we're also going to have a few buttons that we're going to be using later on so we're going to have like a shop now button and we're going to have a featured product section as we saw in the preview and we're going to be obviously targeting different viewports so we're going to target the desktop i'm also going to target mobile as well and then if you continue on down here we're going to have the button styles so the button is going to be black with the font color going to be white and we're also going to be targeting the mobile and what's going to target the desktop versions of that as well so if you continue down here that's what we're going to see here so we're just going to see some of the styles for the desktop and also some of the styles for the mobile viewports as well so that's the app.scss file sorted for us so in the last video we renamed the app.css file to be an app.sas file and that that's the error that we're getting here so if you're getting a similar error and you haven't fixed it just yet you need to make sure that you call the proper file name so it's now called app.scss and if we save that out then we should no longer be getting that same error now you might be getting another error something like this that says that node says version 5 is incompatible with 4.0 now that's an error to do with the node sas loader so this issue is to do with the version being upgraded so to fix this issue here we're going to uninstall node sas i'm going to install the previous version because the version number five seems to have some issues along with it so we're going to our terminal here and i'm going to stop the react application and what i'm going to do is i'm going to say yarn uninstall node sas i'm not using npm node sas and what this is going to do is going to remove the node sas or because we had the version which is 5.0 and if we look on the package.json file here um let's remove that now but that's the version that we had on there and what we're going to do is we're going to take this version so we're going to say this is the version that we want so i'm going to copy that here and we're going to do yarn add and then we're going to paste that in and obviously that's the version that would like to install so it's going to take a few minutes for that to install once that installed um we can now restart the react application so if i do yarn start here and then this should restart our react application so i'm just gonna wait for it to create the server yep and it seems to be loading our react app just fine so at the time of this recording here so there seems to be an issue with node sas version 5.0 so if you have that installed and you get this error and just make sure to uninstall it and install the previous stable version and that should remove the error with the node sas what we're going to do now is we're going to create a components folder inside of the source folder here and that's going to hold all of our components i'm going to create for our react application so i'm just going to make sure the source folder is highlighted here and i'm going to create a new folder and i'm going to call this components and inside here what we're going to do is we're first going to start working on the header component so i'm going to create another folder and i'm going to call this the header now for each component we're going to create a separate folder and that folder is going to contain the jsx file and it's also going to contain the sas file as well and any other files that that component needs just helps the structure and makes everything sort of nice and neat now inside of the head of the folder what we're going to do is we're going to create the header.jsx so i'm going to say new file i'm going to say header dot jsx and we're also going to need a style sheet so we're going to say header header.styles.jsx as well so i'm going to say new file header dot styles dot sas so now we have a header.jsx and we have a header.styles.js as well now just before we start working on the header component what i'd like to do is i have to install a dependency because we're going to be using a react router and i'm going to install that first so i'm just going to show you what i'm going to do is i'm going to say yarn add and we're going to add the react router module here sorry router dom because we're going to be using it for the web and that's just going to add the react router to our react application so it shouldn't take too long to install now once that's installing what we're going to do is we're going to go to the app.js file here and you know in fact we're going to go to the index.js file rather and we're going to import the react router dom and that should have been installed now so i'll just double check the package.json file and if we look here we have the react router installed for us so i'm just going to close this here and inside the index.js file what i'd like to do is like to import the react router dom so i'm just going to import that and i'm going to pull off the browser router and because we need this to wrap our components so it's going to come from react router dom and we're going to wrap this around our app here so we're going to say browser router and i'm going to cut this here and stick it inside now once we save that out and we go to the lock launched here and just refresh and again we're going to open the console just make sure we don't have any errors so that seems to be working fine everything is is working correctly now once we have our react router in place now it means that we can use any of the react router elements so we can use the link we can use with router and so on and we're not going to get that error so i'm going to go back to the header.jsx file and what we're going to do now we're going to start building the header so the first thing we're going to need to do is obviously import react from react and we also we are also going to import the link element from the reactor router and because we're going to be having links that are going to go to different pages and then we are also going to import the style sheet as well so we're just going to do an import for that i'm going to assign it to a variable and it's going to be called header dot styles dot sas so just make sure that's spelled correctly here and we are now going to create our function so we're going to call it call this header and then we are going to create our arrow function and we're going to return some jsx so our head is going to be really simple so we're going to have a nav component and we're going to give this a class name and we're going to call this nav dash menu and we're also going to use the container from bulma so obviously we've imported some of the utility css files already and that includes the container so just to give us some basically spacing and some layout on the page so that's coming from bulma and inside here we're going to have a logo and we're going to give this a class name of logo and inside the logo we're going to use the link element and link is just going to return an anchor anchor tag um as output of for the html and this is going to point to the root page and inside this we're just going to have a text as our logo so we're going to keep things really simple and then we're also going to have an unordered list to contain our links and then again we're going to use the link component and this is going to point to the home page so again it's going to be on the root there and inside here we're just going to type the home so i'll just indent that correctly so i just forgot to wrap this in a list element so let me get it as a link and then i'm just going to copy this again and i'm going to paste that in here and we're going to have a shop so we're going to have a shop page just to start off with and that's going to point to the shop route which we're going to set up a bit later on so this sets up a basic nav for our react e-commerce now i'm going to export this export default header and just make sure everything looks okay now we need to show this element so i'll show this component rather so we need to go and import this in so just before the css import i'm going to import my header so i'm going to import header it's going to come from the components folder now because that's what we have and then go into the header folder and then i'd like to grab the header component that we created and then we're going to stick this in here uh save that out so it looks correct here and if you refresh the page um we have a simple header or we have a simple nav menu that we're going to obviously add some styling to in the next video so previously we added the header component but we don't have any styles applied to it so that's what we're going to do right now so if you go back to visual studio and if you go to the header.jsx here you'll notice that we've already added some classes so we have the nav menu logo and what we're going to do is we're going to target these classes and we're going to apply some styling to the header so we're going to start off with the nav menu so i'm going to target that first and we're going to set the display to be flex because we want this to be working on mobile views as well so i'm also going to give it a padding of one rim all round and we're going to apply a style to the anchor elements as well so what we'd like to do is to remove the text decoration so we don't want that and we're also going to remove some of the default focus visited and hover styling so we're going to start with the focus and then we're also going to target the hover and the visited styles as well and we're going to do is we're going to send the set the color to be black like so so just some basic styling here so if you go back here and seem to have an error so let's have a look so we've got focus and hover visited okay so should be working fine okay so i think might be some issues with the sas or not sas here but we'll we'll have a look at that and so we've got the hover visited and the focus to have a color of black next what i like to do is i like to target the logo so we're going to target that and we are going to give it a font size and let's set this to 1.5 rim and if we go back here so that just increases the size of the logo text and what we're going to do now is we're going to style the links so they're currently not looking like links so we're going to remove the list style so we don't really want any list style at all and we're going to give it a margin of zero to start off with and then we're going to give margin left to each of the list items and we're going to set that to auto and as for the individual list items themselves we're going to set the display to be inline block so that we can apply some margin and we're going to give that a margin of top and bottom it's going to be zero and we're going to apply one ram to the left and right side so that's looking good so if you now go back here and we should now have this styling here so i'm just going to obviously have a look at the node sas issue you might be having the same issue that i'm having that it's not really loading the changes on from these from the sas file so um obviously this is obvious to do with sas and if so been applying some updates to that but yeah this basically completes the styling for our component so for the first header component and next what we're going to do is we're going to add a cart component and we're going to be putting that just next to the links here so i'm going to do that in the next video we now have a header component and we've got the nav menu inside it so the next thing we need to do is we need to add a cart icon and for that we're going to use a shopping bag so i've got a shopping bag icon from this link here and it should be included in the resources for this course anyway i'm going to also include the link as well so we're gonna use this card icon here and what we're gonna do is we're going to create a assets folder so if you if i go to my react ecommerce here so i've got the shopping bag png image here and what i'm going to do is i'm going to stick that inside here and inside the source folder i'm going to create a assets folder so i'm going to put it in source first and then i'm going to create a new folder here and we're going to call it assets and inside this folder we're going to place all of our assets so we're going to place all the png files and so on so i'm going to move that in there and we should now have an assets folder in our project so should be in there and we have the shopping bag icon inside so now to create a cart icon what we're going to do is we're going to create a new component for that so inside the components folder i'm going to create a new folder i'm going to call it cart icon and inside the car icon we're going to have the cart icon jsx and we're also going to have a star sheet to go with it so we've got the card icon and the start sheet to go along with it so as for the cart icon itself what we're going to do is we're simply going to use an image and we're also going to have a span element to show the amount so let's see how that's going to work so i'm going to first import react and we are going to import the shopping bag icon so we're going to say import and we're going to call this shopping bag and that's going to come from the assets folder so we're inside the car icon so we just go out of that out of the components and then into assets and then we need to get the shopping bag shopping dashbag.png file here so that should be correct and we're also going to import the style sheet that we created so i'm going to import that from the same folder so it's going to be called icon.styles.sass and now we're going to create our cart icon component so it's a cart icon and what we're going to do is we're going to return some j6 as usual i'm going to create a div i'm going to give this div a class name of card container because that's what it's going to be it's going to be containing our cart so card container and we are going to put an image inside here and the source is going to come from the shopping bag so we already have that imported so we're going to set that as the source i'm going to give it an alt attribute as well and we're going to say that this is just a shopping cart icon so that loads our image as the call icon and we're also going to have a span so this pan here is going to contain the amount so if you've seen the cart icons before and on certain react e-commerce websites you will see that they have the content and they have the amount right next to it so this is what this span is going to be serving and we are going to just basically put a hard coded value in here and later on obviously this is going to be dynamic it's going to come from the actual amount or the number of items that the user has in the cart so we're going to give this a class name and we're going to set this to cart count because that's what it's going to be and if we set that to 5 and we're going to export this so export default the card icon and we have that here now obviously we need to use the this file here um and what we need to do is we need to go into the header and we need to import the cart icon so i'm going to say import cart icon from so it's it's going to be in the same folder here but it's going to be in the car icon folder and it's going to be the car icon component that we want and we're going to place it just after the links here so we're going to say card icon i'm going to put it in here and you save that out and if you go to the web page here so we're getting an error so i can't resolve shoppingbag.png okay so we've got an error with our cart icon so if you go back to the call icon.jsx file and let's just make sure we've got the path correct so we are inside the car icon so if you come out of the cart icon once and then we come out of the components folder and then we want the assets folder and then we want shoppingbag.png so should be correct so we've got the right naming here okay it turns out that we have the cart icon folder inside of the header which we don't want so what we're going to do is we're going to move that into the components folder and once it's inside there then we should have the cart icon and the header side by side like this and previously the error was because the car icon folder was inside the header which we don't want so that should resolve our error and yeah so this is now loading our cart icon as expected so next what we're going to do is we're going to apply some styles to the cart icon so what we want to do obviously is to decrease the size of that item there because it's quite large on there so we're going to target the cart container and we're going to give it a margin of left i'm going to set this to auto because we want to put it next to the links and we're going to set a cursor so we're going to set that to pointer so when the user hovers over it won't be able to be able to click that later on and take us to the cart page and we are going to apply some styling to the image so obviously we're going to set its width to make it a lot smaller than it is at the moment and we're also going to target the car count so this is the number and for this we're going to give it a margin left and i'm going to set it to a negative value so that it sticks right up against the shopping bag icon and we can give it a background color i'm going to set this to black and we're going to give the color the text color to be white so that's going to be with the number and then we're going to give it some padding right and we'll set that to about four pixels so we can talk play around with these figures here just to make sure until we sort of get it right and we'll give it a border radius i'm going to set that to 10 pixels so that looks about right so now if we go back to the page here so we have the cart icon and we have the number five that we hard coded in but it's not exactly how we want it so it's not sticking right next to the car icon image so what we can do is we can apply some trial and error here so we're going to inspect that so in the car container we have margin yes because we don't have the pixel so we only had the numeric values so that's why that was showing up like that so yep so that should fix that here so we have the car icon and we have the car count right next to each other so you typically see this on ecommerce sites so you have the the the shopping cart and you have the item numbers or the number of items that the user has in their cart in there so this is our headers coming along nicely here and next we're going to work on the hero section of the reactive command site so now for the hero section what we want to have is we want to have an image for the background now for that we're going to make use of the hero component from bulma but before doing that we need to have a few things in place so in the assets folder what i've done is i've added the bend white unsplash image and this is the image that we're going to use as the background so make sure that you have that image in the assets folder now what we need to do is we need to create a hero component and for that we're going to create a hero folder inside of the components so i'm going to create a new folder i'm going to call it hero and inside here we're going to create the files and we're going to create our sas file like so now for the component what we're going to do is we're going to make use of the hero layout here so if you go to layout in the bomba documentation and we go to hero component and if we scroll down what we'll do what we'll see is that we can have a nice hero background or a nice hero component here and the html for that including the css classes is right here so we're going to be making use of this in our hero component so if we create our hero component now and we import the style sheet i'm going to have const hero and i'm going to return now in here what we're going to do is we're going to return this particular component so what we're going to do is we're going to return this section and we're going to put that in here and just going to indent this just make sure it's correctly indented and we're going to replace obviously the class attribute make sure that we have class name for react and now what we're going to do is we're going to sort of customize it so we don't really want to have the title to be a large title so we're going to replace that with banks reimagined for modern life and we're also going to be not needing the subtitle so instead we're going to have a div and it's going to be a container for a button and the button is going to simply read a shop now i'm going to put that all in caps and we're going to give this a class name i'm going to call this shop now button okay and we're also going to apply some class name to the button itself so we want the button to inherit from the button styles from boomer and we're also going to use the black version and that's also going to come from bulma what we're also going to do is we're going to add an id to apply some custom styles to our button as well so we're going to use that from the app.css file that we created early on so that's where this is coming from now if we save this out and we export this so export default hero and then if we now go into the app.js file and we import that in here so input hero from the components folder and then we're gonna have hero hero like so and i'm going to say hero i'm going to put that in after the header here and now if you go back to our react app and we should now see our hero component so this is coming up nicely so what we want to do now is want to have the image as the background and for that we're going to do that in the css so if you go back into the style sheet for hero and the first thing that we need to do is we need to apply some styles to the hero image so we need to make sure that we have a custom class appliance so we're going to say hero image now this is going to be our own custom class here so this is not coming from bulmer and we're going to target that here and let's say hero image and what we want to do is we want to set the image as a background so we're going to use the background short version so instead of having several different properties which are going to have the background i'm going to have it in one go so we're going to use the linear gradient function i'm going to use this because what we want to do is we want to have the image to have a layer which is a dark layer and i'm going to use that black layer just to make sure that it's easier for the user to read the text that's in front of it so we're going to use the rgba function and we're going to say 0 0 0 i'm going to give it an opacity of 2 and then we're going to use rgba again and we're going to use the same exact values as we've done here so i'm going to copy that paste that in here and then we're going to do is now i'm going to use the url function to load the image in so it's in the assets folder and then it's going to be the ben white and splash.jpg that's the one that we want now what we want to also do is we want to center the image and we also want to cover it all we wanted to cover and then we don't want the image to repeat so we're going to say no repeat as well so if we save this out make sure we're importing the style sheet in the hero.jsx which we are and then if you go back to our react app here and it loads our image nicely as a background and as you can see here it's got a slight dark layer just to make the text which is going to be in the color of wine just just to make it easier to read now what we also want to do is we want to center align the title and you want to also center align the shop now button as well so that's what we're going to do next so if we go back into the style sheet and then for that we're going to target the hero title class so in h1 we're going to rename this so i'm going to say hero and then title so this is our own custom class we don't want to use a title from bulmer and i'm going to target that here so hero title and then we're going to set the text online to be center and we want the font size to be to ram like so um and for the larger desktop views what we want to have is we want the font size to be a bit bigger so we're going to use a media query for that and we're going to target the breakpoint of 1024 pixels for that and we're going to set the hero title i'm going to say it's font size to 0.5 rem and we also want to give some styling to the shop now button so we're going to target that and what we're going to do is going to center align that as well so if we save that out and go back to our page here so this nicely center aligns the title and it also center lines the button so we now have a very nice looking hero section and what we're going to do is we're going to continue and we're going to add the main middle section so now we have the header section and we also have the hero section now the next part is to build the main middle section which comes under the hero part now for that we're going to need a image so make sure we have the studio back png file in the assets folder now for this as usual we're going to create its own folder so we're going to call this main section and inside the main section we're going to have the main section component and we're also going to have the accompanying style sheet for this so main section dot styles dot sas and for this component we're basically going to display a image i'm going to display a description and a title so import react and we're also going to import the with router because what we want to do is we want to navigate to the single product view when a button is clicked so i'm going to import that as well so with router and we're also going to import the image so it's going to be out of the main section of the components and into assets and we want studio hyphen back.png and finally we're going to import the stylesheet so it's going to be main section dot styles sas i'm going to have const main section and we're immediately going to pull off the history object from the with router which we're going to be exporting it out later on so we're going to pull that off here and we're going to return some jsx so i'm going to have a few divs because we're going to have a image and we're also going to have a description so we want them side by side in the desktop view and wanted to stack in the mobile view so i'm going to create some div containers for that and for the main one is going to be the container so we're going to give this a class name and we're going to call this one main section container and this one is going to be the main section middle because we're also going to have a featured section as well or featured collections so it's a main section middle and we're also going to have the image container as well so this is going to be our container for the image so call that ms image and inside here we're going to use the image that we imported so the source is going to be the studio bag and we're going to give it an alt attribute and going to call this studio bag okay so now we have the image now just below that we're going to have the description so we're going to create another div and we're going to give this a class name i'm going to call this the middle section and it's obviously going to be holding description so that's what we're going to do here and the description is going to contain a h2 heading and this is going to be the studio back or we're going to say designed for fashion crafted for sport gonna put full stop there and we're going to have a short description here and i'm just going to get the description that we already have and we're going to stick that in here so yeah that's our description i mean obviously it's it's a product so each product is going to have a different description um we could put some filler text here but it just makes sense to just put a something that makes sense that we can use so that's the description and under this one here we're going to have a button and we're going to give this a class name um and we're going to use the button from is from bulmer i'm also going to use is black and we also like to have an id as well i'm going to say shop now and when this button is clicked we're going to go to the studio bag single product view so we haven't done that page yet but we're going to create a single product view where you can view a single product or single bag and you can look at a description and add it to your cart so we're going to do an unclick handler here and when it's clicked we want to execute a function and we want to basically programmatically route that to the single product view page so that's going to push it to product and it's going to be first product so this is going to be the id of the product which we're going to have later on as well so i'm going to put studio bag as the text for the button and if we save this out and we're going to export with router export default we've written because we want to get the history object to be injected so export default with router and what we're going to do now is go to the app.js file and we're going to import the main section so import main section from and that's in the components folder main section we want the main section component and we're going to put that in here so make a section like this now if you save this out and we go to our react app so now we have our image and we have the title and the description of the product itself so next what we're going to do is we're going to apply some css so now we're going to apply some css to the main section here so obviously we want to recreate and decrease the image size and um looks like one of our styles or one of the classes not been applied from bulma so let's apply some css so first of all let's go over the button and it looks like we want is black here so we don't want it's bulmer so we want is black and if we save that yes so now we're getting the correct styles from bulmer now if you go to the style sheet here so we're going to target the main section first make section container and what we're going to do is we're going to set a width i'm going to set this to be 70 and we're going to have a margin and top and bottom is going to be 3 ram and we want to sort center it i'm going to do auto so we're going to now look at the h2 heading i'm going to give that a font size of let's say 1.1 rem and we're also going to style the description so it's msm description and that's going to be in a p tag here so we're going to give that a font size i'm going to set that to 0.933 rem and what we're going to do is we want to space that out somewhat so we're going to give it a line height property i'm going to set that to 1.5 and so this is going to be the styles for the mobile and we want to target the desktop view only so what will happen is we want to the image and the description to be next to each other so for that we're going to use a media query the breakpoint of 1024 pixels as we've been doing already and we're going to target the main section middle and what we're going to do is we're going to set the display to flex so what we're targeting here is the main section middle so it's basically this div here so we're going to set its display property to be a flex and then we're going to use justify content and we want space between and what we're going to do next is we're going to target the image so i'm just going to put space between that there and for the image we're going to give it a max width so right now it's massive we'll give it a max width of 545 pixels and we're going to say flex 1 and the baseline of 545 pixels and if we save that out and then now we're going to go into the description so uh and the same description and for this we're going to give it a margin left and we're going to set this margin to run about 30 pixels and we're going to align self this so what we want it to do is we're going to align in the middle so we're going to say align self center and we're going to also target the description and in the desktop view we want that to be 1.1 so at the moment it's 0.9 so i want to be slightly bigger i'm going to send it to 1.1 rim and that should do the styles for our painting so yeah just takes a bit to load so we have the image and we have the title here and we have description and we have the studio back so obviously clicking on this at the moment is gonna try and take us to the product one single product view which we haven't set up just yet but we're going to do that in just a moment so now we're going to create a products context and the product context is going to hold a list of products for us now in our source folder i'm going to create a new folder i'm going to i'm going to call it shop and inside of the shop folder which can create a single index.js file and this index.js file is going to contain a list of products i've already provided this file with the resources so i'm going to add that in here and it's going to contain objects and each object represents a product and each product is going to have an id a title description image url and the price of that product so if you save this out and at the bottom here we are exporting this shop data variable now in the source folder i'm going to create a new folder and it's going to hold all of the contexts and i'm going to create a new context i'm going to call this products context now the product context is going to load the shop data and it's going to attach that data as a value to the value prop in the context so let's see how that works so we're going to need the create context function from react because we're going to create a context and we also need the state so we're going to pull that off from react and we also need the shop data that we just exported so i'm going to say import shop data and that's going to come from our shop data folder so we need to come out of the context folder go into the shop folder and it's going to be inside that index.js file now the first thing we're going to do is we're going to create a products context and we're going to export it because we're going to use that same context later on in any component that needs to use the products list so i'm going to say export const i'm going to call it products context and we're going to call the create context function and this creates the product context for us now the next thing we're going to do is we're going to now create a products context provider so this is going to be a component and this component is going to take a single prop which is going to be the children and inside here what we're going to do is we're going to create or initialize the products by using the use state so we're going to say const and i'm going to have products and then we're going to say use state and we're going to initialize it with the shop data that we just loaded in so notice that we are not giving a function to update the state here because we're only going to use the shop data from that list but if we were to link with an external api we could easily add a function here after making a call for example then we could update the products list but we're not going to do that right now because we've got the list that we have and we're just going to be using that one so what we're going to do next is we're going to return some jsx and we're going to return the product context provider so i'm going to say products context which is this one here and we're going to say dot provider because it's going to be the context and then it takes a value prop and we're going to set that to be the products here so we're going to use the shorthand way for writing the object and we're going to then return the children and now we're going to export out so quickly go over what's happening here so we're importing the shop data so that's that list and it's coming from here and what we're doing is we're gonna we create a context and we call it net products context and then we are initializing the shop data to be the products list here and then we export out or we return the products context provider and we provide the products as a value and return the children as the prop that's passed in so we're not done yet we need to go into the index.js file this one here the entry point and we need to import the products context that we just created so what i'm going to do is i'm going to copy this just to make it easier and what we're going to do is going to say import the products context provider i'm going to import that from the context so we're in the index.js file so we don't need to go anywhere so i'm going to context and we want the products context file like so and we're going to do is we're going to take this and we're going to wrap the app component i'm going to cut that there put that in there and when we save that out and we go to our react up here just refresh just to make sure that we're not getting any issue here so that means everything is working just fine and just quickly go over what's happening here so we've got our products context provider which is the context here and we're wrapping our app component and what this means is that any component that's nested however deeply necessary it is will have access to the product context provider and it means that they can reach out into the product's context and use the shop data list so this is going to be really useful because it means that we don't have to pass down any props in any intermediary components so it's really useful here so now we have the products context what we want to do next is we want to create a featured product component now this component is going to display a single product and we're going to be reusing this component later on so if you go back to the components folder and inside here we're going to create a new folder i'm going to call this shed now inside the shared folder we're going to create the featured product component now we're going to reuse this component so that's why we're putting it inside of the shared folder now it's going to need a style sheet as well now the featured component is simply going to take a image a title and the price and it's also going to have a button to enable the user to add it to the cart so and i'm going to import the start sheet and it's going to take a single product as the argument or as a prop and it's going to return the image the title and the price so we're going to pull off the title and we're going to pull off the image url and we're also going to pull off the price and that's going to come from the product prop that's going to be passed in so we're going to return some jsx so i'm going to return a div and we're going to have the image container so it's going to be the featured product as the class name and this is going to be the container for the image so it's going to be featured image that's the name and then under the image we're going to have another div and this is going to contain the the title of the product or the name and the price as well so we're going to use that we're simply going to use the h3 as the title and that's going to say title and under that we're going to have the price so we're going to use a p tag for that give me a bit of space and then finally we're going to have the button to allow the user to add that product to the cart so we're going to use the button and it's going to be black and we're going to use our own custom styles i'm going to use the nomad button for that and then it's going to simply say add to cart like so now go back to the image and and for the image we're going to use the source and that's going to come from the image url close that off and give it a alt tag and it's simply a product so i'm going to say that and we're going to now export this out export default so it takes in the product and we're pulling off the title the image the price and we're simply going to return that as the values inside of the markup okay so now that we have that what we're going to do next is we're going to add some styles quickly so we're going to the start sheet for this and we're going to target the featured product and most of the styles are going to come from the app.sass file that we initialized earlier on so we're going to give this a border and we're going to set that to 1 pixels and we make it solid rgba and we're going to give it a shade i'm going to set the opacity to 0.125 and we're going to give it some padding and we'll set that to one ram all round and finally we're going to add a margin top and bottom set up to one and left and right we're going to set that to zero so that should take care of our future product component now we're going to use this featured product to return some featured bags that we're going to list under the middle section here and we're going to do that in the next video so the last couple of videos we've been doing some prep work for the featured collection section for the home page and now we're going to actually create that component and we're going to display four different bags as a featured collection so i'm going to go back into our code editor here and i've just noticed that we've misspelled the class name so i'm just going to correct that before moving on so it should be class name now what we're going to do is we're going to create the featured collection component now for that it's going to contain its own folder so inside the components i'm going to create a new folder and i'm going to call this featured collection featured collection and inside of this we're going to have a single file we're going to say featured collection jsx we're not going to create a style sheet because most of the styles for the featured collection are already included in the sas file so all we need to do is create the actual component and we're going to inherit the styles from the sas file that we created earlier on so for this we're going to create the featured collection component so we're going to import react and we're also going to import the use context so this is where we're going to use the product context that we created earlier on and i'm also going to import the product context so that's going to be products context and it's going to come from the product context file so we're going to need to come out of this file and then come out of the components and then go into context and products context here so what we're doing here is we're essentially importing this context that we created earlier on because we're going to use that context and we want to get the products from that list that we imported from the shop data and then we're finally going to import the featured product component that we just created and it's going to be in the shared folder so out of the current folder into shared and then we want the featured product component like so okay so now we're going to have const featured collection and then we're going to create the products so for this we're going to pull off the products and that's going to come from our context so we're going to say use context and we're going to pass in the products context that we imported and then what we're going to do now is we're going to loop over each of these products and then we're going to only return the first four so i'm going to call this product items and we're going to say here is that we only want the first four so we're only going to return where the index is less than four because we only want to return four items here and then we're going to map over that and we're simply going to return the featured product component and we're going to pass it the product and it needs a key as well so we're going to say so let's finish off the spreading and then i'm going to give it a key property and we're going to say product dot id as the key so now we're going to return the featured collection component so we'll rotate some jsx inside here and we're going to have a div and then we're also going to have a h2 title and that's going to contain the featured collection as the title and then we're going to have a div to hold our products so we're going to simply use the products items map that we just created so the new array that's coming in with the featured product items and we're only going to have four of those so i'm going to now apply some classes and we can apply a class name to the h2 heading and we're going to give the container for the products class name of products like so so that you can apply the css and then we're simply going to export now we only display this so what we're going to need to do now is go into the app.js file and then we're going to import the featured collection component and we're going to return that under the main section so we're going to include that in here and close that off and go to our app and here we have our featured collection component so it seems that some of our css styling is not working but we are loading in the products and we're using the product context just fine so we have a slight issue with the css here so it's not loading the css from the sas file and if you go back into the featured collection here what's happening is that there needs to be a space between the featured collection and the container because they're two different classes so the featured collection comes from the app.sass file that we created earlier on in the beginning and the container is going to come from the bulma framework so the two separate classes here so we've joined them together with a hyphen now if we save this out when it reloads we can see that we have the featured collection component now nicely displayed in our home page so if you've spoiled that error already and that's great if not then just make sure that you have a space between featured collection and the container and you save that out and you should have the featured collection component displaying correctly so now that we have the featured collection component the next final piece for the homepage is to create a footer now for the footer it's going to be really simple all we're going to have is the name of the store the copyright symbol and the year so let's go into the components and we're going to create a footer folder and inside here we're going to have the footer and the star sheet so we're going to do the usual when import react and we're simply going to return the jsx so we're going to have a div and inside this div we're gonna have the copyright symbol the year and the name of the store so let's do the year first so to get the year we're gonna have a const year and we're gonna make use of the date so we're going to say new date and we're going to get the full year so we're going to call that function so that gives us the year there so what we're going to do is we're going to say the year and then we're going to have the copyright symbol so simply going to do that like this and the name of the store nomad and that's all we're going to have in there and i'm going to export out the footer and as for the starsheet all we need to do is we need to set the whole thing to the middle so we're going to give it a width set that to 50 and we'll give it margin and we'll set that to auto and also text align all the text inside there and just make sure we have the class name footer on the diff so put that in there so we save that out now obviously we need to put this into the app so if we go to app.js file and import the footer and it's going to go right at the bottom here save that out and if you go to our page here we should have a simple footer right at the bottom we're going to set up some routing in our app but before we do that we need to create a layout component that will contain the header and the footer for our site this component will then wrap any other components that we create and give them a header and footer sections it will also give us the flexibility to add or remove the header or footer from any feature components that we deem do not need this now back into our vs code and what we're going to do is we're going to create a new file and since it's going to be a shared component we're going to put it inside the shared folder so i'm going to create a layout component and inside the layout component we're going to import the header and the footer so before doing that we need to import react so we now have the header and the footer so we're going to create the layout component now and we're simply going to return the header and we're going to have a main element and inside that we're going to return the children so we need to pull that off from the props and what we're going to do is we're going to wrap this in a fragment because we don't really want to have a div to surround the header and the footer so we're going to use the fragment i'm going to close that off here and inside of this we're first going to return the header and then we're going to have a main element and inside the main is where we're going to return the children now under the main we're going to return the footer component so you can imagine this to have any component being passed in it's going to have the header and the footer inside it or the header above it or the footer below it the next thing we need to do is we need to export this layout component now that we have the layout component we also need a home page component that's going to contain the hero section the main section and the featured collection section just exactly as we have things at the moment so for that we're going to create a homepage component and we're going to put that in the root of the components folder so i'm going to create a new file i'm going to call it home page and for this i'm going to need the hero main section and featured collection components so let's do the usual and import react first and then we're going to need the layout component which is created and we're also going to need the hero main section and featured collection components so just make sure we have the hero that stuff here or folder and then from there we want the hero component and then now we're going to create the home page so once again we're going to make use of the fragment then we're going to have layout and inside the layout we're going to return the hero and under that we have the main section and then finally we have the featured collection section now export this homepage out save that out and the layout has already been done for us so what the next thing we need to do is we need to go into the app.js file and inside here what we're going to do is we're going to set up the roots for our app so what we're also going to need is the switch and the root components from the react router dom so let's get that now and pull off switch and i'm going to pull off root we don't need any of this because we already have the homepage so we're going to delete everything inside here and we're simply going to return the switch and inside the switch we're going to have a root component or we're going to have the root path we'll have the exact prop as well that's the exact route that we want to match and the component that we want to render is going to be the home page component so we're not going to need any of these so i'm just going to delete all of that i'm going to say import home page and go into the components and then we're going to grab the homepage and we're going to set that as the component that we want to render for that root and now if we save everything out and go to our react app i'll find the layout component in the home page so if you go back to the home page so home page is here and it can't find the layout so the layout component is going to be in the shared folder so we need to go into the shared and then it's going to be the layout component now refresh and can't find the footer component go to the layout component and then into footer and we need to do the same thing for the header as well so if we save that out and because we have the product one from previously that root is not there at the moment now when we save everything out and we go to the root page we're getting exactly as we were getting previously so that's going to lead us to the next step so we're going to create a catch all component or we're going to create a 404 component that gets rendered when the page or when that particular path is not found in our app so now we're going to create the catch roll or the not found component so for that we're going to go into the components folder and we're going to put it in the root here so i'm going to say new file i'm going to call it not found and first going to import react i'm also going to need the layout component that's going to be in the layout i'm going to have const not found not found and what we're going to do is we want to have some basic styling for this so we're not really going to create a separate style sheet because it's just going to be a couple of properties so i'm going to have a style we're going to say the font weight is going to be bold and we're going to have text online i'm going to set that to center so just some css in js and we're going to return the layout component and inside of the layout we're going to have a simple p tag and we're going to say let me give it the style first so it's going to be our style object and we'll see we're going to say unfortunately unfortunately we can't find that page and we simply export this out now we go back into the app.js file and we're going to create a root for that so the route we're going to create is going to be a wild card or a catch-all route so for that i'm going to write root and we're going to say i'm going to want the path to be any other root that we can't find so we're going to say the asterisk and it's going to be a wild card and the component we're going to show for that is going to be our not filed component which we haven't imported just yet so i'm gonna go up here and we're gonna import that in and that's going to be in the room so i'm just going to say not found so it's going to be inside the components folder and not found so have that there like that so now if we go here and we're simply missing the forward slash so if we come back here now and we're getting the layout wrong again so if you go back to the not found component and the layout is going to be in the shared so we need to go into the shared folder save that out and now when we go to a route that doesn't exist it we have the not found component being rendered for us so that's the 404 component taken care of so at the moment we have our shop link here at the top so if we click on it here we don't have a shop component to display so next thing we're going to do now is we're going to create a shop component and for this we're going to have a pages folder now inside the components here we're going to create a new folder i'm going to call it pages and inside of the pages we're going to have a shop folder and we have the shop.jsx and the starship shop.styles.s now as for the shop component it's simply going to use the featured product component and we're going to display a list of all the different products that are available so i'm just going to import react first and we're also going to need the layout component and that's going to be in the shared and it's going to be layout like so and then we're going to have import featured component i'm going to use for featured product to display all the different products and that's going to be out of this folder out again into the shared and it's the featured product we want and we're also going to need to reach into the context so that we get a list of all the products so we're going to import that as well so products context and that's going to be in context and products context and finally we need the style sheet so we're going to import that in as well okay so we have all of the files that we need so now we're going to have a const shop and it's going to be a really simple component because we're going to make use of the featured product component that we built earlier on so we're going to first return a div and it's going to be the main container and then we're going to have a heading so for that we'll use h2 and we're going to say shop and then we're going to have a container for all the products and then inside here we're going to put in the list of all the products that we're going to be getting from the products context so let's now use that so we're going to first have a const products so we're going to pull off the products from the products context and for that we're going to need to pull off use context from react first so we're going to say use context and then we're going to pass in the products context and then this is going to give us then the products as the returning value and then now we're going to have const all products and then we're going to simply map over the products that we've just got from the context and then we're going to use the featured product component and we're going to pass it the product or the individual product that we get from the map and then it's also going to need a key and for that we're going to say product dot id and i'm going to close that off now inside here we're going to basically return the all products so it's going to be a individual products that we're going to have and they're all going to have their own separate featured product div to contain them inside and then what we want to do now is we want to apply some class names so that later on we can apply some styles so this is going to be the product list container and then this is going to be the product list title so we're going to have a class name it's going to product and then list title and finally this is going to be the products list itself so i'm going to have last name product list like so and that should be about it really so what we're going to do now is we're going to export this so export default shop and then before applying the styles we're going to add this to the app.js here i'm going to create a root for it so let's first import the shop component so i'm going to say import shop and that's going to come from the components and then we had the pages and then we had the shop and then we want the shop component from there so we're going to have we're just going to put it before the catch-all route here we're going to create a root path for it and the path is going to be slash shop so that's the path that we want and the component we're gonna display is simply going to be the shop component so we display that like so now if we refresh this and then obviously we're still at the um the shop component here now obviously it's displaying all of different products that we have in our products list but what we're missing is the header and the footer that we haven't added yet and for that we need the layout component so we're going to make use of that which we didn't just here so we're going to use the layout component and we're going to wrap all of the different components that we have here so we're going to take this and put them inside and just make sure they're all indented correctly so that looks looking okay so now i'm going to save that out and obviously when we refresh this we should have the header and we should have the footer component at the bottom so it's now correctly loading our shop component but we don't have any styles and that's what we're gonna apply in the next video so now we're going to apply the css to the shop page so if you're going to the shop.style.s and the first thing we're going to do is we're going to target the product list container and we're going to give this a margin first so we're going to have top and bottom we're going to have 3m rem and not really want any margin on the left and the right and what we're going to do next is we're going to target the list title so i'm going to center that and give that a breathing space of a margin top and we're going to have first a margin top so we'll give you a bit of space and we're going to set this to be five rem so i want some nice clear space between the title and the rest of the content and then we're going to have the text align and we're going to simply center that so that's the product list title and then for the individual products what we're going to do is we're going to give them a give it a margin and when the user hovers over it we want to have the pointer and it's going to be a div inside that so we're going to nest that in here and then we're going to say margin and we're going to set that to be one ram and then the cursor we're going to set to be pointer now that's the product list taken care of now what we also want to do is want to cover the situation where it's going to be a desktop viewport so when it's in a larger wide screen format we want to target the product list container so for that we're going to now do a media query and what we want to do is we want to target the product list container and we want to basically set a display value for all the product lists so inside that we're going to say product list and then we're going to set the display i'm going to set that to flex so that it they sort of line up nicely and they take up all the available space and then we're going to use the flex wrap i'm going to set that to to wrap so when there's no space it goes to the new line and we're going to sort of justify the content 102 center and we're going to use the align items so i want to center everything i'm going to center that as well and then we're going to give it a margin and we're going to set that to zero for the top and bottom and left and right we're going to say two five rem and then we're also going to target l the the it's all div inside the products list which is which which contains the individual product and what we're going to do is we're going to set a flex value for that so we're going to say 0 0 i'm going to have a baseline of 300 pixels so the actual size of each of the products in for the featured product component so when we save this out and we come back here now we have a nicely styled shop page so depending on the space available this is how it's going to display so if you go to a smaller viewport then they take up the space that's available and when you source a stretch out then they stretch out and take out all available space so this is the shop page is done for us next we're going to create this single product view so when you click on a particular product it's going to take you to a page and that's the component we're going to build next so now we're going to create the single product view so what we want to have is when we click on a product we want to be taken to a single page that shows the image a description of product and the price and option to add it to the cart like we have here so if we go back into our components and we're going to create a single product so what we're going to do is we're going to create a new folder i'm going to call this single product and inside of here we're going to create a couple of files so we're going to first create a single product.jsx and we're also going to have the single product starsheet to go with it now as for the component itself what we're going to need is the product or a single product that we're going to be displaying now before we display anything we're going to need a few things so we're going to need to check to see that a product is in the product's context and to actually get the product we're going to get it from the root param so when the user clicks on a product it's going to then go to the product like this root and then we're going to have the id of the product so if the product id is one it's going to be one if it's two it's two and so on so what we want to do is we want to get the root param and we also want to check to see if that product is in the products context so let's have a start on that so we're going to first import react and we're also going to need a few other things so for now we're going to import the products context so it's going to be context and then we're going to have the products context and we're also going to need the layout because we want the header and the footer so we're going to get layout from the shared folder so out of this one of that one again and we're going to shared and then we're going to go to the layout like so and then we're going to import the style sheet as well so so i'm now going to create our component so i'm going to call it single product and then what we're going to do is we're first going to get the products context so we're going to have a products because we want to pull off a single product from here so we're going to need the use context so we're going to pull that off from react first so i'm going to say use context and then we're going to say the context that we want to use is the products context and now what we also want to do is we want to get the id from the root param and for that we're going to need the router so let's also import that as well and we're going to export that later on and have the history object and the part and the match.params object to be injected into the component so we're going to import with router that's going to come from react router dom now what we want to do is want to pull off the id from the params so that's going to be match dot params and we're also going to get the match from the props that are going to get passed in so we're going to get the match and we also want to get the history as well because we're going to push the user to the shop page if we if you can't find that product id in the products context so we're also going to pull that in for now and then what we're going to do is we're going to now use this state so once we have the id we're going to use the state so we need to get use state from react and we're going to do is we're going to say const product because we want to set this to be the state so product and then set product as the function to update it use day and initially we're going to set this to null because we don't have a product when the component loads on in the first go and then what we also want to do is when the component loads on mounting we want to check to see if the product that comes in from all the product id that comes in from match.params is found in the products list so for that we're going to need to also make use of the use effect and we're going to pull that off react first so we get the use effect function and then now we're going to say use effect and then we're going to pass a function now inside the use of in the use effect we're going to do a find or we're going to loop over the products array i'm going to try to find the id of the product that gets passed in from the match.params.idv value so let's do that now so we're going to say const product const product and then we're going to use products which is which is going to be the list or the array and then we're going to use the find method so we want to find the id of the match params matches any id in the products list so we're going to have an a callback function and then we're going to have an item here so we can remove the because it's a single parameter we can just remove that and have it like this and then what we're going to do is we're going to say we want to make sure that it's a number so we're going to wrap item.id because it's going to be coming from the products and we want to make sure that it's actually a number so we just use the number function here so that's a native number function we're calling and we're putting our item id inside it now what we want to do is we want to find out whether that item.id is equal to the id that's going to come from here so if it is then that means that product is inside of the products list that we have so we're also going to wrap that in the number function and then we're going to pass in this id here and then we're going to make a comparison here if that returns true then what's going to happen is it's going to return that item and it's going to put it into product for us like that so that's what's happening there and then now in the use effect what we want to do is if the product does not exist so say we do that check here and the product does not exist what we want to do is we want to redirect the user back to the shop page so if product does not exist redirect to the shop page that's what we want to do here so for that we're going to do a simple if check here and what are we going to check we're going to check that if there's no product after doing this so if it can't find it after doing the check for the products if it finds it it's going to return that product so that's going to be a truthy value if it can't find it it's going to return undefined so that's going to be false or it's going to be a falsie value so we're going to say if it's not there then what we want to do is we want to return and i'm going to redirect the user to go to the shop page so what we're going to do is we're going to actually pull off the push function from the history object here like that so we would destruct it so this is es6 destruction and we're going to push that off and then we're going to redirect the user to the shop page so that's in the scenario where when it does the check it can't find the product in the product list and it's going to return undefined then what's going to happen is we're going to redirect user to the shop page to select a product that's actually in the product list that we are selling so that's what that is doing there otherwise the happy state what we'd like to do is we want to say we're going to now set that product that we found to be the state and we're going to set that here using the set product so we're going to say set product and we're going to say with the product that comes back in so that's going to be product like that so it's coming from here like this so in the happy state we set the product and we set that to be the state here so product is not going to contain the product that we found from the products list from the context so that's what this is doing here so now what we can do now is we can now go into the return statement and before doing that we're going to first pull off a few things from the product that we have set in the product and we need the image url and we also need the title and we need the price and the description it's going to come from the product that we've set in the state there now we can now return some jsx to display the single product on the single product page so all we're going to do is we're going to now make use of the layout component so we're going to first return and then we're going to use the layout so that we can get the header and the footer and inside of here we're going to have our containing div and then we're first going to return the image so that's going to have a simple image element in here i'm going to set that source to be the image url and it's also going to need a alt attribute so we're going to say product that's the old attribute so this is going to contain our image and then under this we're going to have the product details so the description and the title that's gonna have its own div so a containing div and then we're gonna have the div to hold the name and the price so it's going to have a h3 and this is going to have the title it's not doing that like that and then we're also going to have a p tag and this is going to contain the price now that we have the price what we want to do is we also want to have some buttons to help us to add the item to the cart and for that they're going to have their own container and inside we're going to have a button and the button is simply going to read add to cart and it's going to be all uppercase and then we're also going to have another button and this button is going to enable the user to check out so once they've added the item to the cart it takes them to the checkout or takes them to the cart component where they can check out and pay for the item so i'm going to have another item another button like this i'm going to write here proceed to checkout like so and closing that div out there and then what we're now going to do is we want to add have a description so for this it's gonna have its own containing tag or on containing div and we're gonna write a simple description here and for that we're gonna pull off the description and use the description variable that we have so i can put it on a single line so it's going to use a description that's coming from the product and that's the jsx done so what we're going to do now is we're going to apply some classes so the class name for the first containing div is going to be a single product container so a single product and this here contains our image so i'm going to say product image and now this one contains the product details so we're going to give it a class name of product details and now this div here contains the name and the price so we're going to say class name is going to be name iphone price and then this div contains the buttons so we're going to call this add to call buttons and for the buttons themselves they're going to have a class name and we've been using the button from bulmer and this one is going to be white so we're going to use the is white and we're going to have the nomad button custom styles added to that as well and what we're going to do is we're going to also give it the button white outline so it's going to come from our sas file app.sas file i'm going to give it an id say button white outline so just to customize it even further and as for the second button we're going to give it a class of button so class name first and then we're going to also have this to be a white button we already have the white so it's going to be black this one on the black button and we're going to have nomad button as the class and we're also going to give it the same id which is going to be button white outline so we get a white outline for this button here so give it the idea as well and finally we're going to have a class for the description container and we're simply going to call this product a description okay so that's a lot of jsx there and this is the layout for the single product component and finally what we need to do is we need to return and we need to export this component here and we need to export it out with using the with router so what we're going to do is i'm going to say export default and it's a single product but before doing that we're going to say with rooter and then we're going to and then put in the single product because it's going to we're using the higher order component with router here and we'll save that out now what we want to do is we want to create a route for this inside of app.js so we want to also get the the param so we want to get the root param which is going to be id set to id and we want to get that from the match.params so we're going to the app.js file and what we're going to do first is we're going to import the single product so now that we have the component we're going to create a path for it we're going to add it under the shop path so root path and this time what we're going to do is we're going to say we want the product as the path so forward slash product and then we want we're going to basically put in the root parameter like this so we're going to say whatever comes after this slasher is going to be assigned to the id variable inside of match and that's what and that's what this specifies here and then we're going to say the component that we want to display here is the single product component so a single product and finally we close that out and we save that in there so we have our shop component and we have the root for the single product component so now if we go to our react app here so we're getting an error here saying that it can't resolve the layout component in our single product here so if you go back and now we're going to the layout so do not need to come out of it twice so that's that one there and then come back here and now it's saying can't resolve singleproduct.sas so singapore.style.styles so that's going to be with an s there so it's typo now if you save that out and our component we don't have any errors now so we're going to test this to now we're going to say product one so that we know that we only have a id of one for our first product so we know that exists there so if we go here then we are getting an error here so it says type error i cannot destruct char property image url of product as it is now okay so our component is working just fine but when the component loads initially um in that moment it's loading what's happening is that the product is is set to null initially and when the component first mounts that's going to be null and what we're trying to do here is we're trying to pull off these properties from product and that's null to start off with initially so it's going to be for a moment that's going to be null until we do this check here and then the user effect returns the set product and then updates the product state so in that time what we need to do is we need to either have a spinner so just to like have a loading component just until we able to either find the product or not find it and redact the user almost it's find it then it's going to assign that to the product variable here so we can either have a spinner or what we can have is we can just sort of return null just for that moment so we're going to say if there's no product simply like how we do it here instead of redirecting as we as if we can't find the product what we're going to do is we're going to return a null for now so we're going to just return no just for that moment so while we check for product so this is going to be like a momentary thing here um so it's going to if there's no product at the moment what we're going to do is we're going to just return no until we do the check and use effect completes that check and once it finds the product it's going to update that to the product state and then be able to run the rest of the code just fine if you can't find it then it's obviously going to push the user to the shop component and it's going to push them away from this component so if you save this out now um and it works perfectly fine so that was a momentary thing there that we had so we could be loading a a spinner but we're just going to return for now it's just what makes it sort of simpler so we have our single product component now displaying and the next thing we're going to do now is we're going to apply some css styles so now we need to apply some styles to the single product view here because obviously it's taking up the whole page now before we do that we're getting a few warnings in the console saying that the use effect has some missing dependencies now the user effect here is using a few i a few items or a few variables that we need to provide as dependencies so it's using obviously the id and we need to provide that and it's using the product and it's also using the push function like this so these are the three things that it's using inside obviously we use the product spot that doesn't change too often so if we now update this here and we're saying yeah we're missing the products so we're going to also add that as well so just make sure you add the id products uh i pro id product push and products and as a user effect will use this to try to figure out whether it needs to run the function um depending on the update because use effect runs after every render so now if you go to our app here that should remove all the warnings in the console right so now what we're going to do is we're going to apply some styles so we're going to go into the single product.style.sass file here and what we're going to do is we're going to first target the single product container and we're going to give some margin first so we're going to set the margin to top and bottom and then the left and right we're going to just leave that as zero and then we're going to give it a margin bottom and so we want to give it a bit of breathing space from the footer i'm going to set that to a nice three rim and then we're also going to have padding all around and we'll set that to two ram okay so now what we want to do is we want to also target the break point so the desktop breakpoint so i want to target that and and basically set the display to be flexed as we've been doing throughout all of the pages um and our break point we're targeting is the 1024 on zero to four pixels and we're basically going to set the display and we're going to use the flex value there and we're also going to center using justify content and we'll set the value to center and then we want to align the items and we're going to center that as well and then now what we're going to do is we want to target the product image next and so we're going to type product image and what we're going to do now is we're going to give that a flex value and we're going to set the shrink and grow to zero and then we're going to give it a baseline of 400 pixels like like that and we also want to do that for the product details as well so we're going to add that in product details targets those two classes there now what we also want to do is for the product image we want to have a margin so we're going to target that and then we're going to give that a margin of 2 ram and then now for the product details that contains the name and the price so we want to give that a margin as well so we're going to target that product details and then inside that we have the name class name and the price and then we want to give that a margin of one rem top and bottom and zero for left and right and then we also want to target the add buttons container or add to cart add to cart buttons and what we want to do is we want to give that a margin to ram top and bottom and left and right we'll just leave that as zero and then we're also going to target the product description so it's going to product description and then we want to do is we want to get the p tag inside of that container and we want to give that a line height and we'll set that to 1.5 so this adds our css so we save our our file and now when we refresh the page here we're still not getting the styles to be applied so now let's go back to the star sheet and let's have a look here so we have our okay so we've got a typo here so it should be single product container so we're missing the l there so if you save that out now we're getting the styles to be applied to the single product page so this is the styles completed for a single product page and this completes our react ecommerce site so we have a home page we also have a shop and now if you click on the shop item here what we want to do is we want to be taken to the single product view so we're going to update the featured component and we're going to update that to take the user to the page so if you go to our featured product so that should be in shared and go to the featured product here so what we're going to do is we're going to now import the router or with router because we want the programmatically route the user to the single product page and we're going to get that from react router dom and then now when the user clicks on the image so i want the whole entire image so what we're going to do is we're going to put a on click handler on this div here so i'm going to say on click so if the user clicks anywhere in that particular product we want to take them to the product page so we're going to now say we're going to pull off the history first so we've got the product here so what we want to do is we want to update that and what we're going to do is we're going to update that to be props like this and then now we're going to pull off the product from props so we're going to say it's going to be props like that and then we're also going to be pulling off the history as well so we're going to pull off the history and we need to obviously pull off the id so that's going to come from the props as well so we're going to say id like that and then we have our title image and price and we're also pulling off the history because we're going to use that use the history dot push function now inside the callback here we're going to say history dot push and then we're going to take the user to the product page and one obviously use the backticks here because we want to interpolate the id variable so what we're going to do is we're going to say ford slash and then we're going to use the dollar and then curly braces and then what we want is the id that we get from the props that get passed in here so now what we're going to do is i'm going to return the with router now when we save this out and we go to our react page here and then when we click on any of the products here it takes us to the single page product view and it puts in the id inside the root param and that's where we get it for the single product view to actually get the product from the product list so now what we're going to do next is we're going to work on the most interesting part of the react e-commerce and that's to actually make the car functional because at the moment we have the number five hard-coded so we're gonna make that functional and that's what we're gonna start working on next we're going to start working on the most interesting part of the ecommerce app and that's to make the cart functional in terms of deciding how to implement a functional car we might think about adding redux to our app if you've worked on complex applications with react before you'll know that the less tools that you add to achieve your goal the better adding redux to the app adds another layer of complexity so it's always important to think carefully about whether you need to add redux to your app so you should always ask yourself what data will redux state help make easier to access throughout the application can you still achieve the same result without adding redux is it possible to use react context instead of using redux because now we have not only the react hooks but we also have the context from before so think about your application like this will reduce technical debt later on and it's also going to help you to easily scale up and add more features without having to do major refactoring or rewriting certain parts of the application as for our card we're not going to use redux mainly because you can achieve the same result without it that is we can use react context react hooks and in particular the use reducer hook and if you're familiar with redux you'll find that it follows the same principles as redux and at times you might actually think you're using redux so let's start adding the cod functionality into our app now to make the call functional the first step is to have a card context now the car context is going to hold the car items the item count and the total it's also going to pass down some functions to add items to the car to remove items to the car to increase items and to decrease the item quantity so for this we're going to create a new file inside the context folder so i'm going to crawl this file context and inside the cart context here we're going to create the car context we're also going to create the reducer so we're going to use a re the use reducer hook that comes with react and for that we're going to create a new file and we'll call this cart reducer now we're going to create the reducer first so it's going to be really simple to start off with so i was going to call it const car reducer and if you're familiar with redux it's going to take a state and it's also going to take an action parameter so what we're going to do is we're going to use a switch statement and then we're going to look at the action.type so it's going to be some action creators and then wherever that they return depending on that action a certain case will be executed so right now we're just going to have a default statement in here and all we're going to do is we're going to return the state so that's all this card reduce does to start off with i'm going to export this now we have our cart reducer now back in in the context here what we're going to do is we're going to create a cart context and we've already created a products context it's going to be very similar so we're going to first import react and we need the create context function so we're going to import that as well and we're also going to import the use reducer function because we're going to use that hook as well and we're going to get that from react now what we're going to do is we're going to also import the cart reducer that we just created and that's going to come from the same file and it's called cart reducer and now we're going to export const and we're going to create our context called context and i'm going to say create context i'm going to call that function and then we're going to have an initial state now this initial state we're going to pass to the use reducer hook so we're going to have const initial state and then we're going to create an object and this object is just going to have the car items and we're going to set that initially to an empty array and then we're also going to have the item count so the number of items in the cart and we're gonna initialize that to zero and we're gonna have the total amount that the user needs to pay or the customer and we're gonna also initialize that to zero now we're gonna create the context provider component called context provider now this is going to take a children prop and what we're going to do is we're going to first create the state so we're going to have the state we're going to call it state and then we're also going to get a dispatch function and this is going to come from the use reducer okay so before we're using the use state our unused effect now we're going to use the use reducer so there's quite a few hooks that are available in react now and the first argument to use reducer is our cart reducer that we created earlier on and the initial state that we just had so in redux you would probably you do this inside the reducer file but the cart reducer or the user reducer here takes the second argument as the initial state and that's what we're passing here so it also then returns the state so initially it's going to be this object here and it's going to return a dispatch function now this dispatch function is going we're going to use it later on when we create the add items or remove items increase items and decrease items and so on and it's going to be used to basically run that action through our cart reducer that we just created so that's that's what a dispatch function is for so now what we're going to do next is we're going to create a context values like we did previously and then we're going to do is we're going to basically spread the stay out so essentially we're spreading out these items here so items item count and total count into the context values and then now we're going to return a context provider so we're going to say return card context dot provider and it's going to take a value prop and we're going to set that to our context values i'm going to close that out and in between that we're also going to return the children that we get passed in as props and then finally we're going to export cotton card context so export default card context provider now what we need to do is the same thing we did previously when we created the product context we need to go into the app.js file and then we need to import that context so similar to what we're doing already app.js file rather it's actually the index.js file so what we're doing with the product context provider so we're going to do the sim same thing here so we're going to import that context first so it's inside context and it's the car context that we want and then we're going to wrap the app so i'm just going to put it beneath the products context i'm gonna move that inside here save that out and then now if you go to our app and we re refresh everything so it means everything is working so obviously we're getting a warning here saying that we haven't used dispatch function just yet we're going to be using that in just a moment when we create the functions to update the car items now what i'd like to do is i'd like to wire up the car item or the car icon here to use the item count from our carton from our car context so we're going to go into the components and then we're going to open up car icon.jsx and now we're going to make use of the car icon so at the moment it's it's set to zero but that's fine because obviously we're going to be updating that later on so let's first import the context so we're in the component so we're going to come out of the car icon fire folder and we're going to come out of the components and then we want the context and then we want the cart context and then we're also going to need the use context function from react so we're going to say use context now inside the car icon here we're going to pull out the item count so remember that was returned from the initial state and it was set to zero so item count and we're going to say use context and we're going to pass in the context so now we have the item count what we want to do now is we want to do a check so we want to check to see if the item is greater than zero so if it's greater than zero then obviously we want to use that item count and display if it's not then we want to we don't want to display the span here so let's do that in code so we're going to now do a check i'm going to say item count greater than zero if it is then we want to return the span and that's what we're going to do we're going to cut this i'm going to return this span here and we're going to put that item in item count inside the span so if it's greater than 0 whatever it is we're going to return this span and we're going to return the item count otherwise we're just going to return null because obviously the user hasn't added anything to their cart just here so we're going to save that out and then if we go to our react app here so we're getting item count of object is undefined so we're getting an error on line number seven so let's have a look here so we're passing context so let's double check what we're doing here so we've got context and we're not exporting we're exporting out so i'll export const context and bringing that out but the way we're using it is not correct so let's go back into our file and because obviously we've just exported it out we need to wrap that in curly braces so if we save that out and now that should be working just fine so there we have now so it's the number five the hard code the value that we had previously has now gone because obviously the item count is zero so what's happening is that once once that is zero then it's just going to return null if it's greater than one then it's going to return the item count so we've got that working now and what we're going to do next is we're going to start adding things to the to the cot and we're going to have the add item we're going to get that to work now so now we're going to create the first function to add an item to the context in fact we're going to create an action creator so for this we need to go back into the context.jsx file which i have opened already now what we're going to do is we're going to create a function so we're going to call this add product and the function is going to take a product as an parameter and what we're going to do is we're going to make use of the dispatch function here so we're going to call that and inside it what we're going to do is we're going to pass a object so we're going to pass an object and it's going to have type and we're going to set that to add item so it's very similar to redux if you've done redux before this is the same concept here so we're going to set the type property and we're also going to have a payload and we're going to set the payload to be the product that gets passed in here so that's our action creator and what we're going to do is we're going to pass that down via the context so we're going to pass it down here so i'm just going to create a little bit of space and then we're going to pass that down so that means any component that reaches into the cart context is going to be able to also get the add product so we're going to you can imagine we're going to use this in the shop component and we can also use it in the single product component as well so that's what we're going to be doing later on so now that we've added the action creator we need to update the reducer now to make sure it's listening for this action type here so we're going to go into our cart reducer and we're going to update this so the first one is going to be a case where if it's add item we want to add that item to the cart items in the state so let's have a crack at that so the first thing we need to do is we need to create a switch so we need to create a case rather so we're going to say if it's going to be the if action type is add item okay then we're going to reduce we're going to um basically update the state because this is something that we're concerned with here so the first thing that we need to do is we need to check to see if the item is not in the cart already because if the item is in the car we don't want to add another duplicate item on there so that's what we're going to do is we're going to write a comment here to help us we're going to say check if item is in cart so that's what that's what we're doing here so we're going to do a if statement and we're going to say if the item so it's going to be in the current state and it's going to be in state.car items and then we need to find that item so we're going to do a find on it so call items is an array if you remember and then i'm going to try and find that item so i'm going to say item and then we're going to check now we're going to get the item.id so this is going to be the current items so it's going to loop over the car items and get the current item id if that is equal to action.payload.id and this is the payload that gets passed in from the action creator so when we pass that in here that's going to be an object and it's going to have an id property on it now if that is going to be equal to the item.id and it's not currently in there so when this runs it's going to check to see if the item is there and if it returns a undefined or a forcing value that's what we're trying to find out here then that means the item is not in the current car items so it means that we need to now add that item in the payload to call items so to do that we're going to mutate the current state so we're going to say state dot com items and then we're going to now push that in here so we say push we're going to use the push function because call items is an array and we're going to push an object and then the first thing we're going to do is we're going to spread out the action.payload because this is a new object or a new product that we have and payload is an object so we spread out the contents of payload into this new object that we're going to be adding to the car items and we're also going to now attach another property and we're going to add that to be quantity quantity and we're gonna set that to one because this is the first time it runs we're setting it to one because the current product does not have a quantity property and we want to have a quantity property that the user can have multiple pairs of something or multiple items of the same thing so it can have a bag and maybe one they want two or three um three different items or to do three times that same bag so that's what that quantity is for so we're going to push that into the car items now outside of this if check here we're going to return the state here so this if check is only going to run if the item is not currently in the car items and if it's not in there then we're pushing that new item so we're gonna now return some new state now as for the new state we're going to return the old state and we're going to spread that out because there could be contents in there that we haven't touched so we don't really want to sort of make a change to that or delete anything from the state so we're going to we're going to spread the current state and we're going to update the items that we have already updated so it's going to be the cart items and we're going to set that to a new array and we're going to spread out the contents of the current state.com items that we've mutated here we've added something to already if it's not there already and then what we want to do now is we want to update the item count and the total now for that we're going to need a helper function so i'm just going to come up here and i'm going to create a new function and i'm going to call this sum items now this function is going to take the car items as a parameter and then it's going to add up the items for the the quantity and add up the items for the for the total so let's let's actually implement it so we're going to say const some items and then we're going to now take the car items as a parameter and then what we're going to do inside here is we're going to first return an object where to return an object and that object is going to have the item count just need to have the arrow function so it's going to be called items so we don't have the correct there we are syntax there so we have the item count and then the item count now is going to be the total of all of the quantities so the quantity of each and every product that we have in the car items so for this we can use the reduce function because call items is an array and what we want to do is we want to basically iterate over each of the items inside that array which is going to be objects and we want to basically get the quantity property of those objects and we want to add them together so this looks like a really good use case for the reduce function and let's actually implement that now so we're going to say call items and then uh it's going to call the reduce and the reduce takes a callback function and an accumulator and so what we're going to do is we're going to pass that in first so this is going to be the accumulator that's the second argument and the first argument is the callback function so the first argument to this callback function is the accumulator which we've set to zero and we'll call that total and then we're going to have the product so we'll just call that product so the actual object which is going to be that product that was passed in now what we're going to do is we're going to basically add the total and product dot quantity together and we're going to keep doing that for all of the items in the cart items like that so what's happening here is that we have the car items and we basically iterate over that we get each item as prod and we get an accumulator we set that to zero and we basically add zero for the first instance we add it to product quantity and you add it for that first item and then for the second item we do the same thing third item we do the same thing and we keep doing that until there are no more items and then we simply return the total into item count and that's the number of items that are in the cart itself and then we're going to do something similar for the total so we're going to get the cart items again and then we're going to call the reduce function and then this time we're going to have the callback function and the accumulator and then we're going to have the total and we're going to have prod but it's going to be slightly different because this time what we want to have is the total i'm going to add the product.price multiplied by the product.quantity so let's do that in code so total plus and let's just wrap that in brackets and then we're going to have product prod dot price and then we're going to multiply that with prod dot quantity so what this is doing is that it's going to get the item and then it's going to multiply the item's price with the quantity so if the quantity happens to be 2 for example and the price is 10 then it's going to multiply 2 by 10 and it's going to add that to a total and initially it's zero and it does that for each and every item that we have in our cart so now that we have this helper function here and what we can do is we can also export that so that we can sort of use this function anywhere that we need in our app so just export that there and then we're going to come back down here to the state that we're going that we're returning here so what we want to do is we want to basically spread out the result of this function here now the function here returns an object and it means that we can use the spread operator so what we're going to do is we're going to say three dots and then some items and we're going to pass it state dot co items and then that basically does the calculation in there and it returns that object and we spread out the contents of the object into this state here and we save this out so now if we go back here and just make sure that we haven't got any errors in our function or in our reducer so this means that it seems to be working correctly obviously we're going to test it later on when we wire up the add item or add product function for the add to cart buttons and next that's what we're going to be doing now before we use the add product function we're going to create a helper function that we're going to use to help us decide if we need to display add more or add to cart on the buttons so now we have the add to cart here when that button is clicked we want to show add more because we already have that item in the cop and when they want to increase the quantity of that item and for that we're going to need a help function and that's what we're going to create now so if you go back to our code editor here and inside of the components folder or inside of the source folder rather what we're going to do is we're going to create a new file and we're going to call this helpers.js now in this file it's going to contain all of the functions that we're going to need or all the functions that are going to help us to do certain things like this function here so we're going to first export the con the function so we'll say export const i'm going to call it is in cart now this function is going to take the product and it's also going to take the cart items because what we want to do is we want to find that item in the car items so if that product is already been added to the cart items then we want to either return true or return false for that so we're just going to simply use the find method on the car items array so let's let's do it now so we're going to first take the product as the first argument and we're also going to take the car items now as for the function it's going to be really simple we're just going to return the result of car items dot find so car items find and we're going to have the item and we're simply going to do a check so we're going to say item dot id is equal to product dot id so this is going to iterate over all of the items in cart items and it's going to check the id of each product in the car items if that happens to equal one of the the id that is passed in for product then that means that item is in the cart and then it's going to return that item and it's going to be a truthy value if it's not in there then it's going to return undefined and that's going to be a 4c value and then we're going to make use of that later on in terms of deciding what to basically display on the button to either display add to cart or add more so we'll save this out for now and then we'll use it in the next video so now that we have the easing cart function the next thing is to now wire up the add product function that we created in the context but before doing that i've just realized that the way we're exporting the context is slightly wrong so what we have here is a nested object so we have another object inside and then for the property we're setting it as context values and later on when we destructure the items from the context it's just going to make it a little bit tedious so we're going to remove this extra object like this so if you had that on there previously just remove it because context values is itself an object and then later on we can just pull off the state the car items and any of the functions that we're using so just make sure you have it like this now we're going to wire up the add product function that we created and for that we're going to start with the featured product collection or the featured product component so if you open up the components and under the shared folder here we're going to now wire up the add product component so there's a few things that we need we need the easing cart function and we need to obviously reach into the context so let's pull in the using cart function first and it's going to be in the helpers file now what we also need to do is we need to reach into the context and then we need to pull off the cart items and the add product but before doing that we also need to use context so we're going to pull that off react and then now we're going to now pull off the item so we're going to get the add product function and we're also going to get the car items and this is going to come from use context and it means we also need the context itself so we're going to import that in and that's going to be out of this one and then into context and the context like this i'm going to pass that in like so okay so at this point we have the context so we have the add product and we have the car items that we've pulled off and then the next thing we need to do is because we're going to be calling the is in cart function we need to create a product now the way we have the props in this component is that we're also having injected the history object from the react router module and then we're going to we're only simply getting a single props object that we can then destruct the items that we need so what we're going to do is we're going to create a const product and this is going to be a function so it's basically going to just mirror what we have but it's going to be a separate product variable so image url price and id and we also need the description so we're going to pull that off the props first and then we're going to add that to our product variable now we need this product because we're going to call the easing cart function later on so the next step now is inside the jsx what we need to do is we need to do a conditional logic test so if the item is in the cart already we want to display add more if the item is not in the card then we just simply want to have add to cart as we have here at the moment so i'm going to go in here and then i'm going to use curly braces and then i'm going to cut this button first i'm going to put it in here and then we're going to do our conditional check inside here so we're going to call the easing cart function and if you remember it takes the product and it also takes the car items so we get the car items from here and we have our product variable just there so if the item is not in car items already if it's not in there then what we're going to do is we're going to display this button and we want to have the add to cart button like this so that's all we're doing now along with this so i'm just going to format this slightly so i'm just going to put that down there like that and then the button here is also going to have an on click handler so let's add that in now so when this button is clicked we want to now wire up the add product function that we have from the context so what we're going to do is we're going to have the callback function and then we're simply now going to say the add product and then we're going to pass the product that we created there so it's going to pass the product and if you remember the way that this component is constructed is that it's going to have the product details passed in as props and which we're destructing here and then we have the product and we're simply passing that to the add product function that we're getting from the use context so that's what's happening here so now in the grand scheme of things it's going to check to see if is in cart if the item is in cart already if it's not in the car then it's going to display this button and it's going to then have the on click handler to add the item to the product otherwise we want to display another button so we're going to call is in cart again so i'm just going to copy this and i'm going to put that here but this time i'm not going to put the knot in there so i'm not going to invert it because now i want to confirm that the item is in the car and then i want to basically display another button so for that i'm also going to copy this and i'm going to put it on a separate line now if the item is in the cart already then i want to display add more and put it in like that and then we're also not going to call the add product because the item has been added already later on we're going to create another function to increase the item quantity and for that we're going to have a separate function so this is simply just going to have an empty function for now and then later on we're going to come back and update it with a function to increase the quantity of that particular product so i'm going to save this out here and then what i'd also like to do is the add more is going to have a different button style so it's going to have an id and that's going to be set to button white and it's going to be an outline like this now this basically wires up our add to cart button here so let's just go over what's happening again we're importing the so i just realized we're not calling this function correctly so we have is in cart we have it twice we only need it once so we have the is incomp function that we created earlier on the helper function and it takes the product on the cart items and it returns whether the item is in the cart if the item is not in the car then we display this button and we have the add to cart and the on click handler for that is going to be add product and when the user clicks that button it's going to add that item to the car and then you also have the second button and this button is only displayed if the item is already in the cart then it's going to display add more and then later on we're going to have a function to basically increase the quantity of that item in the cart so it's gonna save this for now and in the next video we're gonna test out that this actually works okay so now we've wired up the add product function so we'd like to do next is we want to test that we can actually add a product to the car items so before doing that let's just go to the reactor up here and just refresh everything and make sure we're not getting any errors and then we need to navigate to the shop page because this is the featured component that we've just wired up to use the add product function now what i like to do is if you go back into the code editor here and we're going to go and find the car icon.jsx and inside here we're going to basically pull off the car items and then log that to the console so call items and then we're going to log this to the console so call items so if you go back now so this is this component that we've just updated so that's what we're logging out here so the car items at the moment is an empty array which is the initial state so that's good so now if we go back to the featured component here or the features product component what we're doing is when we click on the add to cart button here we want to basically add that item to the car and we also want to make sure that it's going to change to add more once we click on that button once so that's the outcome that we want so if we now go back to the page here and let's say we want to add the studio back so when i click on this here now that means that everything is working so if it's change the button to add more look at that it's working it's great and it's also updating the item count in the car icon in the in the um in the header there at the moment and if we now look in the console what we can see is that we have the car item added to the or you have the item added to the cart and we can have the description you have the id the image url the price the quantity and the title of that product so everything seems to be working just fine at the moment we do have the add more but we need to have the button to have a white background so what we're going to do now is we're just going to go back in here and because we copied the button we don't want it's black what we want now is is white because we want it to have a white background now it's going to refresh everything or refresh it immediately but because obviously we have this state it's refreshed everything and it's initialized it back to the empty array but if i click on add to cart now it changes the style of the button and it also has the add more on there as well so everything is working exactly as we want um and that's fantastic because now it's all wired up now we no longer have the number five that was hard coded in before and it's getting this from the point that we add an item to the car so if i click on add to cart here again that updates successfully and now i have two items in my car so what i'd like to do now is obviously there's quite a lot of things that are going on in the background and i'd like to show you a diagram just to understand exactly what's happening right so as you know we have the car context and we've wired that up to wrap our app component and the way in which obviously react context works is that any nested component in the app tree can reach into the car and basically pull items from it and in this case we're pulling the car items and we're also pulling the add product items as well so what's happening here is that the moment we click on the add to cart button it adds the item to the car and then what happens is it updates the car context so the cart reducer function is going to occur reducer is going to run and then it updates our state so when once the state gets updated then we have a new item in the car that gets injected into the car context and then that then updates the whole process and it means that any nested component that's subscribed to the car context or is reaching out to the car context and has an item from it will get the updated state so as far as the car context is concerned whenever there's an update on it it pull it pushes everything out and then the car icon or any other item that happens to be having state from the context is then updated immediately so now in the car icon here so if you go inside here now what's happening is that the moment we update the car items this gets then re-rendered and it gets a new update of the car items and that's why we see the number of items updating here so that's just to show you just a quick diagram to show you the flow of the data in our app right now so next what we're going to do is we're going to add more features and we're going to add the ability to add more items now if i click on this button here nothing actually happens and if you remember we left that blank and what we're going to do next is we're going to add an increase functionality where once that is clicked it increases the quantity of that product now the next place that we need to add the add product to is the single product view so in this point here if we go to the home page what we're able to do is we're able to apply the add product from this page as well because this is using the featured product component so i can actually add these products however if i go to the individual product here you can see that it's clearly not working because we still have the add to cart and we don't have the add more because we haven't wired up the add to cart or the add product function to the single product page so let's do that now so if you go to the single product file here so it's going to be under the single product folder and what we're going to do is we're pretty much going to do what we did with the featured product component so the first thing that we need to do is we need to you have the use context which we have because we have the product context already so we can use that again but what we also need is the context so i'm going to pull that in now it'll be context so we have the card context and we also need that is in call function as well it's going to be in helpers and then we do pretty much the same thing however this time we have a product product variable already so we don't need to do how we constructed a product in the future product component so what i'm going to do now is i'm going to come down to the jsx and we're going to basically create our logic here so at the moment we have two buttons so if you go to the react app here we have the add to cart button and we have the proceed checkout button what we're going to do is we're going to create a third button which is going to hold the at more so let's create the add to cart functionality first so it's going to do the same thing as we had previously so we're going to call the is in cart function and we're going to pass the product and we also need to pull off the add product and we need to pull off the car items from the context so add product and car items and this is going to come from the so we'll call it use context again and this time we're going to pass the cart context and then what we're going to do now is we're going to pass the car items to the using comp so this product here is coming from our state so this component is slightly different to the feature product component so it's basically this variable here so we're setting the product when the component mounts and that's what we're going to be passing to easy cop and then we're getting the car items from the car contacts there okay so we do the same thing so now when we call that we want to find out that the card is not in there already so we need to invert this so we're gonna use the not and then we're gonna get our button the add to cart button and that's what we're gonna display if the item is not in the cart already so i'm just going to format this and then what we're going to do is we're going to add add the on click handler for this so we're going to say when that is clicked we want to call the add product function and we're going to pass in the product as the parameter now the next thing that we want to do is if the item is in the cart already so we're going to say is in cart and then we're basically going to do the same thing that we've done here so i can just copy all of that put that in here but we're not going to invert it and then what we're going to do now is we're going to make a copy of this and we can reuse that here so we're going to say if the item is in there already then we won't add more but like before we not we don't have the increase function just yet so we're just going to leave that as a blank function and we have the add more text there already okay so i'm just going to indent that a little bit have it like that so we've got the add product and we've got the car items from the cart context and we have the easing cart function so i'm just going to now save all of that and then just make sure we have the correct function so we've got a product for the add to cart and we have add more for increasing the quantity so for now we go to our react tab and so now we have the add to cart so if i click on this now it says add more and it's updating the car items so we've now wired up the single product as well but if we click on admin obviously that doesn't work which we're going to do in just a moment but what i've noticed is that we're calling using card twice here and we're doing the same thing in the feature product component but what we can do is we can call that adjuster once and then basically use that as a a variable so because we're doing two function calls here it's not really efficient so we can sort of um improve that so we're going to say const item in cart and what we're going to do is we're going to store the call to this function here and i'm just going to put that in here like that and then now instead of using easing car or calling that twice we can just call it once like this and then we're reusing that variable just once so there's only a one-time call to using cut instead of two so let's refresh that now item in cart is not a function so line number thirty 40. okay so item in car is not function okay so what did we call our variable cons item in cart and we have a function there right so the issue is that obviously we're trying to call item card and it's not a function because it's just going to store whether the item is in the comp so we don't actually need to make a functional call here at all so all we need to do is just do that because that contains the return value of is in car so for now save that and then come back here and then when we add this to the car it says add more and then that's working just fine so when we come back here now it means that we're only calling the easing card just the one time here we're storing its value in item item incorp variable and then we're using that variable twice here so it just means that we only call easing card just the one time and we don't call it twice so that's the featured product and the single product wired up with the add product component next what we're going to do is we're going to add the ability to increase the quantity so now we're going to add the increase function to our cart so if you go back into the code and we find the cart context and now we're going to add the increase function so like the add product it's going to take the product as a parameter i'm going to call dispatch again and we're going to now return type increase and the payload is going to be the product so now the increase function and we're going to then add that to the context value so we're going to simply say increase like this and then this makes sure that it gets added to the value in the context so now what we need to do is we need to go into the cart reducer and we're going to now add that to the cart reducer so we're going to need to make sure that we're listening for the add item type now so we're going to go in here and we're going to add a new case so after the case for adding an item we're going to add case and we're going to say when it's increase then we want to now increase the quantity of the item that's already in the comp and for this we need to get the item so what we're going to do is we're going to have a an index so let's have it as increase index so we get the index of the item and then we say state dot co items and then we're going to find that index so we can use the find index function and then we get the item and then what we want to do now is we want to return the item with the index that matches the item of the payload dot id so what this is doing is that it's going to loop over the items in the cart item and it's going to return item whose index matches the payload.id so whenever there's a match there we get that index and then gets returned into the increase index variable now the next thing we need to do now is we want to increase the quantity of that item in the state so we're going to say car items and we're going to now use the increase index because if you remember the car items is an array and we have that index and we can reference that particular item using is index in the array and then we simply want the quantity property on there because now the item in that array is an object and it's sitting at that index that we just found and we get the quantity property and what we do is we simply increment now because that quantity is a number that we basically created earlier on when we added the item so we simply increased that and now what we need to do is we need to return new state so i'm going to say return i'm going to return a new object and inside here we're basically going to do similar to what we did previously so we're going to spread out the previous state so in items that we're going to touch and then we're going to update the car items array and then we're going to spread out the current array of the state.com items because we've incremented the quantity property on there so state.call items with an s and then we simply call this sum items again and then we pass in the state dot co items to get a the item count so i spread that out as well i'll just spread that out and then pass in state.com items as is the parameter for that and then we get the item count and the total return from there and we're spreading that out here into the new state so we save this out now that's safe to us so the next thing that we need to do is we need to wire up the increased functionality so we need to go back into the featured product so that would be under shared and then feature product here and then what we're going to do now is we're going to pull off the increase function because we've added that to our context and then where we had the blank function now we can use the increase we're going to increase that and then we're simply going to pass the product so just like we pass product to add product we're going to pass this product that we're going to be increasing now we're going to save this out and then what we can do is we can go into our react app here and then make sure that we are so this is the single product view which we haven't wired up just yet so we'll go to the shop page here and then we add the item which we had working previously now if i click on add more then that increases the quantity of that particular item and i still have the only single item in there now if we expand this here and we look at the quantity it tells me that i have four i have the same single item but i have a quantity of four now so that that's working perfectly now now just before we wire up the single product page as well what i'd like to do is what we did in that page because here we're calling it isn't cart here twice so what i want to call it once so i want to make that more efficient so we're going to have const item in cart and then we're going to call the using cart there just that one time and then we're going to use that variable there we don't need to call it because we have that value stored there already so we're just going to check it and then we're going to also use that here save this out now when we add the item to the com still working fine and we can add more and that's updating our cart just fine fantastic so the next thing that we need to do is we need to also update the single product view so you go to the single product here and again we have the add more and that was blank so we need to do the same thing is that we need to pull off the increase from the context so we have the add product and the car items so we're now going to also get the increase function and then we're going to now wire up the add more so we're going to say increase and like the product we're going to also pass the product as the parameter save this out and then now if you go to single product view and then we have it here so we've already added items to the cart so if you know let's just refresh the page just make sure you start from scratch so everything is empty now now if we add item to the car it says add more and then we can click on that again adds it again third time fourth time a fifth time and double check again here and then we should have the quantity of five and we only have that single item so we've now wired up the increase next what we're going to do is we need to have a way of viewing the items that we have in our car so we're going to do is we're going to build the cart page so we're not going to create the cart page but before we do that we need to have some svg files that we're going to use as icons on the cart page so if you go back into the code editor here and if we add a new folder i'm going to call this icons and it's going to contain our icons the trash icon a minus and a plus icon now inside the folder i'm going to create a new file i'm going to call it index.js jsx run because we're going to have components inside here now what i'm going to do here is i'm going to create three separate components and we're going to export them out so let's create the first component so the component is going to be a container for an svg so i'm going to do export const and then we're going to call this one the minus circle icon and we're going to take the width as a prop because we want to set that dynamically and then now we're going to have the svg so i already have this done so what i'm going to do is i'm going to basically copy this file that i already have and i'm gonna put it in here so it's an svg file here so we have the svg attributes so we've got the width which we're getting from the props and then we have the fill and then the view box and the path for the icon there so this is just a simple svg file and we're going to do the same thing under the minus icon so under here we're going to export another one and this time what we're going to do is we're going to export out the plus circle because we need to have a icon for increasing the item quantity so if we're going to say export const and we're going to have plus circle and then we're going to do the same thing what we're going to do is we're going to restructure the width property or the width prop and then again we're going to have the svg like this so this is all going to be provided in the resources so now we're going to put that in here and then finally we're going to have the trash icon so we're going to have export const and then trash icon and once again we're going to destructure the width and then we're going to return that svg so now we have three different icons and they're all svg and we're going to dynamically set the width for that so just make sure you have that saved and we're going to use this in the car page we now have the icons to show a minus a plus and a trash icon now the next thing is we're going to build the cart page so inside the pages folder here we're going to create another folder i'm going to call it cart page and inside here we're going to have a few files so the first file that we're going to have is going to be the cartpage.jsx so cartpage.jsx and then we're going to have this stylesheet and we're also going to have two other files so we're going to have a car items dot jsx and this is going to be the component that's going to display each item or each each product that we have in our cart and then we're going to have a total component that's going to display the total and a button to check out so we're going to start with the cart items first because this is the component that's going to do most of the heavy lifting and what we're going to do is we're going to do the usual and import react first and then we we're going to now use the icons that we created so we're going to import all three so we had the plus plus circle icon and we had the minus circle icon and the trash icon so the three icons that we created with the svgs and then that's going to come from out this folder out of the pages folder and then it's going to go into icon and then it should be in that index file there now we're going to build the component so we're going to have const cart item and then it's going to take a product as a prop and then we're going to return some jsx so just before returning the jsx we're going to destructure some properties from the product so we need the title of the product we need the image url we need the price the quantity and later on we're going to be pulling off some functions to increase decrease or delete a product from the car now that's going to come from the product and now we're ready to return some j6 so we're going to return quite a few jsx so we're going to now create the wrapper for the car items and then we're now going to create a div to display the image so we're going to use the image element and we're going to set the source to be the image url and we're going to give it an alt tag i'm simply going to say that this is a product and close off the image tag and then under the images what we're going to do is we're going to have the name and the price of the car item so for this it's going to have its own div and we're going to give it a class name of name price name hyphen price and then inside here we're going to simply have a h4 and then we're also going to have a p tag and inside the h4 we're going to have the title of the product and then inside of the p tag we're going to have the price so what we want to do here is we want to just basically stick a dollar sign just before the price so that it shows it in dollars now the next thing we want to have is the quantity so how many of the product the user has in there so we're going to create a div for that and then we're going to set its class name to be the quantity and then as for the quantity we're going to have another p tag and then we're going to use template strings here so we're going to write quantity colon and then we're going to use the variable called dollar and then quantity so we're just going to indent this now once we've done the quantity we're ready to now create the buttons to increase decrease or remove the product so we're going to have a buttons container for this and then we're going to give it a class name and it's going to be buttons container and then inside here we're going to have the buttons to increase decrease and remove the product so the first button that we're going to have in here is going to be the button to increase the quantity of that item so we're going to first create a button element and inside of this element we're going to use the plus circle if you remember it takes a width property i'm going to set that to be 20 pixels we have the button to increase a quantity of for a product now the two other buttons we're going to show them depending on the quantity so we're going to show them depending on the quantity so what we're going to do is we're going to do some tests here so we're going to say if the quantity is equal to 1 that means they only have one item of this particular product in in the cart then we want to show this button here and this button is the button to remove that product obviously because they have just that one in there then they might want to remove it so we want to give them the option to remove that item so then we're going to return a button and then inside of this button we're going to have the trash icon so we're going to use that component trash icon and then again we're going to set the width to be 20 pixels so this is going to test to see if the quantity is 1 then we're going to show that button then the next thing we're going to do is we're going to do another test here and we want to show the increase so the but the quantity needs to be at least one to be to be able to see that button there so what we're going to do is we're going to say quantity is greater than 1 then we want to show this one here so inside here we're going to use the minus so we can use a minus circle and then we're going to give it a width and we're going to set that to be 20 pixels as well so save that out so now i have the car item here so we're using the three icons so the plus circle the trash icon and the minus circle we're only going to show the trash icon if the quantity is one then that means we're going to give the user an option to delete the item from the cart or if the item is greater than one then we're going to show the minus circle because that means that they might want to decrease the quantity of that item in there so when you save that out here now we're going to do is in the next video we're going to build the starship so just before doing that let's actually export out our component and now we have the cart item or it should be cart item so just b should be just be car item without without the s now next video what we're going to do is we're going to build the style sheet for this car item so just before adding the styles what we're going to do is we're going to apply a few class names so we're going to apply a class name that we didn't apply earlier on which is going to be the cart item and then we also want to apply a class name to the image container i'm going to call this item image and then for the buttons we're also going to apply a class to each of the buttons so for the increase we're going to just come down here and then we're going to apply a class name here we're going to call it button increase and then for the trash come down again and then we're going to call this one button trash and then finally we have the class name for the minus and that's going to be button decrease so to make sure we have these styles in here or these class names so we can style them and then now we're going to do cartpage.styles.sas file i'm going to apply some styles so we're first going to start with the car item and we're going to center align the text so text align and then we're going to give it a border i'm going to set this to be one pixel solid and it's going to be a shade of gray and we're going to have a margin and we're going to set that to 2 ram just give it some nice moving space and we're also going to set a padding and we'll set that to one ramp or round now that that's the cart page or car item now we want to target the item image container and then inside there we're going to target the image element and we're going to give it a width of 50 pixels so we're going to make it really small because we just want to give the user an idea of what that item is so i just get a small image in there and then we're going to target the name price container so we're going to say name price and then inside here we're going to target the h4 first and what we're going to do is we're going to give that a margin and we're going to set that to 0 and then we're going to have the p tag and for that we're going to give it a font size and we'll set that to be one ram and then we're going to give that a font weight and we'll just set that to normal so that's the name and the price now what we're going to do is we're going to add some styles for the buttons container so we need to have dot buttons container and we're going to have some general styles here so we're first just going to have button and these styles we can't get from bulma so we're just going to give it in here so we're going to say border none and just customize it a bit further padding i'm going to give that a 0.5 rem on one rim and then we're going to have a cursor we're going to set that to be a pointer and then we're going to give it a font size and we'll set that to a small figure say 10 pixels and we'll give it a margin right and let's just set that to 5 pixels for now so we can tweak these values just to see how they look and then we're going to target the individual buttons so we're going to start with the button increase so i'm going to say button increase and for this one we're going to give it a color and we're going to set that to be white and we're also going to give a background color and we're going to set that to a shade of black so we can say 1a 1a1a so it's nice shade of black and then after the button increase what we're going to do is we're going to target the button decrease and button trash and we can do that in one call i think so we're going to do button decrease and the button trash and for this we're going to give both of them a color of white and we're going to give it a background color and we're going to set this to be d9 5 3 4 f so it should be like a sort of a shade of red there and now what we're going to do is we're going to target the viewport of 1024 so we have the buttons container here and what we're going to do is we're going to target that so i'm going to say at media so at media and then we've been targeting 1024 and we're going to first target the car item and we're going to give that a display of flex because we want to show each car item on a single line so we're going to say display of flex and then we're going to give it a space between so we'll use justify content and then we're going to use space between and then we're going to target the div inside of the car item and then we're going to give that a margin of one rim and then once we have that we're going to target the name and the price name hyphen price and then we're going to give that a width of 200 pixels and that should be the min width so for the 1024 that should be the styles that we need so we have a display flex justify content space between and we have a margin and the width for the name price as well so this sets out the styles for the car item now obviously we can't really see this until we build the cartpage.jsx and that's what we're going to do next so the last couple of videos we've been building the car item component so we built that component and we also added some styles for it now to actually see that component we need to build the cart page and that's what we're going to do now so we're going to import react first and we're also going to import the cart context because we're going to need to pass down all of the items in the cart so out this folder and then into the context and it's the car context that we want now we're also going to need the layout because we want the header on the footer so we're going to get layout from the layout in the shed and then layout and then we also want the car item that we just built so it's going to be card item it's going to be in this directory call item so called the cart items so let's just rename that to cart item because it's just gonna contain a single item so that updates that and then we're gonna have the style sheet so i'm going to import that in so cart page.styles.s so at the moment this contains the styles for the car item but we're going to also be adding the styles for the cart page as well so we're going to start things off so we're going to create the component so const cart page and we're going to now basically assemble the items that we're going to pass to the cart item so we're going to have the cart items we're going to get that from the context and we're going to get the item count and we're going to get the total and we're also going to be pulling off some other functions that that we're going to create in the context at the moment we have the add product in there and we're going to be adding decrease and removing and clearing the car as well so we're just going to leave that like that for now and then we're going to say we need to use context so we're just going to put that in here and we're going to pass the context context and we're going to need to pull off the use context function from react so i'm going to say use context so that does the items so call items item count and total we're going to get that from the context now what we're going to do is we're going to return some jsx here so we're going to first return the layout and inside the layout we're going to return the car items and we're also going to have a heading for that so we're going to do is we're going to use the fragment first because we're not going to have a wrapping div and then we're going to have the h1 i'm going to call this the car now what we're going to do is we're going to check to see the number of items that are in the car so if there's nothing in the car to start off with we don't really want to display the car items so we want to display a message to say that the card is empty so we're going to have curly braces and we're going to check the length of car items so we're going to say call items.length and if it's zero then what we're going to do is we're going to display the or message that says that the car is empty so if it's zero we're going to have a div and then we're going to basically say your card is empty so your card is empty and we're going to give this a class name let's say empty cart like that otherwise we're going to want to display the car items so for that we're going to add that in here so we're going to display the car items under this and again we're going to make use of the fragment so i'm just going to close that off because we don't want to have another div in there and what we're going to do is we're going to now create the div and we're going to have another div inside there so we need the fragment because what we're going to do later on is we're going to have the total component to come under this containing div for the car items so that's why we need the fragment there so we're going to give this a class name and we're going to set that to be the cart page i'm also going to give this second div a class name i'm going to set this to cart item container so it's going to contain our car items now inside here we're going to return the car items so depending on how many items we have in our cart we're going to return the car items so we're going to map over that so first we're going to get the car items and then we're going to map over it and for each item we're going to display car items and then we're going to pass the props that it needs so we're going to use the spread operator in here and we're basically going to spread out all of the items from the item object so each item inside the car items is an object and because it's inside the array so we're going to spread that out in here and then we're going to give a key and we're going to set that to be item dot id and finally we're going to make sure that we don't have an error so we've got the map there and what we need is the okay so i need to cut this in here so we already have there so call item and it needs to be an actual component like this so it's going to get the item and it's going to spread that out as a prop or all the props that have are inside the item object here and it's going to spread that out and give it to the cart item and in the car item here that's what we're doing at the top we're destructing the image with the title the image url the price and the quantity and that's going to come from the item and we need a key and we're setting that to be the item.id and that's going to be displaying depending on the number i number of items that we have in the cart so that's our cart page and then we're going to export this out i'm going to say export default cart page and now what we need to do is we need to add some styles so we're going to go into the cart page dot styles.sass and we're going to add a style for the empty con so if the card is empty we just want sort of center that and we're also going to center the title which is going to be this h1 here so if you go let's move this file here so we're going to center this one and we're also going to center this div here if that is displayed so we're going to target that now so we're going to put that just in front i'm going to say we want the h1 and the empty car and we're going to use text align we're going to center that and then we're also going to make sure that we have the display set to flex so we're going to come in here and we're going to say cart page i'm going to say it's display to be flex and we're going to justify the content we'll use a center value for that so a couple of simple styles inside there for the cart page now the next thing that we need to do is we need to obviously create a route for this cart page and that's going to be inside of the index.js file or it's going to be in our app.js rather so we need to import the cart page i'm going to say import cart page from components and then it's going to be inside the pages and then it's going to be the cart page and then we want the cart page component like that and then what we're going to do now is going to create a root for this so let's say root path it's going to be slash cart and when you go to this root we're going to display the car page component so save this out so now if you go to our react app and and we basically go to the route that we just created so it's going to be slash cart so at the moment our car is empty and this is exactly what we're getting so that's the basically our check to say that there's nothing in the car items itself and we're also getting a warning here and it doesn't recognize class name so we seem to have a typo in our file so let's just go back in here and let's go back to our cart page first and we seem to have a class name somewhere yep so it's right here so let's just correct that and if we come back so this now nicely centers our your card is empty text and we're also not using the item count and the total so so it's saying that the item count and the total is not being used and we're going to use that for the total component when we build that later on so what i'd like to do now is i'd like to go to the cart icon in here and when this is clicked i'd like to be taken to the so when we click on the car icon here i want to be taken to this cart page and that's what i'm going to do now so we're going to add a root for this so all we're going to do now is we're going to have an unclick handler here and we're going to say when this icon is clicked we want to go to so dot push and we want to go to the slash cart route like that and what we need is the with router so that we get the history object so i'm just going to import that in here so with router so react router dom and then we're going to use that high order component so that we get the history object injected and we're going to export that out like that so that should give us the history object and we need to pull that off as well so history and then once that icon is clicked it's going to basically take the user to the slash card root now we don't have anything in the cart so we're going to go to the shop page just add a couple of items and then we'll go to our cart page and then now we have our car item component displaying nicely so we have the car the item image in the column and we also have the price and the quantity and we have the buttons to increase and decrease so at the moment these buttons aren't working and so we haven't basically created the functionality to increase or remove the item and also to decrease the item quantity and which we're going to be doing next but before we do that we're going to create the total component so just under or just next to the items in the cart page we're going to have a total component that basically shows the total amount the user has to pay and also it's going to give them a button to check out so now i'm going to peel the final part of the cart page which is the total component so if we go back into our code editor here and then we go to the cart page and we've already created a file for this if you go into the total.jsx file and then we're going to start building the cart page so we're going to import react and we're also going to need the router so we're going to need to be able to route the user to the checkout page so we're going to import with router it's going to have with router and we're going to get that from reactor router tom and obviously the styles are going to come from the cartpage.sas file so we don't need to import that so we're just going to do a const total here and we're going to pull off a few things so it's going to display the item count so that's the first thing that we need and it's also going to display the total and later on we're going to also have a function to be able to clear the car but we haven't created a functionality just yet so we're going to return the jsx and we're going to have a div and we're going to give this div a class name i'm going to set that to total container and then under this one here we're going to first have the total amount and we're just going to give that another class name and we're going to call that simply total so it's going to contain the total amount in here now we're going to have a p tag i'm going to say total items and we're going to basically say item count here so the total items in the cart and then we're also going to have another p tag and we want to show the amount that the user has to pay so for this we're going to make use of template strings and we're going to say total amount or let's just leave a total and i'm going to have a colon and then we're going to use the variable i'm going to say total i'm just going to indent this so it lines up and then after this now this after the total container we're going to have the buttons to be able to check out or a button to clear the car so i'm going to call this here class name i'm going to give that a class name and we're going to call it checkout and the first button is going to be the checkout button so i'm going to give it a button and we're going to give that a text off check out and then we're going to give it a class name get some styling so we're going to use the button from bulmer and we're going to make it black and we're going to have an on click handler for this as well so we're going to take the user so when the user clicks on this button here we want to be able to take to the checkout page which we don't have just yet but we're just going to put that in here now so history dot push so we should have a checkout page so history.push and we're going to go to the checkout page now that's the checkout button we're also going to have another button so under this one here we're going to have the button here basically independence so you can fit it all into the screen like this so we're going to create another button and we're going to basically use this button to be able to clear the car so we're going to call it clear like that and we're going to give it some styles so we're going to say class name and we want the button from bummer and we also want this button to be white without any outline so we're going to leave it like that and as for the on click handle for this we want to be able to clear the car which we haven't implemented just yet but we're just going to put in a blank function here for now and later on we're going to update this so when user clicks on the checkout button it's going to push them to the checkout route which again we don't have but we're going to create that later on as well so this is the total component so we're going to the export default it out and what i'd like to do now is i want to use this in the cart page so we're going to go to the cart page and we're going to import the total so i'm going to say total from the total component so it should be in the same one here so import over t and what we're going to do now is this is why we needed the fragment so we're going to put it just after the cart page container here and what we're going to do is going to say total and it needs a few things so that if you get the total file here just put it here so we have the cart page and for the total we need to pass the item count and the total and that's what we're going to be doing here so we're going to pass that in say item count and that's just simply going to be the item count that we have and we're also going to pass the total and that's going to be the total that we have now if we save that out and go to the react app here so we're getting unexpected use of history so we're going to go back in here we don't have the with router exported and we also don't have the history pulled off from the props so we're going to do that now so we're going to say with router we're going to pull that off and then we're going to get the history object and we save that out now we shouldn't be getting any errors related to that so now if we add some items to our cart and then we go here now we have the total items comp or the total component display but we don't want it to be displayed at the bottom we want it to be displayed next to the each item in the cart here so we're now going to apply some styles so we're going to go to the cart page under the cart item here and it seems that we have just before adding the styles actually we have the media inside the car item and i'm just going to cut that now and i'm going to place that outside because it needs to be just on that side there and what i'm going to do now is i'm going to now apply the styles for the total container so we're going to put turtle container here and we're going to give it a margin of 2 rim and we're going to give it a text align i'm going to center that like that and in the media query here what we're also going to do is inside the cart page we're going to target the talk container and i'm going to now just simply text a line in the center so this is just to make sure that on the desktop view that the content inside the total container is center aligned so that's all the styles that we need for the total container or the total component there now if we come back here and basically just populate our bag with our cart with some items here so we're still getting the style to be not next to it so let's see why that is so we should have all the styles in the style sheet so that should be should all be there and let's go back to the cart page here and yeah so the issue is to do where we've placed the total so we need to bring it out here and it needs to be inside the cart page so if you save that out now and that's that's where it's supposed to be so now we have the car items each car item so whatever we have added to the cart is going to be displayed on the left and on the right here we have the total component and it's got the checkout and the clear button so obviously these aren't currently wired up here so we are going to the checkout row but that's not currently we don't have a component for that but the clear is not working so next what we're going to do is we're going to complete the functionality for the car so we're going to add the ability to decrease the ability to remove an item and the ability to also increase an item and to clear the car so that's what we're going to be building next so now we're going to add the rest of the car functionality so we're going to start with the decrease function so for this we need to go back to our context so we'll go back into the cloud context here and we're now going to add a function for decreasing the amount of a particular product so we're going to say const decrease and it's going to take the product as a parameter and then we're going to call dispatch and we're going to return a type of decrease and the payload is going to be a product so like we've been doing already and then we're going to pass that down in the context so takes product and we're returning a type decrease and the payload is going to be the product that is is passed in when that button is clicked so now we'll go into the cart reducer and we're going to now listen for a decrease action so when that comes in then we're going to decrease that particular product so we're going to now say if the case for decrease and what we want to do here is we're going to do something very similar to what we did when we increased so we're going to now get the decrease index so before we had an increase index now we're going to decrease index because we want to get that item from the car items array so we're going to use the find index function again so i'm going to have the item and then we want to return item id is equal to action dot payload the id so very similar to what we did previously and what we're doing just once again is that we're using the find index and we're going to find the action or the payload that's parsing's id matches the item id of the state.car items and then what we're going to do now is we're going to get that product so we're going to say const product because what we want to do is we want to store that value because we're going to do a couple of checks in before we actually decrease the amount so we say const product and then we're going to get a reference to that item it's going to be state.com items and then we're going to use the decrease index that we had so this is going to now contain that product that was passed in from the state.call items and then now what we're going to do is we're going to do a simple check here we only want to decrease if the quantity is greater than one because if the quantity is is just one then we want to use the ability to remove the item we don't want to just sort of decrease it to zero and just sort of kind of maybe create a bug within our app so we're going to do a check here so we're going to say if the product.quantity is greater than one then we want to decrease that products quantity so we're going to say product or quantity and we're going to simply just use the minus minus here we're going to do the reverse of increasing that product so we're only going to do it if the quantity is greater than one and then we're going to decrease that quantity amount then what we're going to do as we've been doing previously we're going to return new state and then we're going to spread out the previous state and then we're going to now change the items so item is going to be a new array and we're going to spread the new or the state.com items that we've mutated into that array and then once again we're going to call our sum items function and we're going to pass in state.car items so we're just going to spread that out in there like that and so we just go over that quickly again so we get the product so we get the decrease index of the of the product that we want to decrease and then we'll make a reference of that product in the product variable and then we check to see that its quantity is greater than one if it is then we minus that quantity and we decrease it by one and then we're returning a new state here so we save that out and that does the decrease functionality so now we want to do is we want to wire that up in our react app so that's what we're going to do so now when we add the item here and we go to the cart page we need to be able to show the plus and we need to be able to decrease the amount from the quantity so we're also going to wire up the ability to increase the quantity amount so now we're going to go to the cart page and what we're going to do is we're going to pass down the functions to the car items so the car items at the moment is only having the product and we're spreading that out so what we want to do is if we go into the car item page here or call item component what we want to do is we want to wire up the plus circle the trash and the minus with the functions so at the moment we have the plus circle and we also have the minus to decrease the item quantity so we'll wire up those functions and we're going to pass that down as props here so we're going to the cart page and we're going to get those functions so we already have the increase so we're going to pull that off the state and we have the decrease and we'll pull the off state as well and now what we're going to do is we're going to pass that down to the car item and an easier way to do that would be to just we're going to create a new variable here i'm going to call it funcs and we're simply going to just attach the increase and decrease like that and then we're going to spread this out so we're going to spread out the funks so that the car item here gets these as props and then we go back into the caritem.jsx and inside here we're going to pull that off the props so we get an increase and we're also getting the decrease function and now we're going to wire this up so what we're going to do is in fact probably better to just call that props just to make it a bit more reflective of exactly what it is because it's the props and now because we have obviously a mixture of the product and we have image of the functions as well so it's not just a product that we're pulling things off now we're going to go into the plus circle here and we're going to give it a on click handler so the button so we're going to say on click when the button is clicked now we're going to run this callback function and we're going to call the increase and we're going to pass in the product so we need then obviously we're going to now need to construct a product variable as well so as we did previously we're going to have product and we're going to make that to be the title the image url price and the quantity so we're just going to add all of these things even though it's just the idea that we need in case that later on we might need to pull off any other data so we're going to put everything on here so it's the description and that's gonna be basically an object on its own and we're gonna pass that when the increase is clicked so let's let's have a test on that and see that's working so uh description is not defined so let's go here and we're going to basically pull that off our stay and now it should be defined now i'm going to add some products to our cart and then what we want to do is when we click on the increase we want that quantity to increase and obviously the total to now be 71. so it's going to be two lots of the cumulus bag and just a single studio bag so if i now increase this now so that might should increase by 15. our increase function is working just fine so now what we're going to do is we're going to update the total variable and we're going to add the total amount into it to make sure we have the dollar sign just in front of the total so this dollar sign is to interpolate the total variable so we're going to add another dollar sign like this so that we get the actual dollar symbol and when we save that out we get the dollar sign in front of the 86 so we're now going to wire up the decrease button here so we have the increase working so we're not going to wire up the decrease button so if you go back into the car item here and if we now go and scroll down to where the decrease or the minus circle is what we're going to do is we're going to add a on click handler here and then what we're going to do is we're going to call the decrease function and we're going to pass the product like so so now if we save this out and come back to our cart here now if we minus the cart here or the item then that is taken out from the cart and then again we can do the same thing here if we take this off here then it takes that off so now we have the plus and we also have the minus working for us nicely we're now going to add the remove function so when we decrease the amount here and we click on the trash icon it doesn't actually remove that so we're going to add that feature to our cart now for that we need to go back into the cart context and we're going to add a remove function here so we're going to say const remove product and once again this is going to take a product and we're going to call the dispatch function i'm going to pass in a type and we're going to set this to remove item and the payload is going to be the product and then we're going to pass this function down now in the car reducer we're going to now add a case for removing that item from the cart so we're going to add a case for it so i'm going to say case and it's remove item now we want to find that item in the car so what we're going to do is we're going to filter the current items that we have and we're going to remove the item that's been passed in so we're going to filter everything and we're going to leave out the item that's been passed in so let's do that in code so we're going to do const new car items and then we're going to iterate over the current car items and then we're going to use the filter function so we're going to return all items except the one that's been passed in so we're going to say item dot id or we're going to say item first and then we're now going to say item.id and it doesn't equal the action.payload.id so all we're doing here is we're filtering the current cart items and we're going to return all the car items except the one that has been passed in so i'm going to remove that from the new car items and then what we're going to do now is we're going to simply going to return new state and then we're going to do as we've been doing before we're going to spread out the previous day and we're going to update the car items i'm going to spread out the new car items like that and then we're going to call our sum items function and we're going to pass in new car items and that's all we need to do to remove a item from our car so now we're going to do is going to go back to the total or go back to the call item component rather and we're going to wire up the trash icon so before we do that we need to pass down that function so we're going to get it from the context so we're going to have remove product and because we're passing it down the funcs we're going to add that to this object here so now we have the room product and we're going to pass it down to the car items so if we go back to the car item component now we first need to pull that off the props so we're going to say remove remove product and then we're going to wire up the trash icon here so we're going to give this an on click handler so when it's clicked we're going to have this callback function be executed i'm going to call remove product and we're going to pass in the product that we want to remove so now we're going to test that this works and we're going to add some items to our cart now when we increase that's why i can decrease that's working right now when you click on this one it removes the item from our current if you click again it removes everything and our card becomes empty so now we've implemented the remove product feature next what we're going to do is we're going to add the ability to clear the car so if you remember now if i add an item to my car here we had a clear function so we're going to clear create the clear function in our cart i'm going to wire that up so we're not going to create the clear function in our cart so for this we need to go into the cart context here and what we're going to do is we're going to say const clear cart and we're not going to take any parameter because all we're going to do is we're going to clear the card so we're going to call the dispatch function and we're going to pass in a type and we're going to set that to clear so that's all we need to do for this function and then we're going to pass that down in the context and then in the cart reducer what we're going to do now is we're going to add a case for listening for that clear so we're going to say case clear now this is going to be really simple all we need to do is we need to simply reset everything to what it was so i'm just going to create that syntax error there so we're going to return and then we're just going to reset the i call items to be an empty array and we're going to reset the item count so item count i'm going to set that to 0 and we're going to set the total to 0 as well so i'm gonna save that out so now we have the clear now inside the cart item page here so we're gonna go to the cart item.jsx component what we want to do now is we want to or it's going to be um in the total.j6 rather sorry so we want to go in here and what we want to do is we want to wire up the clear so for this here we're going to need to pull that off the props so we're going to say clear card and go back up one level and then we also need to pass that in so pull that off the state so we'll say clear cart and then we're now going to say clear say clear card and we're going to pass that function in so click hot so that's coming from the context and we simply pass it down to the total because that's where we need it and then here we're pulling that off the props and once that button is clicked we're going to call the clear cart function and that's going to initiate the clear action creator so if we now come back to our app here and then we add some items to our cart and then we click on the clear cart here this clears the car and it resets everything to the initial state so this completes our car functionality but you would have noticed that when we add items to the cart and then we go to the cart page and then if you refresh the page we lose everything so we want to actually keep the items in some sort of memory so what we're going to do next is we're going to persist our can't stay in the local storage so i'm not going to persist our car items in local storage so i have the cart reducer page open here or can't reduce your file and what we're going to do is we're going to create a function that's basically going to store our card items so i'm going to call this const store card items and it's going to take the car items as a parameter and we're first going to create a helper variable here so we're going to have const current and we only we're going to going to check to see that the length is greater than zero if it's greater than zero then what we do is return items if it's not greater than zero then we're simply going to return an empty array so we're going to say car items dot length is greater than zero if it is then we're going to return the car items and we're going to assign that to the current variable if it isn't greater than zero and it's and it's just sort of an empty array we're just going to assign an empty array to the cart so that's all that's doing there and then we're going to call the local storage function so this is a window so this is available on the native window browser so we're going to say local storage dot set item we're going to call it cart and then what we need to do is we need to stringify this so we're going to use the json.stringify and we're going to pass in our cart like that so this function is going to store the the car items in local storage for us now a place where we constitute where we're constantly updating is the when we basically update the item count and the total and an ideal place to call that would be under the sum just before the sum items or inside the sum items and just before we return the state so we're going to call the store car items here and we're going to pass in the car items that we get so this is always going to be the updated version of the car item so whenever we add or remove an item we're always adding the stuff together we're always adding the the item count and the total so this is an ideal place to call the store car items function so now that we have this just before we go to the context file what we're going to do is we're going to also clear the car when the user clears it so when the user clears the cart we want to remove the local storage item that we've put in there so we're going to say local storage dot remove item and we're going to remove the cart that we've put in there previously so when when these obviously place that car they no longer want it there so we're going to clear that from the local storage as well so we're now going to go back into the cart context here and what we're going to do is in the initial state we're going to do a few things so first of all we need to import the some items so some items so we're already exporting that out here at the top so we have the export console items and we import that from the cart reducer and then what we're going to do now is we're going to check to see if there is an item caught in local storage so we're going to do a const so just after creating the context here we're going to have a const cart from storage and then we're going to do a check here so i'm going to say local storage dot get item and we're going to get the cart and if it's there then what we want to do is we want to string find that so we're going to say json. we want to pass that rather sorry so i'm going to json.pass because we stringified it previously localstorage.getitem and then we're going to get that cart and if it's not there then what we're going to do is we're simply going to return an empty array so we're going to have an empty array like that so i'm just going to put this on a new line so that it's easier for us to read so we're going to say json.pass and then we're going to get the item and then we're going to pass that and then put that into cart from storage if it's not there if we don't have the item in there we're simply going to return an empty array so that would be the case when we start up the apple when you first visit the page it's not going to be there so all we're going to have is an empty array like that and then we're going to use this in the initial state so here we have the car items so instead of having an empty array here what we're going to do is we're going to have the car cart from storage so we're going to say cart from storage and then we're going to call these some items so instead of saying that to zero if there's any items that are in the cart already we want to add them together and that's why we imported some items already so we're going to call some items and then we're going to pass it cart from storage and then obviously because this is an object we want to spread out the result from some items like that and then this should now basically read the car from the local storage if it's there if it's not there then it's simply going to have an empty array so let's test this so now we have two items in the card so if i refresh here i no longer lose my item so i can sort of delete that add some items so i'm going to add a few more and then i now have four so if i go to the cart page here i have four items in there so if i refresh the page i'm not losing those so if i clear the page it's getting cleared so we're no longer losing the items when the page is refreshed

Channel: Fullstackstudent

Views: 5,996

Rating: 4.9843135 out of 5

Keywords: React, JavaScript, ecommerce, Node, React ecommerce, React Cart

Id: kYNa6cJ1w5Y

Length: 232min 19sec (13939 seconds)

Published: Tue Dec 22 2020