Now that we have the basic flow down, that we can navigate between our products, add them to the cart
and then also use the cart to place an order and also view that order and of course, also edit the cart
if we wanted to,
now that all of that is done, it's time to move towards the last part of this application which is of
course the part where you can add new products.
Now that's also the part which we'll refine later on because later, we'll of course dive deeper into
handling user input and we'll even store that data on a server but we can already get started here. To
get started,
the user product screen and the edit product screen will become important now because these are the
screens where we see all our products and where we can also then edit the products.
So let's start with the user products screen and
let's turn it into a React component by importing React from React
and unsurprisingly, by importing stuff from React Native. The stuff I want to import here is the flat
list again because I'll output a list of products in the end
on this user products screen.
Therefore here, we have the user products screen component which receives props and where I then need
to return some jsx and at the bottom of the file, I'll export this component as a default.
That's my default component set up I used over and over again. Now in here,
I want to output my components, my products with a flat list and I will reuse that product item
component we built earlier.
So back in user products, we can import
the product item from the components folder,
so let's go there and there, to shop and then order, not order but product item
and here, of course also pass in some data. Now the data I want to pass in here should be the products
that belonged to my logged in user.
We have no logged in user at the moment but if you remember the products reducer, there we are faking
that we have because there we have that user products array which holds all the products which in this
case here have a user ID, an owner ID of U1 and I just assume for the moment to have some dummy
data that this is our currently logged in user data, later this will of course be dynamic. So user
product is what we need, back in the user products screen, we therefore need to get that data from Redux
with the help of use selector from React Redux, like this
and here we get our user products by calling use selector where we pass in that function, it gets the
state, then reaches out to the products part of our store products because that's the identifier I use
there and then as I just said, access this user products field here, so in the user product screen,
here we access .user products. User products is now the array we feed into data, as always here I will
add a key extractor which gives me the ID because my product as stored here in user products uses
of course my product model in the end and therefore has an ID that is a unique identifier which I
can use so I will use it and then of course as always, also we need to add render item, you obviously
know that pattern already. Render item gets the item data here and I want to return a new product item
for every entry here and product item, if we have a look at it, takes a couple of pieces of information.
It takes an on view detail prop here, it takes a title prop, a price prop, an image prop and then also an on
add to cart prop.
Now you might already see that not all these props really fit our purpose if we use that on the user
product screen because this will not be a screen where we can shop for products, this is not a screen
where I want to be able to add products to a cart. I want to output them as I do here with the image,
the price and so on but I don't care so much about whether we can click them or about these buttons. So
I'll start adding the product item like this but we will have to fine tune it.
So what we need is title, price, image and on view detail and on add cart.
So we need the image here and that of course is itemData.item.imageUrl because you must
not forget that itemData.item in the end points at a product as defined here in the model, hence
we'll have this imageUrl property and then here we also need the title which is accessible through
itemData.item.title. We need the price which is accessible with itemData.item.price and if
we have a look at the product item component, that fulfills everything we need here but now we need on
view detail on and on add to cart and I will add those temporarily but we'll have to find a different
solution here.
So on view detail is an empty
function at the moment and on add to cart, also empty function and we'll implement this differently later.
For the moment however, I'm outputting a product item here and therefore we can now navigate to the user
products screen. To get there, it's time to go back to the shop navigator and in the end, I want to add
them to my drawer navigator but as a separate stack, just like products and orders are a separate stack,
this should also be a separate stack.
We can just copy the orders navigator stack here, replicate this and import the user product screen
here,
so user products screen from the screens folder, there from the user folder and then user product
screen and map this in the newly copied stack down there which I'll not name
orders navigator because I have that name here already but I'll name it let's say admin navigator maybe
and here, I have my user products identifier which points at the user products screen. Now here
as an icon, in the drawer I want to have an md create and ios create icon and other than that, this should be
fine.
Now we just need to add this navigator to our drawer navigator.
There I'll add the admin key and point at admin navigator, so now we should actually be able to reach
that. If we go back to the app, we have the admin entry and if I click it, we get a problem regarding my user
products, state undefined is not an object,
let's have a quick look at the user product screen, yes,
that should be products because our slice is named products here in combined reducer.
So here it should also be products,
little typo from my side. Now this looks better and now, might look like nothing changed but actually,
you can see my navigation items are gone because now I am on a new screen but I have my old list
here but with less products.
If you compare Android where I'm on the starting screen, we have more products there,
now I only have the ones where U1 is the owner ID.
So that's good
but of course I don't like these buttons here
and I also want to have a menu item here and a header title of course.
There are some things we need to fix, these buttons of course are the most important thing or the most
striking thing that's wrong though. Still,
I'll start with the header, in the user products screen here,
we can add the navigation options, user products screen.navigation options and there, set a header title
of your products for example and we also need the menu button, so we can actually also go to the product
overview screen and from there, copy this header left part here,
go back to user product screen and add this here.
Now however, we need that function form of the navigation options where we then in the end return an
object with all the options in there, so that's something we need to change like this
and we also need to make sure we import header buttons item and header button.
So back in the product overview screen, there I have these imports here,
copy them from the product overview screen,
go to the user product screen and add them
there like this, for example
so that you import everything you need.
We also need to import a platform API because we're also using that when setting up the header buttons.
Now at least, when we go to the admin area, we have our title here, we have the drawer, the menu button
again
but now what about these buttons here?
We will need to change the way our product item looks like.