E-Commerce shopping cart using React Redux and material ui | Sarfaraz Kasmani | Skillshare

E-Commerce shopping cart using React Redux and material ui

Sarfaraz Kasmani, Front End Developer and Digital Marketer

E-Commerce shopping cart using React Redux and material ui

Sarfaraz Kasmani, Front End Developer and Digital Marketer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (4h 22m)
    • 1. Lecture 1 introduction

      3:30
    • 2. Lecture 2 Environment Setup

      6:01
    • 3. Lecture 3 create react app

      7:15
    • 4. Lecture 4 AppBar Component

      5:25
    • 5. Lecture 5 Appbar Transitions

      4:25
    • 6. Lecture 6 Styling Theme

      7:00
    • 7. Lecture 7 Styling themes (default theme)

      2:24
    • 8. Lecture 8 Styling themes (Palette)

      6:22
    • 9. Lecture 9 Styling themes (Typography)

      4:34
    • 10. Lecture 10 Styling inline

      7:11
    • 11. Lecture 11 Product List component

      25:11
    • 12. Lecture 12 Filter Products Component

      28:32
    • 13. Lecture 13 Cart Component

      31:29
    • 14. Lecture 14 Checkout Form

      18:35
    • 15. Lecture 15 Building Rest API for products

      31:59
    • 16. Lecture 16 adding redux

      24:10
    • 17. Lecture 17 filtering products by redux

      24:29
    • 18. Lecture 18 managing cart by redux

      23:44
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

30

Students

--

Projects

About This Class

In this course, you will learn the essential tools and skills to design, develop and deploy a fully-function shopping cart using React, Redux, Node, Express and Material UI.

By the end of this course you’ll be able to design a responsive shopping cart, implement a user-friendly frontend and develop a simple backend.

Meet Your Teacher

Teacher Profile Image

Sarfaraz Kasmani

