Build Advanced Task Management with Multi-User Login using Next.js, MongoDB & NextAuth.js

[Music] hello everyone welcome back to another video today we are expanding on our previous video where we set up next talks and added login and registration features using mongod DV if you haven't watched that video yet I highly recommend checking it out first the link for the video is in description below along with the GitHub URL for the starter code we'll use that setup as our starting point for today's project which is a task management app using nextjs and mongod this project is great for enhancing your web development skills and creating a tool that helps manage daily tasks will build features that allow you to add view update and delete tasks as well as manage user sessions effectively throughout this video we'll guide you through creating the front end components server actions setting backend API routes and many more things by the end of this video you will have a fly functional task management app and a deeper understanding of how to build full stack application with nextjs and mongod so make sure to watch the previous video and let's get started on the exciting project uh okay now let's quickly take a look at what kind of app we are going to build so let me just uh open the app here okay so you will see login and sign up here so you can create an account or log to the existing one so for the demo purpose I will just log to my tast account okay so this is the dashboard which we will see after you logged in okay and here the user can add task task one all right you can see that we have the task counter here as well which will count the completed task and based on the completed task it will the message will also change here okay so let's add another task task two got it okay so you can see that here the assign to and assign by are same radika because we have just created the task so if I edit this task and I assign this to someone else maybe s so let's see what happens now the assign to changes and if you see in your task the task two which is assigned to radika will show up in your your task and if someone else assigned your task that will show up here and the tasks which are assigned by you to someone else will show up here so let's go ahead and check the account for snel and see if the assigned task is there or not okay allow me a minute I'll just Local Host okay so have a look here the assigned task which was this one task one here you can see it's assigned by radika assigned to snel right for example if I do this now task for radika and if I update the user to radika you can see here now the task for adika will show up okay so you can you can assign task to other users here and all the tasks which are assigned will be shown up in the dashboard so all your task will be in your task which are assigned to you okay and maybe it's assigned by you or assigned by someone else all those task will be under your task assigned to you will be the one which are assigned by some other user and assigned by you are the task which are assigned by you to some other users right apart from that the basic Crow application edit editing the task uh deleting deleting the task all those kind of things will be there right so let's dive into the code and uh start building our app so the first thing which we need to do now is to to clone the GitHub repository uh let me just show it to you which one allow me a minute so this is the gab URL which we need to clone so I'll just copy this okay and go to the terminal and say kit clone all right so the repository is clone now so let's change directory CD next out boiler plate okay so npm install we need to install the dependencies I'll quickly show you what all dependencies are there so we have already seen this in the previous video but we need bcrypt mongus next next o and react toasttify okay these are the dependencies so it will just install it the installation process is done here so npm run Dave we'll just start the server let me do that again npm run Dave all right so I'll copy this or I just click here okay so again this is the same page so now uh there are few things which we need to do so let's check our uh this file DB connect so you can see that your DB string so you need to update this to your mongodb connection string all right so for now I will just copy mine okay all right this process is done so next thing which you need to do is we need to go to our app and register out right now if you see we are not expecting any kind of name or last name right so we also need first name and last name for the user in this process so what I will do is I'll quickly do this okay so we will have two states here first name and last name and uh I will also have the fields here for the same okay where is it email password we will have it here So Below password I will do that okay so now we have email first name last name passwords are here apart from that we also need to make sure uh our model have these fields as well so let's add those perfect so we have email first name last name and password all right and apart from that what we need to do is we also need to change our register route to allow this new fields to be updated in our database right so let's go there and uh we need to add first name and last name here okay all right then we also need to add it here okay and there is one more place where we need to add this and that is uh in our actions user actions and we need to pass it here let's check it uh are we sharing those here no you also need to pass it here as well first and last name needs to be passed in the register action as well okay so I believe we have done it so let's uh take a quick look what we have done so first of all we have created the state two states uh first name and last name then we have also created two input fields fields for the same first name and last name and we are setting the fields here uh this one okay and after that we are sending those fields to the register action from this and in the user actions here we are accepting those fields and also sending that to our API oute like this I believe this should work so let's quickly test it out so let's try to create a user now okay and see if the first name and last name is captured in the database or not so let's go ahead and create test one at test.com and tast name test last name 1 2 3 1 2 3 and sign up so it says user is registered so let's go back and see so you can see that the registered user is showing up here and uh also the first name and last name is captured properly so this step is done all right so let's go back and login so you can see that I have already created two users one is radika and one is NE so I will not delete those so consider that so I have already created these users as I'm going to use them all right so let's go ahead and log into the newly created user test at test.com 1 2 3 perfect so let's start building our app and uh I will have to go to the root page from here I want to remove this I want to remove this entire code and uh what I will do is I will create two components one will be header let me do that first so let's create those components components okay and we need header. jsx and a too. jsx yeah all right so let's say RFC then just for now we will just say header component and here also we'll say a too component okay perfect uh go back to the page and here what we need need to do is we need to import header first header you can see that the header is already imported here and we also need to add too here is the too component and again the same the too component is imported from here okay perfect so we have header component to and too component here all right so let's build the the header first okay uh so let's go to header and here let's remove this let's say header okay and close this here header all right let's give a class of class name PG gray 900 these are all Tailwind classes okay so you can check it out on their website and we need this 900 text should be gray 900 and padding be four across everywhere right and inside this let's create a container deep da let's give a class of container MX Auto Flex Flex column okay and on the medium devices let's change it to flex row okay items Center justify between okay and uh we'll also need to create a logo so let's go here D and give it a class name of flex items Center margin bottom four on Med devices we don't need to give any margin perfect okay and now we need to import link and uh let's give a class off class name or one moment I will just show you how the Legacy Behavior works and then we will see the new one so this one is the Legacy one what I'm going to show you now anchor tag and let's give the class name of text 2 XEL font gold text blue 500 and uh we will name our app task champ so I just want to show you this so you can see that it is throwing a link error now right that please remove a or use the Legacy Behavior so if I use this in here so it will not give me error but this is not the proper way I will show you the correct way to implement this but for now let's use this okay we will fix this later on uh done so what we need to do is now we need to have a signed in user here and we also need to have a sign out button here okay perfect so let's go ahead and build it now so here we will see nav nav and we'll give a class of flex Flex call MD Flex Row for medium devices item Center justify between that is correct but this is not and we also need space Y 2 we don't need this just Center MD space on median devices we don't need this d y- z okay and we'll also we need this as well on xaxis we need four on y we need zero all right perfect now inside nav we need to create okay so here we need to show the uh log login info and sign up button okay sign out button so let's do that uh so before doing that we need to go back here uh in the page here let's just close all this for for now yeah so you can see that this uh we have the access to the user in session so let's pass that user data to our header component so how we'll do that we'll just say user equals to station user okay and we are also going to pass the sign out button okay so let's go back here and we need to bring the user here as well as the sign out button so let's first check if we are getting some data in this or not so let's check it out jsn stringy user yeah so we are getting user here so you can see that ID email first name last name we we have everything so what we will say is we'll say signed in as user. email user. email okay all right so let's bring this back remove this and we need to do like this okay uh one minute I just need to design this as well so allow me a minute so let's create a d here and give a class name class name Flex Flex call MD Flex row item Center space y MD space y z this is is perfect okay and uh in here we need to create a paragraph tag and give it a class name again uh it should be just font bold and text white okay and what we need to do is we need just need to say sign in as the same here the same thing all right so we can see the sign in as let's make this Capital so we can see that signed in as taste1 at taste.com you can also change this to first name if you want it's completely up to you okay or the last name or something like that you can also have both the names here I'll just keep it as email and uh after that what we need to do is we need to have a button here what sign out so button and perfect Auto completion code is giving something out let's check it and sign out yeah it's perfect okay so let's test it out if it is working or not so sign out so perfect it's working okay let's go back test one at test okay so we are back all right so our header is done now we need to focus on our too component okay so let's go back to the two-o component so here what we need to do is we need to again Design This properly so let's do that quickly because we need to build functionality as well so that is our priority so uh class [Music] name minimum height screen okay and it reflex item Center and justify Center then the background should be gray or should it be 900 or 800 we can keep 900 and text color should be gray 200 pading should be four all right so we have done that perfect so now let's go here and get another div div let's say class name with full Max with on medium devices as well and background is gray 900 again sorry let's have 800 then um we need to have rounded LG and also some shadow shadow should not be Excel it should be a large only and we need to give it pading of six okay so that is done go ahead and we need to create an H1 we will say your tasks so let's give a class names class name will be text EXL font bold text Center and margin bottom four okay and now what we need to do is we need to create a div again and give a class of text Center sorry Center and margin bottom six okay and here we will show a completion notification so let's create that da task completed and last names last name should be text Excel I believe we can name we should say like this H1 and H1 that will also work yeah we don't need to say d there okay and now we need to show the counter so let's say div class name it should be text 3 XEL Excel font will be bold and text color will be blue 500 and we will say 0 out of 10 for now okay after this what we need to do is we need also need to show a message here so we'll just say wow you completed all your tasks okay so based on the task completed this message will change so for now for a placeholder purpose we will just keep it like this and uh let's move to the next part now here we need another div give a class name of Flex Maring bottom four and inside this div we'll have a input field input field okay and the type will be text and uh value will be empty for now okay and class name we need to add some classes so Flex one padding two and rounded of course rounded 1 LG and also we need to set a background color gray of 700 text will be white of course all right now what we need to do is we need also need a button here so button and button will have a class name of let's say BG blue 500 pading to rounded R LG and we'll close this button we'll just have a plus icon here perfect so we have this let's go again what we need to do is we need to have multiple buttons here below this Dave we need to have multiple buttons so we'll just say Dave class name Flex justify sent margin bottom two okay and here we'll have four I believe four buttons one second let me just uh open that app see how many how many buttons are there so there have four buttons all your task assigned to and assigned by you okay so we have four buttons here all right so let's go and build one so first button will be called as all the classes will of course change one second the class will not be this one so I'll just say border solid border Das white border Dash B Das two bottom and padding will padding X XS will be four padding y will be one margin right will be two and I believe that's all so we need this four buttons here okay so the second button's name is your task then assigned to you then assign by you uh see all these buttons are same only difference is that the labels okay so what we can do is we can we can create a function and uh with the help of map array map function we can create this Dynamic L as well so we'll do that later on but for now let's focus on building the front end if for example the button is active we also need to change the color so we'll change the color to be background blue 500 yes and text will be of course White all right so we have done this as well so what we need to do now is we need to create a task component okay and for that what we'll do is we'll say UL okay and in this UL we'll have an Li okay and one second let me just give it a class name of class Flex item Center justify justify between margin bottom two addding two and background gray 700 rounded LG right sorry and inside this what we'll do is we'll create a div and let's give it a name of flex and items Center we'll also give some [Music] padding all right and here we'll have a button and this button will have a class of it will be a small button so we'll give it a width of four and height of four as well because it will be a circle and then rounded foot okay and uh we'll give it some margin of two it will be margin right and we let's do one thing directly give a color of background green and it will be 500 like this so we can toggle this like if I click on that button it will change uh the state of that particular task from completed to incomplete or vice versa right and uh it will be empty button I don't need to do anything here and apart from that I will have a span and inside the span I will say your task okay and I will have two so first I will have class name and uh as I will I will make sure this is a completed task so in that case I will say line through okay and yeah that's enough then what we'll do is again here we need to create a div let is give a class of flex items Center okay and inside this we need we need to have a button and inside this button we'll have to span so first let's give a class name of this class name text Gray 400 and on H we need to change the text to White and also what we need to do is give it a margin right two and here we'll say assign to snail and I will give a class name it will be flex and text extra small okay I will need this one more time here and assign by we'll again say snail perfect and after this uh and here we will have an edit icon like this and also a delete icon so paste like this okay so these two things are here so don't worry about it we'll modify this and we'll have buttons and functions for this so for now let's keep it like this only and do one thing uh let's copy this entire thing okay and have another task so you have your task two sorry one and your task two so what I need to do is I need to make this gray as in it's not completed yet and where is the line through this line through will be empty so we have the UI for completed task and empty task as well right and we have these buttons which we will make functional in a while okay perfect I believe the UI is good so let's go ahead and start working on it so let's we will also need certain uh States here so let's import state so use State and as we using use State we need to convert this into a cent component use plant all right so let's focus what all states we will require now so here so first basic one which is Task and set task will be empt array okay then um we will also need uh state to handle the current and new which is a new task like for example these all task will be hand stored in this task and this task which we are typing right now which will be in this new task okay so new task is set new task new task equals to use State and it will again be empty string all right and and uh then again what we'll need is we'll need all users as well all users because we need to show uh on the edit popup we need to show we need to show the user which we need to assign the task to so all users set users equals to again it will be array youate empty array I think for now this is good so let's do one thing first create a function to add a task okay const handle add task and inside this is this correct more or less yes it is correct yeah this is correct so let's go down here where is our input file input field yeah this is the one so let's have on change and in this on change we'll say set new task it should be task I will rename that e. Target do value okay and the value here will be the new task so let's go back here and first change this new task okay and on submit on clicking on this plus button we need to add this task to the uh this state right so let's try that as well so where is it yeah here it is and on click on click what we need to do is we need to call that function handle add task okay so let's see if this is working or not so just for sorry like this so what I will do is I will just call this here json. stringify and I will just say show me all the task here it will be displayed so let's see if it is working okay you can see that all the uh task we are adding are getting pushed in this array right this empty array and how this is happening so let's go over this function once again so yeah this is just we are just preventing the default behavior of the button click okay okay and uh if we are checking if the task is empty or not if it is empty we will not do anything okay if this is empty nothing will happen and then what we are saying is set task so set task previous and uh previous will be this task and we are just this is a spread operator so all the previous task will be here and what we are doing is we are just pushing the new task to this old task and after doing that we are setting the new task as empty okay this one all right I hope that that that's clear okay so I'll just remove this okay for now I'll keep it one more thing I want to tell you that the database schema we need to create a database schema for this as well so what we'll do is we will go to uh model and we'll have another collection here to do. JS okay and inside this this is our to do schema so there will be of course text will be there then if it is completed or not that will be there so created at updated at of course we need that as well then Creator who is the creator of the task okay for example in this case it's the tast one user who is the creator and who it is assigned to okay so these two will be the uh references to the user Collections and uh that is the only thing which we are trying to do here okay so what we need to do is first of all uh let's test it out let's create a dummy uh task based on this schema okay so I already have that so what I will do is I will just go to my this database and go to toos and here I will just copy this entire thing and go to our too and here I will so I will just paste it here the Dy data and I remove this okay so we don't need these things created at and updated at so I will just remove that for now all right and again I will delete it from here so we have three task and they are printing here as well okay so what we need to do now we need to Loop over all these task and show it here so these are just dumy t uh in a while we are just going to connect to database and grabbing the that data from there but for but for now build our app based on this dummy tasks so that it will be easier for us to implement the database database actions okay perfect so let's go back here all right so what we can do is we can also uh we can also create a component for this Li because again this is going to repeat itself okay so let's go ahead and create a task .js okay and inside the task what we will do is we will RFC this will be empty fragments okay and inside this we will have this Li sorry not this this Ali entire Alli thing copy it here and paste it here okay and we will delete everything from here so let's do one thing let's just say task do map okay and we'll also say task. length is greater than zero if that is the case then show this or else just show no todos and no task it should be tasks okay all right so now what we'll do is we'll just say we'll just call that task component here which we just created so task so you can see it is not working one second let me check oh silly mistake so so it should be like this and we need to need this okay so you can see that task is repeating itself all right uh we are seeing three task because we have three objects here in this task array right so what we need to do is we need to pass few things here uh to our task so let's do that so first will be ID not ID it will be key and key will be our task doore ID right this one task ID okay and uh then we also need to push the task itself so task equals to task we are also uh adding that as a prop then again uh what we need to do is we need to send all let's not do that for now so these are the two things we need to pass task ID and task so let's go to the task thing I'll bring both the things here task comma task sorry what was that only tasks we are only sending task so we just need to set task okay so and here we will say task. text t. text so you can see that the text is changed now right so before it was just your task like this but now it's dynamically changed based on the objects we have here right perfect so let's go back here and uh what we need to do is we also need to uh yeah let's focus on the compet completion action so here exactly here what we need to do is we need to say if task. completed okay if that is the case then what we need to do is we need to show this this background green okay and background green Das 500 or else we need to show this yeah for that to work what we need to do is we need to convert this into a template string so let's do that first all right so that is done and what we need to do now is we need to go to our to-do and see I think everything is false so we need to make someone true like some to to be completed and if you come back you can see that the color is green so if I change this as well to true it will change to True right so that means our logic is working all right so let's keep one uh true and rest of them as they are so now what we need to do is here again what we need to do is we need to say uh template string again dollar task. completed if that is the case then what we need to do is we need to show we need to uh have this class line through okay if that is not the case then we just need to show the empty strings all right so you can see that the line through is working as well perfect so let's do few more and what we need to do now is we need to also change this assign to and assign by so it's simple task so let's just say task do assign to okay and first name but we need to wrap it in this all right let's copy this and here as well we need to say Creator who is the creator so Creator do first name all right so this is again coming from the database so let's check that that as well so if I say radika 2 so you can see that it's changed so it's properly coming from our fake Json okay all right let's go back and what is okay so now the actions are remaining edit edit action as well as the delete action both the actions are remaining right so let us go and build those actions now so below uh this handle atask we'll have another uh action uh which will be handle another function which will toggle the uh task completion right so we will say handle uh toggle task equals to async not a sync we are not dealing with uh uh database right now so it will be just a normal array function okay but this will require an ID of the specific task which we are doing which we are marking as completed or incomplete okay and uh what we need to do is it's pretty straightforward so we need to say set task and uh and here we will say task. map okay and is this correct let me see uh no so t. map and we will have this function here and inside this F say task and the condition will be like this task. ID if the task. ID is equal to equal to ID let me see if that's correct yeah this is correct so see if task. ID is equal to equal to the ID which is this okay in that case just toggle it so we are just saying that completed if if is a true then set it to false if it is false set it to true I hope that's clear and yeah that's done I believe there is error okay so it should be const all right so let's do this let's pass this to our to-do uh where is it where is it yeah yeah let's pass it to our task so handle toggle equals to handle toggle okay so we are passing the task here and uh let's go to our task and also bring the handle toggle function okay and what we need to do is on this particular button here we need to say on click and uh we just need to execute this function so let's do this handle double click task. _ ID right that's what we did so let's see if this is working or not so it is not working for some reason cannot read properties of undefined reading _ ID so I believe that's correct uh what could be the issue ID is undefined why is that let me do one thing I just comment this out for now and I will print the task completely here so Json doy youy and let's do one thing let's remove this as well from here we don't need this all right so where is that yeah here so we need to see the details here so yeah we do have access to the ID so why it is saying ID is undefined let's try that again cannot read properties of undefined task. ID okay it is throwing error here for some reason did we make some issue here I don't I don't understand so task. idal ID uh okay the issue is here let's remove this and also this I believe this should work now okay this is working properly right you can see that right over here this is true if I toggle this turns true and false right that's the exact thing which we required all right so our toggle function is working properly now uh let's focus on edit as well as delete functions right and let me remove this first and what we'll do is we'll just go here our task and remove this uhi thing as well perfect so we are here so this is done this is also coming from the fake Json the only thing which is spending here is the action on this edit as well as delete buttons so what we can do is we can just go here let me just close this header so for this edit and delete I'm going to use um a component from Shaden so let me just open sh sh here sh CN this is really a great UI library and whenever you get time please do check their documentation and the components they provide so let me see which one I want one second h uh dialogue I believe it's dialogue yeah this is the one I want and uh correct so we need this one so okay so what we can do is we can just go to docs okay let me just do this and here we need to install it CLI on installation and select our platform nextjs and we need this run the C we need to initialize this okay so let's go back to our code editor in the terminal we need to we need to install this just select the default ones okay and and and let's go to this dialogue section and we need to add this as well so let's copy this here uh give it a minute or two it will it is starting yeah it is done all right let's start our server again then tap perfect so I believe I have something one second let me just check this let's do one thing let's go to our components and create one we'll call it edit task. jsx okay as well as delete task. jss delete task. jsx all right so what we need to do is we need to just we will just copy this and sorry not like that we'll first create a component and we'll copy this and this because this is the exact thing which we need right this is the delete action so I'll just copy that data as well okay perfect so let's go back to our to-do and open the task component and we need to add it here right so what we can do is we can just cut this okay and we'll just say delete task okay that's the only thing which we need now let's go to this thing just copy this and it is not working right now but give me give it a minute or two I think we need to log in now because we stopped the server before so let's do that again radika okay and I believe now this is opening right so see this entire thing is coming from the Shar CN component which we just added it's very simple and I just copied this entire code and used it here so nothing special nothing fancy perfect so uh we need to do the same for edit task as well the similar thing will work so what we can do is we can just copy this and paste it in the edit task for now and here in the tasks the task component I will just cut this go to the edit task and I will just paste it here as the icon and here I will import the edit task edit task uh the auto complete is not working one second edit task sorry I need to change this to edit task edit task and edit task okay now let's go back here in the tasks and import it now edit task yeah perfect uh you can see that the both the components are already imported here and let's go back here and see if it is working yeah both the buttons are working fine just to distinguish between them uh what I will do is I will just say are you sure you want to edit want to edit so if I click on this it says are you sure you want to edit if I click on this it's are you it says are you absolutely sure that's all so yeah the both the components are working and we just need to build the functions we just need to build the functionality around this perfect let's go back to too and what we need to do is we need to create a function here and we will give it a name of const handle delete task equals to of course we'll need id id of that task which we are going to delete okay and here we will just say set task let me just see if this is correct not equal I think I think this is correct okay M okay perfect so let's pass this function to the task equals to handle Del task let's call it here okay and again what we need to do is we just need to make sure that whenever someone clicks on edit T that function fires up right so and we have added this confirmation because we don't want the users to accidentally delete their task right so that's why we have done that okay so let's go ahead and do the necessary things so let's first focus on deleting so let's do handle delete task equals to and delete task and we also need to pass the task object the entire task object task equals to task right so again then we need to go to this delete task component and we need to import those two fun one function and one task object yeah perfect this is the exact thing which we need so we will just say are you sure absolutely sure this action cannot be done this will permanently delete your account we'll just delete your Todo and remove your data from our servers that's the only thing which we need to do okay now what we need to add is we need to add a button here below this we'll add a button we'll say button and we'll give the class name of BG Das blue 500 and also padding of two rounded LG text- white and margin top of two okay and we will say confirm delete okay okay let's test it out yeah we are getting the button here uh one again let me just put it below this yeah perfect and what we can do is we can s top four anyways leave that I don't care about that perfect so now on click on click we need to fire that handle delete function right hand a delete function this one and uh let's test it out I think this should do it yeah perfect so you can see that uh the DAT function is working properly right this is exactly what we need okay uh call it so delete is done now we need to focus on the edit function so let's close the delete one and let's go back to to-do and create that function for us where is it yeah const handle edit task equals to again we need ID as well as we also need uh we also need the new task the new text which they assigned and also we need the assigned to user new assigned to in case someone assigns it to someone else okay so that is done and now what we can do is let me see if this is correct set task this is perfect I guess text = to new text assign to equals to new assign to got it this is good so what we need to do now is again do this same thing pass this function okay do the same with task import this function and we also need to pass it here I believe this is not the most optimized way of uh passing the props but yeah for now let's focus on this okay and what else we need we also need to send the task so that we can have access to the task ID right perfect okay so right now we don't have the users data but uh for now we will not focus on that uh so we just focus on editing the current task right so let's go back here in the edit task we will call all those things and those are handle edit task this one handle edit task and task right and what we can do is we can remove this we can just say edit task right and instead of this description we'll have an input field input okay and this input will be type of text class name will be Flex one paring to rounded LG background will be gray 700 text will be white okay so let's yeah let's open that and see and uh after that I just create the HTML for now but we'll focus on the functionality later on after that we'll create assign to assign to label and below that we'll have a basic HTML select and and we'll give a class name of let's say padding one rounded LG background gray 700 text white okay and let's close this inside this we'll have some options [Music] option and we will say [Music] snel and let me copy this few more time taste user t user to right okay so you can see that this is also coming up but this is just a fake data we'll pull these details from server and let's do so what we need to do is we need to also create a button here which will handle the submission class name background blue 500 padding to rounded LG text will be right of course and it will say update right perfect so let's also wrap this in form okay and mt1 sorry not 10 it should be three or four okay I believe that will do it we can also say withd full I I'm not uh focusing much on the design part right now but yeah you can you can beautify this accordingly okay so this is done and what we need to do is on click on click of this function on uh of this button on click we need to execute a function which will update the task okay so in this case we need to have uh access to task ID we also need uh the new task okay I will just quickly create a new state for this and we also need new assign to right we need all those things but what we can do is we need to create a state now so we need three states first will be const new task set new task okay and it will be it will be use state so the default will be task do text which will be coming from the task object and we will also set the value here value task. text right and uh what we'll do is we'll also have another state const a new assign to new assign to set new assign to and again that will be t. assign to. ID right so that is there then we also need one more thing we also need this uh const because you can see that if I click on update the popup is not closing so we don't want that kind of functionality so I can just say con open say open equals to uh the default will be of course false right and here uh in the dialogue I can have these properties open equals to open and and uh not this and I will say on open change set open let's go ahead and uh so what we need to do now is we just need to change the change this St whenever something changes in this field here if something changes we need to change this as well so I need to name this new task okay all right now what we can do is I don't want to uh work on this functionality now this is a pending one so let's just send this data and see okay for now what we'll do we'll fake this new sign to we'll send some uh dummy data instead of this variable okay so let's go back and let's go here no sorry here and here I want this one then entire thing entire object I will copy and I will just have it here somewhere I will say let one second I will do this for now I will comment this out we'll need this of course for now I will comment this out I will create an variable for with the same name new assign two okay and I will have this object here this is absolutely fake so we know that so we are just sending the fake data for now okay in this and let's go back to our task our task and Let's cross check everything let's go back to to-do and edit task I believe it is properly working now it should work now let's go and try to edit something so it's it's working but that popup is not getting closed so let me just reload the page and see if that is a issue so now delete I want to edit it no so let's go back uh to edit task and here on open change is also correct set open H so here let's create a multi line function because we need to add one more thing here okay I believe this will work now task updated yeah so it is you can see that task is also updated now but here assigned by you can see it's empty so there is some issue uh in the assigned by thing so let's go and check that so how we can check it so what we can do is we can uh after this is done we can console.log updated tasks okay and we'll just say task here so we'll get we'll get the consoles here one second let me just clear this so I'll just say updated to update so here are the updated tasks there should be some issue in the updated task all right all right the issue is that the assigned task are getting pushed but if you come here and see that we are not pushing the Creator task here we are not sending the Creator data as well because what we need to do is whenever we are updating the task we also need to send the Creator task uh Creator data B so what I will do is I will just copy this one okay I'll just copy this and in here I will just say Creator is this right this should work now so let's go back and check it once if I edit this I will say yeah the Creator is uh by is changed that means the Creator is changed all right so yeah that that fixes it so don't worry about this uh this fake data which we are passing they will be coming from the database so that is not a challenge right now so let's see uh what else is pending so here these things are pending so these buttons we need to work on now right so let's go to these buttons and these buttons will be pretty straightforward so let me just do one thing so rather than doing this what we can do is we can we'll comment this out first okay and here we will say we create a manual array and that array will be like this all uh this we are doing this right so all then we have your task then we have assigned to you then assigned by you so uh in Array we can't have space so I will just remove this and uh we we'll have a filter here which will help us adding the spaces and all so allow me a minute I will just explain this quickly map okay so we are just mapping over this function okay and this is giving me auto completion is this correct let me check this is doing something but I believe uh class is same this is missing I guess yeah so this is perfect so you can see that there are no spaces here so for that what we can do is have a function uh let's do that function here let me remove this console log and let's say const filter labels equals to and it will it won't be a function basically we are just saying this all equals to all we are creating the labels here and we'll say your task equals to your task okay and similarly assign to you will be assign to you right so once that is done what we can do is we can here instead of calling filter what we can call is we can say filter labels right and wrap this and we will it will be a are so what we are saying is so this filter labels array uh we want the the value of this particular key that key could be all your task assign to or anything like that right so basically let me see uh I made some mistakes maybe in creating the labels so all sorry not this this all should be like this and what is it assigned to you and assign to you should be like this okay so it's working fine perfect so you can see that what we are basically doing is we are just we have just created this labels here and we are just mapping uh this Fields against this values against this Keys that's the only thing which we are doing here a simple a simple hack right uh okay let's go back and see what needs to be done now so we need to create a function here so for example whenever I click on your task or whenever I click on assign to or send by you I need this task to change based on the assignments right so we need to create a function first uh not only that what we need to do is we also need to create a state so these are the task but we also need something called as filtered task filtered task and the default value of this task will be this task right this will be the default value right and uh what we need to do is for example if anything changes like if the task changes we also need to change the filter task here right so for that purpose what we can do is we can create a use effect use effect okay I believe it will be imported so I just click Del this and I will say set filtered task task and when do I want to do that whenever the task change I want to filter I want to up the filter task right that's the only thing which I'm seeing here okay and below this uh filter level I want to create a function I will say const handle task sort equals to filter obviously filter and so what I will do is set active filter we also need to have active filter active filter what I'm saying is that one second I'll just show it to you so for example if I click on all if I click on this button all so it should be active right so that because of that we also need to have a this state right so by default all will be the uh active filter right so that is done so whenever someone clicks on something it becomes active that that is only uh what we are trying to do here and what we can do now is it's fairly simple so we'll say if filter equals to equal to all okay if that is the filter sorry so what we can do is we can say set filters filter task equal to task so we don't need to make any changes we are just saying set filtered and we also don't need to do that but again just for the sake of this we are doing it l if uh what we do is L if if the filter is your task okay then then what we need to do we need to set filter task equals to task. filter task. filter it will be like this task. creator. ID is not equals to user ID I will just create this user ID here so so for now what I will do is I'm logged in as I believe I'm logged in as I'm logged in as radika right so this will be my user ID so I will hard code this for now and after that what we will do is we are going to get this data from server obviously const uh user ID equals to I think we don't need to hardcode it uh we do have access to no we don't have access to users right now uh do one let's do one thing let's go back to this page and let's create a variable here let's say const user ID equals to station. user. ID okay and what we'll do is we'll pass this to every where we'll pass this to our too so let's say user ID okay like that and inside this we'll call user ID here user ID okay so this is actual user ID so we are just getting that from the session now and I think yeah that's that's it what is this error now so sorry this is not allowed there was just a space there so that's it so L if again and what is the next key so next key is uh assigned to you sorry not assigned to you your task your task is done I believe the assign to U is there so filter = toal to assign to U that is the case uh what we need to do is we need to set I think I made a mistake here this should not be like this so it will just be like this simple so if the Creator task is equal to equals to user ID that means if the that task is created by the same user who is logged in in that case do this right we just showing those task here in your task that's what that's what this is okay so again let's say else if let me see if this is correct I believe this is so we have assigned uh by you assigned to you your task all I think we have done this so let's go and test it out if this is working fine or not so where is our button yeah here it is so let's say on click on click then here we will say handle task sort and filter okay so next thing which we need to do is let me just moove this uh so what we need to do so we need to map this task based on the filtered one so let's just remove this and say filtered task okay and same way do this right so let's reload and see if it's working or not your task assigned to you assigned by you so assigned by you is not working assign by snail radika radika assign by you should also show something so let's go back to our function and see assigned by you console and click on assigned by you assigned by you assigned to you assigned by you so let's see task. creator. idal to user ID and task do assign to ID is not equals toal to user ID okay so assign by sna to radika this should be uh assigned okay okay no no no okay yeah that's correct so the problem is uh this particular thing we there is no task assigned by S or by someone else to radika so that's why this is not this is showing empty so I believe this is working fine okay we missed few things here so if you see this particular thing your task this needs to be assigned by assigned toas right so because this assigned to you currently showing all the task but it should only show task which are assigned by some other user right so in that case this should be your task and your task which is which is just assign to is equal to the current user ID means all the users task will be showed in your task right so assign to you is showing perfectly fine now and assign by you is showing none because there are no task right now okay so perfect I think this is good uh so we have done this as well so the filtering is done now let's work on this particular a little bit and what we will do is we will create a function here uh which will count the completed task and based on the completed task uh we will show different different messages here right so let's do and build that so first of all Let's uh calculate the percentage here so we will do that right here so let's say const get completion message = to [Music] percentage so let's see if if percentage is greater than equal to 100 okay if that is the case then you will say return wow awesome job okay that's what we will return return so else if percentage is greater than equal to 66 in that case we will say return uh you are rocking today you are rocking today okay and if If the percentage is 33 correct so you we will say keep it up because they are not doing great of course keep it up okay and we'll just motivate them you if for example if no none of the tasks are completed we can say you can do it okay so that is the thing now what we need to do is we need to calculate the percentage here so for that we'll say const completed task count equals to task. filter. completed length I think this is perfect uh sorry this is good okay so we can just call this function right away where is it where is it where is it here so you can say okay yeah that's working and instead of this uh where is it 2 10 we can say task. length so three out of three so if we add one more so it will be four right I hope that's clear now so let's go back and here we need to get the completion message as well and of course we are getting the oh sorry we need to create a percentage as well so let's go and create con completed percentage equals to uh perfect this is nice so let's go here and inside this D just call our function and pass in the completed percentage okay so you can see that no none of the task are completed so it is saying you can do it if I click on task it will say so I need to complete at least two so it will say keep keep it up so if I click on more it will say You're Rocking today and why this task is empty now what is happening the filter task is not getting updated uh so the issue is if you can see if I try to add something here okay and you can see that the last one which we added it is not it is not coming as the proper object which the schema requires right so we need to pass it accordingly so what I can do is I can just copy this entire object okay and I'll go here and instead of new task I will just sorry I will just create this and the new task I will return return it here for now later on what I will do is I will just change it but for now this is the requirement so let's see if this is working or not yeah now it is working okay perfect when the details will come from database uh in that case we don't need to rely on this we we'll definitely change this with the dynamic data coming from the database all right yeah so we were discussing this point that uh the completion of again there is some issue let me check oh uh so this issue is because the ID is same right uh so let's ignore this for now because the ID is is uh either way coming from the database and it will uh get updated so for now ignore this and when when this will come from database this will be automatically fixed right I hope I hope you understood what the issue is perfect so yeah so this uh functionality is also working only thing which is not working is our tabs our Tabs are not working oh because I changed this for testing purpose so we need to set it back to filter Tex filter task okay so now it will work yeah it will work properly perfect I believe the details will also get passed so you you can also ignore this error because it is saying that two children have the same key property and that's fair because the the the too which we are adding now will have similar IDs as before okay so ignore that for now perfect so I believe we are done with the front ENT no there is one more thing one more thing which requires our attention that is the color is not changing on whenever we are clicking on this right so we also need to fix that where is the function uh here is a function right so what we can do is simply first let's wrap this class and convert this into a template string Okay so what we need to do now is we need to check the active filter is the filter okay active filter is the filter which is uh this filter okay if that is the case then just show the background color this so yeah see this is working properly now all right so basically our front end is done we just need to work on the back end now perfect [Music] all right so let's start working on the database part all the actions and all the functions we created now we'll perform those action on the real database now so let's start by adding our task to the database so here what I will do is I will create another action here I will say too do actions. JS right so and inside this I will create I will say use server use server because this will be a server action and I say export a sync function add to do and the details which we need from that is text completed Creator assign to okay these are the details we need okay then what we can do is we can first of all console.log if if the details are correct or Not So console.log Okay add too text and sorry and what we'll do is we'll just return true for now okay so let's try and uh run this command go to Todo and here let's say const response equals to await add too and new task then what we'll need is it will be false is it completed no the task whenever we add it will always be false it will it will be not completed uh the owner is user ID the Creator is user ID as well as assigning is also user ID because we are just creating the task so it is throwing an error because we need to convert this into an assing function so let's convert this into an assing function it is done okay so what we can do is we will test it out so if we get a console log for this particular thing then the data has been passed to server access so let's do that let's what is the error at to do is not defined oh I'm so sorry let's go back and and let's import add too from to actions Import and Export cannot be outside of the model what is this oh I'm so sorry it should not be here we need to import it here okay so let's test it out so see we are getting this on server the add to card and the details right which we passed right now so yeah the server is getting the details sorry the action is getting the details so we can move forward uh we will say const so let's WP this in a track cat block try catch okay it's a cons response equals to await P HTTP Local Host 3,000 API add to do so we are not created this routed we'll do that just in a bit okay so let's just completely write this function first then method obviously will be post okay headers will also be there so headers will [Music] be sorry not like this content type will be application Json okay perfect and we'll also need to send the body in a stringified manner so json. stringify and we'll set text equals to text you don't need to do that in A6 but let's let's for now do that completed equals to false Creator equals to Creator and assign two is equals to assign two sorry not like that assign two perfect so that's done and what we can do is we can say cons data equals to A response. Json okay and if if the data do success not data. success if the success uh Boolean in this data which is coming from the API is not true then do this throw a new error new error and the error will be failed to add task okay if that is not the case then just return the data as it is perfect so let's handle that as well console the log console log the error then uh we need to return a custom message first of all we will say success is not true success is false okay then uh message will be something something went wrong okay and yeah so I believe this is correct let's go through this on yeah so let's go uh in our API folder and create a uh folder for add to Route add to do I believe we need to change here to add to do okay so let's open this route. JS and here we need to import our too model which we created earlier in the earlier in this video right and we also need our database mineralware connection DV okay and we also need next response okay I believe that's all the things which we need so let's create the route export a sync function post request and we'll say aade connection DV all right so we need to call it like this connection DV so let's have a track as block here so in here we will say const and we'll be getting these details text completed assign to and Creator these are all the details which we are sending from the server action right and we will get these details from request. Json okay request body all right so let's do this before that let's console log the details if we getting it or not API I think this is wrong so let's do [Music] this from here I will just say like this post API no response but yeah we are getting the details right these are the details so that means it's working fine ignore the error we are not sending the next response that's why it is showing this particular error but yeah the details are there so what we can do is we can just simply pleas say const too equals to new too okay and here we will say text we need to send text then completed then Creator then assigned to okay so see in this case we don't want to do this Creator is Creator because if the names are same then we don't need to send it in this format we can just simply say creator okay all right so that's done so let's say await to do do save okay and so what we need to do is you can you can see that this assign to like in our uh schema this assign to is nothing but an object ID right again this is object ID so what we need to do is we need to pop that object I and get certain data out of it for example we now have access we now have access to this too right but in this to if you return just this to here this to will return return IDs for this creators user IDs of these particular creators right we don't need that we need actual data so for that we are going to use a function popular function from mongod okay so let me just show you how we can do that const populated too equals to A too do find by ID okay so what is the id id is this 22 doore ID to doore ID okay and now what we need to do is we need to call the populate function on this populate okay and in this we need to mention what we need to so first we are going to populate the Creator the fields which we require are underscore ID we need this then we need first name sorry not it is not comma separated it is a space separated okay so we need first name we need last name okay we need email these are the things we need apart from that also we need to further populate this for our assigned to user assign to user right assign to so what all details we need the same so I can just copy this okay so yeah that's done let's do one thing now let's send this data back to the front end so let's check this ones if populated to do if this exist okay in that case return next response which will be Json okay and where we will send message to do is to do is added okay also we will send success is true along with that we will send this new populated too okay that is what we are trying to do so that's there then let's go back to catch in this case we are just sending a custom message next responsejson let's a message [Music] something went wrong in route okay and this will success will be failed or false and you'll also send the error message along with this okay so let's check if this is working or not okay for that purpose what we can do is we can just go back to our this too and inside this now what we need to do is we need to check for it here we'll console it console log it console.log to response okay and also one what we need to check is we also need to check if uh the response is Success if it is success in that case only we need to run this set set task function okay so let's cut this from here and let's prep it with the if statement if response and response. success if that is the case only then do this but now what we need to do is we need to send this okay sorry not like this like this we need to send the data like this all right now uh let's test it out if this is working fine or not so for that what I will do is I will just open my M compos okay there are only three tasks so let's see if this gets added or not and I have also open my console here so let say test task okay so that task is added here you can see but if I refresh this I need to see if yeah so that task is added here in the database as well okay that's perfect so the add task functionality is working fine so we don't need to worry about that okay so what we need to do now is we need to get the details from the database so all these task which we have here the dummy task let's get those details from the database itself okay for that purpose what we can do is we can create a function here itself below handle above let's do it above so let's say const handle get all Cru equals to A sync okay and in this case we just need uh to do this const response equals to await get all toos we need to create This Server action it is it is not there right now user ID okay and we'll say if again response dot response and add response do success then only do this set tasks equals to response. toos sorry not like toos like this okay so let's go back to our to-do actions and below this we will create a new to-do okay and we'll say export a sync get all toos not I think I have so I did a mistake here this should be get all clu okay because we are get all todos okay so get all todos here and we are passing the user ID the logged in users ID and again we will need a track as block let's say con response equals to await Fitch again we need to create this API route it is not there right now HTTP Local Host 3,000 API SL getet user to okay once that is done we need to set the method as post then the content type in the headers should be application Json application Json and we also need to send the body in stringified format and we are just going to send the user ID perfect uh sorry there's a mistake here okay and yeah that's it cons data equals to A wait export a sync function we need to say function here a response. Json okay and we are just rning the data here in case of error we'll just return the error okay I think this is done let's go and create our AP out so it should be get user toos and Route JS okay now again we need to do the same thing we need to import this and yeah so a wait connection DV and we will have a track L we'll have a track C block here so let's grab user ID from the body user ID equals to await response dot not reiz it's response. Json okay so now what we need to do is understand this so we need those task which are assigned to us by some other user or they're created by us okay these two kinds of task we need so for that we are going to use uh R query at mongod okay let's let me write it and I will explain that later on so cons toos equals to await too. find so we are going to return return all the toos okay for this particular condition so or the condition is this a signed underscore to is user ID or Creator user ID okay if these two things are same then return the toos okay but uh we don't need to do that only we also need to populate it okay because it will only return us the ID so we need to populate that so let's do populate and inside this we need to pass uh path equals to assigned sorry like the assigned to okay and here we need to again select what all details we need so details are first name not comma separated space separated last name email and underscore ID these are the things we need from the assign to and again we need to call popular function populate now we need part is Creator and sorry and select is first name last name email andore ID okay so these are the details we need so let's say if todos if if toos exist okay in that case do this so we'll just return next responsejson okay and the message will be not like this this to added okay and also success will be true and we are just going to pass toos todos as todos okay along with that we'll also send status as 200 and here in the catch block we'll just return return a custom response perfect so let's test it out if you getting the details or not so for that what I can do is I have this thunder client here so I will just say Local Host get all user to if I just send this so it will say 405 okay it is not like that I just need to post it as well so body and I need to pass on the user ID user ID I will grab it from the session one second this is the user ID and let's see something went wrong in the route am I doing something wrong one second let me just check yes the user ID is not like that get user to do Zoom one second let me just see what I'm doing wrong uh actually the issue is this so it should be request not response okay so hopefully this should work now and as expected it is working awesome so we can see that we are also getting the assign to and Creator values here right all those which we selected so perfect so this is working so let's go back uh to our too and here I believe we to call this function now and where we will call this we need to call it okay so what we need to do is we need to create a use effect here again use effect and this use effect will have a function and here we will call this too okay what is the error now wait get all Todo user get all toos is not defined okay let's define it then add to-do and get all todos so if you can see now we are getting the Tod directly from the database so these four todos are from database okay there is some issue okay we also need to set a dependence here so yeah so now it's working properly so we have four toos here and all these toos are coming from our database from here okay let me just show you if that this data is coming directly from toos so I will delete this DSA one from here so I will just just delete this DSA okay and I will reload the page you can see the DSA is deleted I will also go ahead and delete the task test task and you can see that the test task will also get deleted okay so yeah so the data this get to data is coming from the database now perfect you can keep it like this uh you can delete it but for now I'm going to keep it like this for the people who are going to refer to the code all right so uh we have done get todos we have done add to-dos now we need to do delete to-do and edit to-do right these two things we need to figure out now so let's quickly go and work on the delete one right so uh again let's convert this into a sync function now a sync ID and here we'll call const response equals to await delete too sorry delete to-do okay and in this case we are going to pass two things one is ID and another one is user ID okay sorry not like this before we do this I want to make sure one thing for example in this case this task is ass assigned by snel right and the owner is also snel so owner is not radika so this task should not be edited or deleted by radika in any way so to do that what we can do is we can just go back to our task where is it task okay and we will write some custom logic here so that this details this edit and delete will only show to the owner of that particular task not the assigned person okay so let's say user ID equal equals to task. Creator doore ID okay if that is the case then we need to show this else it will be null nothing will be there so just okay so you can you can see that user ID is not available here I will just import that allow me a minute but before that doing that I will just complete the logic here I need to do the similar thing here user ID is equals to equals to task do Creator doore ID in that case I'll show this or else it will be null so just copy this move it here done so now we need to pass user ID here so just call user ID and I will pass it from uh what to do so we need to pass user ID as well so here user ID is user ID okay perfect so you can see that the delete and edit buttons are now gone Okay so so yeah that was the purpose of this let's go back and delete this as well we don't need this so let's go back to our uh Delete function here yeah and now what we need to do is we need to check for the response if response and and sorry response dot success if that that is the case then and then only do this okay uh did I miss something sorry it's if okay all right so we have said that as well so now uh what we need to do is we need to go and create this action all right so now what we need to do is we need to create we need to create a delete action so let's go so export as sync function delete to-do and we'll say to-do ID comma user ID okay so try catch we say const again this API is not created we'll create this API route await Fitch p HTTP HTTP Local Host 3,000 SL API SL delete too okay and again this will be a post method meod will be post and address will be this in in body we are going to send Json stringify and here we are going to send to-do ID as well as user ID okay now come back here cons data equals to await response. Jon okay and then return data in case something nothing went wrong what we can do is we can just say this okay perfect so I believe this is good and let's go to API create a folder called as delete too and inside this create a file called as route. JS and again what we need to do is we need to copy all those three things and export as sync function post request and we need to avoid our connection DV middleware okay then we'll call track Ed block and inside this we will get the user ID and too ID from our body response body so we'll say request. Json not response it's request okay and now what we can do is we can say const too equals to await to do do find one and in here we will say idals to too idid as well as creator equals to user ID okay these two things should match if sorry if not to if that to doesn't exist what we can do is we can say return return next response. Json and here we will say message to do not found and success will be false and Status will be 404 and if that is not the case then what we need to do is we need to perform the delete action const delete too not like that delete too equals to await to do do delete one one and here we are going to pass the too ID underscore ID equals to to ID okay I believe we are not sending it like this let me check uh too actions it's like this too ID too ID okay and also here in our to-do yeah we are just sending like it like that okay perfect so let's go back to our route and we'll say next response. Jon message to do deleted success false sorry this will be true and and we will send the deleted too back all right and the status will be status will be not like this it should be like this status will be 200 because it's okay and again here we will send a custom message and we'll console loog the error in case there is an error perfect so now let's go ahead and test it so create a to-do test delete okay and I will delete this so we have got an error which is good it is saying delete to do is not defined very good we need to go ahead and delete uh I mean call this to do here perfect so let's try that now perfect that's deleted you can see it's not coming back okay and you can also see that from the database also we only have two toos so yeah delete function is also working properly what is pending now edit function if I reload this page it is not highlighted by default all task so we can go back to to-do and here I believe this should be all yeah that fixed it okay so now we need to work on the edit functionality first of all convert this into a SN function a sync and let's say const response equals to await sorry like update too okay and inside this we are going to pass ID the user ID as well as a new text as well as a new assign to okay and now we'll say if response. and and response. success then only do this okay but again what we need to do is we need to pass the new text as text new assigning as this we need to change and this also we need to change okay so let's delete this and instead of this let's write response response. toos too do assigned to we'll get these details from the database in the response okay and similarly we will say response. too. creator Creator what is the error now uh what we missed line number 124 124 okay so we have done that ID taste assigned to created to so these details will come from the database and that will uh be updated accordingly perfect so let's go to our handle edit function and task I believe here we have somewhere manually set it so let go to edit task and here I will just say like this okay and I will remove it from here all right I believe we are doing it correctly now if we are here let's okay now let's go back uh to our to-do and here on edited task Let's cross check everything it's working fine let's go back to to. action and let's copy this or else no let's create our own to avoid any mistakes export export a sync function update too here we will get too ID user ID new text and new assigned to okay these are the things which we are going to get all right and now let's create a track as Block in here let's say con response equals to A wait P HTTP Local Host 3,000 API update to do again this API route is not created we will create it shortly now let's say method is post okay headers I believe I made some mistake okay the mistake is this that we need to pass it as a object so method post headers equals to object content type application sljs okay and after that I will get that response in data as response. Json and I will have to avoid that because this will return return a promise we'll look into promises in some other video okay and now we need to return data all right in case of issue we need to just send a custom message okay something with truck and error message along with that perfect so okay we missed body body is important we need to send body here so let's say body Json dot sorry Json do stringify too ID user ID new text new assign to and also we are going to send an action why action I will quickly explain this to you one second update yeah so have a look here so if I click on this and I reload the page you can see that that is not saved in database right now so this toggle action is not updated so we are going to use the same route the update too API for toggling as well as updating the too so so we need to mention what action it is right now so is it update action or is it a toggle action so for now it's update in the next server action we will create for toggle right I hope that's clear okay so yeah I believe this is done so let's go back let's create an API and name it update too and inside this let's create a route route. Js all right and again the three things we need so let's say export a sync function post request okay we are going to aate connection DB okay let's call the track as block inside we are going to take uh action too ID user ID okay new text or new assign to sorry I don't want to mess things up I'll just copy this and I will just paste it here and I want that details from await request. Jason request body okay perfect so let's State our action if action equals to equals to update update if that is the case then do this so what we need to do first we need to find it okay so we'll do too do find one find one and update find one and update this one so again these are all uh methods provided by mongodb okay so you can just use those so now what we need to do is we need to find a too where the owner uh of that too is the user ID okay so that the requirement so let's try to write that soore ID equals to too ID too ID one second did I pass it wrong again no it's correct okay to ID and and the Creator is user ID Okay so so that's the case so we are checking against this okay that we need to find a too where ID of the too and uh creator of the too match okay not ID exact match but these two should be present in the database perfect so let's go back now if anything you need to update in document or in a uh in mongod you need to use the set command set so we are going to update the new text as new text okay and assigned toore 2 new assign to okay so this will save it like that and also we need to set this as a new so that it will return as us as a document updated document okay yeah so this is done if not too if the to doesn't exist then in that case we need to say this if not to do return sorry again I need to I need to do that here if not to do return next next response dot Jason where message will be message to do not found and success will be false and Status will be 44 okay I hope that's clear then if we found the too in that case what we what we need to do is we need to return the too so const populate to do equals to await I think we already done this so I will just grab this piece of code all right and again what we need to do this in this case we need to return next response dot Jason where message will be to updated and success will be true and to-do will of course be the populated to-do all right and in case of error we are just going to send a classic ER which we are sending till now and we are also going to console. log the to not to sorry the error so there is one more thing I want to uh discuss so if you go here you see that there are assigned two and there are users here right we need to get this users from the database that's the case right so how can we do that so let's first do that and then we will handle the toggle issue okay perfect so let's go back where where to our too and here we will uh write a function just below this and we'll name this const get all users equals to A sync and it will be con response equals to await get all users I will just name it CL and for now because I don't want them to have same name okay get all users then here what I will do is I will call it as a function and and and and I will just again do the same response do success if that is the case then I will say set users equals to response. users okay I believe I already created this set users okay that's done now this function I want to call here maybe it will throw an error now but I want to call it here just below the handle get all todos okay now let's go ahead and create this and I want to create this in the user actions because this is of course a user action okay so let's say export a sync function get all users there are no dependencies for this particular thing so let's try try catch const response equals to wait pitch HTTP Local Host 3,000 / API SL get all users okay and the method here will be get there won't be anybody but we will send headers headers content Das type equals to application application slash Json okay and now here we'll just say const data equals to await response dot Jason and we will just return data perfect and here we'll just show the generic message go got it all right so now go again into our API directory and create this API get all users okay inside this get create a route and inside this route this will be very fairly simple route so import I will just copy this again okay this time we are not going to import the too but we are going to import the user here user model okay now let's say export a sync function get okay there is no request or response here so await connection DB all right again we will need a track C block so in here we'll say const all users equals to await user. find now I don't want all the data data from that database so I will select what all things we need right so I will say select and I need these things ID first name last name these are the only thing which I need okay now let's do this let's return next response. [Music] Json and here message users success true users all users all users this one okay that is done and for the error we are just going to use the generic error okay perfect so let's test it out if this is working or not so let's go to our Thunder client new request Local Host get all users okay there is an error 404 API get all users okay this is not correct it should be get all users perfect so it is giving me three users SN radika and taste name if you see the database in the users user section we are we only have three users so this is perfect and this is correct right okay all right all right then what we need to do H so uh let's come back to the to-do and see if we are getting the details for the users or not okay so let's do one thing let's log this users let's reload reload the page once and we are not getting the users for some reason okay get all users is not defined perfect that can be fixed import get all users okay I believe it should work now yeah so you can see that we are getting the three users here okay first name last name and ID these are the three things which we require that's great okay now let's go back let's go back here and and and and we will send all users Auto completion is not working anyways all users to the task and we will also send it here okay now what we need to do is we need to go to edit task and inside this uh uh H inside this we need to call our users as well all users okay now let's do one thing go to options where is options here go here and so first thing is we need to create a list of all users here so we'll say all users Dot and and all users. map and we will say M uh I user I'll just say I user for now and here what I will do is something is wrong here no here what I will do is I will say I user doore ID is not equals to equals to task do assign to Dot underscore ID if that is the case if this is true then and then only do this okay option so what this means is that the user this task is already assigned to I don't want that user here okay if for example this task is already assigned to snail so I don't want to show snail in that particular list right now where I'm mapping this okay that is the only thing which is it is doing so you can just ignore that key equals to I user doore ID okay then value equals to I user doore ID again all right and here what we'll do is we will do this we'll say I user. first name and I user. last name so that we get first and last name and there is a empty space as well so let's see if it's working so right yeah it's working right now okay so this task is assigned by radika to radika so if you go here you can see that it is not showing radika here right it is just showing snail T and taste name that is the only thing but uh but what we can do is we can also create we can also create this here about this function we'll say option and we'll give it a key task. assign to question mark doore ID okay and the value will be value will be task. assigned to question mark doore ID all right and and and here we will say again the similar thing which we have done here just copy this and we just need to do it like that okay so if you go ahead now you can see that radika Mah is the first selected one she will always be the first because she is the one who this task is assigned to okay I hope that's clear all right so that's done and we also need to run some functions here so on select we need to run this on change event on change okay and it will be inline function so we'll say E equals to set edit assigned to e do target. value so this set assign to is nothing but this set new assign to okay so I've made mistake I will clear it up all right so that is done let me see if I'm missing something no it's perfect so let's do this let me just change this to test name and see what happens now I got an error it's saying update to do is not defined perfect and where it is not defined in our too okay so let's call that as well update too okay let's try it again again we got error so it says cannot read properties of assign to okay okay so this is happening in where 136 136 136 again here response. too do assign to I think that is the correct one let's let's do anything let me console.log response task two snil and again got the same error let me see what happened here success is true too is null so let's go back to where to our update too route here the to-do is showing as null so why that is happening let's see so let's console log to do also at the same time let's console log populate populate to do let's debug this like this now what we need to do is we need to just perform the action again okay so it says this there's some sort of error here one second what is the error okay one second I think I understand this so this should be await we should have await here that is the only issue and we having await here so await that was the missing point because see this is ring a promise to us and we need proper data so see uh this is updated now okay so this is assigned to snail now if I go ahead and I say radika maheswari so I will say test name update it will update accordingly and if I add something here it is also updating Let me refresh yeah perfect so it's working right the edit functionality is working now so what is not working is the toggling okay so let's fix that quickly all right so let's go back to our to-do okay and and and what we can do is we can call a function called as handled toggle or something like this one okay so what we can do is we can modify this function to update the database so let's try that so let's say count response equals to await toggle too I just need to pass in the ID of the too as well as the user ID who is marking it as complete okay and let's mark this as a sync perfect now I need to perform this if response. success then only perform this or else don't do that okay awesome so now what we need to do is we need to first of all I think I miss spelled it so it should be toggle to okay let's get this tole too from our to-do actions so load let's go to to-do action and let's copy this we just need to copy this now and rename it to update to and remove this for now and here we need to say toggle okay remove this as well perfect too ID user ID we have that now go back and go to update to-do where is update to-do uh update to-do okay and here what we can do is we can say if action equals to equals to toggle if that is the case then do one thing first find out the too if it is there or not to await sorry not like this await too do find one okay and here ID will be the to-do ID all right then here we will say if not too to doesn't exist show this message return next re response. Json message will be this to do not found and and and Status will be 404 okay perfect so that is that okay if that is not the case if there is a to-do if there is a to-do then it's very simple thing which we need to do and that is to-do do completed if to-do is completed if if so just set that too do completed set it to negative Todo do completed so whatever the value of this studio. completed is just turn it to Uno reverse it so for example if this is false then it will be true if by it's true it will be false it will just toggle it it will just toggle it okay let's do await to do. save perfect and now now what we need to do is we need to return next response. Json we'll say message is to do to do updated or too completed whatever suits best success will be true and we will return return the to-do okay that's the thing now let's try and see if this is working or not perfect so this is done okay so our delete to-do is working our edit to-do is working our filters are working our add to-do is working everything is working here okay now there are certain things which I live up to you so you can see this is a multi user to-do list app okay you can make it a multi-tenant one so what I mean by tenant Bas is right now we are getting all the users here from our database but let's not do that we can what we can do is we can create a companywide uh database that there will be multiple companies and each company's data will be separate from other and they will have only those users and those employees here okay so that kind of uh extension you can do apart from that what you can do is you can have a not notification system so right now there is no notification system here okay so for example if I assign something to someone then it should notify the customer or it should notify not the customer it should notify the uh assigned to user okay so uh you can expand this you can expand uh it in a lot way again this API they are not protected okay so anyone with this details can post it to them so your homework is to also find out how we can protect this API with next to definitely we are going to cover that in the future but yeah yeah that is all for today but uh I hope you understood this in case you have any questions or need any help in extending this app please comment out on the video and I will definitely get back to you on this all right thank you so much guys see you in the next video bye

Channel: Snehal Tayde

Views: 444

Keywords:

Id: QFaJ7KYhfh4

Length: 157min 18sec (9438 seconds)

Published: Fri Jul 05 2024