1
00:00:02,200 --> 00:00:08,380
Now that we have the basic flow down, that we can navigate between our products, add them to the cart

2
00:00:08,410 --> 00:00:13,900
and then also use the cart to place an order and also view that order and of course, also edit the cart

3
00:00:13,930 --> 00:00:15,040
if we wanted to,

4
00:00:15,070 --> 00:00:20,530
now that all of that is done, it's time to move towards the last part of this application which is of

5
00:00:20,530 --> 00:00:24,430
course the part where you can add new products.

6
00:00:24,430 --> 00:00:29,960
Now that's also the part which we'll refine later on because later, we'll of course dive deeper into

7
00:00:29,980 --> 00:00:36,770
handling user input and we'll even store that data on a server but we can already get started here. To

8
00:00:36,770 --> 00:00:37,910
get started,

9
00:00:37,910 --> 00:00:42,560
the user product screen and the edit product screen will become important now because these are the

10
00:00:42,560 --> 00:00:47,450
screens where we see all our products and where we can also then edit the products.

11
00:00:47,480 --> 00:00:49,720
So let's start with the user products screen and

12
00:00:49,750 --> 00:00:53,420
let's turn it into a React component by importing React from React

13
00:00:53,600 --> 00:01:01,970
and unsurprisingly, by importing stuff from React Native. The stuff I want to import here is the flat

14
00:01:01,970 --> 00:01:06,250
list again because I'll output a list of products in the end

15
00:01:06,320 --> 00:01:08,260
on this user products screen.

16
00:01:08,630 --> 00:01:15,650
Therefore here, we have the user products screen component which receives props and where I then need

17
00:01:15,650 --> 00:01:22,960
to return some jsx and at the bottom of the file, I'll export this component as a default.

18
00:01:23,090 --> 00:01:29,670
That's my default component set up I used over and over again. Now in here,

19
00:01:30,000 --> 00:01:38,070
I want to output my components, my products with a flat list and I will reuse that product item

20
00:01:38,070 --> 00:01:40,560
component we built earlier.

21
00:01:40,560 --> 00:01:44,130
So back in user products, we can import

22
00:01:47,030 --> 00:01:51,020
the product item from the components folder,

23
00:01:51,020 --> 00:01:57,090
so let's go there and there, to shop and then order, not order but product item

24
00:01:57,230 --> 00:02:03,320
and here, of course also pass in some data. Now the data I want to pass in here should be the products

25
00:02:03,320 --> 00:02:06,140
that belonged to my logged in user.

26
00:02:06,140 --> 00:02:11,450
We have no logged in user at the moment but if you remember the products reducer, there we are faking

27
00:02:11,450 --> 00:02:17,300
that we have because there we have that user products array which holds all the products which in this

28
00:02:17,300 --> 00:02:25,130
case here have a user ID, an owner ID of U1 and I just assume for the moment to have some dummy

29
00:02:25,130 --> 00:02:31,930
data that this is our currently logged in user data, later this will of course be dynamic. So user

30
00:02:31,930 --> 00:02:37,930
product is what we need, back in the user products screen, we therefore need to get that data from Redux

31
00:02:37,930 --> 00:02:44,540
with the help of use selector from React Redux, like this

32
00:02:44,560 --> 00:02:55,680
and here we get our user products by calling use selector where we pass in that function, it gets the

33
00:02:55,680 --> 00:03:02,520
state, then reaches out to the products part of our store products because that's the identifier I use

34
00:03:02,520 --> 00:03:10,590
there and then as I just said, access this user products field here, so in the user product screen,

35
00:03:10,590 --> 00:03:18,990
here we access .user products. User products is now the array we feed into data, as always here I will

36
00:03:18,990 --> 00:03:26,870
add a key extractor which gives me the ID because my product as stored here in user products uses

37
00:03:26,880 --> 00:03:31,860
of course my product model in the end and therefore has an ID that is a unique identifier which I

38
00:03:31,860 --> 00:03:38,400
can use so I will use it and then of course as always, also we need to add render item, you obviously

39
00:03:38,400 --> 00:03:46,830
know that pattern already. Render item gets the item data here and I want to return a new product item

40
00:03:46,830 --> 00:03:53,130
for every entry here and product item, if we have a look at it, takes a couple of pieces of information.

41
00:03:53,670 --> 00:04:05,790
It takes an on view detail prop here, it takes a title prop, a price prop, an image prop and then also an on

42
00:04:05,790 --> 00:04:07,300
add to cart prop.

43
00:04:07,400 --> 00:04:12,840
Now you might already see that not all these props really fit our purpose if we use that on the user

44
00:04:12,840 --> 00:04:18,840
product screen because this will not be a screen where we can shop for products, this is not a screen

45
00:04:18,840 --> 00:04:26,310
where I want to be able to add products to a cart. I want to output them as I do here with the image,

46
00:04:26,310 --> 00:04:34,920
the price and so on but I don't care so much about whether we can click them or about these buttons. So

47
00:04:34,920 --> 00:04:39,310
I'll start adding the product item like this but we will have to fine tune it.

48
00:04:39,510 --> 00:04:46,170
So what we need is title, price, image and on view detail and on add cart.

49
00:04:46,170 --> 00:04:53,430
So we need the image here and that of course is itemData.item.imageUrl because you must

50
00:04:53,430 --> 00:04:59,400
not forget that itemData.item in the end points at a product as defined here in the model, hence