Front End Developer and Digital Marketer

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Lecture 1 introduction: Hello friends, welcome to this course. And this course we are going to create an e-commerce shopping cart using React, Redux and material UI. Ok, so are there any course requirement or politically site for k? So to work on this project, you must have the following skillsets. You should have basic knowledge of HTML ensued, have basic knowledge of Java slip, and we still have basic knowledge of React JS. Okay? So what is the course objective? So the participant will be able to implement the React and Redux concepts in their current and future projects. So what you will learn in this course, we are going to create an e-commerce shopping cart using the React Redux and material UI. So who are the target? It's students. Students with no the Aquatabs experience, front-end developers. And anyone who wants to learn, react, relapse and much u_1. So by the end of this course, you will have the foldings. Let's end on regarding practical and real life scenario of creating e-commerce shopping pack using React protects us. So let's see what we are going to create. So we are going to create a stopping talked like this. Ok. So let me refresh. So if I click on Add to product, you can see the product has been added to the cart. And if I click it once more, discount has been changed to two and the total amount is changed to $49. And if I click on this product, this product has been added and the amount has been changed. Okay. Yeah, you can premotor product as well. Okay. If I remove this will get removed. Click on Add. It will be added to the car. If I click on proceed, you can see are formed by click it again, it will go, Yeah, you can sort it by order. So if you want to see the products from lowest price, do you need to click on lowest? So you're the products will be shown from the lowest to the highest price, okay? And if I click on biased, the products will be shown from highest to lowest ok. Here you can select the size as well if I click on Excel. So these are all the products which are excellent insights, okay, effect electron double XL. But these other two products which have double exercise and here the bound is two. So if I clicked on video, so these are the two products with medium size and the products are food products. I Pilloton, all you can see all the six products, okay. And we will create a backend. For this product. We will use the postmen who create the backend. We can even use Node Express and Mongoose will create the backend for pain, and we will pick using Makita. You'd have to style this project, okay? And so what you see here is all the material UI confidence, okay? So these are all Martina and UI components. So let me refresh. So far styling this project, we will be using material UI. And once you finish this project, then butane create your own e-commerce store. Or you can create a different kind of Kikkoman stored using the logic which I have used and you can share it in the project section. You can just take a screenshot of your project and you can share it. Okay? So this is it for this lecture. So this is it for this introduction lecture. And I'll see you in the next video. And then take that and go. 2. Lecture 2 Environment Setup: Hello friends, welcome to this lesson. In this lesson, we are going to review tools and technologies that we are going to use throughout this course. So we will use Create React app. So you need to go to this link, github.com slash Facebook's less Create React app. Okay? So we will use Create React app to set up our application. Okay? Then we will use three dots. Redux is a state Manager for React and we can create a scalable and predictable application using your debts. Next one is NodeJS. And NodeJS dot ORG. And from your buns and liquid expression. Okay, from yarn you need to download NodeJS and you need to install it in your machine. So it is recommended that you need to use LTS Virgin, which is long-term support. Okay? So once you click on this, this download will get started and then you will need to install it. So if you are a Windows user, we need to go to downloads and near their options for Windows users, for Mac. Okay, so I'm using Mac, so I have installed it and I have download and install it already in my machine for this, then we need MongoDB, okay? So you need to go to this URL and yet your other installation instructions. So for Mac, you need, you need to follow this instruction, okay? And for Windows you need to follow these instructions. So in the coming up lectures, I will show how to install MongoDB in Mac because I'm using Mac or Windows users, you just click it and you need to follow the instructions. It is very simple. Then we will use material UI to style our front-end application. Then you need visuals to support. So this is a code editor if you go to code dot google.com. So here is the option to download. I'm using Mac. So from here, I have downloaded and installed it. If you're a Windows user, you need to click on this arrow and you need to install, click on this, download it and install it on your machine, okay? Then we need Google Chrome. I hope everybody has Google bromine their machines, okay. If you don't have it, then just download Chrome and install it on your machine. Then we need to extension for Chrome. First one is the react. They have bools, but just react developer tools. So if I click here on the first link. So this is the extension which we require. I have already installed it. So it is showing me remove from Rome, but in your case, it will show installed. Okay. Then we need the ducts. Okay, from here only we can say by extension. So beautifully does. So if I click on redux, so this is the reduction developer tool. So again, we, we need this extension, so I've already installed it. Okay, so you just need to install this extinction. Then we need postmen. So for that you need to go to postmen.com using postmen because in this project we are going to use Postman to create new products, create new orders and delete ten. So it is very important to install. Okay, so to install postmen, you just need to go to boost mint.com. And at the bottom you will find download applicant. So you need to click here. And you need to download the app and you need to install it in your machine. And how to use postmen, I'll show you in the coming lectures. This is it. And in Visual Studio code, if I go to Visual Studio code, so if I click on extension, there are few extensions which you need. So this is the extension which you need ES seven reacted x graph QL, Greg, native snippets. So this helps you to write the code in a faster way. There are short words, okay? So, so that will help us to write the code in the fastest way. Okay? So you need to install this extension in Visual Studio support. Then there are few more like ADL renamed tag, ok. So this will help you to be named or tag. Let's say this is the example they have shown. I guess you have an opening tag. And if you change from one side, the other side will also get changed. So if you want to install this lead installed authority name tag, then we have bracket, pear Caroline's. So this will helps to color the bracket, okay, the opening bracket and the closing one though, so it is showing a different color, okay? This one is purple and this one is blue. Okay? Then we have color highlight. This will help us to highlight the CSS. Css fella. Suppose this color tag is pink, 13 show a pink color. Ok. So if you want, you can install it, okay. Then there is one more like prettier again. So this will help us to format the code. It is very important that we use this extension to format into port. So please install this extension as well. And rest of the extensions are not so important. And these are the four or five extensions reach out to pulling button. So you just need to install this. So this is it for this video, and I have shown you what you need. Okay, so just install everything which is required and we will start creating our setup in the next lecture by using creative reactor. So I'll see you in the next video. Till then, take care and bye bye. 3. Lecture 3 create react app: Hello friends, welcome back. In this lecture we are going to set up our application by using Create React app. Okay, for that, we need to go to Visual Studio Code. And here we need to open the terminal by pressing control and Bagchi with did about the Tab key. Okay, so I'll create a folder in my desktop, so I need to go to my desktop. So for that I'll type ls and then cd Desktop. So if you are a Windows user, then you need to go to a destination like deep dive OK, there you can create your folder. So I'll use NP x, Create React app. And the name of my app will be react, shop back and I'll press enter. It will take some time to nucleate or application because it will install all the packages which are required. Like react to the egg go, Bx clips, exec trophy. So let me pause this video and once the application has been installed, then I will come back. So now the application has been installed and we need to go to the folder. So I'll go to the folder by clicking open folder. And I'll go to react shop card and I'll press open. So you are all the files. Okay? So again, we need to open the terminal by pressing control and back to key. And year i would let NPM stock. So it will start a development server, okay? And it is directed to local host 3 thousand. The web application is, okay. So, okay, now you can see that application starts running and now we will delete all the files which are not required. So logo dot SVG is not required. So let me remove this. Then. We don't require index dot CSS so that we didn't know this, then we don't require app.use test.js. Let me remove this. And we do require app.use CSS because we are going to use material. Then we need to go to or with year one mol pile setup test.js. Let me the motors as well. Then we need to go to index.js and I'll demo. Okay, sorry, let me go to app.js. And yeah, I remove all this header. Food. Okay. Let me minimize this. And then app dot CSS and Logo. Got SVG, we don't divide. Let me save this. And let's go to index dot js. And from here also we require this in both index.js is a. Let me save this. Now if I go to app.js and let me label this lastname. And let say phi. Write header. Okay, let me save this and let's go to the browser. Okay, ureters headed. Ok. So it is working fine. Let's remove this report website because I don't think so. It is required. Let me sorry. Let me denote this that's tied to the motors. Now, let's move this from here. Let's save this. Okay? Because Vigo undergrad this. Now let's go to the browser. Okay, everything is working fine. Now what we can do is we will create header and footer, okay, Billy create header and footer. So for that, in the source folder, we will right-click and we create a new folder and name it as components. And info components, I will create a UI file, SRE UI folder. And inside the UI, I will create a new file with the name header dot js. And the second one. And the next one will be for tar.gz s. So for paradoxes, okay? So this will be a functional component, so I will write a short paired for that. So a FCE step. So this is our header. Let me say this. And I will again by a FCD step four, let's say this. Now we need to go to app.js and we will import this header and footer. Okay, so let's import in board. I did. And if I click year, but one-sided import header from dot slash slash us slash header again. And yeah, I will beta and delta component, okay? And now we need the footer component as well. So in board will turn from our slash component, slash us, or else you can do it like this also. If you want a shortcut, let me try this. And if I click on this, so you can see we got to import a URL, this important part. So this is much better. Okay, let me try again. So it will be helpful for us. So if I write footer, and if you click on this, okay, if you click on this, so it automatically import the park, okay, so we don't have to remember the path. So this is it. I'm saving this file. And let's go to the browser. So here you can see either in footer, regatta, header, and footer. So this is the header component and this is the output of component. Let me close this index. So in app.js, we have imported coupon branch, which our header and footer. So the styling part is remaining so that we can do well by using material us. So in the next lecture, I will install Martina un. If you go to material use, let me click on get started by Lu that in the next lecture. So we have to install material us. Then we need to install the items of material. Then we need to use Alberto font. So there are a couple of things which we need to install so that I will show in the next lecture from a DWI. And then we will style the header and footer. Okay, so that we will do in the next lecture. So we have successfully set up our application and we have created two components, which are header and footer. So I hope you like this video and this is it for this video, and I'll see you in the next video. Okay. The lead, take care and bye bye. 4. Lecture 4 AppBar Component: Hello friends, welcome back. In this lecture we are going to work on the header part. For that, we are going to use material UI AB bar component. This component provides the basic functionality that you would expect out of a header, such as spanning the entire length of this green and always staying at the top. But for that, we need to install material us. So let's go to the homepage. And here we need to click on get started. And this is the line we need to copy. And we need to go to the terminal. And first I will stop there terminal by pressing control c. And I'll paste lineup board which have copied. Let's go back to the website. And then we need this little Bhutto fun. So let's copy this bond. So let's copy this path that will do the files. And yet we in the public folder, I'll go to index.html. And after this line of code, we will paste it. Okay? And I close this file and then one more thing we require is the pond, sorry, is the items. So Eichmann's. So this is the line of code which we need. Who install. Okay, so let's talk to this and let's go back to the terminal. And here we need to paste it and press enter. Now let's go back to the website, and that's foo and bar component. So at bar. So this is the Anbar from print, if I click here. So this is too much of food pre-tenure, but we don't require everything from here. I'll show you what we required. Okay. So let's first, then stylish and has been completed. Okay, so let me write npm start. Let's go to header ab.js. And first we need to import, we need to import this AB bar, okay? And then we need to import toolbar. So what I'm going to do is I am doing two died in port at bought ROM. What UI code. And this we need to put in curly braces. Okay, then we need toolbar. So let me copy this and I'll paste it after this APA. Okay? Then inside this, I'll remove this header. And your eye right above and close this. And I will write toolbar, okay. And incentives toolbar. I will write the name of the website which is React. Shop back. Let me save this. And if I go to the browser and if a flesh the page, it is still compiling. Okay, so you had it is a, we got this AB bar component at the top. Okay? And if I write something, let's say if I write hello, and if I save this, if I go to the browser cookie, felt Nadia upset this AB bar. If I write something and if I say, and if I go to the browser, you can see that Hello has been hidden inside this app. But though this median fixed in the coming up lectures, we want this hello to being outside this therapy. But right now it is the word inside this though we don't want that. And then we can see, if I go to the website. Here it is written for position static here. So by default it is fixed and finite volition static. Then what happens? Let's see, position was to static. If I save this and if I go to the browser. Now this hello. Now as you can see, we, now we can see this hello outside this AB bar. And the styling is also been disturbed. But we don't want this. We want this to be fixed at the top. Okay? So by default it is fixed though if I write this and if I save this. So as you can see, this at bar is at the top and it is a fixed, okay? But if I remove this, then it will be fixed. So you get this and let's go. Go now, as you can see, it is fixed at the top. Okay. So this was regarding the AB bar competent. So this is it for this video and I'll see you in the next video. We'll lend tick debt and robot. 5. Lecture 5 Appbar Transitions: Hello friends, welcome back. So before we move on to styling and customizing this app, but using material UI styling system, I wanted to add a cool feature to this. Data is actually shown on the documentation. So if you go to their documentation and if you go to AB bar, and if I scroll down, so here it is, scrolling. Okay? So there are two options for scrolling. The first one is I'd add bar, and the second one is adequate. So I'd AB bar means the ABA hides on scroll down to leave more space for reading. So if I just throw this at bar heights, okay? So this is one option. And the second one is, and the weight at birth, it means the APA elevates on scrolled to communicate that the user is not at the top of the page. So if I scroll, you can see that part is at the top and the text goes inside this bar. Ok. So we are going to use this effect. So let's see the source code. Okay? So if I click here, you can see the source code. So this is the effect which we are going to use. So let's call p This function. So I'll copy this function. And let's go back to the results for the report. And you're about this edit function. We'll paste the function which we have copied. Let's remove this prop type we don't require. Okay, let me remove this. And then we need to import use Toll triggered. Okay, so let's start with this and I need to paste it. If I save this. And if I go to the browser, well, you won't see anything because there is no text. Okay, but let's go back to the store. And let's copy this editor. And let's go to the Visual Studio code. And inside app.js, I'll paste that image which I have copied and yell instead of two l, i will be 120 and I'll save this file. It will make 1-20 copy of this text. Okay? And if I go back, so now you can see we have a lot of text and if I scroll, you can see the eye buddies at the top and the text goes inside this. Okay? So this is the effect of Z1. So let's go back to Visual Studio Core and remove the things which are not required. So ok, and one more thing which we wanted to do is I will copy this. And the recent spoke because your, as you can see, this elevation scroll that apps this Add button toolbar. So we'd have to do that. Okay, so let's the AB bar n toolbar inside this. So let's save that and let's go back again. Now, I lose less. So we are getting the same defect, okay? Now, if I come back here, so the things which are not required is this target window, because this is the only being set here because their demo is an iframe, okay? Because the example, because their demo is an iframe. So that is the reason they have added this line of code. But we don't require this, so let's remove this and let's remove this text as well. And there are still things that required. Okay, Let's save this. And let's remove this as well. Okay? And now if I go back, refresh, everything will be working fine. And it seems to be okay. Now let's go back to Visual Studio Code and App.js. We don't require this, but let's demo this. And if I say this, so everything is gone and we have successfully added this elevations full effect. Ok. So this is it for this video, and I'll see you in the next video. We'll then take that and mobile. 6. Lecture 6 Styling Theme: Hello friends, welcome back with our header in place. And now that you know how to import material UI components and use them, it's time to figure out how to customize those component with just I link system. The first part of the styling system that I want to talk about is specifically the theming system that they have set up for us. And how can you use the theming system to centralize just tie-ins and create a consistent look throughout your application. The first part of the theming system we really understand is that ballot. The ballad is a way to manage the colors used in your application, but material you actually takes it a step further and provides some really interesting functionality around it for us. So let's go over to Martina un documentation and we will take a look at how we can set up that theming system and what they already provide for us. So here we are going on material UI, styling section and so that under styles and then basics on their documentation page. So here it says, why use Martina UI styling solution. So it says that it is blazingly fast. Okay? And the second is, it is less than 15 KB gzipped, no bundle size increase diffuse along what evaluated. And the third one is that it uses the is SS at did spawn a high-performance JavaScript HTML CSS compiler, which worked at runtime and server. So we can use our script inside CSS. So how to install this? So we need this line of code to install the states. Okay, let's copy this line of code and let's go to Studio code. And here I'll stop the terminal by pressing control c. And let's paste the line which we have copied and press enter. Now this has been installed two. Okay, now let's go back to the documentation and instead customization. If I click on overview. So theming lets you apply a consistent to, to your app. So first step is that we need to use team provider, okay? So this is the first step. We need to use team provided. So first step is that we need to use team Broder component. So if we look at the first component source code, so yeah, there's that theme provider. Okay. So yeah, there's a theme provider which we need to import from material UI slash post slash styles. Okay? Then we need to wrap the components in this team provider and pass the team as a prop. So let's copy this line of code. We don't required create MI team, but we need this team provider. So let me copy this. Let's go to Visual Studio Code. And we need to create a new file with the name of team dot js obey. So in UI component, components, we need to create. Sorry, in UA folder, okay, anyway folder we will create a new file with the name team dot js. Okay? And inside this, I will paste the line of code which we have copied. And we need to remove this two and only keep team provided. Okay. Sorry, we don't require this line here, but we required the line of code in app.js, OK, because we need to add this two components in clean providers. So I'll paste the lineup board, which I have copper. And I remove this line of code and instead of do, I will replace that David, this team provider, okay, and this two components enter employed. And let's save this file. And now the file which we have created team dot JS, Your, we need to import something else which is create MIT in. So let's file. I have already copied the line, let's paste it here. And yet we required only create MI UFT grid MU IT. And here we need to write export before. So first let me go to the documentation, let me save this and let's go to the documentation. So after importing this period MIT in theme folder, we have, we will be using this as a function. Ok? So as you can see, we will be using, we will be using it as a function and passing to it an object. And then we are going to assign that object result two upon stent named theme. So what's going on here? So when we create our MU IIT, this create an instance of 30-fold and UI team and then essentially tells it that we want to override any other default values with this object that we are going to pass within it, then we are going to store that newly modified theme with all the overwrite values and all of their default values that we didn't override store all of that as an object inside our team constant, then we are going to be passing this team, okay, into our team provider, which then passes this tines on our application. So let's go ahead and get back to the visual studio code. And we have already imported this V8 MY team. And you are, we need to write export, default, create. Let's copy this and paste it here. And inside we will take an object. Right now we will not feel any content in this. Ok, will not write any CSS inside this. So before we start filling out what we want for our team, I think we need to go and take a look at what the default thing that they are providing for us so that we know what values we are overwriting and how it is set up. So let's save this file with the empty object. Now let's go to app.js. And yo we need to import team. I mean, I think in lowercase because this is not a component from dot slash slash us slash theme. Okay, let's save this. And then we can pass the team as a prop, so team to team. And inside the curly braces vetoed team. Ok, so we are passing this team, adds a prop. So let's save this. So now we will start adding the code inside this object and then next lecture. So this is it for this lecture, and I'll see you in the next video, will then take care and bye. 7. Lecture 7 Styling themes (default theme): Hello friends, welcome back. So back at the documentation page, still under the customization tag. But now all the way down, yeah, we need to click on Default theme. It brings up the object that is not defaulting provided to us by material UI. We will check everything in this object, but right now we are only interested in this object, which is called palette. The first property under the pellet object is common, which is an object itself, and that whole common tellers that you might use throughout your application. So domain brand colors for whatever site you are working on, you can put those years so that it's easy to reference in your quote, all from one central location. That's why if you need to try out, say, a different colored, gray or green, you can go ahead and just tweak that one value right here, and then that will be reflected everywhere across your application. Now under the primary object, we have primary colour of your application. Your, if you actually just provide this main color for your primary, all your secondary, okay, so this is the main color of your primary. Secondly, material you actually then goes and generates a light and a dark version that you can call on without having to explicitly set them. This is really helpful if you'll just have a main colour that you know, you want to be using. And then you can just use this to automatically create exons that you know, you are going to match many material UI competence actually get their default color from this primary and secondary segments. So there are a lot of other options like error, warning. But the theme you see, we have a main and a light and a dark virgin. Okay, we have a main color light version, duck wisdom, and the warning object. Same, the main color light version, that version, ok, so you can go through all of this, okay? So, but in this course we are mainly going to use the primary and secondary. So these are the ones which are required for our posts. Okay. So you can go through the rest of it. That is not much init, okay? So if you can check grid that are different colors, you can just go through it. Okay? And if you go to text, there's a primary, secondary disabled, and there is a divider, OK. There's a background color, paper default. We can just go through it. So this is it for this video, and I'll see you in the next video. The lente get and Buh-bye. 8. Lecture 8 Styling themes (Palette): Hello friends, welcome back. So back in our code editor and terminal, I will write npm start. Though this, we'll start our application. Okay, so we are going to change this feller. Ok, so going back to code editor and inside the team dot js, we will open this object which we have left empty. And the first property that we are going to put d is the ballot. And let's open up this. And inside we will write common, okay? And let's open the curly braces. So we will overwrite or actually just add some colors to that common collection. And we will do that by starting off with blue. And inside this we will use variable. Okay, so let's first define the variable that we need two variables. One is for blue color and one is BAD inch. So the first variable will be fonts, soap card, blue. It is going to be ash, 171368, okay. And the second variable is bonds, shop cart, orange. And the boat is e, b, c, one, c two is even. Nick was saying this is giving some Edom. So it will be equal to o. Okay? And let's see if this, okay, so now we will use this variable here inside this blue color property. So to uses variables, we will use templates thing. So I leave us back the key, then a dollar sign, the Liebestod open, close, and Lp is the variable. Ok. Now we will use the variable which is for orange color. So I'll write orange and template string, dollar sign curly braces, and we need to copy the variable min and pasted here. Okay? So let me save this file. This color will be use in the entire application. So if you want to change the blue color, we only need to change the blue-colored here and it will be reflected everywhere else. Ok, now I actually wanted to go ahead and add this colors to our palate as well and get material UI to gender, to light and dark version. So we are going to add underneath this common primary objects. So primary object, and let's open and close the curly braces. And this is going to contain main, which is the same blue-colored. So again, I'll use template string, dollar sign, curly braces open, close, and chalk dark blue. Okay? And then I'll use secondary color. So secondary, rarely visited open those main. And you're, again, I'll use template string, dollar sign. Only places open, close up with its variable and chalk dot or interpret. Let me save this file. So now, so now that we have this in place, not only will material you or generate a light and dark variant of our main color that we have given to the primary and secondary, secondary option within our palette. But it will actually then change all of the component that gets a little from the team to use our main color that we have provided instead of default material UIColor. So if I save this file and if we go to the browser, so you can see, so this color has seems to a different color instead of the bluish purple that we had used before. So we have officially started our first material UI components and customize this AB bar to the team that we have provided with our own custom colors. So if we come over here and if you go to header.html is now actually on our app bar component. Here we have another default property, okay, in our MBA competent, we have another default property which is called color. And we can set it to primary. Sorry. We don't need to give a little business. We can write in double-quotes primary, OK. And if I save this, and if I go to the browser, refresh, nothing changes. Okay? But if I remove this primary and if I add secondary, and if I save this file, and if I go to the browser, now you can see this color has changed to orange fellow. Okay, so now you can see how the theming system really does completely make over your entire application in a real easy to customize way. Okay, so let's go back and change that to family. So when we say but I'm going to eat idea, it tells material UI to look up for primary color inside the team dot js, okay, which we have mentioned here in this opcode, blue. Okay? So if I save this and if I go back, so it will change this to blue color, which we have mentioned here. Okay? So this is which we are looking at. So this is the way how this theming system works in material UI. So they have done a great job. And if I remove the entire feller probe from yell, and if I save this. So by default it is a primary colour. But if we want to change this color to secondary, then we need to mention color and property will be secondary. Okay, so this is how we can do the theming in material UI and we can customize our lives. Ok. So this is it for this video, and I'll see you in the next video where we will see there typographic. Okay. So this is it for this video. Dilantin and bovine. 9. Lecture 9 Styling themes (Typography): Hello friends, welcome back. So in our last lecture, we got our first look at the material UI theming system and how we can use the palette to manage our fellows. Now, I want you to take a look at the other part of the theme that is built-in styling and that disposed styling of text using their typographic company. They're typographic component manages the styling for the text in the same way that the palate manage the styling for our college system. So let's go to our documentation and insight, customization and their default team. We have typographic. Okay, so let's go down. And here it is. Typographically object. And here we can see that the font size of 14 and font-family is roberto. So this is the basis on which we can change. Ok. And these other VD and took the H1, H2, H3, H4, H5, H6. These other variants of this typographic. And you can access them with w didn't prompt that. I will show you in a way. So let's go to the code editor and insight header.html is we need to import typographically open. So I will import typographic. And inside this toolbar, we will read this title and typographic. Let's see if this fine. Ok, yeah, we need to add a gama. Let say it is fine. And let's put the variant, Okay. Let's put debate in prompts obedient, which is going to be h3. Okay? So I'm not saving the fine First, let's see in the browser. So as you can see that x is small. The font sizes 2s1, okay? So if I save this file, and if I go back to the browser, now you can see that this font size is much bigger than what we are having, okay? The font weight is also too much. So if I go to the documentation, so if I go and components and if I go to type biography, so in Data Display, if I click on typography. So you others, the sizes are good for S1, S2, S3, S4, S5, and S6. Okay? So this is the size which we are getting four, it's three. Now, if I go to, if I go again to customization, and if I go to default theme, and if I click on typography, and if I click on S3, so this font weight is 400. Okay? So what if I wanted a font-weight two beat 300. Okay, so let's go to the the'm dot js file. And after the palate is over, we can write topography. And this is an object. And inside the object we will dig at three. And we can change the font weight. Okay, so if I change the font weight to 300, let's save this and let's go back here. So now as you can see, the font weight is now three hundred and four hundred. So let me comment this out. Let's say this. So you can see the difference now it is who boiled. And if I change this to 300, if I save this, now you can see the font-weight. Weight has to be entered. In this way. You can change the font weight, font-style. Okay? And he won the foreign side, you can change. So that is another property that we have been told, the styling of texts with our typographic component, the color property. Okay. So yeah, if I give speller and if I say pick two primary, it says Edit to primary. What happened? Let's see. So now this color is exactly same as this fellow, so it is managed. And what if I type secondary? Seeing this knowledge, this orange color, okay, so in this way you can handle the color also. So let's remove n. Let's keep it as it is. Now it is white. Okay? So this is how we can use typographic material UI. So this is it for this video, and I'll see you in the next video of lente pal and valine. 10. Lecture 10 Styling inline: Hello friends, welcome back. By now we should be getting pretty familiar with the material UI theming system and what they're defaulting provides for us. But what about when you don't actually need a team? You are not trying to change all of the type of components approach your application. But you want to apply styling to one component within your application. Well, that is exactly what inline styling is. And material UI provides a great system for doing this pit ties into the theming system. So let's check it out and we will use that to finally fix that margin problems with our app bar that is covering up our title. Hello. So let's go to the documentation and insight styles and instead the basics. If you scroll down and where this Getting Started written, here isn't simple example of inline styling. So it creates a little button here. So let's see how it works. First we need to import main style from material us lashed force slash tiles. Then we need to import the button from material UN vote slash button and uses that makes tides input, which is actually a function which we pass over styles in JSON as an object. And inside this object, you will notice that there are a lot of this properties which are going to be extremely familiar to you because Jesus is essentially exactly the same SCSS with only a few difference, but the main difference being this tiles, instead of being borders tests radius. You can see that it is border-radius in CamelCase with the capital R. So all the CSS properties should be in this format, like you'd see bach shadow. This is also in CamelCase, okay? And another difference is that we do have to put our strings in quotation. So if you just put the word wide and if it is without petition, then it will be an error. So we save this makes tiles call with our style object. We're to use tile constant. Then down your function component. Here we call the US style as a function, since it is a hope actually, which now gives us access to these tiles under our class Boston. By the time our components are actually rendered, this Jesus is compiled into actual CSS. So having it here on the class constant, let, it lets us just access this class dot proved. So now we understood how to set up our JSON styles and then get access to them within our component. Let's try this out. So back in our code editor. So in the header.html file, I'm in, in the header component at the top we need to import makes dial book is so important and deconstruct this. And here we need to write makes tilde's from at the rate material UI tiles, okay? And then we need to create a constant, use tile. So, so about this header function, here we need to write bonds, you styles, which is equal to Make styles. And here we will use a slightly different syntax than the documentation example, which is going to give us access to the theme inside of our styles. We need a property from the theme to fix our problem with the header sitting on the top of our hello text. So your, we will pull out the team. So we need to pull out the theme. So team. And then we began with an arrow function and then a parentheses. And inside we will put an object. And the first style that I want to create is I'm going to call the class toolbar. Tool bar margin equal to and curly braces open, close. And you are, we need to use the spread operator to copy over some properties out of our theme. The property that we want specifically is the'm dot mixing dot toolbar. To show you what's that doing your, let's actually go to the documentation and inside customization, if you go to default theme. So yeah, he's done mixing object and incentives mixing object, we have a toolbar object. And inside toolbar object we have minimum height, which is 56. And there are a couple of media queries with different heights. So by using this spread of it, we have now copied all the styles over where we can now apply them to a component. Now let's go back to the code and first we need to come right beneath the header function about the written statement and create our const classes, which is equal to pulling our US tied who? So here we need to write use tiles. So this now gives us access to the toolbar margin style on our classes constant. So right below the elevation scroll, we will add a div with the class name, which is going to be classes dot toolbar module. Now what the div with the Toolbar margin classes doing. Sorry, let me close this div and let's save this. So now what the div with the Toolbar margin classes doing, which is provided from material us that gives us that toolbar mixing so that we can solve this exact problem. This contain the height of our app, but, and when we apply it to the do what it does, it creates a little portion under the APA since the A-B-A is floating fixed in place at the top of the screen, and then pushes the hidden content underneath it out to where it can be seen on the screen. If we save this, and if you go back to the browser, and if I go to the application, if I refresh, okay, and getting some error toolbar margin, the let me check. Wound bar margin. Okay, let's go to the Visual Studio code. And your eye at a spelling mistake, it is toolbar. Okay, let me save this. And if I go to the browser, and if I go to the application, very flesh toolbar of undefined, the'm dot mixing k. This is mixins. Okay, so let's go to register. Mixing is we need to put s. Okay, let me save this and let's go to the browser. Now you can see we got hello, okay? If I go back here and I go to add, okay, this, let me remove this. Okay, so in the app we will having hello. So now this is pushing this content which was underneath this AB bar. So with the help of this, with the help of this toolbar margin, we have fixed the issue of this content. Okay, this is it for this video, and I'll see you in the next video, the lente care and bourbon. 11. Lecture 11 Product List component: Hello friends, welcome back. In this lecture we are going to implement product list. First, we need to create data dot JSON in the source folder. But let's go to Visual Studio Code. And in the source folder, we need to right-click and create a new folder with the name, sorry, we need to create a new file. So right-click new File, Data dot JSON and press enter. So we will create some sample products. So this will be an object, and inside the object, we will take robots. And this products will be an array. And inside the added, you will take the objects. Okay? So the first one is IID, so underscore id, which is going to be this one. Okay, then we need a title. The title will be again, dress one. Then we need image. Okay? So image, which is going to be slash images, slash 1 dot JPG. Then we need description, which is going to be about dress one. You'll be getting some shoe. So I'll put it double-quotes. Then we have price, which is going to be $19, okay? Then we have available sizes. This is the last one. And this will be an added. Ok, so, and inside the adding, we will have accent. And second one is x x L, Okay, double x. And let me say this. So this product is available only for two sizes. One is Excel and the second is, okay, I have created a sample data for six product. Ok, so let me copy the sample data. So this is the sample data which I have created. So I'll copy this. You can get this data from the project and Resources tab. You can download the db.json file and you can use that. Okay? So what I'm going to do is I pasted here. So this is the final data which we have. Okay? So let me save this dot JSON file. And then again, same thing for images. We need to create a folder in the public folder. So let's create a new folder with the name images. And inside this images have been based on the files. Okay. So these are all the images. So let me just copy this. Again. You will get all these images from the project and we saw stamp. Okay, so I have copied this images and I'll go you're in the folder, public images, and I'll paste it. Okay, let me close this, close this close this. And let's go to utils to report. And inside this year other images which are, which we are going to use. Okay. So you will get it in project and we saw Stapp who normally to worry, okay, let me close this. And now we need to import this data in app.js. Okay? So yeah, we need to import data from dot slash data dot JSON. And now we will convert this app component into a. Plasma is competent, This is a functional component, but B will be converting this into a classless opening for that. First, we will import React company from react ok. And this we need to add plus app and we need to remove this year we need to let extinct react. Ok, and we need to write vendor. And inside vendor, we will add this written. So let me save this. And now we have converted the functional component into a class-based number. And here we need to construct a. So inside this, we will add constructor. And it will take drops. Again. It will take one argument as props. And you'll be, we'll take super. And inside. We let drops. And we will let the start state, which is going to be products. And product will be data dot products. Okay? The second one is size, which is going to be empty. Then we have salt, which is going to be empty again. Okay? So now we need to pass this product as props in our product component. So we need to create a product component and then we read, create the list of products. Okay? So now we will create a broader component and that we will add the product list, okay, from, and we'll palpate data of products as a props. So for that, we need to right click on this component folder and create a new folder and name it as products. And inside this product, I will create a new file with the name routes.js, ok. And this will be a functional component. So I would like our AFC. And first step. So your i will write product list, okay, save this and inside this app.js, I will import this component. So important product. And if I click here, okay, let me, let's do one thing. Yeah, we need the product component after the header. So your i will write product. And if I click here, you can see this product part has been imported automatically so we don't have to remember the path. So let me close this. And if I save this file, and if I go back to the browser, and if I refresh, okay, I'm getting some issue. Flat glass APP extends react. So in app.js, this class component is giving me some tissue. So, so let's go to Visual Studio Code and we need to write companies. Okay, let me save this. And now if I go to the browser and if I replace, I think this is nonfinite. And let's refresh. Okay, so here we are getting product list. Just ignore this for time being. Now after this product, we need to start items like this. Ok? So this is the project which we are going to burn it, okay, so other products, and this is the bad item. So we need clue sections. So we will divide this into sections with bell off grid. If I go to material use and if I write grid. So we need to use its blood system for separating two columns are the options. Okay. Oh yeah, there's the option, so great container. And then we can add the props, okay, that are different. Kind of see this one where it containers, we need to add a spacing Dendrite container item. And if we want to use nine columns, then we, this is the column grid, okay? Will be 19 parliamentary columns. So what I then do is like if I go to do bold and in app.js, I will, in bold. We'll invoke the grid from Adelaide materials, UI, food. Okay. Let me say this and it's like down here, down, let's add the grid than container. And let me close this. And inside this we will add one motivated item equals to, sorry, XS equals to three is only nine column. First, one is nine column only. This is not sell clothes. And here we need to add the products. Let me remove the space. And the second Binet is equals to three columns, so nine plus 312. Okay? So let me close that spirit. And here we need Dart items. Like me save this and we go to the browser. And let's take this out. If I refresh here you can see product list and this is start item, OK? So we have a product list here and we have a card items here that we have separated into separate columns. Okay? And let me make this model because here as you can see, this is small. So we need to make this one. So let's go to joules to do bold header ab.js and yet the variant alligator H5. Okay, let me say this. Let's go to the browser. And as you can see, now it is a smaller than looking much better. And yearning team dot js, we don't require this type of W. So I'm just removing this. Ok, let's see this. Let's go back to app.js. So this part is done of the product. Now we need to pause this product as it propagates. So your eye will take products equals two products. Let me save this. Now. As a prop, we need this end product dot js. So yeah, your eye will respect the drop which is products. Okay? Now here we need to sort the list. Again. I will use the grid system for this. Okay? So this is going to be an MP lecture. And we need to use makes tight for the inline styling as I've shown in the earlier lectures. So let me import makes Tai Chrome at the rate material us styles. Okay? And then I will import grid from material us both elect me seeing this and then we need to write. Bonds, Use times, which is equal to mate styles. And it said this, we will take an object and here we will write all the CSS. But right now I'm keeping it empty. Let's come back here and we need to write const glasses equals to use styles. Okay? So now we can use this classes. Now let me remove this product list and yelled and take our Grid container. And inside this i will map the products or products dot map. And inside this variable product. And here we need an arrow function that entities. And inside I will take grid item and I'll take MD equals to four again. And we need to c0, which is going to be product dot underscore ID. Let me close this item. And inside I will take an a tag with that last name, which is going to be plus's dot link. Okay? We need to create this last link. Okay? That will create. Now let keep as it is. And then we need to write HREF, which is going to be as plus product, dart, underscore ID. Let's close this. And inside this we will take God media. Ok. So let's check what is hard media guard. Lets take the dark component. So here, as you can see, we have simple Codd outlines. God, okay. This is the complex, this is God media, which we are going to use. As you can see, this is the target direction, God media. So this, we need God media. Okay, so I'm going to use this because we want to show that he made, okay, as you can see that you have to be one to sue the image. So I'm using Todd media for that. So let's go back to Visual Studio Code. And yes, we need God media. So first we need to import that media. Then we need a few more things which we required. So let me import everything. We need topography, we need action. Okay, we need fat actions. Then we need, but then these other few things which we require. So let's use one-by-one. So you're either quite dark media. And inside we need lastName plus's dot media out there. This we need to create this glass We need to create. And we need image which is going to be product dot image. Then we need artifact, which is going to be product dot title. Then we need title, which is going to be Rhoda dot title again. Let's close this and let's see if this load it is giving me some edit products is not defined in app.js. So let's go to products. We'll get later on. First we will complete this. Okay? So now this media is done. Now we need guard action. Ok. So after the ETag, we'd acquired card actions. And inside this required typographic, we took last name, which is going to be price plus's dot price obey. And component is div. Okay? This, I'll explain you. And inside this we will add product, dart brines. Okay? Then after topography, we need button, button. And you are, we need to write at T2. And inside button we will add class name, which is going to be so we don't need, we don't require lastName. We required radiant, which is going to be contained. And size is going to be large. And color property will be. Secondly, let me save this. So you have map everything and now we will add some classes, but before that, let us take the error which we are getting. So I'll just check this edit in app.js, but is not a fine. Let's go to app.js. Products is not defined. So I did a mistake. This should be this dot state, dot products, okay? Because so yeah, we have mentioned that the start state and product of it. So now we have parsed it as a prompt. And now if I go to the browser, and if I rephrase though as against you ve got but then we got the prize, but we are not getting the inmates. So let's go and check what is the issue. So God media as fine, product dot image, data, dot product.com, HRP, return image. This is perfect for gay, so we need to add some classes. Otherwise we won't be able to see. So this is the Media Lab oscillates about Peters. And inside this object, we will add the class media really basically open, close and we need to give a height which is going to be 500, and width, which is going to be a 100%. Okay, let me save this and if I go browser, now you can see we got images and now there are few more. Okay, so we are not getting the space. So yeah, I'm going to add an inline style which is going to be padding. But just let me say this, let's go back. So we got the padding year, but still we are not getting the space like this. Ok, so we need this space. So after the container we need to add spacing, which is going to be three. Ok, let me save this. And now we got the spacing length IS okay, so this is done perfectly. And now as you can see, we, before the price, we have a dollar sign. So we need to work on this. So yell the price before the price, we need to add it all up science. So for that we need to create a file in the source folder. But the name utils. Ok, you build arches and we need to add some code. So I'm going to use IN deal number. So if I go to a browser and d l number formatting. So if you can see this is this helps to convert the valency of light. We can add that and see whatever we want like viewable or Indian INR or maybe a dollar. So for that I will write some podia. So you only need to write export bonds. Format price. This is the name of the constant, which is going to be an arrow function. So we need to pass a variable with the name device and you're in the arrow function, we would like new INDELs dot number format. Okay, if I go to the year, you can see new entail format, number format, and inside parentheses we will write pn means English, okay? And we need to add comma and you're in business, we need to write style, which is going to be that and see. And the second one is currency, which is going to be USDA, okay? And you are, we need to write format price, okay? The variable which we have pass. Let me save this. Now we need to import this format price inside this broader ab.js. Okay? So I'm going to import format rise from dot dot slash. The order does not give me an option, dot-dot slash, dot slash, which is outside. Okay, So the auditors and bring it to that price in with this variable B. So let me copy this and paste it here. And this LUMO partitioners Don buckets. Let's save this. And if I go to the browser, if I go to the app. So yeah, as you can see, we got a dollar sign before the price. Now what we can do is like we will increase the font size of this. So we are not getting the title, actually, you'll be super title. So we need this title. Okay. So what is the issue of the psyche or dot-dot? Okay. We have not added that title. That is the reason we are not getting it. So you're inside this, we need to add type of Gadhafi. Ingredient is at six. Okay. Is Brian Murray and component is B. I'll show you this component. Okay, so let me finish this. And we need to write product dot title. We save this. And if I go to the browser, now as you can see, we got this title now we need to do some styling for this. So let's add some styling. So here is the link. So first we will do some styling with border link. So linked and this will be fellow white. Okay? And then the next one is prime, so gain. So you have at the Glasgow Pentheus, once I know this is the last bulb, like, let me paste it. And I will write font size, which is going to be 1.25 REM. And margin right, will be ten vx, so v, let me save this. Let's go back. Now as you can see, we got this target as it is here. Okay? So we have successfully added a style a naught. So I wanted to show you this component p. So if I go title and if I right-click, and if I inspect, and if you click here, ok. So as you can see, this is a p tag visit inside a p tag and you're disobedient is at six. So if I change this to a div tag, and if I save this, now this will change to a div tag. As you can see, this is now our div tag. So if you want this title to be in a div tag, a p tag, and you can light a component dip if I remove this, okay, if I remove this, and if I save this now, this title will be at x F6, OK. The knowledge you can see this title isn't F6. Now that there is no p tag, there is no duty. But if you want this to be in a div tag, a p tag or span tag, then we need to write this component equals two and the name of the type. Okay? So we have successfully added all this images and we have done the styling for this. So the product listing part is done. I hope you understood all of the code which we have written. Or if not, then please go through the entire lecture again and do step-by-step over, do it step-by-step. So this is it for this video and I'll see you in the next video to lend ticket and Buh-bye. 12. Lecture 12 Filter Products Component: Hello friends, welcome back. In this video we are going to add a filter bar in this shopping cart. So let me show you how the filter barrier will look like. So the prepare bar will look like this. Okay? So this is the finished product. Ok? So the filter bar will look like this. So we need to create a filter Bar and our project. So for that, let's go to Visual Studio code and components folder. Here we need to create a new folder with the name Rita. And inside this folder will create a new file with the name router dot js. And again, this will be a functional component. So FCE press Stat. I was like, oh, okay, let me save this and let's go to app.js and money to import this component. So about the product component, we will add to the company. So you did not give me an opsin. So let's import it. So from dot slash slash slash router. Okay, let me save this and let's go to the browser and check. So you notice the fritter, our text. Okay, so we need to add this three sections. So we will be using a mullet system. Two, add this three columns. Ok, so for that we need to go to court and your looseness in the filtrate ArcJS. Yeah, I'll add a grid. So for that we need to import from Adelaide material slash slash at the rate multilingual UI slash. Okay, let me say this. And I will add Willard container and an incentive Grid container, I will add beleaguered. So again, lid item. And let's take we didn't be wise for okay. You need three grids. So this was the post-lunch and yet I want that down. Okay. So let's add the text. Let me say and your there'll be a second grid. So with items. Okay, sorry. I have ADD items from William Devis full. Let's lose the spirit. Save this year. There'll be an optional sorting, the sorting. And the third period is for size. So valid. Medium device. This will be sites, okay, and let me save this. And if I go to the browser. So yet as against him, down sort and sites are going to be divided into three sections, bounce out and size. And then we need to go to app.js. And yet we need to pass spree properties in three components. So first one is found, which is going to be this dot state dot products dot length. Let me save this. And if I go to Filter, we need to do on top the found and I'd write down products. Let me save this. And if I go to the browser, you can see it chose six products because so there are six bottlenecks in the added. So that is why it is showing me six products, okay. And we need to do some styling again. So I'll add some styling. I'll take topography. So papal, drafty and radiant I will take as body one. Okay. And I lead the class name, which is going to be plus's dot product. Again, this we need to add, okay, we need to import makes times from material UA. Goldstein's looking so that we will do in awhile. Ok. And we are, I need to close this type of Gadhafi and I will those typographic. Okay, so let's import type of Gadhafi's. And then we need to, okay, let's save this and let's check that and the browser how it looks. Okay, classes, let's import them. Excited. Okay, so in both made style from and today's material, UI slash, go slash styles. Let's say this 1 second. Let me will be excited because I need the part. So let me copy this. And that was a mistake again, let me say this. Now. I will declare it bounced. Use styles. It blends to make states. And inside. Yet I'll take an adult function and I'll pass team. And yeah, we will add an intent this object, we will add the CSS classes like broader countenance. Let me save this. And for now let's keep additives. Let me check the product component because I think it does add movie yield. We need up entities. Okay, so let's go back. And here I will add Japan to peace. Okay, inside this we will add an object. So let's keep as it is, and then we will add this glasses. Okay? First we will compute this section. Ok, so now what is the next thing? Let's take them into a browser. Glasses or it's not okay, yeah, one more thing we need to do here. We need to date bonds classes, which is believed to be use styles that shave this. And now let's put a little bit older. Now as you can see, we got the topography as little bit o font and font is looking much better. Okay? So yeah. And then we will add a inland style which is going to be padding. Well, let's save this. The knowledge is aligned with this image. So this, we have finished. Now. We will work on this salt. Did it. Okay, we will work on this year. I will, I need form control. So Form Control. Here I will add a class name, which is going to be classes dot form control. Okay? Conclude. Need to close this. And inside this form control, we will take input label, so input labor. Okay, we need to import all this phone going don't input label from material UI code. Okay, so that will do. But first let me finish this though. And we need to close this. Input label will be select size. Let's save this and let's form control. Let's talk about this. Let's import and put label also. Let's save this and let's go to the browser. Now as you can see, we got this, but still we need to work on this. We need options, okay? But options we are going to use menu item. And after this we need select, login, select and insight select. We need menu items. So menu items, items. And the value Vb. First, first value will be empty and the ability to write latest. Let's close this menu item. And we need two more, so I'll duplicate this latest and then we need lowest value and the lowest and highest value will be highest. And that's important, the select. So I'll paste it and then we need a new item. So let me just copy this and paste it. Save this. And now let's go to the louder. We place it. There we are getting it, but we need to do some styling. Okay? So what I'm going to do is I'm going to do some styling. For this rotor count and form controls looking. So first we will do, do it for Form Control. Form control and open and close curly braces. We will add margin, which is going to weak team dot spacing. And it will be 11 from each side from top-right, bottom-left, okay? And then we need minimum. So minimum bid, which is going to be one grantee. Let's save this. And this spacing one means what I am showing. Once again, let me rephrase this now we are getting, okay, this will work now. But we have done the styling for this. So what is spacing looking fully play spacing. And if I go here. So as you can see, who means eight multiplied by two? So by default, if it is one, then it will add eight pixels. Okay? So what we have done is we have added a margin of eight pixels on each side from top left, bottom right. Okay? And we have given a minimum of 124 this, so this is 120 pixels. So in this way we have styling this select opsin. Now we will study the size. So for that, we'll get, we need to add one more bidded. Okay, we have added the grid, but we need to add the swamp and pulled and everything. And so let's do it at the form control. And again, the class name will be plus's dot farm, unquote. Close this. And entirely we need input label. And input label will be select sites. Okay, so see elect sites. That's flows this. Save this, and then we need this. So let's, let's copy NIJ and everything. So after input label, I'll paste this for the other value will be changed. So all this will be x, s Then exists, and this value will be small, small, and we need a few more. So small, medium, large, Excel double XL, says medium. This is large. This is Excel. And this is double x. And let's save this. And if I go to the browser, okay, now you can see this idea is build this one work. Now, hey, we need to add the functionality fathers, hoping to select sites that excites obese select sites. So what shouldn't be? What is this? So this is all derived into order. This is r dot. And this is Tillich says, let's go to the browser. Okay, now this is looking much better and we need to add CSS for this. So we have this class_name. So product, which is going to be managing, spacing and pumped up, it will be too late 16 pixels than Seattle Needle. Let me say this. And one more thing we need to add is in the grid this item, we need to add a line items which is going to be centered. Okay? Let me save this. Let's move the browser and they fight it stress. Okay, so we need to add container, okay? And if I say this, and if I go to the browser now as against, this isn't saying that, okay? If I compare this, now, both are exactly the same as we were not adding the container that via this line item Center was not working. Okay. So once we add this container and there's a line item Venter work. Okay, so I think we have a good understanding for this. Now, let's work on the functionality. Because we need to add some functionality for this. Once we select the lowest it could be charting should be according to the lowest price. Okay, right now it did not working, but let's go to rebuild pseudocode. And now we need to go to app.js and we need to pass fuel more approx in free deaf. So first we will pass size, which is going to be this dot state dot size again. Then we need salt. That is going to be this dot state, dot. Sorry. Then you need two functions to handle the change of size n sort. Okay? So first one is I will add value to the products so that products, which is going to be this dark data products, okay? And then we need sought products. So thought, products. It is going to be this dots are products. Okay, let me say this. Though. This we need to pass as a prompts in freedom component. So let's go to we'll get first. What I'm going to do is before render, I will add this fairy tale products and bus event. And you need to implement the functionality open, same thing, post-hoc products. Events. It will be event not events. Okay. We're gonna need to add the functionality. So let me save this and let's go to fairytale component. And yet we need to add. As the props which we have written that in app.js. So corresponding sides then sort than the products. Then sought. Products. Okay? And select the value will be sought, okay? And insulate the value will be Heights beam. Then we need onchange, so on saints, that is going to be return products and mirror on change will be salt products again. Let's save this and if I go to app.js, I'm getting some et al. Sought products, open-source product spelling is at all. So I sought products. Okay. So if I go to app.js and if I console dot log event dot target value, let's see what happens. Let me admit this and let's Azure DR also, let see this. And if I go to the browser and if I inspect and if I go to console, Let's see what happens if I change this. We'd like say lowest, Okay, I'm getting the value. And if I select any size and getting it, okay? So this is working. We are getting the options which we are selecting. So this is working fine, but now we need to add the functionality. You will find some analytic. So for that, I'll make this as an arrow function. So what I'm going to do is filter product. It is going to be an arrow function, okay? Event dot target Dato 30 year. I will remove this console log. And you're like state, which is having the size, which is going to be event dot target value. And the next one is product, which is going to be theta dot products dot freighter. Ok? So we are getting the products from this data and we offer you telling out. So we need to filter this year I like product and an arrow function. And here we will sort by an available site. So product, not available. Sizes dot index of event, dot target value, which is greater than or equal to 0. Ok, let's save this. And let's go to the browser. And let's say if we are getting the order or not. If it is, if we are able to sort by order of lowest facility, lowest, literally, this is not just sorting one, this is the three Dylan. So if I select access and I'm not getting anything except, so this is not changing. So let's go to data. Recent sizes, spelling is correct. Let's go to app.js. Correct? Rater.java dots. So you are, we need to add one more condition actually. So let's add that condition. If event dot target, dot value equal to empty string, then this dot set state will be size. If it's going to be event dot target, dot value. And product. Products will be data. Start products, all the products. Okay? So now in this else condition and giggle at this dot set page I get, let's see if this a, I'm getting some Chu product is products is not defined. Products. So you don't need disability basis. Okay. So let's remove this. And here we need the available, so okay, so it was a mistake. Let say this. Now if I go to the browser and the phallic flesh, and let's check it open. It's just not changing actually. Doing something that on ok. This is the sudden subsets. Dispose them in, stayed, start brought up again. Now we look at this and anybody James to access large splitting on booking. Let's go back to app.js. So your there is a mistake. This identities could be endear. Okay, so if I save this, and now if I go to the browser and if I refresh, and if I select any size like Excel, that will exempt. So there are two items, so two products, okay? And if I select Excel and data for products of both products, okay? And best select large so that R operatives again, in medium, there are two products. In small, there are no products, so the excess there are no products. If I click all, so do show all the products. So in this way, we have finished the filtering for this sizes. Now we will do the sorting thing, okay? The lowest. If I select the lowest, then all the products which are in the lower price, but come first, okay? And if I select the highest, then all the products which are at the high price will come first and latest will be by the ID. Let's go to the board and now we need to work on this sort product. Ok? So again, this, we, we converted this into an arrow function. So sot product equals two event and you're ADL function. And let's remove this console. And we need to write this starts at state. And here we will do something different, like give me the first argument as state. Okay? So for that, we need an arrow function. Okay? So we will take the parameter for spat on hotel at state. And this state would return an object, fill. This isn't attending an object, which is a new state for this object. So this ought value could be event dot target, dot value. Okay? And the product is very important. So product, which is going to be state dot-product. So we got the access of this product through state dot, state dot products. So these are the filtered products and we need to apply sort on the fretboard product. But before that, we'll take the salt year. Ok. So let's bet this 1 second. Let me cut this. And yeah, we'll add angst sort is going to be event dot target dot value. And I thought, okay, this is just a thought that we save this. Suppose halting, let's remove this and we need to add the start state dot products. And to create a blown, we need to write slice, okay, we need to use slice method. And then you're going to sort so sought. And here we need two arguments, so in B and in the arrow function. So this augmented accept two parameters, a and b. And we need to compare this to pedometers and return a new object. To send a new object, we need to check the value of Saad. If sought. Sorry, we need to take the value of salt like this. So sort. If sought is equal to lowest, then e dot price is greater than b dot place. Or else return one or minus one. Okay? Then we need to check, sorry, it is equal to I is producing that is, then a dot values is less then b dot rights. And if this is the case, then written one audits minus1. And the last condition, maybe we'll sort by ID, okay, so you need to write a dot underscore ID is less than b dot underscore ID. This is the case. Then return one or else minus1. Okay, let's save this. And now let's check if it is working or not. Okay, so let's go to the browser and refresh. Let me select the lowest. Okay, it is working. Now. The products are coming from the lowest place. And if it is the highest, it is coming from the highest price. And again, lead this. So by default it is then lead us to an end, but it's lowest. Latest, highest. Ok. So this is looking fine. So we have successfully completed starting part also. So this is it for this video and I'll see in the next video, Atlantic debt and the land. 13. Lecture 13 Cart Component: Hello friends, welcome back. In this video, we are going to implement card component. God component will help her to show the selected item in the right sidebar. So when you click on Add to Cart, this product will be added to the cart and the texts year should be changed. So if I remove this item from the cut, now it is showing goddess empty. So when I add items to the cart, which shows the number of items in the cart. Let's add another item. So we need to implement multiple click on Add to Cart. So if I add multiple item, this product, so let me click on Add to Cart. So as you can see, it should increase the number of count, the number of item for this product. And based on edX dot total should change. Ok, let me add one more time. So your total number is three and the total has changed to 63.16. Let me add one more time, but your total will be four items and the total will change. Okay? So let me click. So now the item, there are four items out this product and the total edge seems to 78.50. Ok, so in this lesson we are going to implement this section. So we're going to update the value here, okay, through the list of items in the cart. So the total items in the cart. So the total items and we will have a PLC button. Ok, so this is the finished product. This we need to implement in our project. Okay, so here if I click, nothing will happen. We need to implement this in our project. Okay, so let's go to Visual Studio code. We need to go to product dot js. And what we need to change is the click handler for this button. So you are in this button, I'm going to add onclick. So onclick equals two. And here we need an arrow function. And the name of the function is at T2 dot. And we need to pass product as parameter. Okay, so product. Let me save this. And now we need to go to app.js. Now we need to create state for Cart Items and set it to empty edit. So in app.js year in this state, we need to set carte items, which is going to be empty array, okay? It means by default there is no item in the cart. Let me save this. Next, we need to create advocate function. So before sought products, I'm going to define add to cart like a method function. So I took God equals two an arrow function. And yet I will take as a parameter so product. And inside this function, first of all, let's create a duplicate for carte items. So on guard items equals to this dot state.gov item's dot slice. So it is a clone copy off guard item inside the state. Ok, this is the known poppy of this. Then it is a time to create for_each over cart items. So God, item's dot for-each and each item. And for each atom, I'm going to check if item. Dot underscore id is equal to burn product, ok? So product dot underscore id. So I will check if the item is equal to the current product that we are going to add to the cart if it is already exist, okay? If this already exist, if this condition is true, I will just update the number of gone for that. So item dot count plus, plus, okay, and we save this. And also I need to set a flag already in cart, which is going to be true. And before for each, I will define a let variable. So I'll define late already in card. Okay, so you're just spelling should be in God, overseas would be capital already incurred. That is going to be false. And after the for each, I will check if the product, so let me check if the product is already in God or not. If it is not in the card. So if this condition is true, it means that I need to push this item inside the gut items. Okay? So God, item dot push. And here I'm going to use spread operator. So dot, dot, dot, product. Product spelling is wrong. So it means that instead of having product, I'm going to have the field of products here and then put a comma and set the count to one. It means that I'm going to add instance of this product with count number one as a new item inside got item. Let me save this. And now that I have a new item inside the guard item, it's time to go for implementing the card sidebar. To implement that, first of all, we need to create a new component. So you're inside the source folder, inside the company, and I'll create a new folder with the name dot. And inside this folder I'll create a new file, which is dot dot JS. And this will be a cloud-based component. So our CSI and press step, let me save this. So if I go to app.js, so you're inside, this spelling is wrong, so already, okay, I missed a y. Let me save this file and now let's go to that dot js. Ok, So inside the render function, first of all, we need to check the guide item. So before the returns, we need to write bonds and we need you destruct. So part items, which is going to be this dot props. Okay. So it means that from the parent component, I'm getting the card component year and year inside this div, I will check the condition that guard items. So if the Cart Items dot length is equal to 0, if this is equal to 0, okay? If this condition is true, then that item will be empty. So you're, I need to write ticks. So I'll create a div. And inside this div I write cart. Sorry, cart item, scar does empty. Okay? And the second condition is that, so you are, we need to add colon. And the second condition is that if there is item inside this, okay? If there is any item inside this. So let's create another div. Let me copy this. And yet the texts will be you have dot items, dot length. So you have this much number of item inside the card. So okay, let me save this. That's the change we have made inside the gut item. Now, let's go to app.js. We need to add God component inside the sidebar. Ok, so here we need to add the.component. So first, okay, let me remove this takes token. Then we will add the god component, so dot. And here we need to click. So let me check, okay, we got the path, okay? So we don't have to write it. And we need to pass dot items as a prop. So Cart Items equals two items and this cart item is coming from State. Here, as you can see, it is coming from state. So we need to write this dot state, dot dot items. And let me close this.com and let's see if this an incentive product dot js. We are using act two cards, okay? So we need to pass it as a prop from app.js. So let's go to app.js. And inside the product component here we need to write Add to Cart, which is going to be this dot to dot. Then we need to go to Add to Cart function. So let's go to Add to Cart function and yell. We need to set state, okay, this dot set state. And inside this, the guard items would be carte items. So let's save this and now let's take it in the browser. So you're, I'm getting some issue. Ok. Add to Cart is not defined. Okay, so you're in product dot j is we need to pass it as a prop. So you're, I need to write. You need to be struck at two back. Okay. Let me save this. We are getting some issue. Ok, Fama. Okay, now let's go to the browser. Okay? So if I refresh, let me denote this refresh. And if I click on active part here, as you can see, it says you have one but you have one in Dakar, okay? One item in the cart. So let me add this product. You have to in the card, okay. If I click here, we'd have three in the top. So the first part is, so the first part works. Let's go to Visual Studio posed. Well, let's add the styling for this. Okay, so right now as you can see, the styling is different from this. Okay? So let's go to Visual Studio Code. And here we need to import typo graphene. From Adelaide material. You go OK. And you're inside this div. We will take typo. There are feed and variant. Will be body, h1 and class name. It's going to be glasses. Guard count. Ok, let's close this and we need to look at this. And here I will paste it again. Let's save this. And now if I go to the browser, the glasses is not defined. Okay? So we need to add, you study for this, okay? So as you can see via getting an edit, that classes is not defined. So let's go to Visual Studio Code. And we need to use which style because this is a cloud-based component. So instead of using US type, we will use widths Tai Lopez. So we need to import with styles from material. Hyphen UI styles, okay, for iPhone states, let me save this. And yes, you need to write launched styles, which is going to be an adult functions. So we need to pass teams. And inside this we will add this class. Okay, so dot count. I need to add the properties for this. So let's keep it as it is. Let us first finish the setup for this. Okay, then inside the render function, we will write bonds and we need to write classes, which is going to be this dot props. Okay? And then we need to cut this export default. And we need to write export default. And we need to lifestyles, which styles, styles. And then the name of the component which is stocked. Ok, well let's save this. And here I will end the property for the glass.com. So we need margin top px, okay, if vx, let's save this and now let's go to the browser. It made it fish. So now as you can see, we got done margin of Rahm talk, which is 2px. And the styling is also added to this text. Okay, if I click on Add to Cart, so you have one in the back. We have two in the back. So I think this is perfect. Let's remove this, Dave and add the egg fragment. So there is a shortcut to Ireland vx pregnant. We don't need to write VG dot Fragment. Instead. You just remove this and This is it. Okay, let's save this and let's go to the browser. And if I refresh again, still, this is working fine. And we have removed the extra div. So I think this part is styling part is done. So now let's go to bit will pseudocode and move ahead. So now it's time to go for creating lists of got items here. For that we need to go to with those to be followed. And insight guard dot G is after topography. We will take our div and inside this div, we will map that item. So curly braces got item's dot map. And inside this math function, we will take an arrow function. And each item should be converted into a card. So we will take guard, okay? And this we will import from material UI. And you're the key will be item dot underscore id and class name will be clashes dot root. We need to create this class root, okay? And we need to close this guard company. So discard component, we need to import from material UI. Ok. So I'll just copy this. And I will add up 4mA and God. And inside this card, we will take God media. So card, again, discard media will come. We will import from material UI. So card media and class name will be classes. Dot image, that is going to be item.name, MH, title, that is going to be item dot title it. Let's close this guard media. Let's save this and let's import this bomb material us. So card media, ok, it is imported. So that's great. Okay, then after God media, we will take our div for details. Ok, so glass name going to be glasses dot details. Let's close this div. And inside this div we will take our content, so bad content, okay? And if I click year 13, we automatically imported from material you add, okay. So Guard content equals two, which is going to have class name. That is going to be classes dot content. And inside God content, we will take topography. And component will be the variant that is going to be body one. And inside this we will take item dot Titan. Let's save this. And after this topography, we will take one mole div with the class name. That is going to be classes dot price block, okay? You need to show the price, so price block. Let's close this div and here we will take typographic variant will be. Subtitle, color of the text will be text secondary. Hey, let's close this topography and n-type. We need item dot price. And we will show a multiplication sign, and it will be item.name count. Okay? And this should be, this price should be in dollar sign. So we need a dollar sign before this price. For that, we need to import the format price from utils. So import format dies from dot dot slash, dot dot slash. You didn't obey Util. And this price should be wrapped in a format price, so format rise and round brackets. Ok. Then after this type of graphene, we need button. So again, this will come from material us. So if I click this year, you can see, oh, we've got the burton. No. Okay. So let's copy this button and add. Good. Okay. So button and the color of the button will be secondary variant. That is going to be contained. Size, which needs to be smart. And we need an onclick event. So OnClick and intact, we will take an arrow function. And we need to write this dot probes, dot remove from. But we need to create this function and we need a parameter, we choose item, okay? And let's close this button. Okay? And inside this button we will write to remove, let's say this end. The glasses which we have created Lake rude content, okay. Right, is blocked, so we need to add some property for that. So first I'll take root, and here I will paste it. And we need the properties of the root as display flex. And the second one is margin top. I need 25 pixels from top. Okay. Let's say this display flex. It should be in the boat. And we need a semicolon. So we need upon MC, Not a semicolon. Okay, then we need details. And the property of Details is display flex, flex direction, column. That's it. And then we need date, which is going to be flex space 0 and oil. And we need go up. So over that is going to be width 151. And okay, let's save this. And here we need a palmer. Ok? Once I save this and once we go to the browser and refresh, and if, and if I click on Add to Cart. So here as you can see, we have this item added to the fat as shown here. So let me remove this. And if I click on Add to Cart, so your alleles item, which is added to the k, And this tiling is exactly the same. Okay? So here there is a space. Let me check. What is the CSS for that prize blocked. Ok, so for Prize blog, we need to write item, a line-item center. So ok, I have not returned. The CSS for dy is blocked. So we need this display flex align items, enter and justify contents is between. So I like that price. I blogged. So display, flex, align items, center. And then justify on ten. Space between. Let me save this and let's go to the elder. Purified it, finish. And if I add up, add an item to the cart. So here is a space and everything is fine. So now it is looking exactly the same. So years, there's a little difference. Okay. So if I refresh and if I add a card, add item to the cart. So you alter takes is different, is looking different from yours. So let's go to Visual Studio Code. And this should be subtitled one. Okay, let me save this. And now if I go to the browser and if I refresh and add an item to the cart, and now they're text sizes similar to this one. So the styling part is done. So now let's move on and let's go to reduce pseudocode. Now it's time to implement a remove button. For remove, we need to go to app.js. And before the Add to Cart, we need to create a function with the name demo for, sorry, from Dart. Okay, and we need to add an arrow function. So this, except, this will except the product that we are going to remove. Okay, so you have an equal right product. And inside this we need to create an instance of that item. So you only need to write bonds. So let's walk through this because this will be exactly the same. So I have created upon, I have created an instance of that item. Now we need to filter the items. So carte items about filter. And you need to take an arrow function. We are, we need to pass x and, and we need to filter based on the id. So I remove this thoroughly business, we don't require this. So x dot underscore ID, which is not equal to product, not underscore id. So by this command, we get rid of the current product that the user selected to remove. So let's set this as a new part item in this state. So we need to write this dot set state, which is going to beat God item. And this will be equal to this line of code. Okay? Let's say this. So by having this code, you just remove the selected item. After creating this removed, removed from god function. Now it is time to pass it as a prop. Okay, so let me copy this and we need to go to part company. So you are, we need to pass it as a prop for this dot remove from cock. Ok, let's save this. And it got dot js. We already had a remove from thought. Okay? So we have already written this as this dot-product start the MOOC R2P. So now let's save this and let's take it in a browser. Let me refresh it, and let's add this item to the cart. And if I click on demo, this item will be removed. Okay, let me remove a couple of items. So this is working fine. Now let's implement the total complicated. So as you can see, we have a good built out, okay, this is the finished project. We need to add this node down here. Okay? Let's go to just to do a poll. So we need to go to guard dot js. And before there's two, we will create a div. And inside this div we need to create one more do. And we need to write at last name, which is going to be plus's dot total amount. Okay? And this class we, we need to create at the top. Okay? So let's close this div. And inside this div, we will need a typo Gadhafi, so topography and VSB and VDB at six. Okay, let's close this. And inside we need to write total. Now we need to add a condition that got item's dot, reduce Mini to use Reduce function. And the reduce function except to bad amateurs accumulated and that entitles. So we are going to sum the accumulator. So you only need to write a plus. And we're going to sum the accumulator biota parent item, so c dot, but ice and multiplied by that item. So C dot count, okay? And said that default value to be 0. Okay, and this whole thing, we need to wrap it in forward price. So first we need to import the format. Okay, this is important already, so let's copy this. And we need to be stirred, and we need to add a curly braces. So let me save this file and after this type of coffee, let's create a button. So button and radiant is contain size equals two. Large. Yellow is going to be secondary. And let's close this button and we will add an onclick event later. Okay, we need to write to see, hey, let's save this and let's go to the browser and check what we are getting. So let me take this. Ok. So we are getting some edit, reduce, often DNA and DNA with no initial value. Initial value, this is positive and so that is a mistake. So this should be Obama NGO and I've to movies. Let's save this and now let's go to the browser. So now as you can see, we are getting this when there is no item. Ok. So it should be there should be a condition that if there are no item in the cart, this box would not be soon. Okay. So for that we need to add a condition. So that's go to Visual Studio Code. And before this div, we need to add a condition that guard item's dot length, which is going which is not equal to 0. If this is the case, OK? So if this statement is true, then we need this to be executed. Okay? So let me, and let me paste it here. Okay, let's say this, and now let's go to the browser. If I refresh. Now, there is no total item, but when I click Add to Cart two, now as you can see, we have copied the item and the Proceed button, okay? But we need this Proceed button on this site. Okay? So for that, I have created at class, which is far total amount. So let's write some CSS properties for this class. So display. Let's align items. Center. This d phi content space between margin top. It's just going to be ten pixels. Okay, let's save this and now let's go to the browser. And let's add to cart. So now as you can see, this total amount and this Proceed button are side-to-side, side by side. Okay? So this should be a tunic 20 pixels. So now this is perfect, okay? If I, if I compare this with this, so this is going to be exactly the same. So this, we have completed removing items from the top. We have shown this text, we have completed this Add to Cart functionality. Ok, if I give. So it is going to be added in the dark and the total amount is SR. So this is it for this video and I'll see you in the next video. Till then, take care and Mumbai. 14. Lecture 14 Checkout Form: Hello friends, welcome back. In this lesson we are going to implement checkout form. So if I click on Proceed button, so your is the checkout form. So this is the finished project. This is the same thing which we are going to implement in our project. So if I click on Add to Cart and if I click on Proceed, nothing happens. So we need to implement a checkout form. But before that, we are going to store this item in local storage. So if I refresh this, and as you can see, the item and Descartes has been removed. So we don't want that. We want something like If I add to cart, this item should be remained after I refresh. Okay, we need to store this items in the local storage. Ok, so for that we need to go to Visual Studio Code and in app.js enact to guard function. After setting the state. Here, we need to write local storage dot set item. Okay? And this will take two feeds. The first one is the key, so Rp is the name of the key will be carte items. And the second one is, and the second value should be a string. But the point is, God item is a JavaScript object. So we are going to use JSON dot stringify. So this will convert JavaScript object into a string, okay? And we need to write carte items. Let's say this. Now we need to implement this same line of code and remove from Pat. Okay, so remote from tart function after setting the state Germany to baste it. Okay, now lets move up and your instead of blank edit, we need to remove this, and therefore we need to write JSON dot parse. Ok, this is the reverse of JSON.parse finger phi. And we are going to read from localStorage obese. So local storage dot get item. And your what would be the name of item? It is a name that we have used inset item, so it's going to be dot items. Ok. Let's save this by having this three simple line of codes. We are able to make the cart item to be stored in local storage. So let's check it in the browser. So if I go in the browser, okay, and getting some Taylor's line number 19 here, we need to check a condition. So we need to take existence of this if this exist. Okay? So let me, we need to copy this line. And yeah, we need to paste it and we need to check if this exist, okay, if this is true of this exist, then we are going to use this. Otherwise, we've been to an empty Edit. Ok, so now I think it will work. So let's save this and now let's go to the browser saying we are getting some edit, 9 million goddamn non-tech fine. Thought items. Ok, so this needs to be in double quotes or single quotes. Okay, let's save this. And now let's go to the browser and check. So let me refresh. And let's add this item to the cart, okay? And now let's refresh it again. So now as you can see, this item is stored in our local storage. That's add few more items. That sort of phrase. Let's remove the middle one. Okay, so let's remove this. And if I refresh Wu, It is not doing. So let's do a blue regions to be a cool. So it is still there. Ok, so we need to fix this. So let's copy this line of pool and yard. Instead of this, we need to paste the language we have topic because it is exactly the value I'm going to set inside the cart item. So let's save this and now let's go to the browser and check if I refresh the now this item is still there. And let's remove this third one. Again, getting some edit field to institute setItem on storage argument required but only when plates and the line number 41 year there is some something wrong. Okay. Let me undo this. Okay. So yeah. So let's copy this line again and instead of got items, I'll paste this. Okay? So now this will work fine. Let's do. And if I refresh, you can see we have three items. And if I didn't know this, and if I refresh, now the editor is not dead and these are the two items. So the meaning, okay, let's leave everything reflects it. Okay, now add items. Okay. Let's add this multiple times. And now if I refresh, it will be still there. And if I didn't know this, and if I refresh the narratives working fine. So the first part is over. Okay, now we will move ahead. So let's go to Visual Studio code. Now we will implement the checkout form like this. Okay, so if I click on Proceed button, so you will have a form, and if I click again, this one will go. So this will actually toggled. Okay? So we need this form to collect the email name and address from the user and when the user click on Checkout, okay, so we prepare the data to save in their database, but the backend part will be done in the future lessons. So let's work on this form. So we need to create a form in our projects. So if I click on proceed, there will be a form like this. Okay, so let's go to Visual Studio Code and ab.js. After this do, we will take one more do. Let's close this div. And inside we will take a form. And this form will have an onsubmit, OK. On, on submit. And this will be this dot create order. So this function we need to create, Okay? But first let's work on the input part, okay? So inside this form we will take a div, and inside this div we will take input. Ok, so let's copy this and let's go at the top. Let's paste it here because we want to import this input from material Dui Bu, okay? And now this input will have some properties. So the first one is default. Value, which is going to be email. Please, for love. That is going to be email again. Then we have input prompts. That is again going to be area label description. Okay, so what does ADL? Let's check this out. So ADL label attribute is used to define string that labels the parent element. Use it in the case where the text label is not visible on the screen. So that is for the people who pant C, Okay? So ADL label is for the people who are not able to see properly. Okay, now we have a few more properties like name that is going to be email again. Then type should be e-mail. And we have a required ok. So this video is required. Okay. If you don't feel this form del b and alert, then we have unchanged. That is going to be this dot handle input. And then we have a full width. Okay? So this is, this will help us to make this input as a full wave. Okay? So that is the reason we need to put full width. So let's close this input and then broke it. But before that, okay, we will add more inputs. But here we need to check the condition that this dot state, dot show set out, okay? This we need to create in state. If this is true, then execute this. Okay? So let's get this and paste it inside this. Let's save this. And now this will checkout. We need to create a state for this. So we need to create a constructor. Constructor inside there'll be prompts, throughput drops. Okay? Then this start state, that is going to be, so check it out and initially it will be false. Let's save this. And if I refresh this, still we need to have an on click on Proceed button. So do that first year, we need an onclick organ. So on click stat is going to be an adult function. And we need to write this dot set state. And inside here we will write show. Sorry, so, so check out. That is going to be not. So check out means this will and this is true. Then if you click, it will be false. Okay, so it will toggle. Let me save this and let's take it out in the browser to check out non-defined. Ok, so this dot state.gov, Okay. So now if I click here, you can see we have an input, OK, we have a form, but then should be a margin. So I'll put style equals to margin doc when d pixels, okay, that's a this. Now if I click, you can see the input again. If I click again, it will go ok. So this e-mail part is done. Now we need the list of the input foods like name, address and all, and Checkout button. So let's do that. So I'll copy this div, okay? And I'll paste it here. Again, I pasted to this tuning. We need these other two fields which we required, so name and address. So that is the reason I have basically two times. So Maman address, okay. So your name, name, description, name, type will be text, okay? And let's do the thing that will address. Your description. Address. Type will be text again, list all the things up, elect. Now we need button okay, for checks out button. And one more thing we required of Lipset first. How does it looks? So there is no gap in between. Okay? We need a space. So for that we will add a break. Okay? Let's save this. If I click on this, now you can see, okay, now after this div also I ladder break will be now we required button. So Yeah, I'll take a div and instead I'll write a line. That is going to be right, OK. We need a, we need a button on the right side. And inside this div we will take button. But then with the variant that is contain size that is going to be large, the load that is going to be secondary type, that is going to be submitted. Ok. And this we need to close and the earth we will write check out. Let's see if this, let's take it in the browser. If I refresh, click Checkout button. Ok, so this is working okay. Now we need to create a function handle input. Okay? So this is the handle input we need to create. So let's go at the top. And before this event data, we will add this function. And we need an arrow function entirely. We need event. So event, and yeah, we need, we need to set the state. So this dot set state, that is going to be event dot target Dart name. So this we need to put in square brackets, square brackets. And event. Dot target, dot value. Okay? So we're setting the stage for this, but we need to create the state for all the input names. So let's do it. So first one is name, that is going to be empty string. Okay? Then we have email. Again that will be an empty string. Then we have atlases. Atlas, again going to be an empty string. Okay? So this part is done. Now, we need to create a three-bit order function. So I'll show you where is the create order function in the form this is the period order function. So let's copy this. And again, after this and del input, we will need this event ADL function. And here we need to set prevent default so that the form does not refresh. So for that event dot prevent default. Okay? And your, we will take a variable, we will, we will take a const order, ok? And this is an object. So inside this object we will take name, that is going to be this dot state dot name. Then we have email, that is going to be this dot state dot email. Then we have address that is going to be this dot state dot address. And then we have got items that is going to be this dot, dot, dot items. And we need to save this ordered appeal. So this start props dot. We'd order. And yellow, we need to pass orders. Order. Okay, so let's save this. So this form is not responsible for saving this, but, but the parent component should save this. So we need to go to app.js. So this is the parent company. So we are, we need to write the function create order. So you're, you're a creator create order function. So gate order, this is a callback function. So here we need to pass order. And then adult function. And I'll add an alert. Ok. So alert will be need to save order four plus order dot name. Let me save this. And yeah, we need to pass this as a prop. So let's go to part component and we'll pass it as a prop. So this dot, dot, dot of, let's say this. Let's go to the browser and check if this is working or not. So let's click on Proceed to this is toggling properly. If I click on Checkout, this will show me an edit. So let's write an email test.txt dot com. If I click again, the need to save order, but here I should see an alert. So if I put a name, let see desk addresses also test. If I click, need to save order for test, okay? And once again, let me check because if I click it, open a business showing me test. By clicking the name should be the school to dot-dot-dot AS I think we don't require this default value because of this. This required is not working, so let me remove this. And then we will try. Okay, so let's remove this default value o if I refresh. Okay, now if I click this, please field as Pfam, okay? Now emails should be test. At that it test, if I click it is asking me please fill this feed so I'll buy desk then again. So I do this test again. If I click here is a alert you to save order for test. Okay, so this is working perfectly fine and we have done the styling for that also. So we have completed this checkout form styling as well as a functionality. I hope you like this video. So I'll see you in the next video to lend, take care and bye bye. 15. Lecture 15 Building Rest API for products: Hello friends, welcome back. In this lecture we are going to create a simple backend using Node Express and MongoDB. Let's go to the final version of this project. And if I open the console back click inspect. And if I go to Network tab and we need to refresh the page. So inside XHR, you can see we have a request and the request header address it BS less product. And your reserve is or it doesn't add a JavaScript object, which is in JSON format. So we are going to implement a very simple backend like this. To do that, we need to first install Node one. No demand is like node, but the difference is it takes your code changes and when there is a change, it read NCO project. So we need to go to rebuild Studio code and we need to open a new terminal. So we need to go to terminal, click on New Terminal. And yet we need to write npm install mod1. And then we need to press enter. And after installing nor demand, it's time to go to package dar JSON. So let's go to package.json. And inside the script. And inside the script, we need to add a new script to right here. The name of the script will be settler. And the command will be no demand. Server is that we save this. So it is asking me to what I ate. So let's flip on overwrite. Okay, so now the file has been saved. So whenever you run NPM run server, this command will run. Okay, so this command will bend. So now inside the root folder again, so here, where we have created a folder, this is the root folder. We need to create a new file and name it as well. Dark is. And inside this file we're going to implement backend. To implement back pain, we need to install some libraries. They are expressed bodyParser mangoes and sought i. We will use Express as a webserver body parser to parse the data inside the post request to the server among Who was. It connects us to the MongoDB database and sought ID is like a library to create a user-friendly ID to see as a product ID, after installing no demand, it's time to install other packages. To do that, we need to write npm install, express, space, body, hyphen, parser space, mongoose space, and sort id. And we need to press Enter. So once everything is installed, then we need to start implementing silver in server.js. So now we're done with this year. First of all, we need to import all the packages. So the first package is experts. So we need to write const express. H is equal to require. So we use required to import the Express package, okay. That's it. Now we need to duplicate this line of code three times. Okay? So now for bodyParser, We will write body parser. And your, it will be body hyphen parts of. The third one is mongoose for let me copy this and paste it here. And the last one is short ID in its floppy this, okay, let's copy this and paste it here. So now the next step is to create a web server using Express, who didn't express as a function and said that is inside at variable. So yeah, we need to write fonts app that is equal to express. Okay, that's it. After that, it's time to use bodyParser. So we need to write AP dot, use body parser. So now the next step is we're going to initialize Mongoose database. So we need to write mongoose connect and insight connect data to better because the first one is the URL of connection to the Mongo DB database show it should be like mongo DB colon slash slash and the urban iterate local host slash. And we need to write the name of our database so we can keep the name as iliac iPhone shop hyphen God, I've been db. So as I said before that a group nanometers for connect. So the second parameter is a bunch of options, okay, so calmer and we need to have a bunch of options. So the first option is going to be use new URL parser, okay, and we need to set it to true. The second one is use create index and we need to set it to true. And the last one is use unified, Okay, use you need fight topology. So we need to write through both the state. And the third one is, and the last one is used unified topology and we need to set it to loop. Okay, let's save this. So we just connected to MongoDB at this point and it's time to define the first endpoint. So it could be like app dot get. And inside this we will write slash api slash products. And then we need to add a comma and responder to this end point is going to be like this request and response. And inside this body and inside the body of this function, I'm going to get access to the database and the table of products. But before that, we need to define the product model. So let's keep this adjective. So let me save this. And about this function. We're going to create a product modelling. Ok? So for that we need to write bonds. Product equals two Mongoose model. So mongoose.model is responsible for creating the model and this model, except blue Parramatta, The first one is the name of the collection site that database and the second one is the list of feed of this model input our database. So said the name as product. Okay? And for the columns or field of this mortal, which would be like new Mongoose dart schema. And inside mongoose schema, what we are going to do is define a bunch of columns. Let's say the first one is going to be underlying ID. And the type of it will be, let say type offered, we'd be sort id dot generous. So by having this line of code, when you create a new product into the database, a new ID from sort id dot dendrite function will be created and set to the ID. So what will be the next field for product? You can open data dot JSON. Fine. Though let's open data dot JSON file. And yeah, you can see the list of field like image, title, description, available sizes and price. Again. So let's go to server.js and implement them. Ok. So the first one is Titan. So title type is going to be string. Okay? Let's duplicate this lines. Okay? Let's duplicate this particular length. So 1234. So I need to add up Alma. Okay, so here I have done some mistakes. So let me undo this. So after this curly braces, we need to add a comma, and then we need to write title, which is going to be string. Then comma. Ok. So let's duplicate this lines. So we have a title, we have description, then we have image. Then we have rice. That is one mode available to scientists. So available scientists, okay? Go prize will be number. And I will say this will be an ideal string. Okay, let's save this. So we are done with creating product model. The next step is to go inside the product, products API and get the list of products from the database. So it should be like this font products. And to get the list of product, first of all, we need to access the model. So product dart, and we need to call the function fine, okay? Like this and the pedometer is. It means that there is no condition. We instead create an all products. That's it. Ok, let me save this fight. But the point is find is a promise to o to get the real data, what we need to do is be we have to use the new syntax of async await. Okay? So here I need to write a sink. And here we need to write our weight. And at this point we have listed product insight loaded variable. Okay, we have a list of Rodeo inside the product's variable. And to send back to the client, we need to use less. And inside, we need to write products. So it's time to create a new product by having the APA, we can return the list of products. But the point is there is no product inside the database. So we need to create an endpoint to create a prototype. To do that, we need to write AP dot post. And I'm going to use HTTP post method. Okay? So because we are going to create a product and it should be very similar to get. Okay, so here I need to write slash api slash products. But this time it is something like this. Okay, a sink. And this certainly required. So OK, Fama, this and an arrow function. And at this point we need to create a new product. So const new product, which is going to be new product. And the pedometer that goes in it will be req dot 40. So when I'm sending the request from front end to this end point, we need to fill rig dot body with the data of the new product. After creating the new broader, it's time to save that into a database. Okay? So we need to write const saved product equals to await new product. Dot save. Let's say this fight. And at the end we need to write this dot sin. And inside we need to write saved. Let's save this. Okay, this should be outside this function. Okay? So let's denote this and we need to paste it. Okay? So this is something different from this. Okay? This is a GET request and this is a post request. Let me save this by having this three lines of code. By having this three lines of code, we were able to create a new product inside the database. So the last step to create the Express server is to listen to the port and launched us ever. First of all, let's define the port, okay, so fonts port, and the port number comes from process. Dart, ENV, dot port. It is a spatial variable that set the port number, but if it does not exist, then I will use 34 port numbers. So if it does not exist, then we need to use our default port number, which is 5 thousand. Okay? And at the end, app dot listen and listen to the port, okay? If it goes well, so if it goes well, then we're going to console log. So console log, server AD GDP colon slash slash, local host colon 5 thousand. So let's save this file. So that's it by having 40 lines of code, OK? By having this 40 lines of code, we have created a very simple node express and MongoDB server. And by having this cell where we can get, let's talk products and we can get a list of products and we can create new products. Now let's add the last API that is going to be delete product. Ok. So here we need to write AP dot delete. So to dilute the product, we need to add this endpoint slash api slash products slash colon ID. It means that it is just a place holder to get the ID of the product which is going to be deleted. And then async await. Okay. So a sink, this dot sorry Rick, and response, ok, required and response. And then inside this function, we are going to delete the product here. So I'm going to define delete products. So const deleted rho dot. That is equal to a weight. And I'm going to use function that comes from product model. So product, God, find by ID and delete, okay? And the parameter goes inside is dark atoms. Not I do. So this id is exactly the value will still user enters right here, ok. So by diluting the product, it's time to return to the user. So we need to write this, dots, sang, deleted. Murdoch. Let's save this. So far we have created the server and now it's time to install MongoDB. So to install the MongoDB, we need to go to mongodb.com. And once you are on mongodb.com, you need to slow down and we need to click on install it. Okay? So in my previous lectures, I have told you, I'll show you how to install mobile TV on Mac. Windows user, you just need to click on OK, let's click on install MongoDB Community Edition. And if you're a Windows user, you just need to click on this and get an instruction you need to follow lack because I didn't have windows, so I would not be able to fully. I have Mac, so I'll click on Mac OS, OK. So we will install using Homebrew. So first you need to have home do on your machine. So I've already installed Homebrew by if you don't have to, this is the link, so just open it in a new tab and you just need to copy this, okay? And you need to go to your terminal and you need to paste the link which you have puppet. And it will ask you the password to just enter the password and it will get installed OK. And just losing it because I've already installed it. So once the home do is installed, then you need to follow a few steps, which are very simple. Again, we need to go to terminal, okay? And we need to copy this, a blue tap MongoDB. Okay, so I've done this, I've already done this, so I'll just try if I'd be able to install MongoDB again. So this will update ok, this is updating Home Depot. Okay? So this is the first step. First step is installing home do. Second step is to install this View tab MongoDB slash blue. Okay, now, now we need to copy this line. Brew install MongoDB will point. Okay, so this I have already done, but still let me tie it. Okay. Reinstalled run. Okay. So I don't want to reinstall because I've already installed it. There are two steps and if you want to check whether MongoDB installed or not, so you just need to First, let me clear this and you just need to write Mongo D, Okay? And press enter. So you will get something like this. Ok. So it means that you have mobile DB in your machine. Okay? So this is something which says that MongoDB installed in your machine. So this is done. Let me close this though the installing and part of MongoDB is done. Now, we will be able to run this fold, okay? We are able to run this code one sigma will deviate installed. But for food and this board we need postmen. Ok. So that also I have already installed on my machine. So it was first. So you need to go to postmen.com slash download, okay? So you need to go to this URL. You need to click on this, download the app, okay? And you need to install postmen. So I've already done it. So what I'm going to do is I am going to open postmen, ok, so after installing it and we need to open postmen. And here we will take all the end points, okay? So we will take all these three end points, okay, we need to test on this end points. So let's start with the first one, which is a slash, api slash products. So, but you don't forget to add a prefix which is this one at STP colon slash slash localhost 5 thousand. Okay. So let me copy this. But before testing we need to to undersell what okay. So as you saw in the package.json, we have added this script, no demand server.js. So we need to run, okay, so npm run cell, well, we need to take this plane and let's enter. Okay, it is giving me some edit. Let me check what is the added. Yeah, I think there's an issue. Type. String type should be string. And Al said 30 fault value as short id dot generate. Okay, let me save this and lets run this over again. Npm run servers. It is still giving me an edit. So let me try it again. And being non-cellular. Stimulus gave me some shoe tomorrow, not fond. Movie Moon, server.js. So there is one more issue in online number eight, bodyParser is an object, but I'm going to call the JSON function of this object. So we need to write dot JSON. Okay? And we need to call this JSON. It means that when a new request comes into the, into this said, well, it did WDS Jason and interpret that as adjacent content. So okay, so now let's save this and now let's try it again. Okay, so and BMD and said we're still lived has given me an edit soon, let me do npm install login. I don't know what is the issue. So NBN stock. Okay. So now I'll go, Jake is getting factor it. I think this was the issue. Or do like to run for cuteness already turning, something is already running on port 3 thousand. Okay, so let me check what is running on port 3 thousand. It is already done in this, so I'd say no and say NBN brand settler ciliary, We're getting some issue. We I've already installed or demand, so let me see. Let's talk through this. Oh, installed once again, okay. So npm install Python. Jean ordered one. Let's try it out. And BAM than settler. No, we are getting some issue. Nor did mon command not found no demo on ab.js blood boxes. So I just saw on net and Iso just sit on internet. So I'm getting some solutions for this. So let's try this out. And let's walk through this. And let's go to Visual Studio board. And let me paste and press Enter. Let's see if this works because I don't know what is the issue. Because according parties direct patient was rejected. I don't know what is the issue. Let's run the code again and PM and I'm settler. Let's copy this. Okay, sudo npm install g as there's fullest noted on. So let me try this out. If it does. Wurtz. I need to enter my password. Let's start and being run. Several. Ok. Now it is working. Ok. So if you phase it, the problem which we are facing, then just copy this line of code of each I have copied and Paul, Maybe you can just boot. We'll do this URL or just type this line. Okay? And so this will start said what? Okay? So we have successfully started the cellular, okay. And I have shown you two things. Okay. Burst the issue was with okay. And yeah, there was a Ron brackets, so every molted and because we don't declare, Pat and I have added type, string and default. There'll be short id dot generate. Okay, this was one change. And the second Jane was this body-parser app.js and okay, so let me save this and now we need to go to Postman. And let me delete this because I was just testing it out. So let's delete everything. And if you're comfortable, you spend, you need to click on plus icon, okay? Then you need to copy this line. This, you need to copy this line. You need to pay stirred then slash api slash products, okay? And this is fine. This is fine is as fine slash products. And then you need to click on saying the one supercontinent, you will get an empty array. So this is working perfectly fine. Now we need to test this endpoint, which is we need to add a product. So this was good. Now we need pulls together. So again, we need to keep on Plus and again we need to pace the sea inline and yet we require is posed against slash api slash products. Okay? And we need to go to body, then draw. And in the dropdown we need to select JSON, OK. Then here we need to go to data dot JSON and we need to copy this entire code. And we need to paste it. And we need to remove the id. We don't require DID because we are creating the idea automatically by using sort id over here. So this is it and then we need to click on save. So now the data has been added, this product has been added to the database. And if you want to check, you just need to go to the GET URL n c. Now it is empty. As you can see, this is empty, but when I click on saying, you will see that it alkyne. So this product has been added successfully address one. Now again, we have to do the same thing for all the six product, although remaining five products. So what we need to do is we need to copy this, okay? And by one minute to poppy. And again we need to global post. Just delete this, based it out, removed ID, and click on Send. So again, this will be added. Again, we need to fetch, okay, you need to get the data. So these other two products, then again for that third one, need to go your puppy, there's just delete this, pasted the ID. Okay, don't forget to remove the id, saying, again here we need to get the data. So keep on saying, okay, this was the third item. Now the fourth one. But let's do it all the six soapy. Again, the urban into delete, paste, the moda ID sang. We need to click on Sandburg in ok. Again, this one is a fifth one. Delete it and move the ID clip on Sen rule to get and click OK. Now the last one, that's number six, puppet is go to the post request. Click on it a base tier, Dremel DID sand. And here also P Thompson. So as you can see, now we will have six products, okay? This one was first 1, second product or product, old product with N6 token. Sorry, this was the six product. So we have successfully added all the six protons inside this endpoint. There'll be a ready to use this endpoint and cite the React application by running this address using Ajax library light to fetch ex-CEO sorrow does to now put desktop delete. Okay? So now we need to test and delete. Okay? So this one we need to test. For that, we need to go to Postman again, click on plus igon, and we need to select Delete Based. Oh sorry. We need to copy this URL. Okay? Slash, api slash products and slash. We need to, okay, first we need, what we'll do is we'll add seven products and we will try to delete tag. Okay, so let me copy this remote is and you're just once I didn't really do. What we'll do is just seven, okay. This is not dead in the file, but we're just creating our W1. So let let's add the seventh one. And yeah, you just the consent. So does seven broad product. The seventh one is also added. First, 1 second, 1 third, 1 fourth, fifth, sixth, seventh 1. Okay? So what we need to do is we need to copy this ID. Okay. And you need to go yeah. Okay. We need to pace tidy, which we want to delete. So let's remove this API product. Product. We don't declare this because yeah, okay. We declared redeclare it. Okay. Because the API product and then the ID. Okay, so now let's try to delete. Okay, so if I keep on saying, now, it says that this product has been deleted. Ok, so here you can see. And now if I go here and let's say if it is diluted or not. So if I click on saying, now we have one dress, 123456 and the second one is deleted. So this delete API is also working. Okay, so this is it for this video. I hope you liked this video and this is L N d1. So if you don't understand anything, please watch it again because this is super important video. Ok. So this is it for this video and I'll see you in the next video to lend take debt and Valais. 16. Lecture 16 adding redux: Hello friends, welcome back. In this video, we are going to implement results as a part of this tutorial. So what we are going to do is really get the list of products from the server, which we have just implemented in the previous lecture. But this time the data should come from a redox tone. So to implement that, first of all, we need to install the ducks React and Redux tongue. By having these three packages, we are able to apply the results to our React application. So inside the terminal, first we need to stop the terminal. And inside this we need to write npm, install, Redux, React, and Redux, and press enter. So after installing this, it's time to create types. Means we need to create actions and each action hazard type. So you're in the source folder, we need to right-click and create a new file and name it as pipes, Dart JS, and press enter. Okay, let me close this. Will, let me minimize this. And ya'll, we need to write export bonds, fetch, underscore products. And we need to set it to fetch. And thus for products. Let's see this. Now we need to create a folder called actions. And inside that, we are going to implement actions for product. Ok. So right click on Source folder. And you are, we need to select new folder and name it as actions. And inside this axon folder, we will create a new file with the name product actions dot js and insect product action storage is, we are going to write export function, sorry, export bonds. Okay, we're going to export functions and this function, but we're going to name it as such, product. And this function except no parameter. Because we are not going to filter the products. We are going to get the list of all products. So it should be empty and it should return a new function, which is like this, okay? And that accepts a parameter called dispatch. And this function body, okay? This function body is going to be like this and we need to dispatch an exit in this function. First of all, we need to get the data from the server. So we need to write fetch. And inside this, we are going to read slash api slash products. And I am going to use async await style TO said this function and said this function to be a sink. And said this fetch to await and center result inside the rest. Ok, so this is going to be a weight fetch and API products, okay? Bonds. So I need to write as const and it's time to get this data which contains the list of product and dispatch that as an action. So it's going to be like, It's going to be like this dispatch. Then inside this there'll be an object. And this object contains two value. The first one is type, which is going to be of types beds products. Okay, we need to click here too that we can import fetch product from types. Okay? Then the second value is payload. And the payload is going to be this dot beta. Okay, let's say this. Now it's time to create a reducer. So right-click on source folder and create a new folder with the name reducer. Okay, reduces. And insight voodoo says we need to right click and click on new file and name the file as product. Redu, serve dot js. Okay? Product producers start JS and I'm going to define a function that is bounced. Products, reducers. Okay, product may reserve. And it will have two parameters. The first one is the current state and the second one is the action. So current state, I will set it to an empty object, okay, by default. And for action, and for action. I said the action like this, okay? And inside this function we are going to use switch these. And inside this, which case, the value we are going to evaluate is action dot type. So inside your, in this case part, if the action dot type is fetch product, ok, so let me write pace. And if the action dot type is fetch product, so you are we need to write. So we need to import fetch product from dot-dot slash types, okay? Dot-dot slash types. Okay, so we have imported disparate product. So if the action dot type is fetched product, so what I'm going to do is to set action dot payload inside the state. So I'm just going to return the new state item. So item that is going to be action dot payload. And for default is, let's return state. And we need to export dysfunction. So export. Bonds, productivity, sir. Okay? So by having this impulse reducer, when I get a new data from the accent, I update those data inside that ydx tote. Okay, so let me save this file. Now it's time to create store for that. We need to go to o source folder and right-click and create a new file. And the name of the file will be stole dot js and insight store dot js. We will import, create, stored, and applying middleware from Redux. And now it's time to import tongue. So import talent from Redux tank. And we also need to import combined reducers so from mine reduces. Okay. Now we need to define initial state. So bonds initial state to an empty object and then create the story itself. So const stood equals to create, stowed and creates tool accepts multiple parameters. Ok, so the first one is producer. So I'm going to use combine reducers and insight combined reducer. I want to combine older reducers, okay? That I have. In this case, I just have one reducer and it is product producers. So I just need to write products equals to rho dot producer. And we need to import products Beauty served from reducer slash productivity said okay, it is imported here. Okay, so make sure that it is imported from producers slash product reducers. And it should be integrally business because this is not our default export. And the second parameter of creative stored is initial state. So initial state, okay? And the last parameter is middleware. We are going to use Redux tank middleware because inside our action, okay, because inside our action, because inside our action, we are sending a request to the server to get the data. So that's why we have to use a duct Tang to handle this type of action. Okay, so to use Soto, use middleware. First of all, we need to import them post function. So we need to import compose. And now we need to use composed function to compose all the middleware together, the adult middleware we are going to use along with the reductant is redux devtools from Chrome. For Chrome, to use that, I will just define fonts, compose, and cancer equals to window dot underscore, underscore. Underscore dev tools. When this code extension. When this code compose underscore, understood, OK. If this exist, then I'm going to use this or else. So I'll write a condition or, or else I will use the default compose functions. So compose. Okay, let me save this. So by having this line of code, I can send all information about the Redux store to roamed ydx their tools. And I can monitor whatever happens. We are including action state and any other data. For the third parameter of three, a store I am going to use compose and Ansel. And inside that, I'll just use apply middleware. Then I'm going to use tongue, okay? And at the end, don't forget to export. Okay? So export, default, stole. So let's say this year I'm getting some editor. Let's see, combos and answer language everywhere. So yeah, this closing should be after this. Okay? So this is the first parameter, comma Vizio, second parameter, and this is the third one. So that's it. Okay, let me remove this. If I save, ok. This is, this should be a semicolon. And here we need to add a comma. So we need to add around records. So this is the opening, closing and yet, okay, so this is opening and closing. So let me save this file. So by having this few lines of code, I just created early deaths tote. Okay, so let's move ahead. Now it's time to use Tor. We need to go to app.js and imports tool there and wrap all the component inside providers. So let's go to app.js and then import stored from Stone. Okay, so import store from dot slash store. Okay? And we are going to use Tor inside the render function. So, so inside the render function we are going to use stored. So we need to wrap the whole thing this team provided from year to year. We need to wrap everything inside the provider. Okay, so we need to write provider. Provider is a component from the reactor ducks, okay? It is a component from the redox liability. And I'm using the component too that the whole component insight, provider and provider, except a value which is stored. And I just set this stored attribute to this scope. Okay, that comes from Redux store. Let's close it. And let's bet this losing tag. And let's paste it here. Okay? And we need to import provider from React redex library. So import writer from We act did that's okay. That's it. Now, it's time to connect product component to Redux store. Okay, to do that, we need to go to prototype.js. First, let's save this file and then we need to go to dot js. So inside product folder we have prototype.js. So we need to connect redox code, okay? So we need to use connect function inside this prototype.js. Okay? So I'm going to use Connect. So we need to write export, default, Connect, okay? And it will take two parameters. The first one is the function that except the State. Okay, so we need to write state and returns an object. So it will return an object that defines which part of redex we are going to use the. So we are going to use vertex. So Products. And it's gonna come from state dot products. Okay? So this is the first parameter off connect. The second parameter of Connect is the list of action. So let's create an object, okay? And the actions which we are going to use is fetch products. And the connect function itself returns another function and another function except a parameter. And the parameter is the name of the component we're going to connect. And the component name is product. So we need to wrap this in a non brackets, ok, so its fetched products, okay, now we need to import the Kinect and fetch products at the top. So let's import opening. So ureters, okay, it is by mistake. It is returned that input connect var mongoose. So it should be react Redux, okay? And we need to import fetch product. So even poured FETS products from dot dot slash, dot dot slash actions slash redox reactions. Okay. Let's see this. Now let's fetch the product using US effect. Okay, so yeah, we need to dyed lose effect. And inside this we are going to use, sorry, inside this. Inside this we are going to use use effect. And it will take an arrow function. And you only need to write fetch products function, okay? And the second parameter is an empty array. And this space product comes from props. So you are going to be stuck, which rotates. Okay, let's see this. Now we need to update the product dot JS at the very end and set the last line to state dot-product dot items. And this should be in round brackets so that this, and let's paste it. Let's see if this would be something like this. So the last length would be state dot-product, dot. Items, that isn't too right? This is because inside productively do serve if I go to product reducer and you can see that the product will be cell. We said the item variable here, okay, so inside the component, we need to use the items to get the access to the list of products that comes from the cellular. Now the next step is updating package.json. So let's open package.json. And yet we need to set up proxy. So bisecting the proxy. So let's set the proxy. So we need to set the proxy so dot c. So by doing this, we do not need to prefix this Edward running, okay, in each request. So, so, so what I'm going to use is port 5 thousand. So it should be HTTP colon slash slash local host colon 5 thousand and a comma. Let's save this. And now we need to run the server, to run the server. Okay, we need to come to the terminal and we need to write npm, run settler and press enter. So now the server is running. Okay, now we need to open a new terminal and we need to write npm, start and press enter. So now the project is running. So we are getting some error. Does not contain a default export, import wrote a redo certain product but reducer, which is the file reduce it. Let's go into product ArcJS. Motives the issue attempt good import EDAR do not contains a default. Beds productive bedspread. Go to fetch protocol. So we're getting some monsieur. So this should be in curly braces. Okay, so let me save this. So now still we are getting some Sue. Reactor. Dutch does not contain a default export, import it as provider. So let's go in app.js. We are, again, we need a curly braces, so let's save this and now we need to go to the, again, we are getting some issue. You put error action does not contribute the phone export. Okay, let's go to product dot js. And yet again, we need a curly braces. Now let's go to the big number state is not defined. Theta is not defined line number for line number ten. So we have done a mistake. This round bracket should not come here, okay? And this did not come here. Okay? Let's bring it up. And then let's say this. Now it is fine. And now let's go to the browser. So you're still we are getting state is not defined. So I just refresh it again. And now we're getting error cannot read property map of undefined. Okay, so to fix this issue. We just need to go to product vertex dot js, okay? And here we need to write a condition. Okay? Let me see where do we need to write the condition? So you're inside this map function, okay? Instead this map method at the beginning here. So we need to add a condition that if products, okay, if redox does not exist, okay, if products does not exist, if this statement is true, then we need to so loading, so Dave, loading. Okay. And we need to close this div. And if this condition is false, then we need to. But the entire grid and paste, paste inside this. Okay, let's save this. So now we are conditioned beaming a condition that if this product is okay, then so loading, and if there is any product inside this, then so this, ok. So now if I go to the browser and refresh, and now we are getting, it is showing loading to now we need one more change. Okay? So let's go to product actions. Inside this verdict actions, though data that comes from Fetch method needs to be converted into JSON. Okay? So for that we need to write bonds. Beta, sorry, naughtier. We need to write after this line. Notice so advanced data peoples to this dot K psi m. Okay? And then pass this data in the payload. So we need to remove this start data and only keep data. And Jason function returns a promise, so we need to make it a weight, okay, so we need to write a weight like this. Okay, so now let's save this project. And now let's go to the browser. So now if I refresh, as we can see, we get the list of products, okay? So I have a list of products right here, and this products are coming from the server. Now let's open the redux their boots. So right-click, inspect. And we're we need to click on the ducts. Okay. And if I click on beds products and inside the diff, again, you can see that by running this action in this has been done inside this state. It means that your state changes from empty to a list of products. Okay, now you can step back and run this again. But if I click on this plus icon, so it ran again and you can use all that. First it was a loading and then it shows the list of products. So I'll do it again. Now it is loading and then products have been loaded onto the stream. So that's it about Paradox and fetching data from the server and showing it on the screen. Okay, so I hope you like this video and you understood how to use Redux may react. Ok, so this is it for this video and I'll see you in the next video. Till then, take care and bye bye. 17. Lecture 17 filtering products by redux: Hello friends, welcome back. In this lecture we are going to add the filter component. Okay, this is the filter competent. We need to add this to your doc stood. So if you take this current state of the product by openly debts, they're close. So if I were to inspect and if I will do the doubts, and if I change the size to excel. So that is no action inside the Dutch too. But in the finished project, if I go build a Dutch stood by, right-click and inspect. And if I click on the Doug's, and if I change this, I was two x n. So here as you can see, Filter product by the signs action is going to done and it just change the Redux store to this value. So what we are going to do in this lesson is to add reduction Muda, filter competent. Okay, so let me close this. Let me close this. So, so we need to go to regions to geocode an insight type star j is we need to duplicate this line, blue times. And yeah, I'll wait for you to Windows build products. And those photo by size. And let's focus on this Institute here. And yet I would write order under sport rodents and those four byte size. And let's copy this line and gives trickier. Let's save this. And now we need to go to Rudolf action dot js. Okay? So in this, we need to create two functions, built up products and sought products. So you are, we need to write export bonds through the products equals two. And this filter paradox, except to bad, I'm widows. First one is all products and that comes bump soldered. And the second one is the size. We are going to filter those product based on debt size. Okay, so first one is burdens. And as I K1 is going to be sites. And like always, we're going to use the tongue. So we need to return another function. We need to return another function. And this function has a dispatch spat on automobile. So this patch. And inside this function, we need to dispatch an action that change that it Doug's food. As I said before, an action is an object and data blue values for each accent. The first one is action type will get, so you only need to write this patch. And this is an object, so it has two values. The first one is type. It is going to be fair return product by sites. Okay? And here we need to import it, so it is already been imported for us. Okay? So make sure you make sure that this has been imported from types, okay? And now the second one is payload, okay? So below. And I'm going to send an object, okay? So we need an object. So as is it an object. So this should be integrally brackets, and this object contains two elements. The first one is electric size and the second one, this vertebra chose size, is going to be sites. And the second one is filter products suicide, which is going to be size that the user select and items is going to be based on this size. If size is equal to empty string, if this statement is true, if this statement is true, So I'll just return all products, okay? So on birds. And if it is not too, if this condition is not true, then I use product. Products dot filter. We need to use filter method. And inside I will check. Ok, I'll take an arrow function and uncheck x-dot available available sizes, available sizes at a, it should be like this dot index of, let's say Ron brackets, we need size, okay? So the return value of index off could be greater than or equal to 0 because it's an index Edit. Ok. So now we have imported this filter product by size and we have written the logic for this filter paradox. Ok, let me save this file. So now after implementing filter products, we need to go for source vertex. So we need to define another function. So export bonds sort products equals to unsought products except two parameters. The first one is for retail products and the second one is sorted, okay? So the first one is for your products and the second one is sought. So like before, we need and at o function, so it returns another function with dispatched as a parameter. And inside this function we need to dispatch ok. And this will be an object. So the type is going to be ordered product by, it should be order product by price, okay? Not by signs. So we need to go to types and your I'll change it to price. Okay, let me copy this and paste it here. Let me save this file. And I'll go to action. And we need order product by price and see me. Okay. So it was a mistake. So their time should be ordered product by verdicts pipelines. And for payload, we need an object. Okay? So the first value is sort itself, okay? So sort is going to be sorted. And the second value is items or items I need to sort data right here. I just send it to sorted products and I need to define sorted products. And I need to define sorted product at the very beginning of this function. So your eye like gone, sorted product. So now what I'm going to do is I'm going to create a plume copy of your dot-product. So it should be like this, equal to free return products dot slice. Okay? So I just made a copy of it, okay, now it's time to salt products right here. Okay. So your L Right. I need to check sort itself so your eye let, if sought is equal to an empty string, OK? If this is true, it means that it should be sorted by ID. So to do that, I just call a function. So I just call sort function on sorted product. Okay? So sort PIT products, dot sort and sort function except two parameters, a and b. So this should be in non brackets. Ok, so it accepts to better meters a and B. And I need an arrow function and it's just return true or false. So if a dot underscore ID is greater than b dot underscore ID. If this is true, okay, if this statement is true, then I'm going to return one or else I'm going to return minus1. Okay? Now for the else part, the sort is going to be based on price. So sorted product, dot sort. And again, it has two parameters, a and b. And your, We need an arrow function. And here we need to check the salt is equal to lowest price, okay? Is equal to lowest. If this statement is true, then a dot price is greater than b dot price. And if this is true, ok? And if this is true, then we return one or n minus one. And now the second condition is that if a dot dS is greater than b dot price, if this is true, then we'll return minus1 or else one. Okay, let me save this. So now this statement, so this condition, ok, so this condition sort on base of lowest to highest and this condition sort based on highest to lowest. So we have done the sort function right here and return this odd data. Okay, let me say this fight. Now we need to go to product reducers and define cases for filter product by size and order product by price. So let's go to Murdoch, who do server.js. So in your recent folder inside, we need to go to productivity server.js. And here we need to define case for product by size and we need to import filter product by size, okay? Your colon. And then we need to return to values. The first one will be gotten State, so I'll be using spread of creative so dot, dot, dot state. Okay? So if I change the value inside this state, it's going to be merged with the current state. So now I will update the filter item. So we need to write 3 third items. And it should come from action dot, payload dot items. And I also need to set this iss so size that will come from. Action dot payload, lot size. Okay, let me save this. And now we need to define the case for order product by price. So case ordered by, by its, okay? And we need to import it. You're all we need to write colon and this will return the parent state, so dot-dot-dot state. And now I want to end, now I want to change two values. The first one is going to be sought, so sort and that comes from action dot, payload dot sort. And the second one is filtered item, which comes from action dot payload dot items. Okay, let me save this. Now we need to go to Filter ab.js and connect prompts and action to Redux to. Okay, so let's go to Filter ab.js. So incite component folder, there is a fritter folder and inside there is a phi filtered dot cs. Ok, so you're at the bottom. We need to use connected ok, so after default I'll bite connect and disconnect. Take an arrow function. And it will take two parameters. The first one is maps state to prop. So state is going to be, is going to map this way. Okay? I'm going to map size. That comes from state dot products dot size again. And the second one is salt. That is, that comes from state dot products, dot sort. And the next one is product itself. Forget, so products. And that will come from state dot products, dot items. And the last one is free products. And it comes from state dot products. Dot products, products. Okay? So this is the first pedometer of Connect for mapping state to prop, and the second pentameter is for mapping actions. So yeah, I'm just going to create an object. And inside the object, I will import the actions which are free return, return products. And the second one is sought proton. Okay? And for connect function, we need to define component that is gonna be that inside the redux. So it is filter component organs, so we need to add this in round brackets. Let me save this and let's import connect from reactor. That's okay. So you're by default it is wrong. We need to remove this and import connect from the act readouts. And then we need to import this two actions. Okay? So these other two actions, let's go at the top and we need to write import. And the name of notation is for returning products. So let me copy this. Thrum dot, dot slash, dot, dot slash, actions, slash. But Murdoch action. Okay. And the second one is start products. So let me copy this. And yeah, we need to paste it. Okay, so let me save this file. So that is one change here. Below. This. It should be filtered items and not filter products, opiates. So return items. Ok. So let me save this and now it's time to show loading. So if there is no filter product, so you are after return, we need to add a condition will filter filtered products, okay? If it is not equal to, so we need to put an extra emission. If it is not equal to printer products. For if this condition is true, then we need to show loading of it. So we need to add an insight. Do we need to add loading? Ok? And if the statement is false, then we need to show this. Okay? So this starts from here and ends here. Okay? So now let me save this. So we have added up and recent successfully. Now here instead of count, OK, we need to write for return products dot length. Okay, let me save this, and now we need to go to app.js. And inside that we don't require three dot product function. Okay, so let's go to frittered product function that we don't require this because we move this into product actions. Okay, so let me remove this. And also we don't required sought products. Okay. So let me remove this also. So let me see that it loses. So it starts from here and it sends. So let me save this file. Now instead that render function, inside this render function. For the filter component, we don't require all this because they are coming from reduct stored. Ok. So let me remove this and save this and fall products. We don't require this line, okay, because this is coming from the Dutch told, okay, let's save this. And now we need to go to product would reduce server.js. And yet in fetch product case, we need filtered items and that we've done from action dot payload. Okay, let's save this. And after updating the fruit that items, it's time to go to permuted RJ is. So this will come from prop. So I need to copy this and instead of count, because we have removed down. So let's remove this and we will add this, okay? Three dot products, okay? And then for onchange, okay, so if I slow it down, let me see where is on genomic bar on change inside the order and inside the filter. I mean deselect size df2 unchanged. So we need to fit Docker and products. Let's do that. So I will add an arrow function. So I need to add an adult function and URL pass event, okay? And your intent add-on brackets, we will pass filtered through products. And second argument will be the event dot target, dot value, ok? This is the value which tell you then when you select from year, ok. And similarly, we will do it for the third product. Okay? So I will add an adult function. Here. I will pass an event. I need to pass products. Okay? And the second argument, Papi event dot target, dot value int. This will be the value selected by the user from year. Let me save this file. So let's check in the browser. Okay, so here what I'm getting products is not defined, okay? This shirt also as a prop. So you're going to add it. Okay, let me see this, okay, put a comma and save this. And let's check it in the browser. The property land of undefined for your dot-product, okay. Okay, yeah, I have done a mistake. It should not be fluid or product, which should be free. Third product or GIMP. Let me copy this and let me paste it here. Let's save this file and let's go to the browser and liquid flesh. Ok. So now everything is working fine. But now let's go to Studio port. Now we need to go to product starts is and you are, we need to use filtered product. Ok? So for that we need to go at the bottom and the mapping section, okay, in the mapping section, I'll disconnect. Instead of mapping all the items I just mapped through third items against. So you're going to put ICT free third items. Okay? And let me save this. So by changing this line of code, instead of suing all products, I'll just show the filtered products. Okay, so now let's go to the browser and if I refresh, and now let's check in the Redux store. So right click inspect and we need to go to Redux. Okay? And if I select Excel. So yeah, there's a size Excel and Here you can see or lifo vertex, okay? And now if I select medium, so now there are only two items, and in your dex code you can see medium. Okay, So this board is working fine. Let me close this. And now let's go to Visual Studio code. Now we need to go to Filter ab.js and yo. We need to set the value Bu latest, OK. First it was blank, but we need to set it to latest. Let me save this. And now in product action is I will compare sort with latest. Okay? So latest, let me save this file. So if it is liters, then it will sort by ID. And if it is not, then it will sort by price. Okay? So let's check that it is right. So if I refresh and if I go to Inspect and if I go to a redex, and usually if I select latest, okay? So here you can see it is sorted by latest, okay? And now if I select lowest, so it will select the lowest price first. So the lowest priced come first. And inside the order product by price, you will see the lowest. Okay? You can see the Defense insight. Yeah. Okay. So here is the product built an item and the Sort Filter product has been changed. Ok, so here you can see this has been changed to linguist who let me close this and if I select the highest, so now all the products with the high price comes first, okay, and the lowest, welcome at the last. And now if I select the size two m, so it works and if I select your lowest, It just applied to the filter products. And if I select Excel, so it applied with the filtered order, ok, so if I select highest, it will be from the highest to the lowest. And if I select medium, ok, it will be from highest to the lowest. So this works perfectly. If I select lowest, the lowest, really come first. Here if I select Excel. Okay? So this works perfectly fine. And yet also the number of products shows two. Ok, so this is also perfect and if I select all, so now you can see six products. So all the products has been displayed. So that said we have successfully moved the filtered component to the Redux store. And if you go to app.js, we have made to order more shorter by removing two functions, the sort function and filter product function. And yeah, we can remove that data because this data is coming from backends. So let's remove this narrow. So we do not require this because it is coming from backend. Okay. And you're the salt and size we don't require because they are coming from Redux store. Okay. So I just remove that. So this is it. I hope you liked the video. And if you this model in the lecture, so if you don't understand anything, you can just check the entire lecture and you could respect as it OK, So this is it for this video and see you next video. So then tick and the web. 18. Lecture 18 managing cart by redux: Hello friends, welcome back. In this lecture we are going to add this God component due to duck stood. So by the end of the course, if you go to the finished project and if you right-click, and if, if I inspect, and if I go to reduction section here, if I click on Add to Cart. So as you can see, there should be at target action right here. And if I click on Remove button, there should be an action removed from Target, ok. And it should update the state based on it. So for that, we need to go to Visual Studio Code and this we need to do it in our project. Okay, so right now, this functionality is not there in our project. So let's go to Visual Studio code. And first of all, we need to go to types. Type storage is and you are we need to create, Add to Cart and remove from DOD ponds. Okay, so here I will write export bonds, add underscore two, and there's quote dot. That is going to be back to part of it. Let me copy this and I'll paste it here. And the second one is export bonds. Remove from. That is going to be removed from Pat. Okay, let me paste it here. Let's save this file and this is done. Now we need to create got action dot js file, okay, incite action folder. So let's go to Actions folder. New file, and the name of the file will be caught. Actions ab.js. Hey, let me close this. And inside that we are going to create an action. So it should be export bonds at two dot equal to o. And this will take two parameters. The first parameter is items. It's stuff that items in the cart because it is the current item in the DOD. And the second one is product that we are going to act with the gut. Ok. And now, like always, we will return another function. And this function will have a parameter dispatch. And inside this function, we need to make a clone copy of items. So we need to write bonds. Bonds dot items equals two items, dot slice. Okay? Let me say it is fine. And you're, I'm going to search into cloud items to make sure that is a product of this type inside the GAAC or not. So I will define how far its function over the guide items. So item's dot for athletes. And inside this I'll take an arrow function. And you are, the parameter will be x. And here I will check the condition if x dot underscore ID equals to rho dot dot underscore id. So if this statement is true, it means that this product exists inside this card. So I will set the variable already exist, good through. So I late already exist. That is going to weed through and update the value of count for this got item. So x dot count plus, plus, okay? And don't forget to define this variable. So let me copy this and we'll define the variables. So let already exist. That is going to be false. Okay, let me save this file. And after this I will check if already exist is false. Okay? So for that we need to write elimination and already exist. Okay? If this is not equal to already exist means if this is false, then I need to add this item to the cart item. So dark item's dot push. And your eye will use bread operator. So dot, dot, dot and your, We need all properties of the product. So product and add count as a number of item of this product in that dark. Okay, and foreshore, this should be one, because at the beginning I'm going to add one item of each product to the cut. Okay, so let's save this. And now it's time to call dispatch. So Dispatch. And dispatch accepts two parameters. The first one is type, so type, that is going to be add to God. Okay? And if I click here, it will automatically import Add to Cart from types. And the second one is payload. And the payload is got item itself. So Cart Items. And don't forget to update the local storage based on the new got items. So local storage, dot set item, set, item. And we need to define the tea so carte items. And we need to let JSON dot stringify. That is going to be Guard items. Ok, let's save this. So now it's time to implement a remove from cards. So we need to write export. Ponds. Remove from about. That will accept two parameters. The first one is items and the second one is product. And this will return another function. A bad amateur dispatch, okay? And inside this function, in one line of code, we are going to remove this product from the cart item. So it should be const dot items equal to. Now first we need to make a duplicate from items, so item's dot slice. And then we will use filter method, so dot filter. And inside this we will take an arrow function. And you're, the parameter will be x, okay? So for each item inside the items, okay? So for each item inside this items, I'm going to apply filter. So if current item means x dot underscore id, so if this got an item is not equal to product dot underscore ID. If this is not equal to prototype dot id, if the current item is not equal to product dot underscore id, I just returned through. Okay. It means that if an item inside the card is not equal to the product, dot underscore ID. It's gonna add it to the god items. Okay, so by the end of this line of code, we get rid of the product from the gut and now it's time to dispatch. Okay? So dispatch and dispatch will take two parameters, type, which is going to be as we move from part. If I click here, it will automatically import from pipes, okay? And the second one is payload. And the payload will be taught items itself, okay? And don't forget to update the local storage. So local storage dot item and you're the key will be caught item. And we need to write JSON dot stringify because local storage except only strings. So spring d phi. And we need to write Dart items. Okay, let me save this file. Okay, so we have successfully implemented, removed from DOT action and add took our actions. Ok. And now it's time to implement guard producers Dodge is so we need to go through to do sales folder, okay? So this is the reduced set of folder and we need to right-click New File. And we need to set the new phi to be God. Reducer producer Stuart Chase. Okay? And reducer is a function. So export, const, guard, reduce l equals two. And this function accepts parameter two parameters. The first one is that in state, so state and we need to center state to empty object. And the second one is action like this, okay? And inside this function, there is a switch case for action type. Okay? So switch action dot type. And inside the switch case, we need to compare with Add to Cart. So case Add to Cart. And in the case Act to guard, what we need to do is we need to update the state based on the new guide item. So it should return items, which is going to be action dot payload dot got items. Let me save this and other default case. So the fault for the default case, we will need to return the current state. Okay, so state, we save this file for now further default value of state bolt. It is state Northstar, okay? So for the default value of state instead of empty object, I will take localStorage. Okay, so let's remove this empty object and I'll write local storage dot get item. And this is going to be dot items again. But as you know, the returned value of local storage is string. So we need to convert this into and JavaScript object. So JSON dot bars, okay? And inside this we need to add local storage value. Okay? And now let's implement the case for removed God, ok, so we are, we need to write case removed from part if I click here. So it is automatically imported from types ok. And this is going to return the item from action dot payload, dot, dot items. Let's say it is fine. And for default state, we are going to set that's odd item property. So item dot items, that is going to be JSON.parse, okay? Local storage, so that this inside curly braces. So the entire thing should be in curly brackets like this. And what if, if I don't have a value like this? So if it does not exist, okay? So if it does not exist, so I'll just use an empty array as a string, because we need to return a string and this string is going to convert it into wheel empty. Okay, let me save this file. We need to go to card dot js and connect that to Redux store. So inside that folder there is dot dot js. So you're at the end. We need to use the ionic method, okay, so panicked. And insight collect. The first parameter is going to be maps state to top so state and doing the real map. So first probe that I'm going to define your is about items. And that is, and that comes from state dot, dot, dot. God items, okay? And the second parameter is going to be actions that we are going to use in the cloud. So you're inside curly braces. I will add only one x and v required only one accent that is removed from takt, okay? And we need to that the entire thing in blue down back picks. Okay, so that is an opening and close. So let me save this file. And now we need to import connected from reactor debts. So at the top of the screen. So at the top of the screen, import connected pieces at all, not from a lose. It is probably act. Okay. Let me say this five. Now we need to go to store ab.js, but before that, we will go to guard producer ab.js. And here, instead of equal to, We need Fullen. Okay? It was by mistake that I added equal to. So let's say this fight, remember in God to do so test.js. Here, there was equal to, but we need Fullen, okay? Now we need to go to store dot js. Okay, so let's go to store dot js and inside and inside that next to product reducer, Okay? Next to product reducer, we need to add card, okay? That comes from God reduce a, okay. And we need to import God reducer from. He says slash contradicts that. Okay, let's say this file and next we need to go to product storage is okay. So inside the folder, products as products starches and you're at the bottom, we need to add Add to Cart, Add who caught. And this needs to be imported at the top. Okay, so let's go at the top and see whether it is imported or not. So once again, let's write it again, add. If I click here, okay, so now we need to import. So let's import it over. Import. Add 2w from dot-dot slash slash actions slash dot actions. Okay, let's save this file. So this should be in curly braces, okay? Because it is not default export. So let's save this file. Now we need to go to app.js and me to remove God prompts. So let's go to app.js. Ok. So inside app.js, we need to remove these prompts. These are not required at all. Ok, so let's remove this, let's save this file. And here also we don't require this prop. Okay, so let's remove this because it comes from That's stored n. Okay? So it will come from the ducts to, and now we can remove the functions, ok, so we can remove this Add to Cart. This is not required. We can devote this create order. This is not required. And we can also remove removed from card. This is also not required. And there is no need to have state. Okay, so let's remove this. And he wouldn't be kinda move the constructor. Okay, so if I save this file, so the code is looking much better and cleaner. Okay, so we have removed everything which is not required in app.js. We only we can only see the components and we don't have any logic year in this app.js. Okay, so now it's time to check whatever we have done in the browser. So let's go to the browser. So you're, I'm getting an error. E dot dot js remote cart is not defined so that dot is, let me copy this thing. We have not imported this MOOC part. So let's import removed card. Okay, so we move card from dot, dot slash, dot, dot slash actions slash thought action. Let's check in action to move thought. Yeah, so this aesthetic, let's say this file, and now let's go to the browser. If I refresh. Okay, now I'm getting all the products. Okay? So, so now if I remove any item from dot, so I am getting this edit items dot slice is not a function. Ok? So there is some issue. Okay, so let's go to Visual Studio Code and let's go to action dot js. So in Add to Cart, instead of getting the current item from items, we will get it from GetState. Okay. So let's remove this items. Okay, and after dispatch, I will write vet state again. And instead of item.name slice, we can write at state. Okay, GetState dot, dot, dot, dot items, dot slice. So let's remove this items. And it should be GetState dot, dot, dot, dot items. Okay? And similarly we have to do it for removed from card. So let's remove this items and we can get it from GetState, okay, that state. And here instead of items start slice. We can write get state dot, dot, dot card items. So we need cart. Dot-dot-dot item starts slides, okay. Getstate, dot, dot, dot, dot items not slice. Let's save this. So now we can check it and check it in the browser. So let's just refresh. And now if I had removed the debt remote and let's go to Inspect and its photo redox section. As you can see, level from contraction has been shown. So if I click Remove again, so that is removed from action and it just, it has been updated. Okay, so let's add a new product to the guard. So let's add this first product. So I'm not able to add to that. Let me refresh. So that is an issue. Let's check what is the root. So if I go to Visual Studio Code and I have been a mistake in products dot j is this is an action. So we need to remove this from Mir and we'll do Paste it yet. Okay, so let me save this, and now let's go to the browser and check it. So if I refresh, and now if I go inspect and you're ducts. Now, if I click on Add to Cart here, as you can see, Add to Cart action has been generated and the product has been added to park. Let's add one more product. Ok. So this is added to that cart and this state has been updated. Ok. Now let's remove it from the card, so let's click on it. So they move from the cart and removed from the car. Accident has been generated. So as you can see, this 2D is an empty Edit, ok. In the part a guide items in the cart. The cart items is an empiric. So this is it. I hope you like all the videos and this is how we have used readouts and react to implement this Dart items and products. Okay? So if I go to app.js, okay, so so clean app dot js 5V competent. Ok, so you can just go through each and every lecture and you can create your own e-commerce score. And we can just uploaded in the project section, you can this upload the screenshot of what you have done in the project section. And I hope you like the series of these videos. And I hope you like the holes. So I'll see you in some other posts and some other videos till then, take care and bovine.