Deleting board data with findIndex() and splice()

[Music] hello my name is Eric I'm a software engineer this is another entry in my code With Me video series we're working on our kanban tracker again I'm Still rocking my Mr Robot look and let's get started if you didn't see the previous video I'll link up top uh we finished some adjustments on our nav bar and we made this little list of things we still have left to do which I think is a comprehensive list um above the basics so the first I think what I'm going to do today is I'm going to work on this no let's do this edit board modal right which goes along with this three button menu right so we've got a number of tasks here oops there those are the things that I'm really going to do split down into task and kind of subtask thing but um be on the board model so let's let's work on that if we look in here oh actually before I do any looking around the thing I need to get myself in the habit of doing um I don't have my development server running right now because I need to do some git stuff and the process I want to continue to get used to doing is even though I'm already on it hit checkout Main all right we're on Main get pull origin main just to make sure we have the latest stuff of main I know I do but I'm just getting in the habit and then I want to make a new Branch for the feature we're going to make and then I'll do our pull request later on and all that stuff hit checkout B we're going to call this to edit delete board pop-up right so edit delete board actually we'll call it edit Dash delete board and I guess that's going to be good enough so we switch to a new branch and now we're going to do our adjustments here on this particular Branch so we'll close this out for now and what do we've got here in uh figma right so um let's zoom out to an example here of using this button so here we can see this button right we've got either a white or darker or black menu that pops up with edit board and delete board and I've got this already I've got this here with edit task delete task right so what is that actually I think I have this as a its own component here's my delete modal which is the whole giant so we uh confirmation thing you know maybe this isn't on its own thing maybe this is just triggered from this button so maybe I need to make this a component first so let's go look at my task view card in here we've got a lot of things going on I have a show menu so this sounds like what I'm thinking of sounds like this right if we go down here there's my delete modal there's my edit modal here's my show menu right and this is just saying if show menu is a truthy value and then this pops up and right now what I've got in here is edit task and delete task they're not doing anything oh I mean they are doing things right there buttons but I think I'm gonna I'm gonna adjust the way that this works so I don't just copy and paste this code over to a new section I think I can make this its own component and then we can reuse that component and send in the prompts because this we've got an edit task and delete task and what I'm thinking we can do let's just jot down some thoughts here to make this its own component right we'll make make menu a component edit delete ask text uh based on Prop right so we can pass in a property just says like I don't know type can be task or type can be bored and that can determine how we do that the functions are also going to be props right where we can rename them whatever they're going to be but like we've got an edit and we've got a delete and it's going to be the same thing on the board buttons up top you're going to be editing a board including a board so you've got edit function and delete functions as props and then the other thing that I'm thinking I'm going to do is I'm going to try something new because normally what I'll do is I'll just make this this thing right here its own component and then just have this button here be its own thing and when you click on this it'll set like I'm doing here it'll set show menu which is what's happening now right if I click on that button that button this button it changes this the state of show menu which right now if show menu is I mean it's only ever really going to sit well actually no I can click it again and close that menu right so this isn't an actual modal pop-up so I can't click away from it and turn it off it's got to be clicking that button which I guess is fine for right now but they're separate things right and I don't really love that that should be its own thing and this button should control this modal popping up or this this little box popping up they shouldn't be separate entities so I think I'm going to remake this whole thing so that this button is also included because this button is here as well right so why do I need two versions of this button when it can just be one component so let's see how we want to do that now let's see if we can make this work out so what I'm going to start with here is I'm going to Route this out and this is probably going to mess up some stuff in CSS you know I'm not using styled components for this and I wish I was and I'm not going to start now because I'm almost done and I'm just one person and I want to finish this thing but if I were using styled components I would do some styling for this particular thing because it would just make it a lot easier but anyway let's do create edit let's make this here because I've got my board modal which handles making and editing board I've got my my task modal delete modal I guess should be up there too I'll move that at some point and remake my or re-link my files but let's make a new thing here and let's call this edit delete box dot TSX not the most uh creative name but here we are all right and we're gonna just do our regular boil plate boilerplate all right I know I'm gonna have props in this thing but we don't really know what they are yet and my return and we're just going to do you know just to start us off just have an H1 of come on Emmett just an H1 it just says you know edit delete box right so nothing crazy here this is our this is our function uh we're gonna import our edit delete box let's see if it can auto fill for me there we go let's do ourselves the favor here of I guess here's my show menu here's my button that controls the show menu I'm in the view card right now still right so um I need to make sure I'm understanding I'm I'm doing this and not this yet so this is what we're going to be adjusting first and then we'll copy it over to this so the first thing I'm going to do is I know this button is going to be in there and I know all this stuff is going to be in there so let's just copy this over first I don't I'm not going to test a import right now I've got some extra stuff in here uh you know what let me just take this whole div and then we'll clean it up it's options wrapper give right because that's that's what everything's living in right now at that point we won't have an error here right so I could in effect at this point now delete all of this my options wrapper and instead just do my edit delete box and it's going to freak out because this has a bunch of stuff in here that we haven't actually imported yet right on any props that we haven't passed down yet which is our edit modal and set edit modal which is just making the the actual menu pop up right of what we're editing and a delete modal and delete you know which is making this stuff pop up right so um we're gonna have to do it a similar way because I like that way because of this is controlling in in my view task card here this is showing if delete mode or edit modal for the task is going to pop up and we'll do a similar thing over here so those are definitely going to be props right and we're not going to call those well I guess I guess we can leave those as set edit modal and set delete modal because it's still going to be an edit and delete function for the board as well and the only thing that's going to change in here is going to be show menu it's going to be controlling its own self and not the parent isn't going to control show menu right and is it going to work the same way or we see the buttons at all times but depending on the state of show menu if show menu is true then all this stuff displays right we can remove the show menu from our task view card we can import I'm going to let this do this for me I should just be able to do use state right and get the import statement there just like we had over here we bring back our State and this is already set right we have a default of false the show menu button is going to alternate and set it to the opposite of whatever it is actually this we can see thank you is an import that we're missing which I don't know if this is going to be the right location or bring this over maybe that'll work we'll see looks like it's okay and now the only thing we're going to do is import our props right so I've been defaulting to type props I was advised to use interface because you can extend that if you need to extend it and when I do an interface I don't need to do equals I believe I can just do interface props like this and we're going to be taking in this set edit modal and set delete modal and I don't need the status I don't need the actual state I'm just bringing in the setter because I don't need to set it to the opposite of the state I just need to set these to true that's all this does so where are my Setters here's my setter and this is the thing I'm going to be importing so set delete modal is going to be that react dispatch and same thing with set edit modal so I'm just going to go ahead and copy those over here right and now I can bring in I'm using typescript which is why I'm doing that I can bring in my set delete modal and my set edit modal as my props and these are of type props all right I've also got context here so that I'm going to have to handle in a second all right but all that's looking okay and then if we come down here now we see my edit delete boxes telling me hey we're expecting these props here your set delete modal and set edit modal so set delete modal can I shorthand this no I wish I wish react had the shorthand where I could just do this and it would just work so that's going to be are you gonna autocomplete for me no great we'll just do this then great all right so all that looks like we're doing okay and then the only thing left over here is that theme that context right which I have to do a number of things here we have to import theme contacts which let's see if this all matches up for me and gets me to the same place it looks like it's going to right I also need use context here with you state use context I'm bringing in my theme context all right fonts theme context equals use context of theme context and now my theme context is no longer airing out on me because all that stuff is back and we're in business so uh what's going on here I never restarted my development server so let's do that and let's just take a look and see now if the adjustments I made to this task view card let's see if that's working so really had I plan this out better I would have done a different branch here I would have just done this as like the edit delete modal edit deletebox modal or something but I didn't so here we are it definitely is something to get better at right but let's go here let's open this up and ooh ooh ooh look at all that why is that showing up well is my button working hold on hey that's still working isn't it so that's fun but for some reason all this stuff is showing up and I don't know why make menu a component I'm going to close this for a second just give ourselves a full screen here actually that's in my button isn't it the one I just closed is where it's actually at this I see so for some reason that's showing up I don't know it that I need these notes anymore make manual component additively task based on Prop the function based on problems getting rid of that and that should fix that for us there we go cool build UI for onboarding flow there's our button that is still working as we intended it to work but we're not totally done right because we still just have the edit task and delete task as just this is just there right this is static and we need to make these props as well right so the other thing we're going to do here is I guess what I can do is we'll just call this type Maybe what do I like sure I guess we can just call this type and type is just going to be a string nothing crazy and instead of the saying delete task or edit task this is going to be let's make this an object or a template literal and a set of this um oh I'm gonna have to put this in JavaScript right there we go and then instead of bet this is going to be type edit type and then we'll just copy this down here and change this to delete type and now over here you can see now I'm being warned that I'm missing type over here type is missing and type here is just going to be equal to task so when I use that somewhere else I can set type to board and let me make sure everything is saved saved all and there we go edit task delete task um I see it was lowercase I don't know if it was supposed to be capitalized I don't know if that matters I'm going to leave it capitalized I think that's fine but there you go there's edit delete task so now I should be able to replace this little button over here which is that component so let's get out of the view card stuff we're done we're done we're done with that oh I should have kept it open but whatever we'll go back in there in a minute um let's go to my let's open this edit lead box again this is what we're working with and let's go back to our nav bar here it is here's our button right that is um in this internet box that we set up in the last video and our button sets show add task to true right that's this button and in the button next to it is our Burger button and right now it's not doing anything right so what I should be able to do is I should be able to replace and all this stuff this has a floating menu that oh this menu is only showing up on the smaller viewports that's this menu so we're going to leave that alone right all we're doing is this hamburger button we're going to just eliminate and replace with our new component that we just made which was the edit delete box we know we've got a bunch of props we need to send in there we've got this set delete modal edit delete modal and type so right now on this I don't have my set and edit delete modal um but what we'll do what do I have here I've got edit delete box that's the thing we just added right I've got my contacts I've got State and you state I've got a theme toggle got board list and I no longer need this burger thing anymore right so let's just let's just make some functions in here um const uh and we can call these the same things set delete modal and set edit modal right so we can do const Elite modal set delete modal is use state with a default value of false and then we'll have edit modal and set edit modal also with a use value or you state default value of false you can see right away this is um the CSS value here is is changed whenever I did in CSS now it shows a background here so we'll have to go and fix that but we'll wait a little bit let's switch this around a little bit right so now we can pass in things we're being told we need to pass in right that we just did set delete modal edit delete modal um which will do that and it was already exist in our component so I don't have to set up top types again or typescript and then we also have type which in this case we know type is going to be bored oops it's not a that's a string right forward so if I click this all right so here's a problem and it's going to be another CSS problem right because all of my CSS that I did for this is just related to this existing within the the task card so we'll have to adjust that too but this is working right we click the button we get our two buttons for edit and delete board that's what we want the next thing we're going to do is these edit and delete board buttons need to do something right and that something is just like they do here is edit task pops up this delete task pops up which again I need to fix the the theming on that delete board I think is going to be a little bit easier right I've got this delete modal already set up and you can see I've named some of this stuff directly for removing tasks right but this is all set up and we're just going to reuse this thing and instead of it removing a task it'll remove a board which I don't remember if I already said a VMware function so if I didn't we'll just do all that here we've got item that we pass in which is a string which you know you sure you want to delete this task I'm passing in you know on this other stuff we pass in some titles and and things like that so this might require a little finagling on our part because I don't think right now oh you know what it does know so our our nav bar already has because of how I've been passing around props and things like that it already knows what board we're on so you know when you see things like this where it says this is board UI onboarding flow and here we have delete task and are you sure you want to delete go do our onboarding flow task I'll be able to pass those props in Fairly easily so let's stop talking about it and let's actually do it let us follow along with what we did before or do something similar right so here's my nav bar and I'm going to look at let's look at what we did before in the task view card right where if delete modal is active then we just have delete modal here and that's controlling its own background stuff and all the buttons and things so let's do the exact same thing we'll do delete modal because I've got board modal here which I haven't set up yet to do the edit process so that's probably going to be its own thing that we do not in this video so let's do this so in navbar if delete modal we're working on delete modal we're in my return statement and we're going to do a little thing down here where we say delete modal if delete modal is active we're going to return the delete modal can I let's do this let me let me start this off a little bit differently we're just going to do this delete mode also I can it's not going to let me uh Auto Import that's okay with the good old-fashioned way import Elite modal from where am I am in navbar so I have to go up oops there it is delete modal right so down here we'll just do a quick comment and do um I'll go delete modal or selected board and we know we're going to have our delete modal which is going to need a bunch of prompts and I'm getting this freak out over here right because um I am actually outside of my main navbar div which depending on where I set this up might be a problem we'll find out I don't think so because this is set to fix right there you go so delete modal showing here it is delete this undefined um I guess part of my problem right now is the the menu over top which is interesting but that's okay right now it's just displaying no functionality is is there right so let's number one kind of just turn it off right so we'll say like if delete modal is true and we display that otherwise we explain nothing and everything is saved but why aren't we disappearing here I just did a quick refresh my uh development servers are running if we click delete board now it's popping up for us right and I can't um but the reason it wasn't disappearing before is because that was too true and I don't have a way right now to turn that to false because cancel doesn't do anything so let's start putting in our props so we need set delete modal we need item we need Title and remove task which is we're going to adjust what that is right we'll let's do that real quick so we don't confuse ourselves if we go in here and we do instead of remove task we're going to call this remove item right just to stay in line with the item that we've got we're going to call this remove item we're going to call this remove item and if I go back to my task view card my delete modal instead of remove task is now called remove item right and remove task this function still lives in the task view card so that's done and now let's go back to my nav bar so with delete modal we've got our props now we've got set delete modal which is this let's go ahead and just same thing bring that right in set delete modal what else do we have we've got item which item is we see it says string so in this case item is board we've got what's next title right title which is a string but we're going to derive that from what is set as visible here right because we're setting is it visible I think it's visible let's send visible in there let's see what that says and we also still have the remove item function which right now we don't have but we will just pass in a narrow function that's just a console.log and we'll just say remove uh board right so if I hit cancel on this now that you close out because that was my previous setup in that modal the lead board opens it up cancel great um delete this board we'll cut off here so we're gonna have to fix that are you sure you want to delete the platform launch board that's all working awesome I love it let's look at our console yeah it was just from when we were setting this stuff up so it's clear that and if I hit delete then it will all our remove board function whenever we set that up so cool I'm Jazz that's working that's phenomenal let's continue on and let's get more of this done so how am I gonna actually remove the board well I don't know yet so when emmer did I already set up a delete board function I've got add new board but I don't have delete board the way we do deleting and this stuff so far how I've set it up in the past like if we're deleting a task we have our function where we pass into board data board index com index task index etc etc and then we just find that using immor and we delete that task as if we were modifying a big object that isn't state right and then we pass it back and update that state so if we look at our Json object here this is a little bit easier right because my boards are in a big array I can search for the name and I can find the index based on the name and then I can delete that particular index if I don't already have access to the index so if I'm looking at my app right and I cycle through the boards each board has its own index in there but I want to know I got to figure out where I want this to live right because if this function is going to be called by a component that lives in the nav bar then it could just live at a higher level here or we could make it a hook but let's just make it raise up what level this this is going to live at let's do this by name right let's not worry about the index stuff also I've been was called out the other day on doing all of my functions as a let but they should really be a const right so let's just start this off and let's just do const Elite board equals and let's not do anything complicated let's go slowly step by step and just make this console.log I'll say delete this board right and I didn't make this a function equals a function all right delete this board and what we're going to do is we're going to go through navbar we will send that in as a prop so we've got delete board let's send this through into navbar all right it's yelling at me because it's not actually there this is going to be a void function I'm not returning anything from this let's go into our nav bar let's add this to our props let's check this in word wrap this and let's go down to our deleting modal and instead of just console logging remove board pass in delete board right which right now let's save everything is just our function back at the app upper level that says delete this board from App level let's say and uh let's just go ahead and make sure that's working I need my console open and if we look and we say delete delete this board from App level cool that's a start but what are we deleting what board are we deleting right so I don't need to look at my delete modal because that's not actually doing anything here but my nav bar is sending in that prop and I'm gonna we're gonna update delete board a little bit right because Within navbar we already determined visible is our title that's where we see marketing plan and I don't have access to the index here so let's let's be creative so let's update our delete board so that it's going to accept uh it has a parameter of we'll call it word name and that's going to be a string all right so now this is going to adjust a little bit or am I typing and I do have to put that in there we go back to our nav bar let's edit this so it knows the report's a little bit different now so now instead of just calling delete board this way we have to set this as function and pass in our visible right because visible is going to be the name of our currently selected board now back here let's go adjust this and let's make this a template literal and we're going to remove this board and we're going to just say um delete board name from App level so we're in here if I click delete delete marketing plan from App level that's what we're on go to platform launch here we are delete board are you sure you want to delete platform launch board to remove all columns and the tasks and cannot be reversed sick I think that was something that was in the the model 2 that I had previously set up depending on what type I sent in Elite platform launch from App level so we know that's working we're sending back the title awesome now what are we going to do well now we're going to do what we're doing here and we're going to import another function we're going to create from immer so let's go write that function and we'll do it uh right down here under add new board we're going to do delete a board right and we're going to say export and I should be doing again cons to not let export const delete board um set the same I'm calling it the same thing huh delete board let's call that delete board imma which I wish I used that naming convention for all these things before equals a function we're going to do whatever our code is in here what I'm going to do is we know we need to pass in the board name that we have right so we'll just we'll map this out our code we're gonna except chord name right we're going to search through our board data or uh and to find the index a board name then we'll use our array method and delete at Index right so just like we're doing with the delete task here we're splicing whatever task index we found and we're moving one item from that right so we're going to splice to delete that index cool so just like all the stuff I have to pass in board data right and board data lives in app anyway in this function we're going to take in or data which is a type of board data which I had set up way long ago and we're going to accept the board name which is just going to be a string value we know that I guess I should do const updated board equals the produce function right where I take the board data that we're going to get and we call draft and then we can do all the stuff that we would be doing normally here within our draft right so just like I did over here in deleting a task now instead of uh so here here I had to find some stuff right we use find index so we let column index equals columns array dot find index and we look through each column and then for each one we're looking to see if that column dot name is equal to the task that we passed in here that status right so we're going to do the same kind of thing here so we're going to say const forward index equals let's look here right we're going to have let's bring our Json object over here just so we can see what we're doing so this whole thing is our board index I'm in our board object or data object right so it's we're going to use draft now though because we're Amber allows us to edit this draft object I did a video when I run over aimer functions before and hopefully I remember I'll link that up top as well drafts dot right my boards array Dot find index and just like before this is also a function right let's look at how we used it last time where for each column in that case we looped we basically mapped through each column shouldn't say map here but we we iterate through each column and then we had just a just a just a verification right if column name is equal to that so what we're going to do is we map through this we iterate through this data and for each board uh in that array right for each object which is all this stuff right this whole object in this array that goes all the way down until we hit the next board here's the next object right for each board object in that we're going to see a four dot name which is this right this is board.name we're going to see if that is equal to the board name that we're going to pass in and that's it and as soon as it finds that value let's say we pass in marketing plan well that's of index of one and as soon as it finds that name then our board index value becomes one then what are we going to do well and we're going to splice right just like we did before we've got our delete task right and we just kind of said draft dot Boards of board index and blah blah we navigate it down to the appropriate level of this gigantic object that I'm kind of tired of working with because I've been doing this project for a little while now and I want to do something new and we spliced it out whatever our index was and one so we're going to do the same kind of thing here we're going to do draft dot boards draft dot boards within our boards array I'm going to do dot splice and we're going to splice out our board index and one item and then at the oops and then at the end of this whole thing so we we we're writing our code we've accepted the board name we search through find our board data and find the index of the board name we splice to delete the index and then at the end of this it stores our updated gigantic object and updated board so we want to return updated board and that's how that's going to work out for so that should be correct all right I think all my logic there is sound and accurate so let's go ahead and let's before we actually update the state on this we'll just console.log the entire object here's delete board we're going to import Elite board Amer and we're going to store our result so let's say const result equals delete board immer whoops not delete board delete board immer and we know we have a bunch of things to pass well only two things to pass in here which is our board data and our board name and then let's just console.log result we can look and see what happens and see down here we're going to get an object right so if we have platform.launch which is again what we're looking at here right boards and platform.launch is the first board in our array if we do this and we delete platform that launch now we see my board array has three which are two which previously here we didn't update state yet it's three and if we look at our boards we have marketing plan we have roadmap so that worked right let's do this again and then do a second test just so it's obvious to ourselves that this is working out correctly let's start with marketing plan right and again here's our platform launch board um let's click our button up top lead aboard delete here's our board array and then marketing plan should be gone rated is so now instead of just console.logging this thing let's call our set for data function and let's put our result in there to actually update state so now if I refresh this thing we start with our original data set we look up platform launch we bring this up we'll fix this in a second delete this board are you sure you want to delete platform launch board this will this actually will remove all columns and tests and cannot be and cannot be reversed delete oh look at that it goes away my my modal here is still showing so we'll fix that too but hey that worked out for us right that was excellent let's do another one here delete this board boom it's gone so we know that's working out for us and that's exactly what we wanted to see so let's do some of our minor tweaks here right so we're done with the Zimmer function thing let's get out of there we need to adjust how this delete modal is still showing right so if we go back to our edit delete box where are we showing this again in the nav bar so if we go back to our nav bar and here's our delete modal now when I click when I go in here and I do the same thing for deleting the task I'm deleting the whole task so everything is just kind of going away because that modal is tied to the task and it's not tied to the nav bar right so that's why that's going away so in this case we're going to have to do something a little bit different right now and remove item all I'm doing is changing um well I'm calling delete board and we're passing invisible right so we can just make a do function for this then and have this Loop here I guess maybe or or I guess I can have the modal handle itself because right now we open this mode when we click the background it's changing the visibility of that modal so why not just have the delete button also trigger that functionality so we could do something like const delete and close is a function where we call remove item that function and then we also call set delete modal we make that false so now instead of this just being remove item we make this deleting close so let's click out of here so this should still work right that's gone test deleted my modal is closed one platform launch we click delete board if I click delete now I've deleted the board and the modal closes excellent that's what we wanted to have happen there we go I'm not going to do edit board yet in this video what I'm going to do is I think I've already got this stuff set up in CSS so let's go see how we have it set and see if we can make a quick adjustment make this appear the way we want it to appear to appear I know my previous version was in the task view card right and in following with my ID stuff got an ID here of task view card so let's go look at CSS and see because I'm pretty sure I did that originally and here's task view card and here's the edit delete thing right is that what I was calling this right this was edit delete this was in options wrapper there's options wrapper position relative right so I guess in effect if I take this ID away and just add a delete wrapper so all that stuff is is there as well right all this edit delete stuff is no longer bound to task view card but it's its own thing all right let's do that fingers crossed okay look I already see it up here now that's good right and this is funky why it's working in one spot not but not the other so I wonder if we just take the whole thing and we're just going to move this for now I want to put this up here I wonder if I go back and if I change my edit delete box just to this this of options wrapper if we adjust this to an ID of like edit delete wrapper right if we give this whole thing an ID now instead of this just being a class with all this stuff let's not call this wrapper let's call this edit delete box I guess there we go so now I've got my ID on there so that's controlling a lot better and both sections have this the only problem up here is that it's going off screen a little bit right so I don't particularly love that so maybe what I'm going to do is let's look at how this is handled here it's just underneath this thing right they definitely appear two different ways and the two different positions so here are my edit delete box edit delete wrapper which really isn't necessary to have both on there right but I'm going to leave it for now this is where all that stuff is contained so if I take this let's say let's go back down to our navbar section all right and I've got a bunch of navbar stuff here let's experiment let's just throw this here and this is going to be the navbar version of this right so everything else is going to remain the same as it is above but just my right and my margin top are going to move so let's just experiment here that pushed that down and it doesn't look like that moved out either right so I think we're going to be in good shape because if the selector here now the specificity and my right is going to change to what what zero I don't need to write on here anymore yeah I mean that's okay I can't see it and I guess it's it's raised up a little bit it looks like my my spacing on my nav bar might not be exact so what I've got here even though I thought it was 96 height what do I have 64. is it different I thought this was the same across all views but maybe the navbar height changes here it's 64. and here it changes to 81 81 in tablet View and 96 okay so my nav bar height changes between the views didn't realize that before let's fix that so my nav bar size is going to change nothing else except for height is going to change and what did I say that was 81. pixels I think and then 96 81 yes it's my only thing that's going to be in desktop styling for right now which I don't even have a breakpoint set there's not a whole lot of difference between 81 and 96. so just for right now I'm going to just set this as 96 and just leave it it causes a problem later on we'll we'll adjust that and now we start to see it a little bit and if I move down we see that shrink you see that adjusts the color I've got the right colors going on there it's just very matched and I guess you can go up to my nav bar and go back to this edit delete box edit delete wrapper and our margin top we can shrink down to maybe 30 pixels and it looks a little too close let's do 35 and I guess that'll be better at least for now right now we've got this working we oh that needs to be adjusted two where's my Elite modal or do I have this as ID of delete modal the class name of modal right so that is what setting my Z index which should be anyway which I thought was on top of everything but also this is going to be because the Z index on the sidebar I think is higher which I don't think I need that anymore for anything besides this right and then and the background modal isn't going on top of that either here's my sidebar Z and X up one so I'm gonna have to adjust my nav oh my nav bar is a zx1 what's mine what's my sidebar Z index Z index of two so I guess let's go up to my nav bar and set that Z index to 2 and see what happens there you go so because this modal is being called from navbar that's the parent component it's defaulting to that Z index which was one and the Z index of my sidebar was two because it's overlapping this which is an index of one right so now that I've adjusted my basically I had my Z index of navbar was here my Z index of sidebar was here so even though my modal was set to like 999 or whatever it still wasn't hitting that cap of two right it was just kind of 999 relative to the nav bar where that was now that navbar in and sidebar are the same now it overlaps and now my modal is acting as it should be working so that was a lot but fun and we did what we set out to do and we've got more progress on this thing so I haven't finished this right but let's we can see we've got a lot of adjustments that we made here right a lot of file adjustments here um and we are in our edit delete board Branch so we're going to just get add our adjustments we're going to get commit with a message where we're going to say add edit delete pop up and delete board functionality uh this might be too long for commit message I don't know but I want to make my notes update navbar Z index cool hit push origin what did I call this thing this Branch edit delete board there we go so we've got all our changes pushed up to that specific branch we'll wait until we're done with all this stuff um because we'll do the edit function as well and then once all that's done we'll merge our changes into our main branch and then we'll be totally done with that section and then we've only got a uh a couple of things to fix and validation which might be a little bit more work but we're cruising on this thing and man this Project's almost done and I'm excited to be finished with it and add it to the portfolio so thank you again for joining along with these code along videos I would love to hear your feedback so please reach out and let me know what you think see you again on the next one

Channel: EricWinkDev

Views: 126

Keywords:

Id: nOrdAQR-jXU

Length: 53min 19sec (3199 seconds)

Published: Thu Jan 05 2023