51
00:04:59,400 --> 00:05:08,540
we'll have this imageUrl property and then here we also need the title which is accessible through

52
00:05:08,570 --> 00:05:17,840
itemData.item.title. We need the price which is accessible with itemData.item.price and if

53
00:05:17,840 --> 00:05:23,570
we have a look at the product item component, that fulfills everything we need here but now we need on

54
00:05:23,570 --> 00:05:30,380
view detail on and on add to cart and I will add those temporarily but we'll have to find a different

55
00:05:30,380 --> 00:05:31,100
solution here.

56
00:05:31,100 --> 00:05:34,290
So on view detail is an empty

57
00:05:34,290 --> 00:05:41,760
function at the moment and on add to cart, also empty function and we'll implement this differently later.

58
00:05:42,270 --> 00:05:47,370
For the moment however, I'm outputting a product item here and therefore we can now navigate to the user

59
00:05:47,370 --> 00:05:54,600
products screen. To get there, it's time to go back to the shop navigator and in the end, I want to add

60
00:05:54,600 --> 00:06:00,420
them to my drawer navigator but as a separate stack, just like products and orders are a separate stack,

61
00:06:00,420 --> 00:06:03,120
this should also be a separate stack.

62
00:06:03,120 --> 00:06:11,160
We can just copy the orders navigator stack here, replicate this and import the user product screen

63
00:06:11,160 --> 00:06:11,550
here,

64
00:06:11,580 --> 00:06:19,440
so user products screen from the screens folder, there from the user folder and then user product

65
00:06:19,440 --> 00:06:27,180
screen and map this in the newly copied stack down there which I'll not name

66
00:06:28,000 --> 00:06:35,140
orders navigator because I have that name here already but I'll name it let's say admin navigator maybe

67
00:06:35,570 --> 00:06:43,900
and here, I have my user products identifier which points at the user products screen. Now here

68
00:06:43,920 --> 00:06:51,170
as an icon, in the drawer I want to have an md create and ios create icon and other than that, this should be

69
00:06:51,170 --> 00:06:51,670
fine.

70
00:06:51,680 --> 00:06:55,460
Now we just need to add this navigator to our drawer navigator.

71
00:06:55,460 --> 00:07:02,830
There I'll add the admin key and point at admin navigator, so now we should actually be able to reach

72
00:07:02,830 --> 00:07:08,980
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

73
00:07:08,980 --> 00:07:14,080
products, state undefined is not an object,

74
00:07:14,090 --> 00:07:19,880
let's have a quick look at the user product screen, yes,

75
00:07:19,910 --> 00:07:25,880
that should be products because our slice is named products here in combined reducer.

76
00:07:25,880 --> 00:07:27,990
So here it should also be products,

77
00:07:28,080 --> 00:07:34,590
little typo from my side. Now this looks better and now, might look like nothing changed but actually,

78
00:07:34,590 --> 00:07:40,830
you can see my navigation items are gone because now I am on a new screen but I have my old list

79
00:07:40,830 --> 00:07:42,910
here but with less products.

80
00:07:43,020 --> 00:07:47,190
If you compare Android where I'm on the starting screen, we have more products there,

81
00:07:47,190 --> 00:07:50,340
now I only have the ones where U1 is the owner ID.

82
00:07:50,730 --> 00:07:51,550
So that's good

83
00:07:51,960 --> 00:07:54,850
but of course I don't like these buttons here

84
00:07:54,930 --> 00:07:58,960
and I also want to have a menu item here and a header title of course.

85
00:07:58,980 --> 00:08:03,930
There are some things we need to fix, these buttons of course are the most important thing or the most

86
00:08:03,930 --> 00:08:08,270
striking thing that's wrong though. Still,

87
00:08:08,270 --> 00:08:11,420
I'll start with the header, in the user products screen here,

88
00:08:11,450 --> 00:08:19,910
we can add the navigation options, user products screen.navigation options and there, set a header title

89
00:08:19,910 --> 00:08:30,130
of your products for example and we also need the menu button, so we can actually also go to the product

90
00:08:30,160 --> 00:08:35,930
overview screen and from there, copy this header left part here,

91
00:08:36,020 --> 00:08:39,620
go back to user product screen and add this here.

92
00:08:39,620 --> 00:08:44,900
Now however, we need that function form of the navigation options where we then in the end return an

93
00:08:44,900 --> 00:08:50,210
object with all the options in there, so that's something we need to change like this

94
00:08:50,660 --> 00:08:55,880
and we also need to make sure we import header buttons item and header button.

95
00:08:55,880 --> 00:09:00,300
So back in the product overview screen, there I have these imports here,

96
00:09:00,440 --> 00:09:03,310
copy them from the product overview screen,

97
00:09:03,440 --> 00:09:05,990
go to the user product screen and add them

98
00:09:06,010 --> 00:09:09,050
there like this, for example

99
00:09:09,050 --> 00:09:10,940
so that you import everything you need.

100
00:09:10,940 --> 00:09:16,400
We also need to import a platform API because we're also using that when setting up the header buttons.

101
00:09:18,210 --> 00:09:25,800
Now at least, when we go to the admin area, we have our title here, we have the drawer, the menu button

102
00:09:25,800 --> 00:09:26,860
again

103
00:09:26,940 --> 00:09:29,250
but now what about these buttons here?

104
00:09:29,310 --> 00:09:33,840
We will need to change the way our product item looks like.