1 00:00:02,270 --> 00:00:07,790 Now I will say that we'll have an in-depth look at how to work with user input and so on 2 00:00:07,790 --> 00:00:13,530 in a separate module in the next course module, therefore I'll not dive deeply into it right now. 3 00:00:13,640 --> 00:00:19,460 The only thing I want to do right now is add a text input here to the edit product screen and then output 4 00:00:19,460 --> 00:00:25,730 a couple of text inputs here which allow us to fetch user input and in the end, allow us to add or edit 5 00:00:25,730 --> 00:00:31,010 product without any validation or anything special in there. 6 00:00:31,010 --> 00:00:37,900 So I'll also import a scroll view because I'll begin by wrapping everything with a scroll view because 7 00:00:37,940 --> 00:00:43,160 you could certainly be viewing this on a small device or in landscape mode where not everything fits into 8 00:00:43,160 --> 00:00:52,000 one screen. Now in there, we'll have a couple of views with the different text inputs, so here we'll always 9 00:00:52,000 --> 00:00:57,640 have a text with a label, like the title of the product which you should enter and below that, a text 10 00:00:57,640 --> 00:01:03,700 input that allows you to enter this title and in the end, I will repeat that for all the different things 11 00:01:03,850 --> 00:01:04,500 you want to add. 12 00:01:05,460 --> 00:01:07,170 Now some styling will be required, 13 00:01:07,170 --> 00:01:14,220 so here for the text input, I'll add a style of input and on the text above that, I'll add a style of 14 00:01:15,000 --> 00:01:20,310 styles label, 15 00:01:20,440 --> 00:01:27,760 you can also give this view an overall style of form control for example, whatever you want to name 16 00:01:27,760 --> 00:01:28,250 it 17 00:01:28,390 --> 00:01:38,710 and now we can repeat that for the title, for the imageUrl here, for the price and 18 00:01:38,800 --> 00:01:47,470 also last but not least, for the description. I'll also wrap these things overall into another 19 00:01:47,460 --> 00:01:47,810 view, 20 00:01:47,930 --> 00:01:55,000 so all these form controls in the end which I'll give a style of styles form. 21 00:01:57,490 --> 00:02:00,370 Now it's time to work on these styles here, 22 00:02:00,400 --> 00:02:07,490 so down there in the stylesheet, for the form I'll set a margin of 20 in all directions, so there is some 23 00:02:07,490 --> 00:02:13,690 spacing around these inputs. For my inputs here, for the form control label and input, 24 00:02:13,690 --> 00:02:22,800 I also want to add some styles, so here I'll have the form control, my label and then also the input itself, 25 00:02:22,810 --> 00:02:29,270 so the text input itself and for the form control, I want to set a width of 100 to make sure that 26 00:02:29,270 --> 00:02:33,390 this is as wide as possible. For the label, 27 00:02:33,430 --> 00:02:39,450 I'll set the font family to open sans bold to have some bold text here and then a margin vertical 28 00:02:39,450 --> 00:02:45,090 of 8 to have some spacing on top and bottom and for the input itself which is this text input element, 29 00:02:45,510 --> 00:02:47,580 I want to have a padding horizontal of two, 30 00:02:47,580 --> 00:02:53,580 so a very small padding so that when we enter text, we're not directly on the edge of the input and a padding 31 00:02:53,580 --> 00:03:00,800 vertical of 5, so a small padding to top and bottom and a border bottom colour of this slight grayish 32 00:03:00,810 --> 00:03:12,900 look with this hex code of ccc and then a border bottom width of one and that's 33 00:03:12,900 --> 00:03:21,630 the style I'll go with for now. Now if we have a look at that by going to admin and then for example 34 00:03:21,660 --> 00:03:25,340 adding a new one, this is how it looks, it doesn't look too bad, 35 00:03:25,380 --> 00:03:29,450 certainly not configured in any way but some to get started with 36 00:03:30,000 --> 00:03:33,220 and of course now I want to be able to submit this and save this as well. 37 00:03:33,420 --> 00:03:34,960 For that in the edit product screen, 38 00:03:34,990 --> 00:03:44,160 I want to have an action button, so a button in the header, hence here before the styles maybe, 39 00:03:44,220 --> 00:03:50,730 order doesn't matter but I like to have it right next to the component, I'll add the navigation options 40 00:03:50,730 --> 00:03:56,910 where I need that dynamic syntax because we'll need to do something dynamic from inside the header and 41 00:03:56,910 --> 00:04:02,670 then here, we return that config object where for one, you can set the header title and that should also 42 00:04:02,670 --> 00:04:09,090 be dynamic because there, I want to output whether we're editing or adding, that will depend on the fact whether 43 00:04:09,090 --> 00:04:17,490 we have a product ID param or not, so we can already access navData.navigation.getParam. 44 00:04:17,490 --> 00:04:23,010 Now if you have a look at the user product screen, you'll notice that when we click on the edit button, 45 00:04:23,370 --> 00:04:33,630 we do pass in the product ID param here to edit product navigation, when we clicked on the add icon 46 00:04:33,630 --> 00:04:34,190 in the header 47 00:04:34,200 --> 00:04:36,150 however, we don't pass that. 48 00:04:36,480 --> 00:04:41,420 So the product ID param, if that's available, we know we're in edit mode. 49 00:04:41,550 --> 00:04:46,410 So here I can check if we can get a value for that and if that is true-ish, 50 00:04:46,410 --> 00:04:48,640 then I show edit product as a title, 51 00:04:48,650 --> 00:04:54,390 otherwise I'll show add product because that's a clear indicator to me whether we're editing or adding. 52 00:04:55,350 --> 00:04:59,050 The header title is not everything that should be part of the configuration though, 53 00:04:59,220 --> 00:05:01,260 I also want to have that header right 54 00:05:01,260 --> 00:05:07,140 part to have a button that allows me to save my data and for that, I'll go to the user products screen 55 00:05:07,170 --> 00:05:12,140 and copy this setup I have there with the header buttons, 56 00:05:12,330 --> 00:05:19,740 copy that over to the edit product screen and of course therefore also copy over the imports of header 57 00:05:19,740 --> 00:05:29,850 button and header buttons and item over to edit product screen and add this here and now of course, 58 00:05:29,850 --> 00:05:35,280 we need to tweak this a little bit because certainly an add button does not make sense here, save seems 59 00:05:35,280 --> 00:05:42,570 to be a more appropriate label and the icon I want to use therefore is md checkmark and iOS checkmark 60 00:05:42,600 --> 00:05:49,220 which renders a nice checkmark icon. Of course here, I also don't want to navigate to edit product 61 00:05:49,250 --> 00:05:55,470 but instead, I want to submit my form and that's something we'll work on in a second. 62 00:05:55,490 --> 00:06:01,250 First, we need to make sure that we can save all the user input and that we that we also prepopulate this 63 00:06:01,250 --> 00:06:11,520 form in case we're editing. So to save the user input, we can use the use state hook from React and simply 64 00:06:11,520 --> 00:06:14,810 manage the state for each of these text inputs, so 65 00:06:15,000 --> 00:06:19,560 we'll have four states here in the end with use state, 66 00:06:19,620 --> 00:06:26,920 each initialized to an empty string initially and then we have the title and set title and repeat that 67 00:06:26,920 --> 00:06:36,190 basically to also have like the imageUrl and set imageUrl and then here, have the price and 68 00:06:36,580 --> 00:06:37,990 set price 69 00:06:38,140 --> 00:06:46,390 and then here also have the description and set description and again, we'll refine this in the next 70 00:06:46,390 --> 00:06:49,340 module where we dive deeper into handling user input. 71 00:06:49,360 --> 00:06:55,210 For now, I'll just bind this to my text input, value here is bound to title for this first one which is 72 00:06:55,210 --> 00:07:04,090 my title input and on change text here, I get my text here that changed and I'll save this back to set 73 00:07:04,350 --> 00:07:11,920 title in this case here, so that I update my title state with the newly entered title text. And now it's 74 00:07:11,920 --> 00:07:15,550 this pattern which we add to all these text inputs here, 75 00:07:15,730 --> 00:07:22,270 here of course for the second one we're talking about the imageUrl and set imageUrl but 76 00:07:22,270 --> 00:07:25,390 other than that, it's the same. For the price, 77 00:07:25,390 --> 00:07:31,700 unsurprisingly we pass back in the price and we call set price but other than that, it's the same. 78 00:07:31,720 --> 00:07:36,550 Please note that price therefore of course is also managed as a string here because whatever the user 79 00:07:36,550 --> 00:07:45,880 enters always is text and here for the text input, I will pass in my description and set my description 80 00:07:45,880 --> 00:07:46,340 here. 81 00:07:47,980 --> 00:07:57,550 With that, the data is managed, now to prepopulate that when we have a recipe, when we are loading a product 82 00:07:57,550 --> 00:08:07,590 and we're in edit mode, we just need to get our product ID with the help of props navigation get param, 83 00:08:08,010 --> 00:08:17,250 there, the product ID is a parameter we can fix retrieve and if prod ID is set, well then I know we're 84 00:08:17,250 --> 00:08:24,060 in edit mode and then I of course want to prepopulate my fields here with the values. 85 00:08:24,190 --> 00:08:31,870 Now actually, that means I want to load my product based on the prod ID from my Redux state. 86 00:08:31,870 --> 00:08:47,340 So we import use selector from React Redux here and now here, we can get our edited product by reaching 87 00:08:47,340 --> 00:08:51,170 out with use selector to our Redux state and 88 00:08:51,210 --> 00:08:56,640 now here of course, we need to dive into our product slice and you can always check out your reducer if you're 89 00:08:56,640 --> 00:09:01,740 not sure how it was structured again and there, we see in the products part of our reducer, of our Redux 90 00:09:01,800 --> 00:09:06,180 store I should say, we have that user products array in the end, 91 00:09:06,270 --> 00:09:07,820 so that's what I'm interested in here, 92 00:09:07,850 --> 00:09:13,870 I reach out to user products and now I want to find the product with that prod ID. So here, I'll have 93 00:09:13,870 --> 00:09:19,060 a look at every product, the find function does this for me and I want to return true if the ID of the product 94 00:09:19,060 --> 00:09:24,330 I'm looking at is equal to the prod ID I retrieved from my parameters. 95 00:09:24,730 --> 00:09:29,710 Now of course sometimes this will not yield anything if prod ID is not set because this parameter is 96 00:09:29,710 --> 00:09:36,370 not set which is always the case when we clicked on this add button, then this parameter will never be 97 00:09:36,370 --> 00:09:44,620 set but that's okay. So edited product will then simply be undefined which is totally fine. Otherwise if 98 00:09:44,620 --> 00:09:50,470 edited product is not undefined, if it is set therefore, we know we are in edit mode and therefore we 99 00:09:50,470 --> 00:09:58,210 can prepopulate our values. Therefore actually I'll do this first before I initialize my state because 100 00:09:58,230 --> 00:10:03,120 that is something I want to initialize depending on whether we loaded a product or not. 101 00:10:04,320 --> 00:10:09,750 So the title here, actually there I will check if edited product, if that is set, 102 00:10:09,750 --> 00:10:15,720 if it is set, then I will initialize the title to be editedProduct.title, otherwise it will be an empty 103 00:10:15,720 --> 00:10:21,560 string and I'll have the same logic for the imageUrl here. 104 00:10:21,600 --> 00:10:28,980 So here I do that for imageUrl, not for the price because the price shouldn't be changeable but 105 00:10:29,070 --> 00:10:31,250 I will do it for the description. 106 00:10:32,200 --> 00:10:36,520 So the default value of title, imageUrl and description depends on whether we have an edited product 107 00:10:36,520 --> 00:10:43,870 or not. And now with that, since we set this on the state, this will automatically be fed into our text 108 00:10:43,870 --> 00:10:48,910 inputs and the only thing is, I need to make sure that I remove the the price input here 109 00:10:48,910 --> 00:10:56,490 if we're in edit mode. So I'll check if edited product is set here and if that is the case, then 110 00:10:56,490 --> 00:10:58,180 I will return null here and only 111 00:10:58,200 --> 00:10:59,820 otherwise if it's not set, 112 00:10:59,820 --> 00:11:07,380 so if I'm in add mode, not in edit mode, I will render that price input here, so that the price input is 113 00:11:07,380 --> 00:11:12,300 removed if we're editing because I can't edit it anyways. 114 00:11:12,400 --> 00:11:20,910 So now with that, let's give this a try and let's go back to the admin screen. If I click on add, 115 00:11:21,020 --> 00:11:26,990 yes I need to re-add the platform import because I'm using that in the header button for rendering the 116 00:11:27,040 --> 00:11:29,950 checkmark, the icons depending on the platform. 117 00:11:30,050 --> 00:11:35,150 So let's make sure we import platform on the edit product screen but now if I click on add, we see all 118 00:11:35,150 --> 00:11:40,670 four imports, all empty at the beginning. If I click on edit on the other hand, they are prepopulated and I 119 00:11:40,670 --> 00:11:43,840 don't see the price input which is exactly what I want. 120 00:11:43,880 --> 00:11:48,280 Now it's time to make sure that when we submit this, we either update our product 121 00:11:48,290 --> 00:11:52,770 if we're editing or if we're adding it, we're adding a new product. 122 00:11:52,820 --> 00:11:56,360 Now again, for now I will not add any validation, we'll do that later. 123 00:11:56,360 --> 00:12:00,860 So for now we can also submit an empty product, later after the next module, 124 00:12:00,860 --> 00:12:02,450 this will not be possible anymore.