Let's work on the orders screen before we add the navigation,
we don't need to finish it but I want to be able to view it.
So in there, I import React from React so that I can build a valid React component, import something
from React Native as always and that something is also what we're pretty much used to, right?
It's never that surprising.
We'll need a view,
we'll probably need a flat list because we'll have multiple orders potentially, an infinite amount and
I want to be able to render that and with that here, we can build our orders screen like this.
I'll also export this of course and styling shouldn't really be required here,
actually we shouldn't even need the view here because I just want to output my list of orders. So of course
the data we need here will come from Redux,
so we should import use selector from React Redux which allows us to tap into the Redux store.
So here, we can get our orders with the help of use selector and use selector now points at state.orders
and that of course is the identifier I assigned here in combined reducers orders here,
this gives us access to the state slice managed by the orders reducer
and there, we have another orders property which holds the actual array of orders.
So here I need to access state.orders.orders in the end,
that gives me my orders which are stored in Redux.
Now here, we just need to return our flat list and this receives orders which should be an array and which
it is as data. Now a key extractor is not required in newer versions of React Native because each order
if you have a look at the model has an ID and newer versions of React should be looking for that
but to be safe, I'll add it here and render item now of course should hold a function that receives the
item data and that in the end returns whatever we want to render per order. Now an order item will be more complex
in the future,
for now I'll just output some text, again so that we quickly have something on the screen we can see
before we refine this.
The text here for the given item could be
and now let's have a look at the order, there we have the ID, we have the items which is yet another
list,
so the easiest thing to output is simply the amount. So here I'll just output the total amount property
which my order has here.
This is what I output in the flat list,
now we have a basic orders screen,
of course we now need to be able to reach that. So let's go to the shop navigator and import the orders
screen here, orders screen from the screens folder, from shop orders screen
and now here the important thing is I don't want to add it to this stack navigator because it's not part
of this stack,
instead I want to reach it with a menu, with a side menu.
So we'll need to build a drawer navigator.
Of course you could also work with tabs if you prefer this but I want to work with a drawer here,
so we need that that drawer navigator.
Now the orders screen, even though it will be the only item, it should be in its own stack though
so that we also have a header there.
Hence, I'll create a new orders navigator here where I create another stack navigator and there, the
only mapping I need is orders which points at orders screen, the second argument here should still set
up some default navigation options and I'll use the same options as I do here,
hence I'll actually grab this object, cut it out of here and store it in a separate constant, default
nav options, like this,
this is a pattern I also already used in the navigation module because now we can use this constant
here in the products navigator for the default navigation options and also here in the orders navigator.
Now of course the goal is to create a drawer navigator which I'll name shop navigator overall because
it combines different shop features
you could say with the help of create drawer navigator. There I now want to merge these two stacks,
the products navigator and the orders navigator into it,
so here we need the products with the products navigator and the orders pointing at the orders navigator,
so at these stack navigators. I also want to configure my content options there on the drawer, this allows
me to for example set the tint color of the items when they're selected and there I want to set the active
tint color to Colors.primary so that they are colored with the primary color if they're selected.
Now it's the shop navigator that should be returned here. This alone won't do the trick but it's a first
step,
now before we add the menu button, let's go to the orders screen and there actually add a title, so I'll
add navigation options there,
set this to an object,
right now we need no dynamic options here because I just want to set the header title to your
orders
and now that I think of that,
we should also add this on the cart screen where I'm not doing this yet. There
I also want to set this on the cart screen, set this to your cart.
So this is now in the cart screen navigation options,
this is in the orders screen or this navigator is set up. With that all set up,
we need to add this menu button, this hamburger icon for example on the products overview screen where
I want to be able to open the drawer and go to my orders. Now to add it there,
let's go to the navigation options of the product overview screen which is already dynamic which is
good
and then besides adding header right for this cart icon, let's add headerLeft and headerLeft should
hold header buttons as well of course but there, it'll be my menu items, so I'll name it such and there,
I want to use md menu or ios menu depending on the platform we're running on and I want to navigate
of course nowhere,
instead with the navigation prop here so to say, I want to call toggle drawer which will open the side
drawer. Now that
same setup by the way is also required in the orders screen so that we can leave that screen.
So actually here, we will needs that dynamic set up of the navigation options where we have a function
here in which we return our config object so that in there, we can also add headerLeft with the header
buttons, with our menu that toggles the drawer which relies on the nav data here and of course for that, we
need to import header buttons, header button and item, so on the product overview screen in the end, I
need to import these things here,
these two lines need to be added to the orders screen as well.
So there, let me add it,
adding the header buttons and item import from React navigation header buttons and the header button
import from our custom component. Now with that, if we save this, we should have a menu button here and
we do, it opens the drawer, we can go to orders and I get an error here because in the order screen, of course
I'm using the platform API so we should import it there,
let's do that, let's add platform
and now if we go back, we can go to orders and there we also can go back and the same is the case on Android.
Now with that, we added the drawer.
There is one thing I want to add to the drawer though which I haven't done before
before I continue working on my orders list, we're not outputting anything yet because we're
not really adding orders, we haven't connected this order now button yet, we're not seeing
anything though that changes if we do add something to the cart, click order now
once, clicking it multiple times will give you an error right now and
then we see that order here. Now we'll need to clear the cart,
that's another thing we need to do but before we do that, in the drawer, I actually also want to have
icons next to my entries here and adding these icons is actually very simple,
haven't done this in the navigation module but we'll do it now. To add icons, you just need to go to
the screens you're navigating to in your drawer and
in our case, that's of course these two navigators, so these are not screens but these two navigators
and on these navigators or if they were screens, on these screens, you can set navigation options and
with that, I don't mean the default navigation options you set for all screens of that navigator but
you set for this navigator if it's used inside of another navigator as it's the case here.
So we can add navigation options here,
again this will not be applied to the screens of this navigator but instead, this will configure this
navigator if it's a screen of another navigator
and here the orders navigator is a screen of the shop navigator in the end and there in these navigation
options, we can add a drawer icon entry which can be a function that gets let's say the drawer config,
this function is called for you by React navigation and it gives you this drawer config which most importantly
tells you for example what your tint color is because here you can now return a component, like an Ionicons
component to render an icon. For that you just need to make sure you're importing Ionicons from
@expo/vector-icons,
so you need to add that import in the shop navigator file and
now with that added, if we go down here, I'm returning my Ionicon, now I can configure it as I always
did this
and for that again, we can use the platform API which we are already importing here, if you're not,
make sure you do. We can use that to check the operating system and if it's equal to Android, then here
I will render md create as an icon,
otherwise iOS create and this is just one icon I picked in advance.
Now of course, we can also configure the size here and I'll stick to my good old 23
and in addition to that, set a color if you wish to and now of course, that should not be colors primary
because then this icon would always have that color, instead this color should be assigned by the drawer
which is the thing that knows if the item is selected or not and which will change the color appropriately.
So here, you should access drawer config.TintColor
and this tells you which color this should have at the moment and this tint color will change depending
on whether this is currently selected or not.
Now that's the case for my orders,
excuse me,
the icon here should be the md list and iOS list, not create. So that's my order setup now with the list icons
and of course this same thing can be done here by copying it over on the products navigator and there, I want
to use md cart or iOS cart, so this cart icon again and now this is almost ready to be used. One
thing you need to do however is you need to import React from React
now in this navigator file because now you are using components with that jsx syntax. As you know, jsx
is compiled or converted to React.createElement in the end and therefore you need to import React for
this syntax to work here.
Now with that if you go back, you have these nice icons here next to your items and they're also colored
correctly,
also here on Android of course.
So now that's the side drawer finished, we can also go to the orders screen and we can even see an order
there.
However right now, the cart is not cleared and therefore if you click this multiple times, you'll actually
get a warning because then what you do is you click this too fast and hence you create multiple orders
with the same pseudo unique ID where we in the end use the current timestamp, if you click this too fast
multiple times it's the same timestamp,
that's why this warning is coming and I would want to clear the cart after placing an order anyways.
So let's make sure we do clear the cart after placing an order and then of course let's make sure we
output the orders in a nicer way than we currently do.