Now I will say that we'll have an in-depth look at how to work with user input and so on
in a separate module in the next course module, therefore I'll not dive deeply into it right now.
The only thing I want to do right now is add a text input here to the edit product screen and then output
a couple of text inputs here which allow us to fetch user input and in the end, allow us to add or edit
product without any validation or anything special in there.
So I'll also import a scroll view because I'll begin by wrapping everything with a scroll view because
you could certainly be viewing this on a small device or in landscape mode where not everything fits into
one screen. Now in there, we'll have a couple of views with the different text inputs, so here we'll always
have a text with a label, like the title of the product which you should enter and below that, a text
input that allows you to enter this title and in the end, I will repeat that for all the different things
you want to add.
Now some styling will be required,
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
styles label,
you can also give this view an overall style of form control for example, whatever you want to name
it
and now we can repeat that for the title, for the imageUrl here, for the price and
also last but not least, for the description. I'll also wrap these things overall into another
view,
so all these form controls in the end which I'll give a style of styles form.
Now it's time to work on these styles here,
so down there in the stylesheet, for the form I'll set a margin of 20 in all directions, so there is some
spacing around these inputs. For my inputs here, for the form control label and input,
I also want to add some styles, so here I'll have the form control, my label and then also the input itself,
so the text input itself and for the form control, I want to set a width of 100 to make sure that
this is as wide as possible. For the label,
I'll set the font family to open sans bold to have some bold text here and then a margin vertical
of 8 to have some spacing on top and bottom and for the input itself which is this text input element,
I want to have a padding horizontal of two,
so a very small padding so that when we enter text, we're not directly on the edge of the input and a padding
vertical of 5, so a small padding to top and bottom and a border bottom colour of this slight grayish
look with this hex code of ccc and then a border bottom width of one and that's
the style I'll go with for now. Now if we have a look at that by going to admin and then for example
adding a new one, this is how it looks, it doesn't look too bad,
certainly not configured in any way but some to get started with
and of course now I want to be able to submit this and save this as well.
For that in the edit product screen,
I want to have an action button, so a button in the header, hence here before the styles maybe,
order doesn't matter but I like to have it right next to the component, I'll add the navigation options
where I need that dynamic syntax because we'll need to do something dynamic from inside the header and
then here, we return that config object where for one, you can set the header title and that should also
be dynamic because there, I want to output whether we're editing or adding, that will depend on the fact whether
we have a product ID param or not, so we can already access navData.navigation.getParam.
Now if you have a look at the user product screen, you'll notice that when we click on the edit button,
we do pass in the product ID param here to edit product navigation, when we clicked on the add icon
in the header
however, we don't pass that.
So the product ID param, if that's available, we know we're in edit mode.
So here I can check if we can get a value for that and if that is true-ish,
then I show edit product as a title,
otherwise I'll show add product because that's a clear indicator to me whether we're editing or adding.
The header title is not everything that should be part of the configuration though,
I also want to have that header right
part to have a button that allows me to save my data and for that, I'll go to the user products screen
and copy this setup I have there with the header buttons,
copy that over to the edit product screen and of course therefore also copy over the imports of header
button and header buttons and item over to edit product screen and add this here and now of course,
we need to tweak this a little bit because certainly an add button does not make sense here, save seems
to be a more appropriate label and the icon I want to use therefore is md checkmark and iOS checkmark
which renders a nice checkmark icon. Of course here, I also don't want to navigate to edit product
but instead, I want to submit my form and that's something we'll work on in a second.
First, we need to make sure that we can save all the user input and that we that we also prepopulate this
form in case we're editing. So to save the user input, we can use the use state hook from React and simply
manage the state for each of these text inputs, so
we'll have four states here in the end with use state,
each initialized to an empty string initially and then we have the title and set title and repeat that
basically to also have like the imageUrl and set imageUrl and then here, have the price and
set price
and then here also have the description and set description and again, we'll refine this in the next
module where we dive deeper into handling user input.
For now, I'll just bind this to my text input, value here is bound to title for this first one which is
my title input and on change text here, I get my text here that changed and I'll save this back to set
title in this case here, so that I update my title state with the newly entered title text. And now it's
this pattern which we add to all these text inputs here,
here of course for the second one we're talking about the imageUrl and set imageUrl but
other than that, it's the same. For the price,
unsurprisingly we pass back in the price and we call set price but other than that, it's the same.
Please note that price therefore of course is also managed as a string here because whatever the user
enters always is text and here for the text input, I will pass in my description and set my description
here.
With that, the data is managed, now to prepopulate that when we have a recipe, when we are loading a product
and we're in edit mode, we just need to get our product ID with the help of props navigation get param,
there, the product ID is a parameter we can fix retrieve and if prod ID is set, well then I know we're
in edit mode and then I of course want to prepopulate my fields here with the values.
Now actually, that means I want to load my product based on the prod ID from my Redux state.
So we import use selector from React Redux here and now here, we can get our edited product by reaching
out with use selector to our Redux state and
now here of course, we need to dive into our product slice and you can always check out your reducer if you're
not sure how it was structured again and there, we see in the products part of our reducer, of our Redux
store I should say, we have that user products array in the end,
so that's what I'm interested in here,
I reach out to user products and now I want to find the product with that prod ID. So here, I'll have
a look at every product, the find function does this for me and I want to return true if the ID of the product
I'm looking at is equal to the prod ID I retrieved from my parameters.
Now of course sometimes this will not yield anything if prod ID is not set because this parameter is
not set which is always the case when we clicked on this add button, then this parameter will never be
set but that's okay. So edited product will then simply be undefined which is totally fine. Otherwise if
edited product is not undefined, if it is set therefore, we know we are in edit mode and therefore we
can prepopulate our values. Therefore actually I'll do this first before I initialize my state because
that is something I want to initialize depending on whether we loaded a product or not.
So the title here, actually there I will check if edited product, if that is set,
if it is set, then I will initialize the title to be editedProduct.title, otherwise it will be an empty
string and I'll have the same logic for the imageUrl here.
So here I do that for imageUrl, not for the price because the price shouldn't be changeable but
I will do it for the description.
So the default value of title, imageUrl and description depends on whether we have an edited product
or not. And now with that, since we set this on the state, this will automatically be fed into our text
inputs and the only thing is, I need to make sure that I remove the the price input here
if we're in edit mode. So I'll check if edited product is set here and if that is the case, then
I will return null here and only
otherwise if it's not set,
so if I'm in add mode, not in edit mode, I will render that price input here, so that the price input is
removed if we're editing because I can't edit it anyways.
So now with that, let's give this a try and let's go back to the admin screen. If I click on add,
yes I need to re-add the platform import because I'm using that in the header button for rendering the
checkmark, the icons depending on the platform.
So let's make sure we import platform on the edit product screen but now if I click on add, we see all
four imports, all empty at the beginning. If I click on edit on the other hand, they are prepopulated and I
don't see the price input which is exactly what I want.
Now it's time to make sure that when we submit this, we either update our product
if we're editing or if we're adding it, we're adding a new product.
Now again, for now I will not add any validation, we'll do that later.
So for now we can also submit an empty product, later after the next module,
this will not be possible anymore.