Build To Do App with React JS and Redux

[Music] hello everyone and welcome back i'm back again and today we are going to be building to do app with react redux and also for styling we are going to use chakra ui all right so let's see the final project this is the final project as you can see we have the heading here input the to-do list and visibility filters here the tab navigations and let's add some to do let's say coding i click enter now we have coding down here let's say meditation for example and let's say meet friend for lunch as you can see we have three to two and we under all tap okay so if i uh clicked maybe coding i'm done with the coding and as you can see in the completed we have just coding all right in in completed we have to to do here meditation and meet friend for lunch if i click all we get all to do all right that's what we're going to be building so simple guys so let's get going the first thing that what we need to do is let's go to the vs code here and i have already have a folder called due to app react redux and i'm going to generate grid rack up with a template called redux i'm going to use yarn and just copy this and paste that right here and the name application is going to be this current folder so i can just get rid of this my app here and say dot meaning it will be generated rack up in this current folder here let's hit enter and wait alright so now we're done let's open the app yarn start that's going to be open uh i'm going to stop my final project here and close the terminal and let's run that again yarn start that's going to be open the app in local hosts with 3000 i believe that's what we have okay so let's go to the source folder here and i'm going to remove everything that we don't need okay i'm going to remove the wait app filters css here index css logo service worker setup test inside the source we just have index and app dot js so let's get rid of this all the feature okay so now we have just have index and app alright so in index i'm gonna remove everything here and let's get rid of this we are going to back to uh with provider but for now just want to remove everything and this thing [Music] sting again okay so let's go to the app and we need to remove everything in up here and let's get rid of this header here okay so let's just put h1 let's say up all right so i want to make it bigger like that so if i refresh now we just have app all right so cool so what we need to do first is i want to start with the styling okay so we need to use uh check right ui for this tutorial so i can just copy this and paste that right here that's going to be install the checker ui emotion and all this kind of stuff all right so let's go to the source here we're going to create a folder called components and inside of components i'm going to create a couple file inside in here let's just say uh add to do dot js and we're gonna create to do dot js and also to do list.js and visibility filter simply the filter visibility filter.js okay so into [Music] i had to do here rrfc and hit enter i'm going to put uh add to do wait have to do and and to do here let's say rrfc and i'm gonna say to do and into the list i want to say rfc again let's say to do lists and invisibility or ifc let's say enough filter okay so let's go back to app now i'm going to close the terminal here i'm going to import the first thing that we need to import is a container because i'm i want to wrap our app with a container okay so let's import container it's gonna be from uh chakra ui's less react and let's put the container here and the ending here as well so now if i save now we should be able to see the container no it's not working okay that's because in index yes here we don't wrap our app with chakra provider okay so let's do here i'm going to give a comment this is for the chakra ui so let's import a chakra profiler i believe it's going to be from chakra ios let's react and we need to wrap our app entire here with chakra provider like that let's cut that out and put the inside in here all right here we go so now save and let's take a look okay our app now is in the middle that means this uh container here is work okay in container we have couple props in here i'm gonna use the maximal width i'm gonna set that into container i want to say small lighting to see the effect we can just use background and let's say red uh 300 or something this is what we have okay all right so next i want to import the heading from the chakra ui heading and wait what happened heading and let's just can i do control space in here oh yeah we can auto import with control space okay so inside a heading i'm gonna say to do police and i'm gonna say martin vertically into let's say for okay that's what we have let's just get rid of this background okay that sounds cool so now we need to import the uh attitude the form right let's say add to do like so and now we have to add to here let's go to add to do so instead of add to the here we need to create form all right let's save form here we don't need action okay inside this form we need to create form form control from the chakra ui so let's see form control gonna be auto import up here okay cool and inside in here uh basically uh in the final project we cannot see that for now because uh yeah but anyway in the final project we have form and then the button in the right side that's why we need to wrap our form control inside of flux okay that's just like the display flex in css all right so let's say flex like so and i'm gonna say control space and enter let's put the form control up here okay instead of form control i have input okay so let's import the input like so so inside the input i'm gonna set the type into text and let's try to see the final project as you can see here you have the input all right cool so under the input here under the form control we are going to put a button okay button from the uh chakra ui so let's uh ctrl space and hit enter now it's gonna be auto import up here okay so the text is going to be add to do okay so now we have the button and the input field here okay so inside this button here i'm gonna give some props i'm gonna say color schema i'm gonna set into tell and i'm gonna say the type it should be submit and i'm going to say the disable that's going to be the value i want to create a value up here and we're going to create a value and set value okay so that equals to use state by default i'm going to say empty string okay and then we need to import this you state from react okay and save let's take a look here let's type in something still disable yes that's because we don't uh give this value a value from the set value here we're going to add on change in here so let's do and change set that equals to handle input okay or any function name you want so in here i want to create a function called handle input set it equals to i want to grab to event here so instead in here i'm going to say set value into e dot dot value either targeted value that's mean everything you input inside this input field here okay so now our value is going to be updated every time i uh type in something inside this input here okay so now refresh i click something as you can see we can click okay if that's uh empty it's going to be uh disable all right so the next thing that i'm going to show you is i'm going to remove the border top right and border left or bottom left i don't know let's see here uh border top right radius border top right radius i'm gonna set it into [Music] zero which is up up here okay that's gone should i make it bigger as you can see and we don't have the border and the bottom here as well so i can do border bottom right radius is what i mean i'm going to set that to zero now that's gone okay and then in the bottom button okay button i want to uh remove the border as well so let's see order left top radius or border top left radius i'm gonna set it to zero and then border uh bottom bottom left right bottom left radius i'm gonna set that to zero so now that's gone okay that's what i want so cool let's uh reset the zoom this is what we have and what i want to do next is as you can see if i click attitude the browser is reloaded i don't want that i don't want that happen so in handle input here i'm gonna say it dot prefron default okay by putting this uh prevent default the browser is not going to be a real load it's still real oh yeah that's because we should uh put the prevent default in the button here in the form okay or in the bottom if you have function here but we are going to put the function in form so in here i'm going to say on submit set it equals to let's say handle something okay we should create a function up here let's say cons and all wait handle submit seller equals to e and we should put the prefin default into the handle submit right here and now save if i put something in here and i click add to do now there's not reload the browser okay that's what we want and also if i click add to do i want to reset the value i can do in here let's say set value into empty string okay so now if i have uh text here if i click add to do set value this string what happened let's refresh and type something here click add to um we still see the value but as you can see the bottom the button here is disabled that's mean value is empty but in here we still see the value we should put a value here so that equals to value okay so now let's try that again bam gone bam gone cool so next i'm going to create the to-do list let's go to the list here let's put the total list into the app let's say to do list like so and we need to go back to to-do list here so inside the to-do list here we are going to returning a box let's get rid of that let's do box here and inside in here i'm gonna say no to do you know to do is say yay okay and i'm going to say the text line to center and i'm going to give a margin vertically into four that's all it is now we have not to do yay all right so next let's go to visibility filter here and i'm going to import that first inside in here instead of app.js file uh vc visibility filter now we should be able to see new knife filter here okay before i work with visibility filter component i'm going to create file called constance constance.js file and inside in here i'm gonna export a variable i'm gonna export the [Music] vc pled filter and i'm going to set that equals to and i want to say all let's say all here i think uppercase and i have completed it's going to be completed and also incompleted this should be incompleted all right so that's what we want so now let's go back to the visibility filter here i'm going to remove the react up here so next i want to wrap this inside a container wait container from checker ui let's say import wait import container from wait chrome oh my god check our us let's react and we need to put i'm going to put the enough filter into the center so i can use a property called center content set it to true if i do that now now filter into the center okay so now in here i'm going to say tabs from chakra ui and inside the tabs we have the list i believe and inside of tab list we have tab for individual tab okay so in here i'm going to say maybe all and maybe complete it and maybe incomplete it like so now we have the tab but we can do uh we can use this visibility filter uh variable so we can just get rid of this everything here and inside in here i'm going to open the curly braces i'm going to say up say object and i'm going to put object.key i believe and i'm going to put the visibility filter from the constants file right and in here i'm gonna map through all the object and i'm gonna grab the filter key and in here i'm going to open something like this and inside in here i'm going to create variable call current filter set that equals to let's say visibility filter i'm gonna access the filter key okay now if i [Music] console.log the current filter of course we are going to grab the all completed and incompleted okay so here we need to return [Music] tap all right and let's see something like this and inside in here i'm gonna put the current filter and inside of tabs here i'm going to put the key and let's just say i'm going to use spectic here visibility that does filter this let's say current filter here current filter and under in here i'm going to say function uh yeah we're going to work that later so for now just something like this for just fine um object key is not a function that's because it should be uppercase like so now we have the enough tab here okay i think we're done with the styling here now let's working with the redux all right okay so now we need to inside a source folder i'm going to create a folder called redux and inside this redux i'm going to create a folder called a reducer and i'm going to create file inside the redux here let's say store.js okay so inside a reducer here i'm going to create j index.js and i'm going to create one file again wait what happened here i'm going to create one file again inside the reducer which is to do dot js okay so what is this okay so now let's first go to the to-do.js file and in here i'm going to say rfc and hit enter and we don't need to import react up here so what we need to do in here is i'm going to export default like so and let's get rid of these cons okay and in here we can grab the state and also the action okay and this state here i'm going to set it equals to initial state okay the initial state which is just variable let's create up here initial state set that equals to object here and i'm going to create uh to do for now i just want to create a dummy data and i'm going to say let's just say one object here i'm going to say let's just say id 1 content let's say coding and complete it complete it that it's to false okay so now here you don't need to returning [Music] jsx here i'm going to use switch okay and let's put the action in here and action.type basically and i just want to return uh the state for now okay we know that uh of course we need to say cash default i think or just say default okay default i want to return state state is basically just this to do is here okay all right so now let's go to index.js inside the reducer here so in here basically we can combine two three or maybe whatever reducer you want for now we just have one okay later on we are going to add the visibility reducer so in here we are going to import something called combine reducer from redux okay and we are going to import the to do as well so import to do this let's say if i type into this we have automatically from here and then down here i'm going to say export default combine reducer okay and inside in here i'm going to say to just set that to whatever the name you want okay but for now i just want to save to this if i if we just have same name here we can remove that and say to do if we have another reducer i can just do import maybe visibility filter and from visibly filter and we can say comma here and put the visibility filter down here okay we're going to do that in a minute but now let's just do it field to do okay so now let's go to the store so in store here we are going to create store okay so we need to import something called create store it's going to be come from redux okay and we need to import let's say root reducer reducer from dots last reducer or we can just access the index but if you uh access the index you don't need to specify the index just say reducer here and then we can do export default and create reducer create no reducer create store and we pass the root reducer inside the create store function okay now we can go to the index right here and we can import the store okay so let's do up here we can say import the first thing that we need to import provider provider from react redux because we need to our react app is connected with redux we need to use provider here and then we need to import store [Music] store okay and we need to wrap our app with provider like so and we need to just cut that out is everything and put that in here like so and we need to put store instead that equals to store okay and that's it all right so now we have the error here they say the deuce is not defined so let's go back to todos js in the reducer here and you can use a function keyword function or i just need to export default to do's here and let's just say cons here all right so let's put that like so now save and we see objects defined but never used let's go back to visibility filter and remove this object so now it's going to be compiled successfully and the next thing that we i'm i need to show you is how that we can grab these uh to do okay we need to grab these two tools from any component that that we want okay so for example into to the list i'm going to access the to do's from the reducer so how that we can do that so we can use uh import use selector from react redux and inside this to-do list component here we can do cons i can access the to-do's so that equals to use selector and let's say state state dot no just like that okay so now we can be able to access the to-do's from here okay so if i unlock to do this now we should be able to see the to this array as you can see here we have to do this is array okay so what we need to do now is i want to showing the to do's in this note to do yay okay so let's do here what i'm going to do is i want to [Music] say box here right like so and basically i want to put that inside the box and inside the box here i'm going to check to do is dot lang lang if the to-do's have a value i'm going to map through the to-do's let's say to dose dot map i'm gonna grab the individual to do and i'm going to returning i'm gonna returning the to do uh variable here no to do component i mean but let's say here i'm gonna say else i'm gonna put no to do yay not today inside in here okay so inside in this uh map here i'm gonna say to do this to do should be come from the to do a component here okay so let's import that control space now we have to do from to do and if i save now we should see uh wait to do we have to do right all right so that's because in the where's my to-do's here i just returning state okay state is the initial state right here so we can access the to-do we can use state dot to do's okay we can do in here or we can just put that in here to do status but let's try to refresh now we should have to do okay because we can access to do from the where is my to this here state dot to this okay hope that makes sense now let's get rid of this lock here and i'm going to as you can see here we have the error and we can fix that by say key set it equals to i'm gonna say to do this let's say to do dot id okay and in here i'm gonna pass through the to do as a property okay now the error should be gone let's go to the to do js so in here we can just remove everything here i'm gonna use box again here let's see let's say box from the react check our uis let's react and i'm going to remove to react here so inside this box here we have check box from the chakra ui let's import that and inside this text box here we have tags all right so let's put x this is going to be come from uh chakra ui as well let's do here and we can grab the to do here if it well to do let's put uh to do dot content because we need to access the con pen okay so now save as you can see we have coding all right pretty much cool so let's go to the box up here i'm going to add margin bottom to 1 and i'm gonna give a background color so that equals to like coral and i'm going to say padding to 2 and inside a text box here i'm going to do color scheme into tl [Music] and let's say is check i'm gonna say check check here is going to it's going to be a state let's say cons check and is check so that equals to use state by default i'm gonna say false okay and then yeah i think let's try to see this is what we have um i need the margin i think here so i can go back to the list here and add a margin vertically into three for example now we have space okay we cannot check that because this has come from the check from the state here in text here we can use s at that equals to delete dell as you can see we have the line right there so we can check let's say here i can do to do dot com played it if that true i want to say uh down in here like so okay so let's try to um to choose here and change the completed to true now let's try the refresh bam okay pretty cool okay i think we're done with all this kind of stuff so now we need to every time i type something in here if and i click add to do i want to showing the to do down here okay how do we do that let's go to the add to do's here but before we dispatch any function from action of course we need to create the action first so in redux here i'm going to create a file i'm going to remove everything so make it clean and inside the redux here let's create a file called actions.js file and i'm going to create one file again call action type action type dot js file so in action types here i'm going to create a variable and i'm going to export that the first thing is add to do and underscore to do so that equals to add underscore to do and i'm gonna say export let's just copy and paste that i think and the second is should be the toggle toggle to do that equals to wait toggle underscore to do and the last thing is the set filter set underscore filter and let's say set underscore filter okay let's go to action now so in here the first thing is i'm going to import all the variable that we create from the action types okay and we need to import the attitude the toggle and the filter i'm going to create uh let's say export cons uh i want to create a function called add to do and in here uh that's going to be our function i think and i grab the to do the to do here is gonna be come from the input field okay and i'm going to say i want a returning object here okay and inside this object i'm going to say type the type here is going to be add underscore to do okay and payload that we want to sign here is basically uh id and content right but we don't send id from the two to here so i just want to create a id manually in here let's say next to do id so that equals to zero for the first time and in here what i'm going to do i'm going to say plus plus next to do id okay it's going to be decrement id and in here i'm gonna say content set that equals to the tutu or we can just give the same name i think get this content and remove the two to here like so let's do the same thing basically so we're done with the add to do function here and yeah for now we can just save and let's go back to the reducer to do is here so in here we can import the variable from weights from the action type dot slash okay we need to import the add to do and toggle to do okay so in here action type is basically whatever you send in here okay it's going to be added to here if i add to the type is going to be added which is right here okay so in here we need to add case okay if the case is add underscore to do okay that's mean the function here fire okay i want to returning wait what happened i want to returning object here with to do's it's going to be array and in here i'm going to send all the state dot to do's which is here okay we know that in here and i'm going to add the to do here with new to do okay i'm going to send a destructoring up here i think let's say cons grab the id and content from the payload from the action dot payload i think action dot payload okay so this is going to be this thing here action dot payload okay we can access the id and content i'm destructoring here okay and in here i'm gonna say content and complete it of course it's going to be false first and then the id okay let's try to save and let's see we can add do or not let's say medite mini station click add to do nothing happen okay what happened in here oh really that's because in the ad to do we don't dispatch anything in here so let's go in here and the first thing that i'm gonna do is i'm gonna create variable called dispatch and in here i'm gonna say use this patch with this patch how to import auto import from react redux and in here what i can do in inside the handle submit here in here i'm gonna say dispatch and the function that we need to dispatch is to do from the action so we need to import up here okay make sure you import and we need to send the value okay we know that this value is going to be here and every time we handle the uh change the value it's gonna be set the value here from the state and we change here and after we finish typing here and if i if i click the submit enter to hear fire okay so let's save let's see midi station the moment after bam there to do is not terrible what is this all right so let's take a look at uh to-do list here and we should put uh to do's again in here i think it's a two star to do okay we're gonna fix that in a minute but for now i just want to uh let's go back to to do's here we just we need to return state and let's try we have to do this and if i add meditation i had to do we have meditation down here okay encounter two children with the same key to do one that's because in here we put the id one and then in the action we start from zero and if i if the attitude here fire we incremented zero that's why the first uh to do you add have id1 okay you can just remove everything here now we just have empty array if i save and let's refresh if i have meditation attitude we have meditation if i put a coding here we have coding okay so now we need to work with the text box here okay so let's go to the to do i believe here we have the text box here in here we can add a unchange function so we can say on change set it equals to handle check i want to create call handle check okay and let's copy this and create a function up here cons handle check set that equals to a row function here and in here i want to give just one inline just one line here and in here i'm going to import this patch again put a variable and say this patch set that equals to use this patch here and it's gonna be it's gonna become from react redux info the used spec function and inside in here i'm gonna say dispatch and i'm going to create a function in action the function name is going to be toggle with toggle to do and in toggle to do we need the id so we can access the do dot id okay so let's just import toggle to do we don't have yet from [Music] where is the action action all right so not able to do is not come from action but we're going to create that so down here let's export a function call toggle to do so that it goes to it's going to be grab to id all right and i'm going to return object again in here so what we can do in here is we need to specify the type the type is going to be a toggle underscore to do and we need to send payload payload is going to be just id okay so after we create the function in action we should go to the to-do's uh reducer here and we are going to create another case okay that's how the redux work okay so let's do down here we need to create case the case now is going to be toggle to do okay and down here we need to destructuring the id id is going to become from the [Music] action dot payload all right and in here i'm going to create variable call to dose set that equals to i'm going to say state dot to do's i'm gonna access the state and then in here i'm gonna map through let's say map we get we grab the object inside the todos all right and inside in here i'm going to say object dot id okay equals to id if that true i want to grab all the object okay i want to grab the object if the object that id same with id that we send in the action toggle to do here okay i want to grab all the object and then i want to grab to complete it and then to complete it i want to change the object dot completed okay if it falls we need to change that to true if true we need to uh text that into uh false okay so else you need to just return object okay that's what we need so in here we can just return [Music] object here and let's put to do's set that equals to to twos but we have same name so just put the twos and that was fine um id f has already been declared been declared up here um we can just put that right here put inside in here and we can do here put everything inside in here expect an assignment function called an inside cell expression all right that's because we don't return anything inside in the map here so we can just return like so everything should be fine now as you can see everything is work i say meditation if i say uh coding and if i click meditation now the styling is changed all right but uh is checks is not updated let's go to the to do now so now we need to change this check okay we can use i'm going to use use effect by the way let's use a file here i'm going to import automatically from react and down here i'm gonna run the this effect whatever to do change okay so inside in here i'm gonna say set check why this is check set uh check like so in here it's gonna be set check set that equals to to do dot completed okay so now save and let's take a look refresh add meditation and coding again right click that as you can see everything is work perfectly fine so what we can do what i want to do next is let's go back to to-do's here i just want to remove the return here let's just make a one line like so okay that's gonna be work just fine meditation and here we go okay i think we're done with the add to do it and the toggle to do the next thing is i'm going to work with the tab here all right so let's first go to the action here i'm going to create another function in here let's say export once i'm going to say set filter okay so that equals to set filter need a filter name so in here i'm gonna return object again and let's say the type is going to be the set filter okay but underscore filter and payload is going to be the filter we grab the filter like so or just put filter like we do in id here okay so now is fine here let's go to the reducer i'm going to create another reducer let's say visibility filter you see ability filter.js file all right so in here we can do rfc hit enter and of course we don't need to return jsx in here we need to grab the let's get rid of this import we need to grab the state and action all right and we can create a variable up here called cons initial state set that equals to i'm gonna grab the visibility filter from the constant here okay so let's do disability filter dot all okay so we know that the initial value is going to be let's go to constant it's going to be all okay that's all it is and we send the state into initial state okay so in here we need to use switch again okay so in here i'm gonna grab the action dot payload no not payload the type all right because uh in here we grab send a type here okay so we are we need to also import the set filter from uh action types okay so we can put in here uh what the name is um set filter writing all right so here if the case a set filter okay what we need to do is we need to return action dot payload payload dot filter okay we need to returning the filter if i send the filter uh completed we need to return and complete it okay that's all it is and default we need to returning the state which is uh initial state which is all right um let's go back to to do's i want to make consistently everything like so okay let's close that again okay so so in here i'm going to export default you can export that like so but i want to make everything consistent so export default default visibility filter okay we're done with this reducer we need to go to the index and in here we need to say comma let's say vc ability filter of course we need to import import visibility filter from visibility filter and we need to export down here as well now save and we can use the visibility the filter anywhere we want inside the component okay so now let's close everything the constant the to do here we don't work with to do uh we work in here and uh visibility it doesn't work with action we work with here okay so now of course we can change the state here with the action from the set filter here so let's do that in the visibility filter remember of course the first thing is we need to import a new selector right no a dispatch okay dispatch so that opposed to use dispatch okay and we need to say in here let's do one click in here in the tab when it's on click and i want to you can create function outside the return here i just want to put that inside in here it's fine let's say wait let's say this patch and the function name i believe set filter let's say set filter just make sure you import up here okay confirmation and what we need to send is the current filter okay so now we can change the state of the visibility filter by click the tab here okay so what we need to do next is we need to we need to filter this to do's okay i need to create another file i'm gonna create file inside of retox i'm gonna say selector select or set the ts of course and inside in here i'm going to import i'm going to import visibly filter disability filter from the constant okay and inside in here i'm going to export cons [Music] just give a function name i'm going to say get to do this by visibility filter okay stack uh two parameter here it's gonna be arrow function let's go to parameter the first is the store and then the visibility filter okay so inside in here i'm going to say switch uh it depends on the visibility filter right okay so if the case is uh let's say visibility filter dot completed okay if i the case is completed i want to return the store dot and grab the tutors and i want to filter by the [Music] completed right we can say to do that's it to do dot completed completed like so okay so if the case is visibility filter dot incompleted we need to return store to this dot filter and i want to say to do and let's say to do dot completed which is false alright for now and if default i want to return all the store dot to this okay let's go back to to-do list now all right so in here i'm going to create variable call filter to do so that equals to i want to grab the get to do visibility filter function it's long name and in here i'm going to put to dose and the visibility filter you see the lady filter i believe it's going to become from the uh where is my reducer here okay visibility filter just make sure you have same name paste that here and paste that here okay so now filter to do have the to do that what we want so in here i'm going to wrap everything and change that to filter to do so now magic will be happen if i click all let's put coding [Music] two children with the same key what happened let's refresh let's put meditation let's also put a coding and let's put a meeting if i click coding done and we can we can still see all the to do's right if i go to complete it we just see coding if i go to it completed we get the meditation and meeting all right i think we're done with this project and i hope you learned something new guys and i'm going to put uh this code in the description you can download that if you want but thank you so much for watching until the end i love you so much guys and see you in the next video bye

Channel: Cand Dev

Views: 1,954

Keywords:

Id: q2zpBgve8jg

Length: 67min 12sec (4032 seconds)

Published: Thu Jul 08 2021