1 00:00:00,740 --> 00:00:07,700 And the last piece of functionality I'd want to add is the ability to edit the item, probably the hardest 2 00:00:07,700 --> 00:00:14,840 one, because they're just going to be a few moving pieces, but I think we're going to be in good shape. 3 00:00:15,140 --> 00:00:16,750 So let's start working on it. 4 00:00:17,120 --> 00:00:19,220 We're going to go with objets. 5 00:00:19,230 --> 00:00:21,790 And then I would want to come up with my function. 6 00:00:22,190 --> 00:00:24,560 So let's scroll up removing them. 7 00:00:24,770 --> 00:00:30,020 And then right after the remove item, we're going to go with const added item. 8 00:00:30,440 --> 00:00:34,630 And again, we're going to be looking for Deery just like we remove them. 9 00:00:35,360 --> 00:00:41,540 In this case, what I would want is to get that specific item whose idea matches. 10 00:00:41,990 --> 00:00:44,780 So in here I did not return that item. 11 00:00:45,340 --> 00:00:48,830 I only returned items whose D did not match. 12 00:00:49,100 --> 00:00:55,970 In this case I do want to get that item and I'm just going to use a variable here specific and that 13 00:00:55,970 --> 00:00:57,440 is equal to a list. 14 00:00:57,800 --> 00:01:04,140 So my state value and I'll use my find method can wait right over. 15 00:01:04,460 --> 00:01:06,200 And I say if the item. 16 00:01:07,360 --> 00:01:14,920 ID matches Van, please return that item and then once I have my item, I would want to go with set 17 00:01:15,190 --> 00:01:16,240 is everything. 18 00:01:16,510 --> 00:01:22,150 I'll set it equal to true then as far as the ID remember that set, etc.. 19 00:01:22,480 --> 00:01:24,670 I'm going to go set at it. 20 00:01:24,670 --> 00:01:30,460 It is equal to the ID that I'm passing in right here. 21 00:01:30,700 --> 00:01:35,100 And then the last thing if I'm editing, I also don't display it. 22 00:01:35,110 --> 00:01:38,020 Well, which item I'm actually editing. 23 00:01:38,380 --> 00:01:43,120 So I would want to grab that title value and pass it in to my name. 24 00:01:43,450 --> 00:01:49,570 So what I'm gonna do is set nine and then I'm going to go with a specific item which of course holds 25 00:01:49,570 --> 00:01:53,010 that value, and then I'll pass in the title. 26 00:01:53,560 --> 00:01:55,030 So that should do it. 27 00:01:55,240 --> 00:01:59,740 And of course, we can pass it down to our last same spiel. 28 00:02:00,070 --> 00:02:02,920 We're going to call this at a time. 29 00:02:04,230 --> 00:02:12,210 Just like with the removal, we're going to go with added item is equal to the added and that item function, 30 00:02:12,360 --> 00:02:16,680 OK, so we save it and in the list I would want to structure it. 31 00:02:17,130 --> 00:02:23,590 So we're going to go with edit added item work show and then of course we have our button already. 32 00:02:23,600 --> 00:02:32,730 So we go on click not on is equal to the edit item, but I need to pass in my one function added item 33 00:02:32,940 --> 00:02:39,810 and then I pass in my head, I save it and then of course we'll have to handle that when we're submitting 34 00:02:39,810 --> 00:02:40,240 the form. 35 00:02:40,530 --> 00:02:45,930 So let me add first item and of course once I click, check it out. 36 00:02:46,260 --> 00:02:47,700 I have here to add it. 37 00:02:48,060 --> 00:02:54,870 So I clearly state that we're editing online, which I'm actually editing. 38 00:02:55,200 --> 00:02:59,170 So now of course, we just need to deal with that when we're submitting the form. 39 00:02:59,550 --> 00:03:00,720 So let me scroll up. 40 00:03:00,900 --> 00:03:02,230 Remember, we have that else. 41 00:03:02,250 --> 00:03:04,800 If so, if there's some value, then we're editing. 42 00:03:05,010 --> 00:03:09,510 And the reason for that is because I don't want to edit item with an empty value. 43 00:03:09,870 --> 00:03:11,580 So I don't want to do something like this. 44 00:03:11,940 --> 00:03:14,240 I don't want to change this to an empty rack. 45 00:03:14,520 --> 00:03:17,550 That's why we had that flag over there. 46 00:03:17,850 --> 00:03:21,300 But we just need to add a little bit more functionality. 47 00:03:21,720 --> 00:03:27,660 And in fact, it's going to be somewhat simple where we're going to go with our list. 48 00:03:28,520 --> 00:03:34,190 And again, just the practice will right away pass it into our setlist, so I'm going to be setting 49 00:03:34,190 --> 00:03:39,980 list to a new value and I'm going to be mapping over my current list because I know that I will always 50 00:03:40,220 --> 00:03:42,260 return a new correct. 51 00:03:42,650 --> 00:03:47,390 And in here, I'm going to say that I'm going to be accessing the item from my list. 52 00:03:47,660 --> 00:03:52,720 And then if the item ID will match Eridani, well, then I'll do something. 53 00:03:52,730 --> 00:03:56,370 If not, then I'll just return the item. 54 00:03:56,720 --> 00:03:58,970 So by default, I'll always return the item. 55 00:03:59,060 --> 00:04:08,570 Or there's also going to be a flag here where I'm going to say if item if item ID matches the added 56 00:04:08,570 --> 00:04:09,020 ID. 57 00:04:09,110 --> 00:04:14,600 So my state value, the one that I'm setting up when I'm adding the item. 58 00:04:14,630 --> 00:04:19,610 Remember, we got our specific item and then we set the state value here. 59 00:04:19,950 --> 00:04:23,780 If that is the case, well then I would want to return. 60 00:04:24,020 --> 00:04:27,590 I'll copy all the values from the item over here. 61 00:04:27,950 --> 00:04:33,170 So say item, but I'll change the title so it will stay the same. 62 00:04:33,500 --> 00:04:39,130 I'm not going to change it, but title now will be equal to the name Mike. 63 00:04:39,140 --> 00:04:41,720 So again, we have our set list. 64 00:04:41,990 --> 00:04:43,820 We're iterating over our list. 65 00:04:44,010 --> 00:04:48,500 That's why right away passerelle because I know it's going to be a new array at the end of the year 66 00:04:48,500 --> 00:04:48,860 anyway. 67 00:04:49,250 --> 00:04:50,150 I have my item. 68 00:04:50,150 --> 00:04:56,330 If the item ID matches whatever I have in state, then return all the properties. 69 00:04:56,390 --> 00:05:02,930 And more specifically, I'm just looking for the ID and then change the title to whatever is the state 70 00:05:02,930 --> 00:05:03,680 value right now. 71 00:05:03,950 --> 00:05:10,650 Because remember when we set up ticket item, also change the state value for the name. 72 00:05:10,940 --> 00:05:12,110 OK, good. 73 00:05:12,350 --> 00:05:19,100 And then once we have changed the list, that is just a few things that we would want to add and that 74 00:05:19,100 --> 00:05:21,680 one is set name to be empty value. 75 00:05:21,980 --> 00:05:25,490 Then I also would want to set back set edit it now. 76 00:05:25,850 --> 00:05:35,620 So set edit id and I'll set it equal to and now then also set is editing and I'll set it equal to force. 77 00:05:35,990 --> 00:05:42,710 OK, so again this one goes back to normal, this one goes back false because I don't want to keep those 78 00:05:42,710 --> 00:05:45,080 values true and whatever was there. 79 00:05:45,410 --> 00:05:49,520 And then lastly we can just call the show alert and yes I would want to show. 80 00:05:49,790 --> 00:05:57,290 So I'll pass passing the value of true that it's going to be a success and will say value changed value 81 00:05:57,770 --> 00:05:59,300 and then changed. 82 00:05:59,720 --> 00:06:04,880 We'll save this one and we can test it out on a bigger screen because that way you can also see the 83 00:06:04,880 --> 00:06:05,560 value your share. 84 00:06:05,900 --> 00:06:08,210 So I go with first item. 85 00:06:08,540 --> 00:06:11,210 I had it there it is now in my state. 86 00:06:11,420 --> 00:06:19,550 You can see that array has some value and I can also see that my alert was displayed and then of course 87 00:06:19,580 --> 00:06:20,330 it went away. 88 00:06:20,690 --> 00:06:26,540 Then I can have my second item over here, notice how I'm typing, can I submit? 89 00:06:26,780 --> 00:06:32,620 And now the moment I'll click on edit, check it out how this state of ours will change. 90 00:06:32,840 --> 00:06:39,490 So once I click, I have one for Daddy and then I have one for the second time. 91 00:06:39,620 --> 00:06:42,170 So now of course this is my name. 92 00:06:42,410 --> 00:06:47,420 OK, and then of course for editing this one also is true. 93 00:06:47,990 --> 00:06:52,010 So if we tried to submit with no values, we won't be able to do that. 94 00:06:52,370 --> 00:06:55,100 Click and we have please enter value. 95 00:06:55,310 --> 00:06:56,600 So that's not going to work. 96 00:06:56,930 --> 00:07:01,250 But I can just go back to, I don't know, random value. 97 00:07:01,250 --> 00:07:10,790 And then once I click, the second item has been changed to a random value, hopefully medicines and 98 00:07:10,790 --> 00:07:13,790 now we can just deal with our local storage.