Let's build a complete web app using Country Rest API | React Portfolio Project with TypeScript

[Music] hello everyone welcome to my channel and welcome to this video this is the first video in my youtube channel and in this video we will be using this rest countries api open api to build a very beautiful application so i have a design here i did it in figma and as you can see we have some app bar here with search functionality some cart and then we will be listing all countries as you can see this is more like a shopping uh or e-commerce website uh but the reason why i'm uh using countries is as you saw that we have this api here and that's why i'm using that and trying to sell some countries uh okay i don't know who will buy it but anyway and then as you can see here we have some sorting functionality and then you can add it to cart and then this is like each individual country when you click uh it will go here and it will have more information and you can go back from there so little bit of react routing and then this is the menu this is the shopping cart so we will be using this component so when we have some items here we will be showing items if not we will be saying our cart is currently empty and then if you click a hamburger menu here it will open a drawer and in the drawer we have some options to change our primary color primary color theme so that's all about the design and i have here a little bit of to do so how we are proceeding i will of course make a chapter or section also in youtube but so uh this is create a react app with typescript that's how we are proceeding and then we will install a couple of packages uh then a polaris structures router setup with some dummy data dummy component and then redux setup types reducer estate action with some dummy states um and then we will go with a material ui installation and setting up and then designing a bar drawer then slowly component with some dummy data and then we will go with actual or api data and we will render actual countries then add to card action reducer and everything related to that uh so card items uh remove item from cart source functionality sorting functionality designation theme color sense and lastly its individual phase so that's all we will be doing this video will be a little bit long i'm expecting that you have at least some knowledge some idea about javascript and also a little bit uh experienced with react when i say little bit that means at least you understand how the functional component work how you can pass props and basic uh react ideas so if you have that knowledge definitely you can follow this and if not maybe you can read a little bit about those and then come back and watch this video with that being said let's start the video [Music] okay first thing first uh so i am inside a folder inside a terminal this is item and here uh i am going to create react f and the name will be country api so if you are making or if you are creating app just with javascript then this should be all good but i'm going to use template and type script so let's see okay so this is creating a typescript project react typescript project uh i will be fast forwarding this video so as you can see uh our application is ready so if i go inside here then we have a folder called contour api so let's go inside that and i will do code dot that should open my vs code and i'm going to close this for now and my vs code is ready here it was in another screen let me decrease the size okay okay okay well let's close this so here we are inside a vs keyword so here you so here we are inside the vs code uh it's the same file and as you can see uh the name of the application is country api and it already installed typescript for us because we used a typescript template and so let's go inside our source file folder so here uh we already have uh our boilerplate let's start this project so if i do any start it should run our react application so you can see here we have our react application running with this beautiful logo animation i like to delete everything from here so let's do this and this just right country f okay and then let's also delete basically everything from here except that react and then i would like to still clean couple of things i would like to delete this css file i would like to delete this logo and then i don't know if i can delete all this let's try if not we will bring them back and we don't need this css file as well and at the moment we have our index and so let's remove this and let's remove this so our app is inside our index and then in our application here we have the country so now it's giving me some warning let me try to restart this and see if this solves the problem okay as you can see uh we cleaned everything and now our application is running so with that our first to do is done so the next will be installing couple of packages so we will start with sas this is a better version of css i would say where you can use a lot of variables and and many more then redux thunk react router and x shares so let's go here and for now i'm going to clear i will move this a little bit up and now and add so this is node sas i don't know if i need to install it globally i might already have it and then the next is react router dome and then redux and then react redux and then what else we had xus okay and react router well we already have react router okay x use and we will also do redux thunk so let's all right all packages are installed now and if we need more we will be installing or adding them later so now we have redux router dome redex thunk and xu's sauce everything installed so with that our second part is also done the next is folder structures so let's go and let's start uh setting up some folder so first and foremost react is all about components so we have components here the next is pages okay so this folder contains all the pages so all the pages means all the routes uh in our design uh if you go back here so we have uh actually two pages one is home which will be rendering all this and then it's a single country item so that will be a separate page so for that we have a folder called pages and people like to call it container scene so there are different naming convention but i like to go with pages for each pages and then components for each component although uh the the the file inside pages are also component because everything in react is a function is a component anyway so another folder i would like to create is styles and and then we will have all the variables and everything here and then uh also we will have a style file for each component inside its components folder and then sorry so another one we will have redux and then i think the last one will be type i think this is all we need for now and if we go inside redux we can also create a couple of folders one will be reducer and then another will be accents let's call it reducers so that's all done and inside pages i will go and i will create home and also i will create country that will be uh its individual country page so i think uh this is all about our folder structure so if i go here then i can mark it also done the next is router setup so we will go here and let's go to our index.tsx and i don't know if we need this uh maybe it's good okay so let's go here and let's import what should we import from react or router dom and it's giving me okay so we don't have uh type define for react router dome so and it okay now that warning is gone so we can browser router as router just for our easyness and then do we need this react stick model maybe not and then we can do router here and then [Music] we wrap our application with this router so what we did is we imported a browser router as router and then we wrapped our application uh with this router so now inside application we can use uh different routes we can use switch and everything so but we are not done yet so i have to create a new file called route dot tsx okay so inside this file i will first import react from react and then i will also import few things from react router dom so what are those suites and then also route okay so now what i will do is i will create routes this is a functional component actually i don't need to return anything so i will use a small parenthesis so here uh let's call switch and say inside switch let's have some comments so render all routes here so and for that we need to have our components so let's go inside home and let's call it home.tsx and i have home component i will quickly change it to arrow function i don't know why i need to do that but this is home page and let's copy this and let's create our country page so it will have exactly same thing for now and this is our content page okay so inside our route uh the tsx let's import those components um pages oh no home and home and similarly we will import country so now we have these two components or our main pages home page and country page so so now we have these two components home page and contributes now we can use route and so inside route we have something called path and the path is actually the route the the url that we will be entering so when we have this last this is a home path and we will be using our home components for this okay so now i think if we go and start this and if we don't have any errors okay at least if i remember i forgot to save this um we are getting something here home tx cannot be compiled under because it is considered to be globalist 8 import okay um what is happening here okay that's home we are exporting it then then react okay so one thing we forget to export our routes and then second thing is we have this component but we are not using this component anywhere and the best place to do that will be this so for that let's go and import our component routes from do we have routes here and then here okay so now inside our application inside our f component we have routes and then inside routes we will have everything that we need to render and this will be our home so now i think we still have a warning but okay what happened okay so we have our homepage as you can see so it's kind of tricky right first we have index where we are wrapping our application our f component with router and that comes from react router dom and then inside our application we are importing this routes component and inside our routes we will be having all routes so now we have home and if i duplicate this and if i give country and then here we have country so now if i go here and enter slash country oh it's still giving us home base and that is because we forget to put something called exact here and why do we need this exact here it is because as you can see that we have home with slash and then we have country and then in future we can have country and actually we need this and maybe its country's name so name so what our router does is it try to match uh whatever comes first so uh all of this they have something in common and that is this last that is that uh home directory so whenever uh react router sees this it automatically renders that first component so to uh tell react router that com only render this if it exactly matches this so anything else then this will not be included here so that way now if i save it and if i go here as you can see we have a contributes but i just realized we need to also give something else and that is name the reason being in our actual use case we will not only use this country url but we will be passing uh country name or actually even the better will be country id so uh it's all i don't know if it will be name or id but let's just do name for now we can change it later so this way i think now our component does not our url doesn't have anything and now if i do some then and this can be anything so it can be let's say germany and now we don't have anything but at least we know that our routes are working fine with that we are done with our route setup so the next it will be our redux setup so let's go back to our folder again and then this time we will go inside our redux folder let's close everything else so let's go inside redux and we have actions we have reducer so here let's create a reducer call um index so let's have index.ts so inside index let's have export default function and we can call it root reducer yeah we can call it root reducer and this will take couple of things so the first thing it's reducer they will take initial state so let's do so the initial state will be empty [Music] okay let's just test name so that will be empty then we'll have a state that is goes to initial state and then we will have action and because this is a type script so we need to give some type we will come to actual type later but this is more like just restart and we will be using switch and what we are using we will be using action type we will come back to all of this later but now i'm just going to set up and i'm going to do default and in in case of default we will return start okay so this is our reducer call our root reducer we need this in order to create our store so let's create our store.ds okay so inside our store uh so this is the main store which later we will be wrapping our index here this application uh with some provider we will be importing from react redux and we will be wrapping that and passing the store as props the reason is how redux work i will make a separate video but in redux we'll create a store which will have all reducer that means all states and that will be passed to everything in our application via provider as a props so that way each silence no matter where they belong or where they are they will still access this store and then to change that we will dispatch actions and so that action will change the actual state in redux store and then because the main state will change mainly store will change and it will re-render everything so that's how it works of course if you need i will make a separate video about redux but this is not about only redux so i'm going to go a little bit faster so the first thing we need to import couple of things and let's go to import what is happening with me okay so the first thing is from redux we will be importing first credit store and then mirror will apply middleware and then there is something called compose and just to let you know i also don't know everything about how setting up redux store i have some some idea but i don't know exactly how it works under the hood it would be nice to know but in most of the cases you can use it as a boilerplate so you can copy this and use it exactly for your case maybe the name of reducer will be different and maybe you will apply more middleware but in in a nutshell it will be still the same boilerplate for your case as well so let's create initial state and yeah as i said for everything we need initial state i'm going to leave it an empty object for now later we can fill it with our actual format of our states and also we can use actual something like this type definition but for now this is all we need because we are just setting up so the next uh will create a function which will be our default function and it will be make store and it will take some uh parameters mainly initial state and that will be equal to our initial state and this is our function so this function will return store so we will do a couple of things inside this function and i will be honest i will be copy pasting some things from a boilerplate okay so before that uh the first thing i would like to do is i will like to clear i would like to create something called middlewares and this will be an array and inside here we will be passing our middleware and that is import thunk from redux thunk so i will pass this and the reason why i create this middleware array is in future for example if we have saga or you know or or anything else we can pass all those uh inside here but for now we will be using only thunk as our middleware and the reason why we use thunk will come in that later but with only redux you can only dispatch actions uh but you cannot dispatch a function or you can like for example you can do api call and all those functions inside redux action without thunk so that's that's all about it and then let's create a store okay well before that i will okay so the next uh let's get store so it will be store and we will be using create store and this uh create store will uh require a couple of thing first it will require radiation second it will uh require initial state which we have it which is uh this basically and then the next will be it will have compost that we used we imported earlier and this compose inside we will be using something called applied mineral wares and inside there we will be passing everything from here so as i said for now when we have thunk we can only use thunk here but since i would like to open the room for futures middleware so instead of that we will do some spread operator and this okay it looks a bit messy i know but trust me you can just copy paste it not it because it's not done yet but i always do coffee wasting for this reducer so i want the only thing i know is uh this is a main store and we will be retaining this store and this store we will be uh passing uh we will be wrapping our main application with uh redux reactor redux provider so that's all i know but there are a couple of things i will do first instead of using this compose directly here i would like to use let compose enhancers and this is nothing than compose the reason why i'm using let is i will change the value i will update the value of this and then what i would like to do is instead of using this compose here as you can see this is same so i'm going to use this and now i have to do some redux div tool setup and i am going to copy paste this use you can also copy paste this so and here i'm using compose enhancer so as you can see this is for redux step 2 and if you have no idea what i'm talking about then there we have this google chrome extension redux dev tool and later we can see all our states actions everything here so it will be much easier for us to follow and for that to enable that we need uh to copy paste this and we have this only enable if our environment will be development environment so that is one thing and then before we written here there are a couple of things i'll use for hot reload and everything and that is also something i am going to copy paste from boilerplate and this will be here and let's comment this create redux store so so now we have all these ready the only thing missing is this reducer so we need uh an actual reducer so if you remember we already have something called root reducer and we have already exported from here so let's uh import this and here i am going to import root reducer from reducers okay so now what we need to do is all this reducer here i have to call it root reducer okay so we will be passing that root reducer here and then it's complaining something saying test name is missing so here somewhere looks like test name um is missing so when i pass when i pass this now everything is working okay so we have our redux store ready uh definitely this is not uh exactly the thing we are going to do because later we need to have different reducers and we cannot just use index so we will be modifying that later but for now as a setup this is all right so the next we have to initialize this store and for that we need to go to our index on the tsx and here we need to do a couple of import so first thing so inside here we need to do some import so let's and that should be done from react redux okay and if you remember i said earlier we will be importing provider and then what we will do okay so we will wrap everything with this provider and for example all this and here we have to pass some props and that is a store and that store we need to get from somewhere so from where are we going to get started we will get that store from our make store that is in our redux and store okay so we have make store there and also let's do a little bit initialization so let's say store is make a store so now we have this make store in our redux store and we initialize that and we are passing that store as a provider and we are wrapping everything our router our application everything with that and with this if everything is working fine here which looks like because we are not getting any error then if we go back to our application here and if we refresh now you can see that our redux dev tool is also activated and here you can see we have this test name stacked okay so this means our redux setup is ready of course we will be modifying this later but for now our redux is ready so you can copy paste this you can basically copy paste our index uh tx and you can copy this store just like you want just remember uh you need to have this same file structure same name and maybe initial state will change later but other than that you can copy this you can also copy this like cream store you can also copy this and then you can also copy this and if you have more middlewares then you can add them here by separating with comma that's all so with that our redux setup is also done so so our redux setup is done the next is types uh actually i will be doing both of these uh together because somehow they are related to each other um so let's go to our vs code and we have a reducer here reducers folder and types so uh first thing i will create something called types.ts uh well you can call it index.ts as well it's it's same or let's call it index.ts i think that's better so the reason is i think i will not have any types here or maybe just the ap state but everything else will go to their individual files so before we go to types we have to go here in reducer because that will make more sense so so so first thing let's go here and i will call create something called country reducer okay so what is this well all uh all the data's and all the mutation and everything related uh to fetching countries so if you see here we will be fetching all countries from this this url so as you can see from this url we get all countries it's pretty long list but anyway we'll get all countries so this is the first one and then the second and third and so forth so i want to save all of these countries uh inside countries area and that's what our country reducer will be dealing with so as you can see in the beginning we just had index ds and it had uh initially state just test name but that is not going to take us anywhere so uh in country reducer what i would like to call uh create first i would like to create uh initial state as i uh everything in reducer everything in redux uh especially store and state they always need initial step so in our case so our initial state will be so the countries as you saw here this is an array so the main thing is array and each country inside uh is an object so so so now this is here and i will have also something else that is is loading false the reason is when i am facing countries uh it might take some time before uh we will get all all those countries uh and our api request successfully uh done so in that uh time i want so some sort of loading i'm not sure whether i'm going to do it or not but just in case uh it's a good practice and then i will have also errors also while fetching api if we get any error then we will update that in here so this is all uh about our initial state actually this is all we need for our country reducer so in this uh case i am going to make something called export default function call contribution you can name it as you want and this function will take something uh i think you have already guessed so the first thing will be state and this state will be same as initial state and then we will have action and at the moment i'm going to give x and type any what am i doing wrong okay so we have x and type any and this is any tested uh just to let you know later i will have uh something called country types so that's why we are here because first we create this and then we will create all the types inside our types and then we will get country types and we will create all the types right here and for our actions and everything so so what this function will do uh we'll do switch we'll uh check x and type so when we are uh passing any any any value from our redux action we will call the type you will see soon when we will start action we will be dispatching action and each action will dispatch some type so and those types are unique so that's why we need to be really careful because if you if there are duplicates maths then our redux will get confused and in in case of type descript we might even get a warning or an error so we will be doing switch action type and then we will have different cases so the first case well let me first create default case so we will always have default and what default will do it will always return uh the state so that is our this state whether it will have a data or not but that will be the state so the first thing we need here um okay so um well first i will say paste country uh loading true so what what is this this is so we will have a case where there will be something called phase countries and when we will have this case all we will do is we will return rest of the state as is this but we will only object is loading to true so then when our api phasing starts we will dispatch this type and then uh the next one so this will be if patching is successful then we will do page countries success and in this case what we will do ah we will also do basically the same thing uh we'll take state as it is this just a way so that we don't mute it anything else than what we want for example in this case we want easily loading true and if we don't uh use this spreading then it will change our entire object and just have this value and we don't want that so that's why but this is more like a javascript thing so and then what we want is we want is loading false because we already have its success so we have data that means that means we will already have data so we don't need that and we can show it false so that our loading button or if we have any loading uh icons or something loading there then it will be turned off and then the next will be our countries and that countries will be action dot payload so when we are dispatching action from our redux action we will be passing action type so that type will be whatever here we have so that type can be phase countries that type can be phase control success phase countries failure remove country or anything so that is up to us that how we are handling it and then uh we will be passing also payload along with that so we will be passing action type and we will be passing some value with action so that will be payload if we have everything good in our success that means our error is empty so that's all so the next is if facing has any errors then we will have another case and that case is faith's countries failure and here we can have return and we'll take state as it is and we will update this value with payload so if you see here we were passing payload as countries payload if it was success if not we will be passing error message here and it will update that all in this case also we need to we need to do is loading false because uh either our api call is successful or not and if it is successful then we have the data if not we have error message and we might show this error message to user and i think this is all for now so we have our reducer pretty much done okay we don't have types it will come back uh to that but now let's go and also let's create uh actions so first thing i will create index.ts we have index that will export all our actions so that we don't need to import each individual action file we can just import index and then that will have all our action so now here i will call something called country action and inside contraction uh so we will have a lot of different type of actions so first thing it will be uh so face all countries so what it does so this function uh we will also have types later but we will have like types here later but for now let's just create this well we can even do something [Music] like any for now and we will be replacing this any with actual types so what it does is it will return only one thing and what it returns if you remember we have something called page contracts so it will remem it will return this and all it does it just sends our loading to true so um type remember we are returning type and type is this so if we had payload we can also pass payload for example countries or whatever data but in this case we are only returning type and how we how this works is our reducer all our reducers are listening all the time all accent types and whenever it matches any of them matches with the type with the case then that thing will happen or that that process will go through so okay so now you can see that we have been using this phase countries here and also we are using that here in the reducer and then the same thing will happen for these and then the same thing will happen for this and so on so this is not that good practice and that's why inside types we will create something called country types and here we will export all those constant okay they are not exactly type but still so what i'm going to do is i'm going to call this and all it does is it will assign this variable this this case or this value into this constant and then same thing i will do with this so let me duplicate these and same here and then we have paste country failure and i'm going to do basically same so this one so this way so this way we have everything as constant and this is very good practice because uh in future even when you are continuing in your project after some time uh it is very difficult to go and check what is the name or the case name you have given and then when you are using that in action you have to also be sure that you have to use exact same value same data so when you have it inside some constant like this um sorry like this it's super easy in fact if you want you can also comment here reducer case constant so this way we know what are these just like that uh we also need a little bit more and one thing we need definitely is we need a country reducer so what we need okay so we need list okay here i will do types and export type so this is how you do type and contrary reducer state and what is this this is basically exact same thing we can even copy it here and we paste it here so this is array and this is boolean and this is a string this is the string so now we have these types now we can already have this type here we can also define the type here so the next type we need is action and for each accents we need our accent type so so let's do x and types so the first uh type is what x and do we have so page all countries action okay so we can just do page all countries action and we can do type and that is type of page countries and we don't have a payload so we don't need payload but we can do optional and we can do a string all since we don't have anything and this is not even necessary okay so if you notice uh i have been using all caps for reducer cases uh it's not necessary but we are doing it just for a good practice and similarly for all the types you see i'm starting it with uppercase value this is not i think mandatory but it's just a good practice so just so you know okay now we have these two types what i'm going to do is i'm going to index.ts inside types and i'm going to export everything from quantity types okay so now now you will see i can import all those constant and types and states from um okay types so what i need first i need contribution state and then i need paste countries i need paths countries failure i need face countries success and i need page all countries actually i don't need it's all contains action so that's all and here i am going to put that type as you can see and the same type also goes here okay that's all good and now if i remove this we will get some type warning and it will say that we are missing something here for example error is missing and if i undo it then the warning is gone so this is very good and this is the benefit of having types so next let's change this to constant value so same thing here and also same thing here so that's all good then let's go to our [Music] then let's go to our action and here also we need to import types so what we need we need page countries page country success page country is failure and paste all countries action so now you can see here i can do page all countries type okay so now we have that type and we can replace this with our constant variable okay so now uh we already have some setup with types and we will be proceeding further so uh as we go along so the next action we will be building will be page okay sorry page all countries success so we can basically copy this here and here i will just give the name success and for now let me just do any we will create action type and then we'll replace with that but here i have already um success and if you remember in our country reducer when we are calling uh faith countries success then we are passing countries so that is from action payload okay we will be taking those countries as an argument so and here in payload we will be passing [Music] those countries okay so now we are done with our face all countries success the next will be our face all countries failure so basically same failure and then i will be changing this to also failure and instead of passing country data we will have error any and because we don't know or it can be a string so okay we are having some problem here i think now the problem is all so here we will use failure and then whatever the error we will be passing we will get it here so now you can see uh all the cases in our reducer the first case second case and third case they all are uh now dispatched with accents so you know usually i don't do all these three separate functions i do all of them inside one and so when i just start it i will dispatch this and then uh when if the api call is successful then i will dispatch this with payload or if we get any error i will dispatch this so usually i do it all inside one function but i'm just doing it so that it's bit easier to understand okay so so now let's go and uh create more actions uh type so this is our one action type that is page all countries success so let's go to our country and here okay so pays all countries success and pay all countries failure and in the success we want success type and payload will be payload will be array okay and because it's area of country and this payload will be history and this is failure so now we have all these actions and as you can see we have more and more accents going on so i want to combine all of those actions inside something called country accents and all we will have is uh we will be having page all countries action or page all country okay i think it's good that we give them name action so it's easier for us to recognize hits all countries success action and then paid all country failure action so this way we have also our global type that includes all of our actions so now what we can do is inside our country action we can import all actions actually let's try uh [Music] country accents and i'm not hundred percent sure if this will work but let's try uh then it will be easier for us okay this works and also this works because it's a part of contraction and this works so if i don't pass it here i think i will get error because it expect that when because it says that this is the case and if there is a case then it expects that we will have payload so this shows that all our actions are working properly and all our types are also working properly same thing here so if our these countries will not be array and if it is history then we will also get error warning saying that uh those properties are incompatible because it expects area so with this we know that our type definition and everything they are working pretty good we have all our actions of our country okay we don't have our final hits or countries action which will be dispatching all these uh functions depending on the situation but other than that we have our types ready and we have our actions ready so at least for country and now we will go inside our index types so here we will have global ap state so we'll call it export type and we will call it every state and app state will be itself an object and here we will have contrary reducer and this will be our contribution type so we'll also import from our country type and that will be not this contrary reducer state so country reducer state also i just noticed that we need to do some modification with our root reducer because currently we are just getting index but that is not a good approach in long run so we need to have our index uh our index reducer uh we can have the same function name and everything but uh one thing we need to definitely think about is let me do something so we need to import something called combined reducer from redux so combine reducer and what this does is it will combine all reducers so for example at the moment we have control reducer but as our application grows we will have more and more reducers and as you can see from here we are only exporting one reducer and this is not a feasible way so for that we will input all our reducer here so for example uh our contribution from our contribution so later we will have more reducers uh but for now this and then let me delete this because we don't have anything here and actually let me delete everything so now i will call it what was it just forget okay root reduction so i'll call it root reducer and then i will use that combine reducer so inside command combine radiation i will combine everything so for example contribution so now we need to export our root root reducer so now we exported it and in future we will import more reducer here and we will be adding them here if you notice this is same as this because they have basically same name if you want you can also do country and then contrary reducer but if you do so then in future when you are using this reducer you need to remember this name but if you remember in our application type we are calling it country reducer so to sync it with this f state i'm also going to call it country reducer why it will be useful later when we are importing our state in different components so now as you can see we are getting some complain here so our initial state can be blank that's fine uh empty object and then then here now i need to do this and then something is still missing so i've been dealing with a couple of errors and warning the first one is this one so since we combined our road reducer and exported it as a combined reducer i still had this initial state so i have to remove this because we didn't need any initial state for this file that's the one thing and then second thing i'm getting warning or actually issue is something here in our actions index tx so the reason is this is an empty so this is an empty index file so probably that's the reason we are getting error and in order to solve this what we need to do is we have to do export everything from contraction so if i save this [Music] okay as you can see when i save that everything is good and we are back to the track so i just need to refresh this space and we are still there i know this is taking uh quite a lot uh i could have used just the boilerplate and then start the video from there but i thought that this is also something that beneficial for many who are learning so i hope you are still with me but if you already know this you can of course fast forward or split the video and go to the next step okay so with that i think we did this and also we did our initiation of reducer and actions done okay um then comes a designing part so we will start with react material ui setup so here i am inside material ui and if we just click guest install so what we need to do is we need to install this since we are using yarn so let's go here and i will clear this and it and material ui and while this will be installing so uh we can also use cdn but that's all and once we have this installed the next is we can use anything from material just by importing something like this so we can also try so let's copy this and let's go to our application no we go inside our pages and let's go inside our home and here okay sorry i will import this here and then i will have a button there okay so if everything is good then we should be seeing this button here let's repress okay something oh yeah of course our application is not running uh okay now this is running and as you can see we have a button called hello so this means our material ui uh setup is kind of completed but still we need to do some theme setup and for that i think we need to go to our application or even our index tsx so let's go to material ui and let's go to theme configuration okay so i don't know if it is okay theming so if i go inside customize system and if i go inside overview so as you can see uh we need to wrap our component with something called theme provider and then we have to pass the theme and theme here is done by create theme so let's go and do this so let's go inside application and then i will be importing couple of things uh here from material ui so first thing okay [Music] from okay it's just a minute and then another will use from [Music] material ui styles and we don't have it yet so we need to install this okay now we can call this theme provider from material ui styles and then we should wrap this [Music] inside theme provider so if you remember we used a provider and we wrapped all our redux store and just like that we are wrapping our application with this theme provider and here we need to pass some props and that will be theme so um okay but we don't have this theme yet so for that we need to create material ui theme well if we don't do it like with theme provider we will already have default theme we don't need to do this at all but we want to overwrite it so uh cons theme is create theme and inside theme we can pass a lot of things so i will copy paste something from some boilerplate and then we can modify it as we like so here we have it but we will be changing all these later uh also this letter so this primary main and dark and then we have secondary we have text primary and secondary background typography and all of these you can actually get from here so there is typography and then all sort of how to edit them and how to pass them here so you can see that there is a theme and then you have to have typography and fonts and so on and then you uh wrap the provider same thing with uh palettes so there are a lot of palettes and idea is same that's valid primarily so you can see all these how these themes are created from here material ui customization but this is what we have typography background text secondary and primary colors and definitely these are not the final one but now with all this our material ui is set up for now and so we can go here and we can mark it as dawn uh then we will go to a bar i just realized that we have another important part that is sas or styling setup and somehow i missed it here so let's so let's go and try first of all if our sauce is working or not so for that um the easy way to do that will be okay let's go inside our home and here uh i will call home. okay and [Music] i will import that here so import and then home dot source file and let's give this a class name of home and [Music] okay so let's go here and for all home class let's go and do a background call alright and then let's start this so if we get our background color right let's also do okay so something definitely happened as you can see we see that for a while okay what is happening um incompatible so this person is incompatible okay so we got solution as you can see uh we have exactly the solution we need so let's go and try this and then we'll go okay so first we are removing our current person's version of uh sas nodes us and then we will be reinstalling it so now we are installing it obviously i could have fast forwarded this but i just want you to know that this is how i do every day so google and stack overflow they are very good friend of mine and there is also edit this air comes from this so but there is also work around okay so now let's try if that will fix it if it does then we're good if not then we have to find some other ways okay as you can see uh that fixed our problem and now we also know that we are getting our sauce running and for example if i just go here and do color white and if i save it also refreshes our so we are also getting our our sauce waters running so that means everything is good for now anyway so this is not what we want obviously so i'm going to remove this and that will also remove everything here so now let's go to our styles and inside the styles i'm going to create something called base based so this consists all basic setups colors and callers and fonts okay so uh first thing uh i will also do one more import and that okay one more that is reset uh what this reset it you can basically copy paste this i also copied it from somewhere i don't remember from where but uh you know all it has basically all those merging padding and a lot of those uh default uh it takes it to default so everything will have margin zero padding zero uh focus outline on and and and as you can see a lot of other things so that's pretty good uh first thing i will be importing reset as you can see so that way and this will be our first thing in our base and then i will initiate all variables so i will be having okay so for that we need to go to our design file so this is our design file and as you can see here i have primary black primary blue i don't know why i didn't name it as primary black i can basically just call black so i have primary blue i can just call it blue or primary and so now i have primary i have white well this doesn't look like white but trust me this is white for us here so from here let's copy all the values and then i'm not sure if i can export all of them but anyway i'll go there and i will initiate all the variables so i will have primary and then okay this is not primary but okay so now i have all those colors uh what we had in figma and from there now i will do a little bit more so i will also do primary hover so let's create a hover color so this will be this and then i will make it a little bit darker something like this so now we can have this okay so we have our primary color primary hover and all the colors uh next i want fonts so okay let's delete this from the design and i'm using poppins font so let's go here so what we have i think we have a regular and then we have also medium and we have bolt so we have three of these and we go to import and as you can see we have this import here so i'm going to import this here fonts actually it's just one font but in future if we want more we can and then another thing i want is also if i want to use fonts fonts wait so so here font weight and i'm going to assign a variable called font weights and so i have regular that's 400 and then let's see 500 and 700 so and then i have medium that's 500 and i have gold there's 700 so now we have this font choice and i will use some function here since this is us so we can use some function let's put all functions here and i'm going to use function weight and then we will have weight name because that's basically here and then depending on whatever the weight name we will get we will return map kit so uh onwards and then this weight name so basically if we use that function and regular we get 400 of course we can also use direct hard coded value but let's see if we decide to change uh funds to something else and that funds has medium as 600 or something else then we just need to change it here and it will be changed everywhere else so our size styling is also done uh for sure we can have mixins and other things here and then we can have one min uh that will export everything but for our purpose this is good enough so now our next thing in our list is a bar so let's go and see the design of a bar okay so this is our bar and it will have a source component and then cart and also some card update and a hamburger and also a logo so in a bar so let's go and where will be where are we going to render let's go and create our first component and component will be called a bar and we will have a part dx okay so this is our first component and we can also create a bar css okay so so now we have our f bar and let's change this to this and let's call this a bar and let's give class name of a bar okay and then let's also import paper dot file and save everything so okay let's import uh our a bar component and i can see apart from um components and a bar a bar okay a part is declared but it's fellow never use all let's a bar component all let me go and so now we have our apart and okay so if we go back to our application we can see a bar that's good now let's do some styling so let's get back to our bar component and we have a class name called fbar so we can go here styles and base that way we can get all our variables and everything so now we have our class called bar and let's just make sure that everything is working fine so i want to give background color and that will be primary so now if i go back here you can see that we have our primary background so that means our variables are working properly and our css or class are assigned properly so now uh i want to do is i want to make high 120 pixel okay so let's uh before that let's go to our app and here somewhere let's import all our sas file also here by importing it here uh we can do few more things for example let's save this and let's go here and after we have our variables we have our point words here let's have some constants and global some global stuffs i don't know what exactly i'm going to call it for example [Music] i want to have max width and that can be for now 140 px we will be accessing it later and i will also like to have some root uh setup for example [Music] font size so that can be 8 pixel and then font weight i'm going to use weight and i'm going to give the name regular as you can see here we have been mapping it so when we use weight and give it so by default all our font size in our page will be 8 pixel and also font weight will be regular so and then later i'm also going to use typography if needed for example all h1 and so on but for now let's keep it like this and then the reason why i'm using it is uh if you go in my design file you see that so all the font size uh so if you if we go here and you can see we have 24 that's multiple of eight so three times eight and then this is also 24 and here this is 24 so and these are 16 and if you also go here this is 24 24 24 so mostly when i do i always use some multi-falls so that it's it's easier so i always use eight and then sometime i do 12 16 20 24 so you can also use half of them i will delete this for now and we will come back this later but as you can see i'm already getting some warning here and that is because i'm using this font weight before initialization so i can do like this and this should do them okay so now this solves all our problem and if we go back to our ah okay we are having some problem as you can see that everything we have uh it's now 8 pixel of course this is coming from material ui button so probably it is getting default funds from there but all of these they are all uh coming from our eight pixel root and let's also do a little bit more here so let's go and let's uh set font family variable so fun family and here so here we can go and uh put this i just copied it from poppins and now this is our font family and we can use this variable in several places so now already in our root what i can do is i can go to font family and i can use our font family variable so that way uh we should be seeing okay so this is now poppins and of course it's very difficult to visualize because of the font size being eight but we will come back to that later so now um let's uh okay well since we are here already i'm going to also do something i'm going to leave s1 as it is and i would like to do s2 and s3 and as 2 i want to do font size um 3 ram because you can see from root we have eight pixel and then font family from family and also point weight um well for now let's write regular and we will see how it works so now let's go back to our f bar sorry we were supposed to do ever but i went on and on and on i think this is how the development process is uh so i wanted to show you as i do because i think then it makes more realistic picture okay so now you can see we have our uh font size fixed at least for our so now finally let's get back to our air by design so how i'm going to approach is first i will have a wrapper or a content area and that content will be a global class so that will have maximum width and then inside there i will have uh left component middle search component and then i will have uh right component where i will be having all these buttons and these icons and everything so so so so um let's go and let's call a bar content and inside here i am going to have a bar content um [Music] left and then i can do a bar content search and write so we have three dips inside our fbi content and here i can also give something called container so we don't have that class 8 so let's go to our on this global and here i can give a global class called container and the whole idea of this is it will take maximum width and margin will be auto nothing has changed right but we are i think in a right direction oh let's write that here we will have our search and right side items so let's comment this out and let's copy this and we can say this is search box area and this is our logo area okay so this is shorts and here we will have okay so now inside a bar content let's go here and we can do display flex and [Music] then you can see we have a logo we have everything with each other that's fine um what we can do is justify content space between probably not the best approach but as you can see now we have this right we have in the middle and we have uh country application that seems pretty good um so let's decrease it to 80 px because that makes more sense and and this is all good for now so now we go to our figma and although this is uh montserrat font but i will be uh exporting this so i would like to export this uh i'll go here and let's export it as an sbz okay so now let's create a folder inside public directory and then inside images let's import our image from our desktop where is it okay so this goes here and this is an spg so in future if we want we can change all the steps but for now we don't need then inside our apart component here let's open image tag and this will be a variable i'm going to close this let's give country api text image and here i need to pass uh url to get enb from public url and then plus i think we have images and country api logo.sbg i don't know about the size but okay we don't need image here so okay we are having some problem let's see okay images country api logo.spg so let's check the name quickly if we have okay logo black okay so we are missing that and this looks good and we have our logo here it's pretty big but we will adjust it in a while so the next we need a couple of icons we need a hamburger we need this well this we can style and we need a cart so so now we are here inside a material ui icons and let's search cart okay this looks pretty good um okay so we need to import this one let's let's go here and let's import that and then the next one we need we need menu i guess this will do the job so let's paste also this and okay i'm not sure if we need to install material ui icons okay um looks like we need to install this let's go here now this icons are imported so all we need to do is we need to render those icons and let's have a menu menu icon and then above that we have what is it called shopping cart icon shopping cart icon okay so as you can see we have our menu we have our shopping cart we'll definitely uh change this install it to our let's go a bar content and cart so this way we will put this inside a wrapper div wrapper let's just do indention and then also we will have okay let's do shopping cart related and then we will have card counter so probably we will have card counter component i'm not sure what we will do and then this is a menu icon so hamburger icon and we will have click events and many more so now we have some layout done let's go and create a search component so we go here and we will have a search component okay so uh let's go inside our component enter inside our components folder and let's go and let's create sorts um and source.tsx okay so here also if i do like this this is sorts so we have our search component and let's give it a class name called sorts box and inside source let's go and see our design so we have source field and we have sorts uh icon okay okay so uh for our text input field let's go and let's take this uh standard from material ui and we go and we'll copy this text field and we will paste it here and then we will go and actually take this and then okay let's go here and let's just have it here so here we will write sorts and id we didn't need for now and then uh the next we want well let's do so that we have search box wrapper i always use wrapper because it always gives extra room to style and then here we will have source icon so let's go and do sorts icon okay we have this so let's go and use it okay so now let's go and import this uh search component into our a bar component so let's go and import source from sorts sorts and then all we need to do is we need to render the search component here and we can remove this text and now if we go back to our application you can see that we have our source icon we need to do some modification so we don't get on this level jumping up there and also we have to style our but we have something going on for sure we can also use a bar with material ui but i'm not doing it because i want to do it by myself so but if you want you can already use it because we already have material ui so why not and then we have our search component okay so the first thing uh let's go to our sorts and here let's create a style file search s and inside source let's go and import okay so now we have our search box let's use this here and also just like our a bar we can import this and it's kind of annoying i tried to solve this if you know how to have it globally so we didn't have to import in every sas file then feel free to help me with that but this is how i do sometimes super boring but this is how it is working for me so uh now the search box uh first thing i like to go and see the color and the color is actually this one and just thinking do we have that color already looks looks like we have gray so let's go and try with background color and then we have gray and then what is the border radius so border radius is 30 so border radius is 30 pixel and let's see so now if we go we have something here still a lot to do i think uh instead of text field let's import input and let's have input and we don't have anything i think we have placeholder sorts okay so i changed our text field uh to input field and that way i guess at least now we got rid of other steps let's see what's the okay so 67 almost 70 pixel height let's make it two so let's go and hide 50 pixel display flakes airline item center and [Music] so oh okay and we need to do so inside wrapper and this way i guess margin auto let's do display flex here also and align item center then let's have padding top to bottom one rim and side to rim or actually so now let's go back and check it we have our sorts we still have to get rid of this line okay so let's go to our sorts and inside input here let's disable underline and that way you can see that underline is gone and we can have our typing i think we are pretty good with our shots for now and then now let's go and align our main airbar so let's go to our bar and inside fbar content okay display clicks airline item center and that should help us aligning items to center then we need to go to our content right and here so let's also do display flex there and that way i guess also align item center [Music] i don't know if we need to do any display flex here and do a line item center ah that's i think we already have it there okay so what i would like to do is giving padding of 10 pixel and that way we will have all our casing down and then in our a bar uh where we have our a bar we can also have our content left and let's move it here it's bit easier so we go here and we target our image and let's go and let's check what is the width okay it's 220 but i think that's still uh too much so let's go and give 120 pixel and that way and then we can give height auto and with also auto i don't know if that will do anything might be okay so what we can do is we can go to give it a class name logo and what we can do is we can do class name logo and image actually not image huh okay so now if we go back ah we still have it pretty big um okay so here is the problem now i think our country api can go a bit 1 50 now if we go back and check it you can see that this is pretty good i will remove this annoying f bar from here we didn't need that for now or actually we didn't need that at all and what else do we need to do okay we still have our uh side here okay and we have to also maintain font color and everything but uh but before that let's go and let's make the circle so um we will go to our app bar shopping cart and let's go here and content card counter so here for for now we can have let's see what's the font size okay 16 we didn't have 16 8 but let's make it p okay let's have it 10 here and let's go and start styling our counter so and we need to give it here then um with let's go and check the height and width of it so 36 36 so 36 px height is also 36 i think that will not work okay minimum with 36 px minimum height okay so this is our counter uh usually if you are not sure about the value that goes so now we have 36 px uh minimum width and then the minimum height uh the reason why i'm doing it is uh if if like at the moment we have numeric value 10 but let's say we have 100 items then it needs to increase so for that reason i am doing minimum but there can be one problem because of this sometime [Music] width will increase and height will not increase so for now let's just have width and height like this and we can adjust them to auto later with some aspect ratio anyway we have to give a display flex because we have some no more value inside and then let's do justify content center and also k line item center and font size inside will be 2 ram um let's for now we can give a background color to primary and then font color uh to white but we'll change this later uh by passing a color variable so at the moment in our design we have bit with primary color but when we don't have any items in the cart and when the value is zero then it's nice to also have a different color so for that reason this color will go dynamic later but for now i think this is pretty good and one more thing we need to add is border radius and we do 50 and with that i guess if we go back now we you can see that we have our shopping cart and we have our counter however they are not aligned so that's what we are going to do next so now we have we are inside this uh content and we have our count counter so let's go to content card i think we already have it here and and and looks like we don't have it okay well no problem let's go here and all we do is flex and then i think you already got the idea i will do align item center so that will align them to the center of each other and do i need any spacing i guess not so for now this should do and you can see we have these so the next is we have to increase the size of our [Music] material ui icons and also later we will change colors okay so how to increase this icon sizes let's go and let's inspect them and we can see that there so if i go and increase the font size 40 pixel that will increase okay so the font size let's copy this let's close our debugger and let's go to our app sidebar right here and increase the font size of icons so now i go here and i will give it 40 pixel i'm not so sure if this will do the job or looks like it does so we have this we need some spacing so we have 40 pixel here and 20 pixels between them so let's go and um content card so let's have margin right of 40 pixel so that is five ram and also here let's do vibram and do we have all this i will leave it like this and then here we can have margin left of 2.5 ram okay um let's go and check i think this is pretty good uh except the font sizes and everything and we have all this weird thing but other than that our app bar is almost ready and we need to do some color changes here and for that reason uh let's go here and here we can do color and then we have black okay so i'm not sure if okay let's try with red color so we know okay so let's see okay so that means the colors are actually now reflected and also i guess a similar thing we need to do also in our shorts and if we go inside wrapper if we do the same thing um okay we don't do the same thing so if we go inside sorts then we have it inside our wrapper source icon so let's go inside our wrapper and here okay um the reason is we need this um actually okay so here we are and we need to close this i think now the problem is solved except our icon size is pretty big there and let's go and check it so it's 35 so instead of 4m i think that should do yeah so that is all good there now we need to also sense our font size and everything of our input so i think if we go and copy this and if we go in our base and we can have some overriding overriding material ui styles so if we go here then i guess here we can do font family to whatever we like that is our font family and default color we can give it black and font size also default we can give it to ram and i don't know if we can also give it important just in case and important and important and as you can see that we have our poppins font loaded here properly now we did with our fbar that looks pretty close to our design and we still need to attach our drawer and everything but that comes in our next to do so our air bar is done so next we will be doing dryer and for dryer um let's go okay well so uh for dryer okay so let's go to this material ui on drawer component and as you can see uh there is this uh drawer and it requires couple of parameters anyway so there is also very nice example it's pretty big okay so you can see here there are different type of uh drawer well actually it's a same drawer but coming from different sides and let's go here and this is our time for creating another component and this time the name of a component is sidebar you can call it drawer but i'm going to call it sidebar so this is our sidebar component okay that's good like always i am going to do this so bear with me uh by the way how is it going uh you can comment uh as i said i would like to make video uh in the same way as i develop so no shortcut no fast forward you can always increase the speed uh by youtube or you can skip some parts but if you wanna be with me here in the same process same speed then you can be with so uh this will be our uh sidebar and here i will be importing uh drawer from material ui so let's go here and import draw air from as you can see it's already showing us the possible option i would like to actually do like this that way we are importing only dryer so we didn't have to deal with everything and so i will be um okay so this i would like to call sorry sorry class name of sidebar and inside here we will be sorry okay we will be rendering drawer so let's go and let's have our drawer so uh now this drawer it will uh need couple of props so the first part props will be anchor and we can as you can see here left right uh for our case right is enough if you want to make it dynamic then of course you need to pass couple of more steps but for us this is pretty good and then the next is open stage so this is our open stress let's say true in the beginning but we will make it dynamic and then there is on close and for this we need some function and let's also give class name sidebar drawer okay i think that's all so uh we need to think how are we going to get all those states uh so uh for now i will be uh making something here so for example on clothes so let's write on drawer close function and all it does um okay uh this is interesting well anyway so on draw on uh close let's create one drawer close and this function will close the drawer so let's say whatever the state we will have we'll pass this state here and we'll use this function here okay this is almost done actually just realize it's better if we do draw it like this and then what we can do is let's just have a paragraph called drawer and let's do a couple of paragraphs actually we can even do s2 for now i will be changing all these but i always do i always test with dummy datas and then change them as i go so so so okay so in the beginning uh we need to have uh some props so we will get some props and for that let's okay let's have interface we can have type also actually let's call sidebar props and uh what we are going to do here okay so uh we will have on click our yeah on click um that will be function and then and then we will have drawer state and that will be boolean okay i don't know if we need capital boolean so basically we will take two props uh for our sidebar uh one will be on click and the reason is uh we will be clicking uh things here and we will change the state from there and then uh the second one will be drawer state and how are we going to get that well we will get props and props will be our sidebar props and uh let's already destructure here from our drops so we will have one click and we will have drawer step and this drawer state uh we will be getting we will update here so as you can see now this drawer state will be true or false because this is a boolean type and we will be passing this as props and on click so okay close the toy actually parents function so because this will be coming from parents so i will be doing on click and what i will pass is i will pass opposite of the drawer state so if it is true it will be false and vice versa i guess you get you get the point so now we have to import our sidebar and i think the best place to import will be home because our app bar is also there so i will basically just copy this and i will do something sidebar also the reason why i'm doing here is because uh if you see in our design we need to have a click handler in our a bar and from there we have to show our drawer or our sidebar so that's why of course i can use redux for that but just for this i thought it's better that i will do everything in home and i will pass on click in a bar and also i will pass on click in sidebar that way uh both the states are done so uh first thing first i will do uh one state here and that state will be [Music] draw a restate and that will be coming from our react use state and initially it's false and with that i also need to have set toilet state okay so now we will have a function here and this function handle drawer state so handle drive state and this function will have um value okay this will will have state so it will have a state and this state will be boolean okay and so what we will do is whatever we get from there we will update that to our state so when this function will be called we will be passing argument that is state and whatever the state will be we will be setting that to our drawer step and with that now we have our dryer state and we can pass our dry state uh to our sidebar okay now let's import our sidebar so input sidebar from basically same [Music] sidebar and here we will have our sidebar and our sidebar will require a couple of props so the first thing is on click on click and these props will be handle drawer state okay so and then we will also have we have draw state so draw a state and this is nothing other than draw estate so now our sidebar has this our sidebar and if you go to our sidebar and we are getting this props on click and that on click we are passing whatever we plus so what is this on click this on click is uh same as handle drawer state which and what we are passing from here we are passing the opposite of driver state so that's all about it and then so this is basically uh we are passing a function to children and children is calling that function and passing argument so uh kind of props props dealing okay so the next we have to do uh something similar in our app state okay so let's go to our app bar and here also we can have interface call a par props and at the moment we have on click and that is sorry that is function and then and then also we have drawer state and that is boolean well the reason why we need a dry stud here is uh we want to do basically uh the same thing that we did here in sidebar so what we can do is we can basically copy this and go to our app bar and here so we can do the same thing well we don't have these functions yet because we have to initialize that and take it from props but we can instead of onto or close we can do on draw a click so that way uh when we click the drawer it it does the same thing it will call the parents function and pass this argument which will be the opposite of whatever the current drawer said it is then the here we do same thing a bar props okay and then here we do basically restructuring of our props for sure when we have props we can also do props dot and you can see dry state and on click we can do that but it's always good to do structure here so on click and dryer straight so now we have on drawer click we have on click and dryer stick and where can we use this on click well we can click we can use that sorry in our menu click so we can have one click here and we can pass here now you see when someone clicks our menu or those hamburger menu in our bar it will call this function and what this function does is this function will call parents function and initially we will be passing our draw estate initially it will be false because if you see here in home we have it false and we will be passing it here we haven't passed it so we have to pass it here and then that will pass so the opposite of pulse will be true and it will go to the parent segment so let's go here and we need to do a couple of thing actually all we can do is basically copy and paste whatever we have from the sidebar with that i think we have some problem okay let's see what's the problem okay so on click does not exist let me do some refresh and let's let's restart our server sometime that also stops and sometimes not let's see if this does or not if not we might need to change a name also because i don't know on click okay so the reason why i was having problem was because i wasn't saving on this a bar and now i saved it and we didn't have any problems so let's go here and let's refresh our page as you can see when i click here we can see our sidebar drawer and that's pretty good right okay all there are a couple of things we can change the mouse cursor to click and then when something is click we can also have some close and we can increase the width of it so a little bit of styling so let's go and now our ever is good and everything is good so let's go to our sidebar and let's have sidebar dot sas and here just like everything else i will also import our base and then do we have sidebar i guess we do so now here let's go to our figma and let's see what we have in our drawer okay um our drawer it has a close button themes anyways so first thing first uh the width is okay 500 i think that's pretty big so let's go and let's give it minimum width of 400 pixel we can give background color to our white and what else well for now i think that's all we need so if we give okay what happened um that's interesting okay let's try to debug [Music] okay so let's debug this component here and okay so what is happening okay so this is drawer this is tab index and where is our okay so width of 300 pixels it's 250 pixel okay and left auto okay so let's let's go and copy this so let's go and let's do the same thing here and let's see if it changes okay so now we have a drawer so the next thing we have to go to material ui and material ui icons and i have to find something called clothes and i will copy this one here and i will go here and then in our sidebar here somewhere inside our drawer so let's let's uh have drawer content so inside drawer content let's see our design first so we have this clothes we have also some margin and then we have all our themes so so we can have our menu so for that we need to import this and then we can have our menu and i will also give it a class name sidebar close menu and we don't need that we can close it here and then we will have our rest of the things for sidebar so themes and other stuffs so we can do sidebar and we can give [Music] what are those menus let's call it navigation although we didn't have navigation but let's still call it and i will give it a title called theme here we want to move this towards the left or right actually and have some margin or padding however it is so the first thing i would like to do is we go inside our drawer content okay um [Music] here sorry so let's go and if we go to our airbus we have padding top 10 pixel so let's have a similar approach also here so i can put here padding top 10 pixel and then i will have display actually text align so we can do display flex then clicks direction column and then just t [Music] now align items clicks end and let's see what happens ah so this is exactly what i wanted uh that's going good so i want some um padding so let's also give here padding to the right around 100 pixel okay something did not oh well we want that to our content so now we have 100 pixel looks like that's quite big so i will only do 40 pixel and that's pretty much good and also looks like our padding top is not working so padding top also i will keep 40 pixel let's see if that's too much okay that's a bit too much um so that let's do 20 pixel i'm not doing a pixel perfect design here so and then let's go to our sorts um actually our app bar and in our a persons we will get uh okay so this is what i exactly want so it's the same size so inside our drawer content i am going to do this hopefully that will increase our the size of outdoor yes that's good and also i would like to do a cursor pointer so that way when we are hovering here you can see that we have this cursor pointer and then on the next thing is we have to go to our bar no actually our sidebar and do we have on drawer close here so i clea i use this function and in our close icon i go and i do on click and then i pass this function so that way now we can close this by clicking this and then the rest is just about designing all these colors so first thing first let's go and copy this navigation and that will be under this so i will have a little bit of margin top here i will have around 20 pixel or that can be 2.5 ram actually it's always good to use ram instead of this and this will be five ram yeah well these big pixels are okay but this is smaller it's nice to have it and i think i can have padding right at least one ring and then what else do i have here in our design okay so then we will have all our links our whatever these are okay so this is pretty good i guess so yeah we have our themes and we will have all our themes loaded down there so um let's go and let's so inside theme here i would like to well let's do just on order list and this will be a list with how is it the name there's 24 so s2 and so s2 and what was it there so the first one is blue blue and then we can have spam and let's give it a class name of sidebar blue box and we can make it dynamic later but this should do and now if we go back to [Music] our we have something called blue that's fine and we need to do some styling there so the first thing is inside there we have ul okay we have ul and inside ul we have list so now let's duplicate this actually let's make three of those we'll change the color later but for now let's just do it hello i don't know if we have that or not but anyway and then so how we want we want them to have 70 pixel and margin button that's almost nine ram and we can have display flex and airline item center and what else and then okay this this should be pretty good let's see okay we have pretty good so now let's create box and if we go here instead of box let's just call sidebar change them sidebar color box or nav box whatever let's just put color works i'm very bad at names and then it's we will be giving color for example for this we will be giving blue and so now all we need to do is we need to install this color box so let's go and inside our here okay we have a bit more than needed so let's see how big our color blocks are 104 and 60. so uh width is this to 80 pixel and height is less to 50 pixel and we can do margin lift to ram so let's see what happens okay of course they are moving to that side that's good but we don't have any color so let's give background color by default to our primary just so that we can test you test them as you can see they are pretty okay um and i guess i need to do something here justify content and that should be flex end okay so we need some uh margin there and i don't know why that's going there but anyway what we can do is margin top to ram and we have a we need bit more there how much we have in our design 62 so something like a trim here and this is bit too much so i will decrease them and let's see okay looks like pretty good except i don't know why it went there and that is where do we have our theme okay so the navigation uh what is it with our navigation padding right um i don't know if this will do let's see okay that's good so you can see we have all so if we want that's the blue color we can copy all blue is basically our primary so uh we don't even need to think that much but if we have primary then background color is primary well let's just write it blue and then let's replicate it three times so what are the colors so green and we go here and we do it green and we have our green color okay so with that all we need to do is we need to do green and pass green here and red here and this is red now if everything is good okay we have the color but we don't have the color values interesting and why is that well i exactly know where's that or maybe i don't know okay let's see we have blue class green class red class and they are inside our link right or ul so let's copy these and put it inside our ul oh yeah and you can see we have our dryer done so now we have our dryer we still don't have our click handler and everything but we will be dealing with that when we will be actually changing our themes but for now our closing works we still need to give a cursor here but other than that i think we are pretty good yes all right so now let's go to our f-bar and somewhere here icon we need to give it class name and let's give it cursor and we don't have anything called cursor now so what we need to do is let's go to our base and let's write general style overrides so now when we do cursor all we can do is cursor pointer okay well let's do this cursor pointer and then we go hit back here and we give it cursor pointer so this is almost like writing our css library so you can see that we have cursor there we have cursor there so everywhere we want cursor or even here later if we want we can change it for example let's say we want basically the same thing in our shopping cart item then you just pass that class there and this will be also cursor this will be cursor okay so with that our drawer component is also done if we go to our design then we have all these country cards for sure we have also searching but we have our county cards and we need to render them so that is what we will be working next okay so let's uh okay so let's build our next component and that will be our you can see our application is already getting bigger and bigger so we go here and here inside we will have country card component and conjugate dsx okay so let's go here and that is good and as always i think you already know now i somehow always like to change it to an error function why i don't know i just do it and also i always give class name immediately and this will be our country card all right now let's go and let's see a little bit how our country card layout is okay so we have a country card we have some shadow and then inside our country card we have pretty straightforward uh everything so not much so what i will do i will have flag then i will have a main title and also the reason so this is a country name and country region and then i will have primary button so let's do it and i will of course have a wrapper so i always do something if you have already noticed uh the reason why i do is this way i always get some room for okay so for now we don't have anything and alt so this will be country name and that's it and then we will have we'll have a title so that will be let's go and check the font size so 24 that is our s2 so our s2 and for now let's write okay and then this will be our um country card name and let's replicate that and this will be our country card reason and the reason is now asia okay that's good and then we will have a button and we will be importing button from material ui and we will go with button we'll remove this we'll remove this and button [Music] label will be what's the label it to cut and what else do we need okay well what i can do is i can i don't know why it gave me warning but okay so we have it to cart and i can give it we didn't have our primary cda on it but we will do it soon so i think this is all and just for uh let's go here less afghanistan flag you know if i go to wikipedia i copy image address okay this is what i want it and then we go to our figma and here we have 294 and 175 and let's do something similar later but for now this is all we need in country card then let's also create country card dot sas file and before i forget it let's import it immediately okay and then this is why i like to work with uh two screens uh because so that i can see all this side by side but anyway now let's go here and like like everything let's copy and paste it here and then we can go and do our country card and inside country card we have a wrapper an image and name and reason and so on so first thing we have wrapper and then we have not that sign please we have a name and we have reason okay so these are all and we will be fixing primary city later so i think all i need here is black and here all i need gray i guess that's all about it and then inside wrapper i have image and maximum width i don't know if i should do maximum with 170 pixel and what was it and no 290 for 175 okay let's do something like that 294 and maximum height 175 pixel i think this is not super good for responsiveness but we have not done responsive thing yet so we might need to change it later but let's see so we go back here and now it's time for us to go to our home component here we are okay so this is the thing i want to get rid of actually um okay anyway i don't know what i was thinking so let's go and country [Music] card from components country and country card and that's it and then we cannot render country card directly here so let's do uh something called countries [Music] okay i'm not so sure if so if you see we have our home component that has a bar and cyber and then we can have everything inside here inside home or we can also create a separate component but for the sake of simplicity i will go and i will actually like to bring it here so inner contents and here i would like so everything all the cards and everything we saw will go here let's go and use our okay well we didn't have parameter yet no need so now we can render country card and at least let's do it four times okay this is going to be interesting button is never used and that's fine and then we will go back to country card uh let's do so that caller is primary uh let's see what we will get when we have a primary button okay so this is what we get when we have primary button okay at least we have some countries list here and i think it's time for us i will remove this from here for now and let's go back to our design file and let's see so from our flag it's 47 so that's almost six ram and here is 20 so let's go back to our county card and here in our image okay let's not do it here let's do it in our margin top that's six frame actually five ram will do the job and here i will do margin top and that is 2.5 rm okay so that should do the job and let me save it and let's go back and see and we are pretty good somehow this is not visible but that's fine and then the next thing uh our button so it's 54. okay so around 6.5 ram so margin bottom okay so that's good now let's uh go here and the size of our country card with is 365 and let's go here and let's see it's all kind of nut so we have 40 so let's go here inside our apple and let's have padding of pipe ram and then we go to our county card and what we should do is we need box shadow so how are we going to get boxado if we go here and if we inspect then we can see that we can copy this box shadow and let's go here so that's our box shadow and background color is actually well we shouldn't be doing this hardcoded value but we are not using it in many places so that's fine but the best practice would be to copy this box shadow and this and actually you know what let's go let's go to our base and here let's have this value xbox shadow then i can copy this and i can go here and i can paste this and also we can go and all this is kind of bad practice but let's go here and do okay so then we have our main white which should and instead of this we paste this so with that let's go and see we can we see any bug shadow um doesn't look like anyway let's go to our home somewhere uh in our i don't know who it is but we have some thing going on um so this is our home and we have let's go inside our f bar we have that's good okay just trying to understand from where we are getting this okay that's okay that's coming from our sidebar so let's go to our sidebar and somewhere there we have background color and padding that needs to be removed and oil next thing is this color so somehow we don't have this color yet so let's copy this and let's go to our styles and bass and we have black light we have white we have gray um what color this will be this is actually we already have black light okay my bad sorry so here instead of gray i should be using black light so that yeah that's pretty good now okay so the next will be our button so let's go to our base here again and let's go somewhere here buttons style so the first button will be let's give all our button class button and inside there let's have primary so this way we can have everything we want in the button first so that is font is 24 pixel for pin 600 that's medium so and then the border radius is it so let's go we don't get anything and it is because we have to do something here and that is it should be button primary so if everything is all right we should be getting something we did not okay that's interesting so why is that so we have button and okay let's see if so first we need to pass it button and then button primary we got something working here however our background and things are not working so let's go here and like everything let's make it important and also let's let's make this also important and then we can go here and border radius was it eight pixel yeah well now we kind of have something still our box shadows and those are not correctly there and let's go and inspect okay our country card is pretty big we have to also think about that and we have box shadows but somehow we can't see them ah it is because we have our background color blocking our box shadow so in that case let's remove this and let's go and check okay so we have our box shadow we have our country all right so for our country card let's also have our maximum nut width but height and that will be 350 pixel again when we do responsive we have to think about minimum and then we have to think about uh with hundred percent but for now we are not thinking our responsiveness edge so this is pretty good all right so we need to make our button full width and also i think uh we have some problem with our button size is pretty big i would say so first thing first let's do this and i don't think we need any pairing because material ui does that and we need to it important here and also let's do some transition and we can do it for all and that can be 0.2 second so this way when we have transition of 0.2 seconds later when we do remember hovering then we can have our background color um basically if you remember we have our primary hover and i think that is all so now we have a little bit of over maybe not uh okay it is because you might have guessed we need to also do there okay now we have a little bit of our color and also some sort of transition and we have this click ripple effect from material ui however one thing we are still missing and that is our button is not off for width and although i did uh inline block or i also did block somehow this uh did not do much and i think the way to fix that will be we wrap we wrap our button here with country card and then i can do action and then all our bottom component we can move it here and let's go inside our here and so what did i do okay seems like i zoomed in and then here was it accents no it was just action and here let's do with 100 percent so and that still did not do our job okay i don't know why um [Music] do we also need to do with 100 here yes so that did the job with that our card component is also done so we can go and here we can mark it as done however we need to have our uh card data like this so for this uh let's go and let's modify a little bit of our home component i will close everything and i will go back to our home component so as you can see we are rendering everything inside home contents the best approach will be instead of rendering everything in home contents let's create another component and the component will be country list and country list.tsx [Music] okay so like every time i'm going to do this and this so now um let's import our country card here and let's remove everything from here and let's paste them here and here let's have class name country list and let's save these let's remove country card from here instead let's do country list and here inside our inner content what we can do is we can actually even remove this and let's render our country list so inner content country list result everything so basically everything you see here even the sorting and pagination and everything will go inside that component that way we keep our home component clear and if i do this and if i go back and if i refresh then you can see it's basically same thing it's just that we have now this in our separate component okay and i will also like to do one small thing it's not necessary but still i want to do padding right to ram padding left to rim as i said it's not necessary but just doing so we have some space here even when the screen size is small and now uh let's go and okay so inside our country list um i am going to copy our country card and go and paste it here and i will change it to country list and definitely i'm going to change it to country list and everything from here will go away so now we have sas file and we have to import it here okay so that's all good there now um [Music] okay so we have to do a little bit of planning here so first this will be sorting then country list and then pagination okay let me comment this out somehow my shortcut is not working for comments so i have to do a manual way and let's what we do is here sort so that will be there and here we will have country list cards and then we will have country list pagination okay pagination so we didn't do anything here for now but here we will paste all our country cards then let's go and let's do a little bit of styling for this so now if we go here and so first thing first we need some sort of so let's go here and let's have margin top of five ram that should do the job and then let's come here and let's do flex and this is spaced evenly and with that tada you can see we have this however i just realized we need to give um i think it is better if we go to our home um now it's better we go here and here max width if you remember we have a property called max width so that way we are getting max width however we need to also give actually let's do that margin top is five ram and then auto and bottom for now is zero and auto and let's remove this i guess that is way we will have it okay that's good kind of good kind of not good in design it was aligned with everything so why is it happening let's go to our country card and let's decrease our maximum width and here let's do 150 and this also 150 so at least our cards are smaller in size now and [Music] well this looks pretty okay for now we'll fix our css and inlining later because anyway we have to do business and sorting and everything so this is pretty much done the next will be api data fetching okay so uh to face api data we can close all these also this then let's go to our redux that's where we will be fetching our data's our api call so i will go inside redux and action and contraction so uh now before everything else i would like to import couple of things for example uh i want to import something sorry something from redux and that is dispatch and also we need uh axios and we have access all right so with this two we need to create a function actually action function and that is called page countries data so and now what we can do we can do export function page countries and if you remember we could have done everything here but we have all these separate things actually this is not even it's all countries it's actually countries loading or dispatch loading it's kind of bothering for me that why i didn't write this page country is loading and well the thing is we have to do it everywhere and anyway i think it's better we go here and let's see if we can change this his country's loading let's put this loading here and page all countries this should be loading action and here i should also have it loading action so that's good there and then i need loading actually i don't need this because it already added there because all this does it just loads and i should do page all countries loading and that way this makes more sense then i think i have some problem um okay page all countries loading action and then actually we are not even using that action at all so let's remove it from here then we need to also modify a little bit in our reducer so we we need to have loading here and this will be also loading now this makes more sense sorry i did not think about that yesterday but it makes more sense now that this is just for loading and this is success this is and this here we can do page all countries yep and it will return dispatch so then we will do excuse call so that is axios dot we will do get and url will be we will go here and it's all so this is the url so let's put that and this will return promise so that then of course we can also do async await but this is enough we will have response and [Music] when we will have a response let's do something with response let's do countries response dot data and we can dispatch what we can dispatch we can dispatch speeds all countries success and if you remember it expects something here it will expect these countries so we will be passing countries we can okay well then that is good and we have to catch also error and so when we catch error let's do i think it's better if i okay so when we have error then what we need to do is we need to fix all countries failure and if you remember we are expecting error and that will be error from there still i think i am missing something from there this this okay what is it expected ah okay one more here so what happens we will be calling this face all countries in the very beginning like when our page loads and then that will do a couple of things first that we call axios request and if everything is good we will get response and we will be saving response to data that will be countries list and we will be dispatching this uh action and this is basically this that's why i was telling you that we could also do directly this here and then instead of having this function we can also directly do this here the reason why i'm having it here is in future if we want to use it in some other places it's much easier to use function name rather than all these types and passing payload and everything that's the only reason but is not necessary so now what we need to do is we need to paste these countries we have to dispatch this somewhere so what will be the best place to do that i guess uh the best place to do that will be in our case um home because uh that's where we will be calling a lot of things so let's go here and let's import that action so we will be importing redux and accents we don't need that and then we can do page all countries so we have that action here and we need to import something from redux actually react redux and that will be used dispatch so somewhere here let's initialize these pads so [Music] basically this is just a function now when we have these pads we can always dispatch this action and because this does not require anything as arguments so this is very good and now where are we going to dispatch well we need to call dispatch heads all countries when page loads so for that we need a hook and that hook is use effect and so what happens is if we pass empty array this week will run only once when the page runs or when this component renders and if we pass all the dependencies then it will also run when all the dependencies takes place so in our case that will be dispatched because every time this patch updates that will dispatch and all we need to do is dispatch and what we need to dispatch we need to dispatch space all countries um i'm not sure okay well anyway i think this is good and we will know that if everything is good or not how will we know that let's go to our react application let's go to our here and as you can see we have page country success and if we go to our state it says undefined interesting it is successful however it is undefined actually not so if we go to our country reducer here then we have all the list of countries interesting so we already dispatched our countries list so a little bit work through what we just did inside contraction we have all these actions from yesterday i just changed the name because all the stores is loading and then we have now when this file runs it will do the access call will get data and then if everything is good it will dispatch this if we have any error it will dispatch this and in this case it looks like everything was good so this got dispatched and we are sending all this response data all the list of countries that we are getting from api here and when we go here so and this will dispatch these redux reducer even trigger or type with this payload which we are getting from our axios and when you go to reducer so in the beginning this will be pasted and then actually i'm not sure if that will be faced at all okay i think it won't be so uh what we can do is when we are making this call before excuse call what we can do is we can do the same thing dispatch and in the dispatch we can go loading okay so with this when we call this function first this will run this that means it will set our loading to true and then the exchange call will happen and if it is successful this will run if it is failure it will run and then depending on here if it is success it will pass all those datas from our exchange call our api call to countries and we are calling that in our home so we use this use dispatch redux hook and what it does is it helps us with this dispatch we can dispatch all our redux action if we need to pass something we can also pass something here okay so and everything is working good and we have our data so let's refresh and let's go here and you can see we have first loading so it sends loading to true and then we have loading to false and it sends data to actual data actual countries data so we did this done and then now we will be rendering actual countries okay so that's our next process so for that let's go back to our country card and if we go to our components now here in our country card we need to have some type so let's say type country card we could also do interface and here we need image url that will be string and then we need name of the country that will be also a string and then we need reason string again and what else do we need hmm for that let's go back here and let's go to our countries state countries countries we have lots of lots of countries so the name it looks like we don't have id um this is flag so it's flag not image url so let's go here let's change this to flag name reason for now i think this is enough if we need more we will be getting more from there now let's do these props and country card props actually if we want we can also do something like this which we didn't do before and here we can already destructure remember before we used to do props and then we used to the structure there but now we can already do it here and then we need to change this flag to our flag these will be sends to name and we will also change uh what is it name here and this will be our reason okay [Music] just increase i will also pass whole country object here just in case i don't know if i need that but okay let's pass country object and now if i save this we will have problem because in our country list quality is here we are not passing all the requires so we will have name and we will have reason and also we will have flag okay so you know what we should do instead of passing all these here and country object what i can do is i can pass all the country here so what we need to do we need to import couple of things here one is is dispatch from react redux and another is use selector and also i will be importing our page country actions and let's have our page all countries here we will be doing basically the same thing we did so first get all countries from redux state and also let's initialize dispatch so okay and fits all countries this is basically the same thing we did earlier um we can actually go to our home and we can copy this exactly like this so okay so this way we will get all our country list here in our country list component and then we need to get all our components so we also need something called state and this will be also from our types okay in our types we have something called ap state okay now how can we get our country list state for this we need to do countries and okay for that we need to get countries from something called use selector and this is also redux hook and we will have a state and that will be our app state and now you can see the magic of typescript country reducer and inside contributor we can have countries similarly we can also have our loading status and all we need to do is is loading yes [Music] okay so now we have our is loading we have our countries so what we need to do inside here what we can do is check is loading if that's the case then i can do loading and [Music] if not is loading and we have countries then what i can do is countries.map that will give us each country and all we can do is render um let's just country and then we can do the key that will be country.name well it will say it does not exist we can give it any um okay well let's just not give any key so what we are doing is we will get our loading and countries from our reducer contribution state and if we have loading it will show loading we can even make nice animation later but for now this is all good and if it is not loading and there is some data in countries that will be all the list then we use countries.map and that will give us its country and we will be rendering country card for each country and now we can save and let's go back and here you can see we have a list of countries okay they all are going to so now when we refresh you see it's loading and then we see all the countries again if i refresh it's loading and then if i refresh loading and then we have now we need to do a little bit of styling our cards are here all good however they are not the way i wanted them to be so let's go here and here i think i need to do plex wrap and wrap what happens with evenly okay so there we go uh we have something but still i would like to do this space between and that should okay inline it but in our design we had four columns but there we have only three okay because if you see our design is pretty big the maximum width for our design was 1681 and in our case the maximum width is not that much so that's why we have only three and it's pretty good okay so red door actual countries this is already done and next is we have a to card action and reducer okay so now um let's go back to our code here we are and let's go let's let's close everything else we don't need these and we don't need components for now and what we need now is just like our country reducer we also need something for our cart because the next thing we are going to do is our card so in our cart reducer we need a couple of things and also if you remember we will also need to define types for these for example all the reducer case type as well as accent type so we will do that later but for now let's have initial state and our initial state will be that will be just card uh we are not going to do any loading or or error handling for cart just because if you uh see in our design then it is not visible until and unless we click it so we will probably only click it when we have some data there uh kind of lame excuse but still let's not do it this is nothing big anyway all you need to do is just copy the same style from here but i will be having only card and then let's go and let's create cut reducer function and here we will have export default and the name of the function will be cart reducer and this will be a function and just like every reducer it will also have a state and that will be our initial state and it will have action and now i will be giving the action type any but later we will change this action to our card reducer action and this uh initial state again not okay so uh this state we will change later also to our card reducer state and also here so we'll define types later okay we are still uh getting some problem so let's see what it is okay export default function we need to do probably something here so the first thing we need to do here is we need to have switch and that sorry that will be based on action type okay i'm getting some problem did i not dispel this right okay now the problem is solved so there are a couple of things we will be doing here but the first thing will be we will be adding country to cart so we need that and again 8 country 2 cut we will be making a constant for this and also type declaration later and in this case when we have this stage let's go let's go and new country or we can also name just as country we will be getting it from action payload and then when we have this we will return what we will return we will return our state although we don't have anything at the moment except a cart array we will still uh written or we'll do this thing so that in future if we add anything else then it will not mutate them so and for our card uh all we can do is we can have everything else and we can add counter here so this is our not country sorry well actually let's just send this to country variable so what happens if you remember uh when we dispatch our action and call reducer we'll dispatch two things one will be action type and then we will be also passing payload there so the payload will be uh country object we will be passing whole country object and uh that country object ah we will be if if our this case will match in that case ah we will be spreading our state and then inside our cart array we'll be passing whatever we have in our cart that means if we don't have anything in the beginning it will be empty and then there will be one extra country and then so on so basically it's more like almost doing same thing as card dot push and we are passing country here and then the next case we will have that will be remove country from cart and then that case will have also similar thing so the first thing we will be getting also country from payload so let's do our temp card and what is our temp card well our temp card will be everything as we have in our state.card however we will do some filter and what we will filter is when we filter we will have each country inside and we will return all country which is not equals to our country here or let's just give this [Music] payload country and then we do so so what it does uh this uh will create a new array called temp card and that array will be a modified version of our estate card array and there we will be returning all country except the country that we want to remove from our card so that way our new this stem card will be a array by removing the country that we want to remove and now let's return our state and then here our card will be basically the new array of our tm card so this way now that country which we want to remove will be removed and then last will be our default state so now our card reducer is almost done except we still have to do a couple of things and the first one is we have to go here and we have to import it and that will be from card reducer and we can combine it in our cartridge so that is good there now if we go back to our page and if we open our redux dev tool then you can see here we have now two reducer state one is card reducer and another is our already existing contribution that's very good so uh the next let's go and let's do a little bit of type definition so we can go we can actually copy and paste this country type and call it card types okay so the first thing we need our card reducer so the first thing we want is we want our 8 country to card let's go to our card type and let's call this and then another one we want is our remove country from cart so let's copy this and also let's change this and i think that's all we need we don't have loading and anything then the next is instead of country uh it will be cut reduce straight and instead of we have card and we don't have loading and anything that's fine that's fine so we'll have two actions at least one is add quantity to card and another will be remove country from card so the first action will be a country to cut action and that will have the constant it continue to card and if you remember our payload will be our country object so for that i will go back here again and you see our action type will be this type and the payload will be our country object so that's what i'm i'm doing here and then the next one will be remove country from card remove country from card action and that will have our this action type and then the payload also will be our quantity object at the moment we are only using object but it would be nice if we have something called country and there if we could do basically let's say name string and name string and we just need to go here and whatever we have it here we can go and modify this for each country for example our name is string and then we have area is integer or number and then we have languages that is array if you want to do that feel free to do actually that will be a better practice so for example our flag will be string and then our region will be a string and then we will have our languages that will be an array and so on so and then what you can do is instead of passing this payload object we can pass this country and also we can pass country here but i will not be doing this you can do it i just showed you that if you want to do it and probably if you are doing that then the best place will be inside country types and here that would make so much sense you can even pass inside this country's area that country type let's pass these actions as our cart actions and i will be removing this part from here and then this will be our card action so i think with this our types definition is also already working okay well i need one more and that is export type card reducer state and if you remember this is nothing more than array so now we have all our types definition completed then let's go and let's import our card reducer from cut i mean card type card reducer type from our card types and also let's export everything from our card type and then here we will have card reducer and we will call card reducer state okay with this i think our type definition at least for now is done so uh what we can do now is we go back to our card reducer and here we will import couple of things from our types and types so the first one will be eight country to card second one remove country from card and third one card actions okay now what we can do is we can remove this and change it to our constant variable and also we can remove this and change it to our constant variable we also need one more thing and that is card reducer state now if you remember this is our initial state and this will be our card reducer state and then also this will be our card reducer state actually if you want you can also give it to our function and that will be also our card reducer state and now we change this type from any to our card action and okay card actions and that's pretty good so we are getting some problem here object is not assignable to type area interesting and i think it will be same problem also here okay so we have some problem here and it says that object is uh not assigned so in that case what we need to do is let's go back to our types so let's do one thing uh remember what i was telling you before so let's go and do card country type and that type will be just object and here let's pass cut country so this only says that the card will be arrayed but inside we will have card country and actually this all we can do card country and also this all we can do card country uh even though we have empty object that is still fine and if you see now our warnings are gone because it understands that this car will have these types and that is all good here because if you remember here in our car types here in our action we are saying the payload will be cut country and our card will be array of card country so now our types understand the relation between them and that is all good so the next uh we will be dealing with will be our actions so let's go here we can basically duplicate our contraction and let's go here and let's change it to card action and then we don't need xu's and we also don't need dispatch and let's uh remove all these imports and let's change it to things that we want uh so we need first one is add country to card remove country to cart and then cart actions okay that's all we need and then we don't need all this ah okay let's delete all those and now export so first thing is it at a country what is happening country to cart so that will be 8 country 2 card and we can use card actions and it already shows that we need some things there and we will need country and that will be object actually we can also take a country type from there let's see if we get error then it's better that export type okay it's exported so let's let's bring that card card country and that way here we can pass card country type so the first one is our type is eight country to card and our payload will be our country so the country will be passing when we dispatch this action and then the next one so remove a country from [Music] from the card so basically we can copy the same function and let's just change name here remove country from card it will still take country object and the only thing we need to change here is remove country from card and with that our action is also ready so now we need to uh dispatch these actions to add country to cart or to remove country from car that's all good so now if we go to our to-do then okay so this is done okay so the next one is show card items uh before that we need to we need to somehow okay we are getting some problem here again so we have to attach our a2 card action onto this button so let's go back to our country list that's where we have our country object for sure let's close all of these for now and let's go to our component and here we can also uh do the action here let's attach on click and that will be our function and we will be getting on click from here and that's all we don't need to do anything else and then what we can do is uh in our 8 card we can call it on click and then all we need to do is call that on click function we will be getting from our props um um okay so that's all good however we don't have our on click function yet so we need to go to our country list and if you remember here we need to pass some on click function and what that does okay that's the interesting part so so so so what this on click does is it will call that function so let's we have our dispatch here we have everything so we need to go here and then here we need to bring our aid okay what happened all right i just remember that inside our redux action we need to also export everything from [Music] card action so let's save that and then let's go back here now we should be getting eight country to cart here and when we have that so the function we will be passing here will be dispatch and then what we are dispatching we are dispatching it country to cart and that will be expecting object and that will be this country object so whatever the country we are passing that will be there and if this is all good let's say and also let's save this so if you see that we are passing on click function here from parents and so the children will trigger that and that when we click this button it will uh pass it will fire this on click and that one click is nothing else than this function here so i was for sure we can also create a separate function here and do it but what this does is it will dispatch this 8 country to cart action and it passes whatever the country so we are getting its country for that uh our country card um by mapping our countries array so if that's all good then let's go back to our action and now if we see here state we have our cart item empty so if i add this then our card item should have something and this is still empty okay that's interesting and why is that happening i don't know let's go and check our console and let's click something at least we are not getting any error each style in a list should have unique key props that's fine and we can do that so let's go to our country card and somewhere here we can do key and we can do name so i think that should solve that problem so let's refresh okay we are still getting that thing but why our a2 card is not attached um let's see let's see so okay i'm not calling this function i'm just giving the name of that function but i'm not calling and actually i think i don't need to even do this at all probably this should do so i was confused between those two um okay i'm having some problem all let's do what i was doing before at least that is not complain okay so now let's go and if i click something here am i going to see something and we got it that's all right so now let's go and import afghanistan and then pandora so when i go here and we go to our state and we go to our cart and we have all those three items so all in afghanistan andorra that's good so our aid to cart function is also working the next which was actually in our list so our so we are adding things to our cart however we are not doing anything here and that's interesting because we need to handle this number and so like as we add something to cart and for that all we need to do is we need to go to our and let's let's let's import few things from react redux okay so the first thing is use dispatch and for now i think that is good enough we don't need not use dispatch sorry use selector and for now that's good then let's also import our state from i mean our types so types and that will be our every state type so inside here let's go inside here and let's bring cards okay so what we do is const cut all so the card will be we use use selector remember to get data from our state this is a redux hook and our state will be our app state and now this will show us what we have we have card reducer and we have card so now we will be getting cut from there and then uh now when we have card if we go down somewhere here and we can what we can do is if we have cut then we can do card dot length okay now let's go and see if that's working as we want if we repress this is zero you add something it shows one you add it shows two you add it shows three however when we click here we don't see anything because that's what we have to design but now at least cards are adding properly that's good so next thing we need to think is how to design this card menu item so that is what we need to think of so i'm here inside material ui menu and this is a menu so let's just take this and what we need to do we have menu items and we have menu and then i don't think we need even menu items and how many works is on click handle click so there is open state and on close and menu okay so all i need to do is import this menu item okay and let's go here and [Music] where are we going to use that menu well for now i will i think we will create a separate menu component because that makes more sense but for now i am going to have menu here so this will menu to do make separate component and make a separate component so let's go here and let's import menu and then we will have we will have our menu and inside menu uh all we will do we will map our cart if we have cart we will map car dot map and that will give us country and that country we will okay let's actually use this and all we need to do here for now is we just print the name of that country so that is country.name and that's all we need to think about and of course it will complain so if we just give the type name any cannot find country okay let's see okay so that's all and we need to pass couple of things uh in our menu we need open so let's let's go here and we have open for now let's do true and we also need couple of other steps okay open is missing so we have open and this is all good let's do here that if card.length so if we have something in our card our main will automatically open and cut that length is greater than zero then so now i just did a quick fix here so if we have our cart and the length is uh more than on zero so at least one and then this menu should open automatically and print our country name that's all uh we are doing so let's see what we will have it so let's go and let's replace our page so in the beginning uh we have zero so if i add something we have one so uh looks like our menu is not working the way we would like to so i think uh what i will be doing i mean i can see that there is menu somewhere it's just so for example if i add something you see that it's somewhere here but that's not how we want it so i think um the best approach for now will be to create another component and that will be um okay so let's call it card menu and card menu tsx all right so um let's copy this and let's create a sas file called cut menu okay and then inside here we do this and then as always before i forget here we will be rendering menus and do everything here so let's give it card menu and that should be class name and that's all okay so now um well we can already initiate card menu here we don't need to do anything it so let's go here and what i will do is i will completely delete everything here inside menu and also i will remove these from here and what i would like to do is import our card menu so let's go here and from our cart menu and card menu so now we can do is we can call our card menu we already did this so okay so this is good however at the moment it does basically nothing and actually i'm not sure if i want to do it here okay well let's let's do it here and we might need to change the positioning and all so now what i want to do is i want to go here and okay so let's copy everything from here when i say everything i meant everything so let's go and inside our cart menu i will paste everything here and then i will modify few things to match it so the first thing is everything inside this div okay so i am going to cut it and paste it here and then so that's done here and then there are a couple of things for example these so i will delete these and i will paste all those functions and everything before return and lastly i need to i need to take these we already have our react so let's go here and let's paste it okay so i think now we have everything so this menu should be working okay so let's go to our okay so as you can see it added this one and we have our menu so at least we got the thing we wanted of course we will be modifying everything here so now let's see how this works okay const open is boolean and that is anchor element so handle close and handle click we don't need that and there is handle close and everything let's keep everything like that and let's create some props here so type cut menu props and what we will get from here uh we will get countries no we will get everything from cart remember that's our array so the list of items or country we will be adding and then i will also like to have on click and that will be function and i guess for now that should do so uh what i want to do is this will be cart menu props and from here i will have card and on and let's also get menu open that will be boolean state and then let's also get anchor element so we will have this and let's assign those so menu open will be boolean and then our anchor element will be this it will be type of null or html element so with that we got everything we need from there so the next we want is we need to actually cut this and go to our f bar and somewhere here in our f bar maybe here cut menu open related state and functions we might need two functions so let's go and let's paste it here so now we have handle click and we have set anchor element and everything that's good and these we can call it menu open so now we need to pass those here in our menu item so first thing let's pass our cart as cart then on click and that will be our what is this handle click so i will change this to handle card menu click and i will copy this and i will paste it here and then okay well we'll fix that later then another we have is main open so this will be also our menu open and then last one we have anchor element and we will be passing our anchor element from here so now this is handle card menu click actually this is close but so on click if we go back here and handle close what we will do is we will call this on click and pass it not here and then here we will have anchor el that's good and open we will have here main open and then i think the only thing is this is card and we are not using card 8 but card is an array that's good but somehow we are having problem here and what it says okay so the reason for that is we can do this and that's all because it's a with objects inside and let's go and let's save it here and i think we are all good okay we have something in our cart menu it says there is button defined and it's not used so okay so looks like this is all kind of sorted out so the only thing we need to do here is we have to call let's go back and let's see how it was here so there was this button and on click it was handle click and what handle click was doing it was taking event target and okay so let's just go here and we need to attach that to our shopping cart item so that will be our handle click here and the same thing we also want to see when someone clicks our counter okay so we are getting some problem here and what is that problem okay for now let's remove it from here we will fix that later i know i keep on saying everything later because if i get stuck to that i cannot move on so now let's refresh and and when we add something and when we click something you can see that okay our own close is not working uh we need to see how it was here okay so henry's handle closed it was set anchor null so okay that it was and what is here with us so okay let's do that const handle okay we can actually just copy from there and we can just go and handle card menu close and let's copy this and somewhere here we can have this menu here and then when we go inside our cart menu we have on click and we don't need to pass any null from here so i think now if we go here it closes it opens it closes it opens that's perfect now we have our menu done so the next thing we need to think is um let's remove this menu items and that means we also don't need it from here and then we already have our card items so that's not a problem so let's go to our figma design so this is our card design so we have a flag and country name and delete icon and we have to dispatch uh delete action from here so let's go and let's start designing our card item i'm just thinking okay i think let's go here and let's give it card menu and menu let's just do menu here and then inside here let's go and let's see what is the width i know it's bit bigger then we need 7 5 1 but i think 500 will be pretty good for us max with 500 pixel list with 100 this time and background color we need main white okay oh what happened this is funny we got something here you know when something doesn't work then you have to go and use your old friend okay let's okay the reason why we have that empty is because we don't have anything at the moment so let's have couple of yeah this is just a placeholder for now okay so at least we can see something that's good now let's go and we have no idea what's happening here we have pretty big one but size is good but i have been trying to fix this somehow also giving some position absolute and somehow nothing seems to work okay this works so let's give it 60 i think we have eight today and right we don't want anything so that's fine let's copy this we go back to our card menu and i think i can paste it here let's see if i repress it will be still there or not and it is still there that's pretty good now we have everything in order so all we need to do is just give it our design so first thing is our cart item so let's go here in our cart menu and inside here let's remove all these things and first one will be our cart items so cut items and we can [Music] i mean we don't need this and then we will have our items so and let's okay so our item will be card menu and menu items so inside here we will have each item so that will be its country each item country and that will be got menu menu item all right so this will let it go in the loop and then here what we have this will have image and then alt so and then what else we have image and then the name of the country so here so the name of the country how is it this is also adds to so let's search to s2 and let's have country name and we have remove icon so for that let's go here let's search material now material ui icons and here we will have delete and which one looks similar to our design well none of them okay well let's just use solid because we are using solid icons also in our cart so let's just go here and here and then this sorry delete icon okay so now we need to go to our cart menu items and let's go here okay and what we need to do there let's see first thing let's have margin top margin top and that will be also let's go inside our menu and here we have yes to let's change s to color to [Music] black light and then so here we give six ram and then so this is now cut item so menu item and inside okay we also have as you can see we also have single items so that is menu and only item and this will be display flex align item center and [Music] well let's not do justify content space between and let's see what we can see with this okay we don't have our image yet so you can see we have something called card items and country name and no flag all that's okay uh we still need to do a couple of things so first thing first here in our menu if we go and if i like 49 so let's have 48. so [Music] so let's do it here then and that did so we have our cart items and now we need a flag and all these so let's go here so inside our cart item menu item we have image and i will give it flex 1 and then we have our s2 by the way let's also give our s2 the same color as it is there this will also this will have flex 3 or actually even 2 will be enough then let's give it class name card menu delete icon and let's take that here and here so for this i give plex one and now if i save this and if i save this and if we go here you can see that we have flag we have these and we have this okay they are still not properly aligned but something there and now if i go to our a bar [Music] okay so what's the color of our delete it is gray so basically same black light so i'm here inside okay i need to get something from our a bar okay it is because we don't have that color black light and i think it's not that big okay it's not still taking everything properly okay so something is uh not working there and it can be that we have super messy things here so i'm item center flex s2 is s2 let's go back here and let's see okay this is s3 first of all it should be our no actually okay s2 let's see what's the size it's 24 okay that's s2 and that one thing is fixed okay so we have pretty big country name and then uh next one and then the next one is delete icon it's also pretty big i guess no it's not okay so let's go here and let's target this one and menu i can delete so it's here and that has place clicks but font size okay foreign and then color will be okay so basically all i need to do is inside delete icon i don't need this i don't need these and i don't need this and that should do okay so we have delete and that and let's well since we already know it let's do it but we have a separate class for making cursor pointer okay so the next is we need a flag and also we need a divider so and what we can do inside here is we can have border button that will be one pixel and color will be black light and it will be solid and we have that and then let's give padding bottom of two ram okay so almost similar not exactly we need a bit more of padding let's give it three okay so looks pretty good um the only thing is now for now let's do a space between and that will probably take something okay so the next thing we want is actually from here to here we have quite a lot of distance so let's put margin here eight and that's pretty good card items country name so now we can already start getting the actual data there so so how are we going to do that well here if we have cart and we do card.map and that will be country and we will call all this inside here and this will be if you remember country.flag and here we will have country.name and this will be also country.name that's it and if we don't have anything uh what we can do is let's say if okay if not cut dot length is zero so now actually if if we have cut length with 0 then what we can do we can do some sort of rendering so we can do card menu empty and at the moment let's just write no items in the cart and later we can also do some styling there and if this is all good then [Music] okay it is expecting this okay now let's go back here you can see it says currently no items in the card and if we add something then you can see we have a big flag okay we need to do something with flat that flag size so it's uh 122 73 pixel okay so 122 70 however let's do maximum width 100 px and maximum height 60px that way i hope yes so we have if there and let's also have a little bit of margin right one ram so now we have that and we have that so as you can see we have our country and if you add another country and we have another country okay we need some margin top and then we should be good so margin top one ram so okay not good let's do 2.5 that's around 20 pixel that's good and we need to also do something that if it is last cycle then let's not have that border button so if it is last child then border bottom none so this way we don't need to have border for the last one and i guess that's all good there so if we go to our to-do list so cut item menu component this is also done so next we will be removing item from cart okay so now let's uh close this so now when we click we have this uh button here but it does nothing so let's um go to our card menu and here what we can also pass okay so uh where is it it is in our f bar and we have do we have use dispatch and everything here okay it does not have it so let's go here in our card menu because i was thinking that if i will part that pass that function from there but we can also do here so let's go here and let's import some thing from react redux and that will be um use pads and with that we also need our action and that action will be from redox accents and that will be removed country from list from cart okay now we need to initialize our dispatch first so count dispatch is use dispatch and now all we need to do is here on click we will have arrow function and here we will have dispatch and inside this patch we will have remove country from cart and that and that will require our country to object and that will be this country so basically the same country we are mapping we are passing there if we go here and replace our page initially we have nothing in our cart then we add items to cart and now we have three items and if you remove that's gone if you remove that's gone if you remove that's gone and it says no item is in the card this is zero so remove item from the card is also done all right so remove item from cart is also done so the next will be search functionality short functionality pagination theme color change and single country page uh we are still a long way to go there and i know this has been a long journey however let's go back to our application and we have all this and i just noticed there are a couple of things we need to do first if you notice when we click uh here then of course we have duplicates but uh more than that if we click our uh shopping cart it does uh basically nothing so we have to attach that and also if you remember in the beginning i said that when we have zero items and then in that case we want to show off this circle with different color so first uh let's uh change the circle color based on the amount so let's go to our fba and here we have okay okay so this is counter and what we can do is um let's change this to this and like that and here we can also add something else and that is if cut dot length is greater than 0 0 if that's the case let's say [Music] active else we don't do anything okay so this is how we are dynamically adding class and now let's take this active and let's go to our app bar and here in our counter so initially let's change this color to black light i'm not sure how it will come but still and if we have dot active then we will change our background color to primary if everything is good then this should do is up so initially we have gray color when we add you can see it becomes blue so the next thing making this clickable and this is clickable but there is no cursor pointer so first thing let's go back let's go back here and let's copy this cursor pointer and let's give it here so that we will get that and we should be able to actually use the same click function also here however we are getting uh some some error if i do it here and remove it from here then i think that problem will be solved i don't know if it's a good practice that no matter where you will click you will have that issue and it doesn't close because um i don't know why okay so that is super interesting problem and what if i remove these from here let's make sure that we got this and let's put it somewhere here and let's try this works good and this works good as well so i think that is good there so we solved that problem as well one more time checking that's good that's good we can add things and we are good here so the next thing uh if you see our design uh we have to also deal with um button disabled so when we have items in the cart then we disable the button because we are not allowing multi uh items i mean more than once in card so what we need to do we need to do a little bit of change here so this is country card and we want to have something called disabled here and that is boolean and we will get that here as a props and then this is our button so we do disabled and we pass that disabled so this is a material ui disabled if we put disabled is true then it will disable the button however if i save this we will have some problem i guess and problem will be in our country list oh surprisingly not interesting do i have something here nope okay country card this is required we need disable i am saving it and when i go to country list at least i should be giving some sort of warning i don't know maybe it's because of country type anyway so we need to pass something here and that will be these are called props and we need to pass some boolean value here and that boolean value will pass but before that i want to also get our list of items in our shopping cart so this will be card and here quick card reducer and cut so now all i need to do here disable i need to do some check so what i need to do is if card dot includes this country so you see like we are passing this country in country card and we are looping it so so the disable will be true if cart whatever card card item includes this country so if that country is already added to cart then this will be true that means our disable will be true and this will be passed to country card pops and and and country card will get this and then that will disable our button here so if everything is good this should work so let's go let's rephrase and now let's add this to cart well this is disabled as you can see i did once and when i do it uh i just cannot but i think the reason why we can't see them is because of yeah this is disabled but it's just it's just because of this so for example if i go and do disable background color red if i to important then you see everything that is disabled will get this color so when i add this this will also get that so what we can do is let's just copy this and go back to our country card um actually we can go inside our bottom so that will be here and here we have buttons so inside our buttons actually inside our primary button so because this color we will apply only to primary button i'm not sure exactly sorry for being confused i think here disabled button and let's just change this color and that will be our black light um let's see if that's that will do something so now let me refresh the page actually i think it's not required but okay i'm adding it i'm adding it and i cannot edit more than once however our bottom is not disabled so let's go inside here and let's do it for our primary button interesting so what we can do is instead of that let's copy all of this and after button actually we have something here called material ui overwrite so let's save all of these here then definitely as you can see all these are disabled well they still look like actually proper button so can be confusing so if we go to our here we can take colors from here so that will be the 60 percent or less let's do so that i will get exactly this color and that will be fine and i can go here and sorry okay now we will have it exactly as we have it in our design as you can see there is also a little bit of design problem for example some buttons are a little bit of and that is because of our flag height and sometime also the name of country will change it at least let's try to fix our flag height so let's go back to our country card and okay so image instead of maximum height let's just do this pigs and [Music] at least now most of the flags they are same but still because of the name of the country it's going a little bit down and i think that's pretty okay if you want you can fix it but i'm pretty happy with this and we have basically covered most of the so the next thing we want to do is we want to use our search functionality to do source functionality let's close everything else and let's close these let's close this so we have a couple of things we need to think of uh so the first thing is uh are we getting everything here so yeah so we are getting countries here so let's uh do so let's create a state so now all this is card state and then let's go and let's do [Music] okay so we will have something called filtered countries and that will be set filtered countries and we use react use state and here we will pass countries so basically the same countries we have we are kind of duplicating them and the reason uh for that is we don't want to mess anything with these countries and we want to have uh filtered countries but that itself will not solve the problem and we will also want to have something called filter keyword or source keyword let's say that will be sorts source keyword sort keyword and same [Music] we will have empty in the beginning okay with these two now i need to also do riaz react use effect and we will have something here and also something here so this dependency will be whatever we have countries and all i'm going to do is set filter countries to countries so what i'm what what i'm doing okay so initially you see uh these filter countries will have whatever the value of countries but usually in the first load or first render uh it might be empty so we want to make sure that whenever the country's value change we want to run this use effect and all it does is it will update this set filter countries with the updated value of countries so that's all we are doing here us are using countries here let's do filter countries and if i save it and that's okay we will use them later you see it's still the same nothing has since you can add you can add and you can go here you can remove you can remove and nothing had sent so now let's filter country by keyword and here we will use react use effect and we will do it inside here okay so what we will do so we have already source keyword defined so here we will do every time sorts keyword changes we want to filter our country so so what we want to do is cons let's say temp countries and that will be our countries dot filter and what do we want to filter with so we will have its country country actually we don't need this so all we want to do is if country dot if country dot name to okay i think i need to do any if country.name to lowercase we are changing it just in case if we have capital letter uh dot includes our [Music] what is this uh source keyword sorts keyword dot to lower case okay so let's um i don't know if these exist or not i always get confused with this but if that's the case then it will it will filter all the countries and all we need to do now is set filter countries and here we will have all temp countries okay it's interesting how i can do countries but i cannot do okay well let's do this as a and at least that way we won't get it here and this also adds okay i'm not so sure if this will okay so we have missing dependency here and that is countries and now we just have this all left let's go and let's see we have everything rendered properly so now just for testing purpose i want to write here i n and let's see if we will get countries that have i n in it and we have only country that has i n so now the only thing remaining is we need to uh we need to have a function um update source keyword function so cons handle sorts keyword and this will have value that will be string and all we need to do is set search keyword and it will be this value and now this function we need to pass to our uh f bar because that's where sorts happens and i don't know where am i doing okay so i just realized that we are doing something wrong so where is okay so everybody's here country listed here so the both of them are i think here in the home so somehow i need to change this thing from here and search keyword i will take this from here and also i will take this function from here and i will do it here somewhere in our home and why i'm doing that i will show you in a minute because of course we can also use redux and uh get the source keyword and every time something needs uh every time keyword changes we can do the filtration but i don't want to use redux just for that small thing so ah this is why i'm doing a little bit of prop here and there and the first thing is in our country list i want to pass uh sorts keyword and that sorts keyword will be source keyword i know we don't have this yet in our country and that's why i want to go to our country list and here in our country list i want to call something called type country list drops and at the moment all i need is this as a string and that's it so now we can do this and it will be country list props so now we have our source keyword and with that we don't need this and also we don't need this here and that is okay because we will still be getting a search keyword from our home and now since we have source keyword here and we have this function here all we can do is we can pass this function in our handle [Music] what was it source keyword so let's pass this function here this function here and all it does is it will accept something from children and that children will pass some value from there like from our ebba and that will update this value search keyword and that search keyword will be passed back to country list and everything in country list will happen i mean the filtering will happen based on that that's all good so now i need to go back to our f bar and here uh in our a bar props i will also have this and this will be also function and i will import this function here we have our source component here so what we can do is actually here here we can pass this so we don't need to do anything in our sorts and yeah this is what we call prop drilling so i have been pressing props and props and props and that's why we need redux yeah but now i will go to our shorts and where is that it is here and also in shorts i am going to have type called sorts props actually i could directly take it here but you know it's a good practice and this is function and that's it then we have it here and we have it source props now something here i need to do is i have to handle input change so const handle input change it will take event and so let's do console we can actually call this function and pass e dot targeted value but before that let's just console log eater okay and all for now i can even do form event or let's just do any for now we will fix that later so now this function i need to have it here somewhere i'm not sure if there will be handle change here okay not handle chain sorry it should be on change my bad okay so when we do some on change it will call handle input since and we should be getting something in console log so let's go and let's try we have a lot of warning here missing handle source keyword is missing or is it missing okay handle sorts keyword okay um let's see well we can still comment this and let's see okay just maybe because we are not saving it okay from event handler is defined but a key tokey all right all good so now let's go here and let's go to our console and let's type something okay so we have our letters here that's perfect so everything is working as we want as we want it so now i don't need this all i need is this so what i'm doing is i'm calling parents function so from the source it will go to ever from ever it will go to home and from home and from home okay so from ever it will go to home and from from ever it will call this function in home handle sorts keyboard and then we will be getting that value and that value will be set here and we will have source keyboard and that source keyboard will be passed to country list and inside country list we are listening that every time source keyword changes please update our filter content and if i have done everything correctly then now i can go here and i can type germany and as you can see i get germany if i type let's say you can get all these countries let's type monaco okay we got monaco let's type spain we got display so you got the idea so our sorts functionality also works correctly so we can call it as done so the next is our sort functionality so let's go here um i'm getting this warning here that it's all in a list should be and it is in count release so let's go and see what's happening there so we are here in country list and let's give some unique key in this case i think country.name will work and it's giving complaints saying that we don't have that and if we put any so if i do this and if i go back and if i refresh the page and voila the warning about unique is gone all right so the next um let's go and let's do some sorting okay so for that i would like to go with material uh ui select component uh let's go we can do our own manual selection that's totally fine but let's just take this so a couple of things i need select and i need also menu items i don't need that form control but and where are we going to do that sorting well we have some place for sorting here so i think that's pretty good place and let's delete this and then let's go back here and there are a couple of functions uh we'll come back to that later but let's go to select and let's copy all of these let's go back here in our sorting um here and let's paste it here and definitely we'll get some warning and that's totally okay because we don't have a lot of these props and also we don't have this so and now let's go and let's do this name because we will be sorting by name and we will be sorting by reason and we will be also sorting by population if you go back here and if you see we have population we have reason and of course we have names you can also do with borders and currencies and languages the reason why i'm not doing with those because you have to go one level i mean you know this is a nested area inside this object and so it will require a little bit more steps but he'll pay to do it because the logic will be same having said that um i am going to change this value to name and this value too i want to do it exactly how it is here so reason and then and then the next one i will do exactly how it is here um population okay let's find population okay so population is here all right so we have also population now we have all our values and known is known [Music] and i guess we will delete this for now and then i don't think we need anything else from here let's take all those away and somehow we have handle sorting let's do instead of handle chains handle sort handle sort so that will be handle sort and it will take event let's do it any and i'm sure there is so what i will be doing here i will just do console log and let's see sort by and even dot target dot and then that's it okay let's go back to our file here let's go to console unless we are getting a lot of issues here and i don't know why we will come back but if i go here if i do name okay i'm getting sort by name a component is changing and on call in put okay we are getting population we are getting name and everything also if i go back to our sorts there is this thing called disable and i guess if i put this here in sorts and can i do default value yes so let's do default by name always and let's see and let's replace it and as you can see we have name by default that's good then here we can have something called sort by so how is it in our design well there is a little bit okay so we have blue color and it's here and this is font size 16 so do we have front size 16 um let's go to our base and do we have any okay we don't have let's copy the same thing we have it here [Music] and then let's pass p here font size will be two ram fun family font weight regular that's all good and if we refresh or we are still getting shot by did we save that no okay okay so now we have our sort by and our name that's all good let's go to our country list [Music] and so i will do display flex and let's take it here okay and as you can see they are not aligned properly so align item center and then i need to have some spacing there but other than that justify content flex end so they are there then what else i need to do okay so we have our country list p so if i go and select p tag and have margin right one ram okay so that's pretty good and then the next thing is i just need to change the color for that and for that let's go and inspect okay so let's copy that [Music] let's give it sort by [Music] sort country select and let's save this then let's go back here again and this time we can do color [Music] important okay so we can go here inside our country list and inside our sort what we can do is and this is not blue but primary and then we also need to go and [Music] sbz okay so now that's kind of similar not exactly we have semi-bull and we have seen involved so let's go and font weight okay so medium and if i copy this if i do this if i do this okay and then let's see okay so we have poppings and i think that's all good so all i need to do is copy all this and let's go here and i think that is inside our let's try first here select list and and instead of this i would like to give out variable i'm still not super sure that this will work sometime it does sometimes it does not so as you can see it did not and [Music] even when i do important that still did not and i think it is because we need to have it is it inside here okay what we can do is let's take that and let's just have this and we can record that and go to all our okay now when we did it in our overriding and we paste it in our material overriding so that way this is pretty good now so our sorting is pretty okay okay that's good okay so now let's do the extra logic so it took quite a while so now let's uh go to our application um let's replace it as per and we can say sort by regions or by population sort by name so at least our function and select function is working so now next uh let's go and write actual sorting um before writing actual sorting i will have a comment here and i will relate okay i will write sorting related so we have all our sorting here and then the first thing will be uh sort by and basically we will be storing the same thing here whatever we will get it will pass it there and we'll set that step so let's also have a setter and that will be react use state and initially i would like to sort by name okay and then so what we can do is actually i can delete this and i will take this stator function and that's it so with that so every time we click something uh that will be short that will be saved or that bell will be updated to sort by and then what we can do is now let's use a react use effect and we will have some dependencies so basically we are going to do something similar like this um so the first thing we need some dependencies we want this to we want this react use effect to uh load or run every time we change the value of our sort by and that is from handle sort so we can try console logging here i know i do a lot of console log but let's try sort by use effect and here we use software so let's go and save it and you see it ran first and now when we change it also ran and it also ran so that means it's pretty good so now uh in order to use a sorting what i would like to use is um here i have this okay so we are going to use lord s it's a pretty awesome and i will use uh order by so order by and as you can see how it does is you use order by from lord s lord s so you we use order by and we pass our collection or error and then we can give what we want to sort by and how we want to sort by ascending or descending well at the moment we will be using only one of these and we will be doing ascending we won't do descending for sure we can do it for that we need to have uh if it is by ascending make it descending and vice versa and in this kind of drop down it makes kind of no sense if we had all of them separated then we would have uh arrow for like up and down so it would uh start ascending and descending both but in our case uh here we will use only one type and that is ascending so but the logic is same we just need to have one more thing probably here to have a boolean value call is ascending and depending on that we would switch the place anyway the first thing is we need to add lotus and i think we also need to and let's also have a type lotus so now we can already go here and let's import from lotus of course you can also give this name load as but if you see it's kind of a pattern that there is always this underscore from lotus so let's just follow the same pattern i will delete these extra things and then so here inside i will call a temp sorted countries or let's just write temp sorted so we will use order by and we will pass countries and if you remember we can pass here name and then in here we will have ascending so i'm just following the same pattern but just for one okay so now we have uh so this is uh the value or the key that we want to sort from so in our case uh this is name but we want this to be actually by short by so that means if you remember uh we will update the value of sort by uh from our selection here name reason and population and that's it so i think okay not that's it so we have to give said filtered country to temp sorted and now this way okay we are getting some error and it is because we have to make it uh define type area type then this is all good now when we give it a type area this is all sold and i think if we start our application it should sort as we want so let's see okay so you see that it says a react hook has missing dependencies since we are also using countries so we also need to have countries here uh that is so that if the value of country change then also this runs so now i think we won't have any warning or errors that's good we go back here we do refresh and then initially we have it started from our name so now if we go to reason you can see it's africa and africa africa africa looks like there isn't any reason so they are rendered first and then we can see all the way and similarly if we go to population this is how we see and just to try let's go here and let's do descending and let's see so population it sign has china india and america so if we go to reason we get p and then o and if we go to name then we go uh okay jimba away with it but because this is a swedish letter so because of that probably it takes it but this is doing pretty good also uh we can think of one more logic so for example if i am searching let's say jump let's just put job now if i do reason uh it takes everything away and if i do population it takes everything away so it is up to us to decide how we would like to do it okay so uh for table pagination we will be using this uh table designation from material ui and we can also pass action component let's go and let's copy the same code although this is for table but i think this will work for us so we don't need table body table thing but what we need is we need this last piece i can i can button i think we need and we already have so let's let's see and i think we will also okay this has pretty much everything what i want so i think i will copy all this not everything at least for now i will copy from here until here okay so i'll copy it and this will be our what is it table pagination action component i will paste it as you can see it's just copy paste it so we need to you import use theme and everything related but okay so and i will move all this somewhere here and let's go back again and we need to also import styles from material ui so that we will get that style without us doing much i'll copy it here i guess that's all about it let's see if we still have something missing and definitely uh we can move this component to a separate component and we can do it let's see but first let's fix it everything here and then if we want we can move it so everything looks good here then let's go down here and and and table pagination actions there is also props everything and where are they using this so okay so if you see uh here there is page so and then there is rows per page and there is also empty rows and handle 10 space and handle sends rows for page so okay this looks all good for me so i think [Music] first i will copy this i'm not sure if i need to do everything but let's just copy only this first if needed we will also copy table row and everything i don't know and then here i will paste this definitely will have something missing for example all these functions and values they are missing so let's go back here [Music] and let's basically copy everything from here until here let's go back to our code as i said they will as i said okay so what i can do is of pagination related so that way we have everything here and okay okay so now everything looks good for me um handle send space and there is also empty rows and everything okay that's good let's save it and see if we get i'm still getting rows cannot find rows okay instead of rows let's put it here filter countries so that will that way we get uh the total number of filtered country so that even if we have already used sourcing and everything then we will get that and says table pagination has i mean i think there is still some warning here okay rhodes length um i think we have to also use here filter countries and what else let's see i don't know this looks interesting okay that's fine so now let's go back to our here we still have a lot of things going on here and we can see we have 250 countries we can okay so there are buttons and everything and these are probably disabled so that's why we have this because we have over uh written our main thing but we will come to the design later but let's fix the functionality fox so this working pretty good and we are filtering it so the next i think we need to do is we need to actually uh do some use effect so and here so far all we have done is just uh copy pasted the example from here so basically everything from here and also this pagination the only thing i changed was instead of a rose here i changed that to our filtered countries so here i change filter countries and also here in pagination count i changed filter country because this way we get the total page number total number of pages so now actually the real thing begins here so updating data according to pagination or whatever selected page or whatever so we need to do something here so let's do set filtered countries because we are using filtered countries to actually render our data here and inside here it requires something so of course we can also do let's let's make it easier so paginated countries and we will be taking filtered countries filtered countries dot slice we use slice function and here inside slash we need to give the first index will be whatever is on the page selected multiplied by rows per page and then we need to slice it from there until page and then multiply by rows per page plus rows per page so what what is this uh i'm trying to do is let's say let's say we have we are incorrect current page is zero and let's say rows per page is we we want it to show 10 uh per page then what happens is that it tries to slice 0 multiply 10 so it will be 0 and then so 0 10 so 0 plus rows per pen 10 so what it does is in the beginning when we have it 0 and rows per page are 10 so it will slice out this from zero index until 10 and that will be updated in new new area for that page so we will only get item from 0 to 10 and then when this is 1 and this is still 10 the first one will be 1 multiply by 10 so it will be 10 and then this will be 1 multiplied by 10 plus 10 so that will be 10 plus 10 so we will be getting first round we will be getting 0 to 10 second we will be getting 10 to 20 and then if this will be 2 then what happens the first one will be 2 2 m so it's 20 and then 20 plus 10 that will be 30 and so on and when we go minus so if you see here somewhere in our first function so if you go and check the function so handle first uh page button click so that is event on page change to zero and then if it is back it will be page minus one on page change it will be plus and then so this is like on the next button click and this is back button click we go minus one of further page and then next button we will go plus one and then last it will be whatever uh the total count that will be in our case 250 divided by whatever the rows for page we have selected minus one and then it will take to the last page button so and this count in our case is total number so in in our country case is 250 and if we have uh 10 per page so that will be 25 minus 1 so it will be 24 and we will get 24 as our page so if you see the same logic if we go down and if we have 24 so what happens if this is 24 then the first one 24 to 10 it will be 240 and 240 plus 10 250 so that's how we will be getting the last bits so that's all about it uh it's nothing much just simple area slicing and we are just passing the pages and all it does is change space and then handle rows per page so this rows per page is something that we already have few options here so 5 10 25 all and minus 1 so now i have to set filter countries to be paginated country i'm bit worried if this will work we have page we have rows per page and then we also need filter countries um okay here we need to also define this as a and then okay so we have something called empty row we don't need it for now so let's just okay now let's go back let's refresh and we don't get anything that's interesting and why is that let's see okay i was exactly expecting let's close this before something then just happens so now i think this is the time to change a little bit so i will also go here and for paginate it so let's go and what we can do here is paginated countries set we will have countries basically we are doing exact same now here the reason why we are experiencing that problem is if you see this functions runs every time filter country this filter countries area changes but then inside this function we are always setting filter countries so that means at first this runs and then this will change this will change this data and because this data is change it will run and it will constantly run in a loop so that's why this logic might not work so we need something else and that is set paginated and now here i will okay i think this will also need to change let's just do count let's just do designated c so that we don't have same variable twice okay so now everything is good but we just need to do a little bit of change and that is we need to uh change our render function here from everything else is good but here we have filtered countries and let's change that to paginated countries so that way i think everything should be good and now let's go let's open it at least initially we have everything here let's try with sorts if this works or not so let's say i will search some so search works as well and okay this sorting works as well so the last thing i need to do is i need to try pagination okay so initially we have one by five and we have five countries if we go to 10 we have 10 if i do next we will see next 10 and next 10 if we go at the end we are at the end if we go at the beginning we are at the beginning so everything is good the reason why i changed that to new paginated of course if you see here uh where is it here so instead of using this filter countries i could also use directly countries but in that case what happens is let's say i'm searching [Music] i n and now i got only 43 because that's the total maths of filtered country but if i would be using the original countries area then whatever i will filter here it will uh not reflect the change here so that's why i wanted to use that and i think i'm not so sure but if we go to sorting here so instead of filtered let's use filtered countries here and also let's use filter country here and here we can pass set paginated country and i guess this should be fine as well and at least we should not have any infinite loop uh okay so now what i want to try is within this i want to try if oh okay did so for example if i do so we have four countries and if i go by name so it is already by name if i go by reason so it goes by region if i go by population it filters by population of course in ascending order and we have also so basically we have our pagination filtering and everything are working together that's pretty awesome now uh all we need to do is a little bit of design fix so first we want this to be in center so let's go and down here we have pagination option so pagination display effects flex justify content center and i hope we have it in center that's good let's go here and let's have pond family pop ins actually we can do that somewhere i'm not sure sure uh is it in our application here so there should be something called yeah so if i change poppins at least yeah we have our fonts fixed the next one is all about this disabled color so and we know like why we are getting this it is okay so here we have to do background transparent okay so when we do this it fixes this one but i'm sure we'll run into this problem okay we did not so let's copy all of this and then we go here and inside our country list and inside our pagination all this might not work because we have had this kind of experience in fast but okay so it did okay so the last one is i have to remove something from here okay so i found it it's actually made table root and this table has border button so if i copy this and i go back to our country list and here's somewhere here if i do this i guess i don't need to think about anything else i don't need to think anything else all i need to do is not and maybe i need to do important and let's go and let's refresh our page and just like that it's gone so now we have our pagination working and everything fine and we can even do all and we should be seeing all all right uh so we need to change uh our theme color for that we need to do a little bit modification in our sas file uh for example if we were using only material ui so if we had only this all we need to do is just take a dynamic value and here in primary we could just have let's say primary color value value and that would solve all the problem but in our case we are not using this properly we just have it here we have some material ui use but mostly we have over uh overwritten everything and also all our variables and color comes from here so what we need to do uh is here we need to do a little bit of modification and i think so i think we already have our root so let's see where do we have our root okay we have our root here um this is a bit interesting situation because okay so let's do a little bit uh let's copy this and let's move it on top then let's go code that and okay let's code all of these and then let's paste it here so inside root what we can do is we can also give colors so for example primary color i can copy these and paste it because the thing is like all our sauce variable we cannot uh change them dynamically because when uh we build it uh sas will compile as css so that's why we cannot change them dynamically but these we can change dynamically so that's why i'm trying to modify it to there and also we need hover and then let's do that so here i will do hover okay so and then what we need to do is instead of using hard coded value here we use bar and we use primary color and here we use variable and then hover now if we save this and go back to our application and you see we have everything here we have over everything else is primary and if we add this this will also change to primarily so nothing much has happened yet now so when you change primary color uh it might also trigger other color to a change so that's why this approach may not work in all cases so that's why in those scenario those situation is better to have a reduced state and dispatch and action and then maybe somewhere here in our application use those caller basically something similar but update our this root variable root color variable depending on the theme and that's the better approach but in our case i think i will only do directly in our sidebar so what i will do is inside our sidebar here i will do [Music] switch color switch primary color and that will be a function called switch primary color and that function will have two colors one will be primary that will be string and another will be primary hover that will be string as well and if that's all good we will be doing something document dot document element [Music] and here we will have style and then we will have set property and now we need to do uh something so our caller is primary color and then the value will be whatever we will have for primary and for over we will have whatever primary overweight so this function we can also uh create a folder somewhere called helper and have it there so that we can use this function in uh different components but in our case doing it here is just fine for now so what i need to do is i need to call this function in our here somewhere so let's do on click function here and then uh here i can call this and i need two colors here let's give it also our class name of cursor pointer if you remember this is our custom made class name that takes everything there and what is happening okay okay so it is because we need to do something like this um that's good so i have all our callers value and hovers are somewhere else listed so i'll just be just copy pasting those values so for primary i have this okay now let's save this and let's see if this will work or not i will refresh just in case and i'll go here okay so as you can see this is green this is green if i add this is also again that's good let's go to red and we have red this is also red and if i go back to blue this is blue and if i click red okay everything else is good but somehow um [Music] if you see our primary color is changing and i know why exactly it is changing because we need to give this value in our sidebar here um where is it okay inside our components so if you see if you remember here in our blue we are passing primary and because primary keeps on changing so that changes this value so now if i give it here hardcoded value then this is blue this is red this is red this is green this is blue and we are okay so our swiss theme is also working all this is not working i know because it's getting from our material ui but that's fine we don't need to deal with that so our theme color change is also done and then the last one is our single country page okay so we are here uh so good to be here finally single country pace left and let's see our design so if you see in our design we have a few details uh population reason and native name well don't go with this dummy data i just copy paste it uh the same thing but anyway border countries languages so uh i think this is a pretty good time actually to do a little bit of modification in our types so let's go to country types and remember i have been telling all the time that we can do something per country so let's go and okay so this is a country object we'll have name that will be string and then we will have reason that will be string two then what else we have let's go here and then um we will use population that will be number okay and then we will also let's see in our design so we have native name and capital city so let's go and who is native name okay for this country i think native name okay so native name is also string but it looks like this so let's uh go here and let's give it a string so uh another thing we need is capital city so let's go and see uh why am i opening enforcement so capital city i think it's okay it's just capital so let's go and also here it capital and then what else do we need we need languages and border countries so um okay so languages uh it's an array with objects so let's go and and there is name okay so all we need is only name we don't need is of course and anything so let's just use name so uh it will be languages that will be a and we can also have it here inside and that will be string so that we we also get the types of languages inside and then we will have some border countries um okay so not sure if i really want it uh we have it in our design uh here but that doesn't give that good idea because these are just a border country code so let's uh remove that let's see if we can take anything else that makes more sense so um okay so here we have capital we have name population we can also print subreason if we want and currency also inside an area so let's just take this sub region and let's go here and just here restraint now since we have this what we can do is here we can do country so that way these countries will be area of country so that's good and then uh payload so all we don't need to think that much here this is good let's go and modify a little bit of our radiation so if we go to country reducer um here we have also country type well this is okay yeah everything here looks pretty good so then i think we can import it here so let's go here and let's just have country and do we have country somewhere okay i think we don't even need this any because now we will know that our country is type country as you can see already and we can okay that's good and then let's see somewhere here okay sort by so here we don't need to give this any anymore because it knows that we have country dot name for example now when we go country dot then you can see we will get languages we will get name we will get native name everything because now it is attached to our contrary reducer state so uh we have this because of this thing here when we are using this state it automatically so when we are using this state it knows that this is a country type and we get it and if we want to add something more we can go on adding here so with that uh our everything looks good and i think we need to do one more thing before we start our country and that is because for example here when we go and we use country and let's say some name here then we see it's country page but we don't have any uh fbar or navigation bar draw or anything and that is because i i think have done some mistake okay let's go here what happened okay oh yeah that's very good thing that we got so we also need to take flag so let's go and let's go to our types and somewhere here let's go and let's give it a string because we are using that flag and because now we don't have our country type any anymore so that's why we were getting that problem and also we don't need to import this country here and that's it so now i think we don't have any errors so the reason why uh if you see all our application paper and sidebar they both are here and also our country list is rendered here whereas our country is separate and we have something here so i think uh what we can do is we can move all this drawer state and everything here and also a bar here let's do that so it was my bad that i somehow did not think that through but anyway so we can fix it so let's go and this one and then also this one and this one and this one i'm going to cut it from here and i'm going to paste it here okay and that will not solve everything so then i need to also take this upper and sidebar from here and i need to render them here before our route so everything inside routes will share this upper and sidebar then i think yeah i need to also import this okay so let's go here and let's import those components so in our case we are here yeah so that's also good there and this is also good this is also good our sidebar and everything out there so the only thing i need is we have source keyword here that we need in our country list and as you can see we are we have routes here and we have source keyword here and somehow that search keyword is not going to work like this so we need to do a little bit of modification so uh what we need to do okay let's go and here somewhere in our action we have action so let's go here and since it is related to country um no this is not related okay let's go here and let's i will do copy paste and then here i will do ui actions also i will copy paste these and i will call ui reducer so [Music] then let's uh go to our ui action and all i need to do is somewhere here set search keyword and we don't need types for this at least i hope not so and that will be keyword and that will be type of string and we don't need any of these actions for now all we need to do is update sorts keyword and it will be payload will be whatever keyword we have so we need this type so let's go here and inside here let's create ui types and then we can do so we need this and then we can also use some action so okay let's use our ui reducer state i was sure that we were not using for this application but seems like we will and in re you are we will have sorts keyword and this will be string and in future if you need more other steps like for example i was talking about theme color we can have some objects here and we can have primary string and like that but for us now this source keyword is okay and then let's also create action so something like this okay so this action will be same as this so set sorts keyword action set sorts keyword action usually we do it and here we will have this same thing and payload will be string um that's all and then let's go here and let's import our from ui types and also let's export everything from ui types and here we will have our ui reducer state and let's go here and so we i we have ui reducer and that will be ui radius resistant let's just make it a bit clean and that's good then then then then we have our actions here i think this is enough so we don't need to do anything let's go here and somewhere here we will do couple of things so first one will be we will import update search keyword and we will have set keyword action so cc here just like this we will also give it action and that will be set search keyword action and that's all good that's all good now let's go to our ui reducer and actually what we can do is we can copy the same thing here we have a lot of things we didn't need so and also i think we need ui reducer state okay so our initial state will be ui reducer state and at the moment all we have is search keyword and initially it's empty and then we have u i producer actually let's call it ui reducer so the state is ui reducer state initial state is initial state and at the moment our action is we should be x and let's go instead of taking this action here let's go to our types and let's go and export ui accents at the moment it is same as our set sort of export cons so set sorts oh am i doing something okay so we have to export type not this and this should be set search keyword action so now here we will import our ui action and let's have it accents and this will be our ui reducer state okay so we have only one case at the moment and that is this one and all we have is everything in the state and our source keyword will be action dot payload and that's all now the next thing is we need to go here and import our ui reducer from and here we can do reducer so let's just make sure in type also we have the same thing and here also we have the same thing with that we need a couple of modifications so first thing um we will remove this from here and we will uh go to country list later so in our country list here initially we were getting if you see here we had like sorts keyword from country list props and we will completely remove that and with that we also don't need this but what we need is from our use selector okay so here um by keyword here what i can do is const source keyword is use selector and state will be our f state and now you can see we have a state and we have ui reducer and then here we have source keyword okay now this source keyword is replaced by this so our country list is good so now next one we go to our application here then in our app bar we have on click and handle sorts keyword we also don't need this or yeah we can do so that here we can import me see uh handle and we are doing sets okay so we don't need this here and we also definitely don't need this here and in our application bar we can remove this i know we will have some problem there but let's go to our bar and first thing uh let's remove this here and then since we already have used selector so [Music] okay so we have what are we doing here we have sorts here and we are just passing it there so let's also remove this and this is good now we don't need this as a prop okay so [Music] yes so now let's go to our search component and here also let's take away the shots and let's take away this and we also don't have this now here what we can do is we can import from react redux and that will be our use dispatch and then we also need to import action so that will be redux and actions and it will be just short okay let's go to our ui action so this is our function and we are okay we have to export it here okay now i think it will show us yes we have this set search keyword first let's have our dispatch can you imagine i am doing all this just because of a simple mistake about routing and ordering those items there so now here we can do these paths and then i will call that function and then this will be target value so what happens okay let's go to our application and let's refresh and looks like everything is all right of course we need to go back here so if you see now uh we go to our state here and we have ui reducer and we don't have anything here in search keyword now if i will type famous jar then you see here we have been updating shorts keywords so all these accents are fired and we have and if we go to state now you see there is a keyboard called jar and based on that keyword what i did was um in our country list component why is it here so previously we were getting uh sorts keyword as props but now we are getting same thing but this time we are getting from our state like our redux state so that's also i'm and then previously i was updating it by props function from source to a bar and so on but now i'm doing directly and the good uh thing about that is if later we want to put like some sort somewhere here or some in some other places then still i can do that that's it and this is pretty good everything is working now let's go back to our country sorry it took some time and i think i also did something here yeah i think i already did it i don't know if i recorded that or not so however i will tell you that i imported a link from react router dom and i wrapped all our card wrapper inside link and then in the link i pass this url so that will be country and then whatever the name of the country so now what happens is when we click any country you can see that that country name will be updated in our url that's good so now after all these uh what we can do is now we go back to our um application so it's all good we have now our drawers we have everything here and we still have our country base that's good so the next thing is i actually i can close everything else for now and all i need is just this country so i need to do couple of things first i need to import from react router dom and that will be one will be each params another will be use history this we will be using for our button and this performance and i'm not sure if i need to do some other setup for this but let's see so the first thing uh let's uh get something from here so we can do parents from use parents and then we will get everything in our parents and we can do pad dot name but instead of that let's d structure directly here name as a string um no i think if i do any this should fix so what i'm doing here is if you remember in our routes we are using this name and our react router dom will know that because we are using use params so anything after that name it will assign that value here and that's it we are just destructuring it so if we console log use params we will get a lot of other things but out of that we will be only taking the name and then now if i just go here and print this you will see what i meant so now we have alabamia and if i go back if i click we have afghanistan and if i go back and if i click we have alzheimer that's good let's give it a class name call country page then let's remove this for now so first we have country page go back and here we can have go back for now then okay so if we are using go back most probably we can use history so let's also go here and let's use history and then here to go back what i can do is well of course i can also import button but yeah let's let's do that let's not be lazy okay i have been lazy for a while and that made me redo a lot of things so now let's not be lazy and let's just have a button here and then it will be go back and all we need is let's have sides small and variant will be text i guess yeah we will do some css change definitely we always do that uh let's just have some space for class name here but what we do is on click we can call history and that has something called go back so all it does is it just go back it just goes back uh i think we can also do push and if i do push then i need to provide something let's see which one works because now if i press okay it goes back i think this is better the thing is that if i use go back it only remembers from where we came but if we refresh the page sometime it does not work so this is pretty good for now and definitely we will bring it close to our design later but for now let's just keep it like that and let's start designing this so here i have two columns and one is flag and another is details so let's go here and here country page details and inside here i can do country page details left and right and then here what i can do is okay first let's also uh import couple of things so first from our react redux and then the first thing is use dispatch and then the second thing is you select and we also need to import our action so redux and actions and from here we need paths all countries why because when the page is refreshed everything all the data's will go for example if we are inside this page and if we refresh the page okay now we are getting it from params but if we have actual data if you see here all our state is clear and we don't want that because even when user represses this page we want that data to be there so that's why we want to activate this page all countries there and that we can do is um what we can do is go to our country list and then okay so we also need a b state import and here let's have our invested and then now you we can go and we can take all countries just like this from here um somewhere here i will take all countries and then we need to do a couple of things so let's also have state and that will be current country so the current country is whatever the country we want to view this space for so let's set current country and that will be use state and initially we can have it let's also have our country state and ads country actually i don't know if this works that will be country okay and this will be it will be our countries dot filter we will get its country and we want country.name is same as our name here and that name is coming from our parents parents we will return that and then we will have zero because we want uh the object from that area and i think that's all we need but if you remember problem won't be solved just like that we have to use couple of use effects and then the first use effect if you remember is we want to dispatch so this one we can basically copy this and paste it here so we want to dispatch all countries so that and okay we need also dispatch okay so this way we will get all countries and we will get the list of countries here because it will dispatch and it will set it and we can we are getting some warning or some error here okay let's see did i do something wrong okay country country has already been declared all right so um yeah because country is our object here and also we have this as our country state which we don't need so let's it goes it got confused with our state name country that's that's why it's better to actually use country state then we would have no problem with that and and and let's go here and let's do that okay so here here let's call it country state and contest it okay so now if we go back to our website if we refresh and if we go here you will see that we still have our country reducer with countries and because of that because we did this and then this will not work all the time so we need also to update the country again so what we need to do is we need to call react use effect again and we need some dependencies here so so what happens is that we need to do basically set current country and we need to copy this exactly same thing and we can print it here we will need countries here initially even though we have the same logic here but these countries will be empty so we will have empty current country and then we will be dispatching this so it will fetch all countries and then this state will be updated automatically because of redux and when we have this updated since we are providing this as dependencies so every time our countries will be updated this will set the country and then we will have the final that so now here we are back to our design we have all the data's we need so let's go and let's have our flag and it and if i remember correctly we can go to our country card here and from country card we can exactly copy these two and go here and paste it and it will not work just like that because this will be our current country and then we can have flag similarly this name also will be current country and then you can see we have name here it's all because of our country state type and then we can copy the same thing and we can paste it here and now i don't know how the design will be okay it's a massive but okay cannot read property flag of undefined okay it is because we need to also have some sort of loading here and let's do so that if we have current country and if current country is no no if we have current country then and also we can check that current country dot name then only we can render our details so let's go here and let's do that so i think our now if i refresh okay we have it and we can go back and we can click albania and we have albania we can go back and we have algeria that's good and the reason why i did this actually this is still not a proper way we should be checking that our object will be not empty because initially if you remember uh the first time it will be empty and that's why it says that a flag of mt is undefined but if i check name i'm just making sure that if we get name i'm definitely sure we will have flag in every other properties and then we have left so that will be and then also here we can have accents country page accents so this accents is this add to cart um okay so what i need here this is our s2 so let's go here and let's do s2 and inside s2 the first one is population and then i can have span and then here we will be printing our current country dot population i think i need to also do it to string because it's initially in number and then i will also use it here en then let's do it back here we don't need population what else we need so it will be reason native name so we can do reason we need to do a little bit trick here with languages so we go here and languages so we have current capital and we have languages but languages will be our area so what we need to do is we need to do language and then we need to okay so we need this span away from here and here i am going to do something like this and then here i can have span and then i will write language um inside and let's see what we have i'm definitely getting some problem here and i don't know exactly what so posting here let's give it language okay so we have some errors here and let's go and check here oh let's just remove this for a while let's see okay and now we have like everything else working so it's just the problem of languages and if we go and see languages uh we have object and then inside object we have name okay so let's go back and we need language.name and here also language.name somehow i forgot that i think this should do yes we have also language here now so basically we have all the data's we need and let's go to country card and let's copy this and then inside our action let's paste this and at the moment we don't have anything on click and we don't have button disabled for now okay so and we have it to cart button so we have basically everything so first let's go and let's fix our button color okay so we need this arrow and let's import this let's go back here and somewhere here let's import this and then here in go back so we have that button there and then we can put let's see what's the size it's 24 that's our s2 and also let's have it here so we have go back oh yeah of course it is inside our now we have our arrow and that there so let's go and let's give this button of a class name um button button text and let's go and modify this button text in our base here somewhere where we have buttons okay so we have primary and just like that let's go to our text so we can give caller um i guess that's good important here okay i need to save this okay so we have go back and this button [Music] so let's go here and let's do display flex align item center so we have our button somehow working but we still need to do some modification but let's fix this before that so um okay so the first one is flag sites and that's 647 361. so let's close this close this let's copy some of these here and call it country sauce and then we don't need anything here and inside here let's go and import our sas file and then let's use this country page here and then the next thing we need is details let's give it display clicks click slap wrap um airline item center [Music] justify contact space between left and right clicks one and plex one then here in the left so that's good let's go back and come up with some other country and then um let's decrease it 450 and [Music] max height that looks good and these although we have some margins here i need to break this so again let's not do lazy work here so so now we need to do a little bit of splitting so first i want to copy all these spans and close this and also open another and then i will give this right and that should be all [Music] good except we have some span here and we need to get rid of this span and then okay some problem here with this with this with this with this this and that's how now we have these two separated and i think let's also give them some deep we need to wrap each of those item inside some deep so it's a pretty big job okay country page details and for languages uh we need to also apply the same logic so let's copy this and let's close this div so here inside we have s2 and there goes this languages and then instead of span here we will have also s2 and there the class name will be right and then we will take away this adds to and also we will take away this s2 so now i think we have pretty no actually this has to also go inside here now if everything is good um react hook is named line 34 yes we need name here do a little bit of design so let's take this list and now we don't need to do anything here and we can go here and here first of all i can do display flex and then for s2 we can do text align to right and then we have s2 dot right we have text align left and then margin left will be three rim and then color will be black light now let's go and see and we repress all here let's write just different content space between now we have nice spaces between them um also here let's have margin top one ram all right so we have pretty good and actually although in our design we have it like this but i kind of like it when it's taking it space properly so that is good and we have this name that is also good and now we have to fix this it to cut button so let's uh go and then we have to also fix this button uh so first uh thing first uh let's go to our actions and then let's do i'll give a little bit style for our accents as well so let's go here and so display flex clicks flex and we have button and let's give let's keep that button width of not with max width of 200 pixel and let's do it important here and let's refresh okay we have it there just like we have in our design and if you notice in our design we also have some drop shadow property so that's our box shadow and let's copy this and i think it is inside our counter page action so i think here we can do this and yes we have our country shadow um let's give max width of max width let's go to our action and let's have and top two button let's have it touring and in the side we can have also two ram on bottom let's have 5 ram and left let's have 0 and this is good so this button is pretty much as per our design here this looks almost identical not exactly maybe but that's okay we are not making a pixel perfect design here and the next is i have to change this button to here so let's apply almost similar theory here and that would be [Music] okay so if we go here we have something called go back let's close this and go back here let's have a button and this we can display flex and we can have justify contain place start and let's see okay so we have go back now a little bit is the aligning of buttons content inside and i think we can do that how can we do that okay so let's go here let's do it flex and no not justify content uh align item center it's almost done here so let's copy it let's go here and think let's see if this will do or not i will repress and this does we need a little bit of padding on top so let's go here and let's just give padding and top to bottom to ram let's go and check what is in our design all in our design we don't have perfectly there so let's give two ram and zero in the side so yeah this is good so with this we have our button here we have the country name and we can go back and this is all good and then we can come back and we can see if we go to any countries we have this so the last one is we have to also attach it to card action here and that is rather simple so all we need to do is we need to go to our country card and do i do we have it on click okay so we are taking on click so that means let's go to country list and then in country list i hope okay so we have a to cut to country and we also have disabled here okay so we need a couple of things um the first one so first thing we need here will be okay we have a lot of things in our country so we also need cart uh i will go here and then somewhere here i will paste card then another thing is i will be taking yes accent from here and let's okay we already have accents so also what was the name of the action eight country to card eight country to card then we have everything else everything else everything else so dispatch also we have dispatch that's pretty good so now i can basically do something similar like here so if we go to country card so i can go and copy this and then somewhere here where we have it to cut i can copy paste it everything else is good except instead of this country uh for us that will be our current country so basically whatever the country is in this space we will be dealing with that so now let's go here and let's paste it here uh so now we didn't do much so what we have is we have eight country to cut it's our redux action and that's the same action we are using here and we have all the dispatch and everything already because we were using for dispatch space all countries and we also had use selector here because we were using that to get countries and from countries so in this case we were using looping designated country and getting country and in this case we have countries and from there we are getting current country and that is from here that matches the name with our params and we are also updating that when the country changes so now in this button we are using basically the same thing so we have current country and then also call it country so if the card includes this then this button will be disabled and this will be all good so now let's go and let's see if we have any errors at least we don't have any warnings and now if i add this you can see that this country is added and the button is disabled if i remove this is back so if we want to also save some state for example our cart state so we can also save something in local storage um let's try it that will be probably the last thing for us so it's not in our to-do list so single country is done and bonus is local storage cart so let's go and then um in our country reducer no card reducer so when we are adding a country to card um before we this what we can do is can do look call stories dot set item and that will be save cut country to locally storage so const cart country it's basically the same thing and locally storage cart cart and we can give json.stringify and this will be cart country so we save something here and initially in our state here what we can do is this is local storage dot get item now actually we have to do it here const cut from local is local is local storage dot get item and that will be our card from here and for this we need to do something and that will be json dot pairs and we need to pass this here and we can give it as a so we can take it from here and then we need to do a little bit of change here so if we have cart from local then we can do all initially what we can do is let uh initial cut i know it's kind of kind of funny but initial cut is on nothing than an array so if we have card from local then our initial card will be json dot pairs and then we'll have initial card um let's see if this is no sorry okay this one because type script will complain saying that this will be empty so now i think we can do it its initial card uh so if it is there we have initial card otherwise it will be empty so now if i save this and let's go here and let's refresh okay and let's go to our application and we have our okay so now when i add something to cut i should save card here and you can see it saves card if i add another card it also saves that and if i add another card it also saves that that's perfect and now the next is if i click this so now if i refresh you can see that this stage is still saved and i can go back and even if i refresh you can see these are still there and that's good on the next is when we remove it um this there they will be still here as you can see so we need to also remove them when we are removing so the same thing here we can do is um yeah so we can do basically the same thing the only change we need will be um okay so card country will be this and that's all now if we go and if we refresh so we have three countries now and if i and if you see here we have three if i remove we have only two if i remove only and and then we have none and if we add one more then we have one more so we have it also into local storage if you have made this far and definitely if you replicate this with a better approach and maybe some modification then this can be a very good portfolio project for you and definitely it will be beneficial also for you to show it during your interview because it has estate management it has props uh passing here and there uh it has material ui implementation and many more so uh from design here until our final in here with everything even the color change this is pretty good i would say so and also now we have local storage so that's pretty good so with that uh i thank you for watching all this video and if you like my video please subscribe me and if you think someone else need this kind of video or they are learning react you can share this video with them if you have any feedback to me you can give it to me because this is my first video on this channel so definitely there's a lot of room for me to improve and i thank you again and i will be back with all the videos in future until then uh keep coding

Channel: Bikash web

Views: 567

Rating: 5 out of 5

Keywords: react website, reactjs tutorial, react js, react portfolio projects, react portfolio project ideas, complete react portfolio website project, rest countries, rest countries api, rest countries api react, rest countries api with color theme switcher, react pagination, react sorting props, react redux tutorial, redux thunk, Advance front-end development, web development, react tutorial, javascript tutorial, react tutorial for beginners

Id: gQACsKc7hYc

Length: 459min 0sec (27540 seconds)

Published: Fri Jul 30 2021