1
00:00:02,210 --> 00:00:08,690
The goal of the product overview screen of course is to present a list of all the products we can order

2
00:00:09,830 --> 00:00:13,250
and therefore here, we'll of course have a normal React component,

3
00:00:13,250 --> 00:00:15,490
so we need to import React from React.

4
00:00:15,620 --> 00:00:20,440
We'll also need to import a bunch of things from React Native for sure,

5
00:00:20,450 --> 00:00:26,330
for example I will need a flat list here because I will output a list of products, we don't know how

6
00:00:26,330 --> 00:00:31,910
long that list will be but it potentially is very long, so we want to be able to optimize it for scrolling

7
00:00:31,910 --> 00:00:33,440
and that is what the flat list does

8
00:00:33,440 --> 00:00:39,050
out of the box and we can import more components as we need them.

9
00:00:40,460 --> 00:00:42,020
So these are the two base imports,

10
00:00:42,020 --> 00:00:51,980
now with that I'll create my products overview screen components here simply in this

11
00:00:52,070 --> 00:00:58,820
function form here where we receive props and then we have to return some jsx here in the end

12
00:00:58,820 --> 00:01:05,360
and in the end, I will also export my products overview screen here as the default of this file. Now

13
00:01:05,370 --> 00:01:11,830
with that, the question of course is what's in there? What's inside of our component and in there,

14
00:01:11,910 --> 00:01:14,660
I of course want to render my flat list,

15
00:01:14,670 --> 00:01:17,610
I want to render my flat list of products.

16
00:01:17,610 --> 00:01:23,340
Now of course, we have no products yet but we can add some. Just as before, I will therefore add a models

17
00:01:23,340 --> 00:01:26,380
folder where I can define how a product should look like.

18
00:01:26,400 --> 00:01:32,130
This is not a must do but it can help you organize your data and make sure that you never accidentally

19
00:01:32,130 --> 00:01:37,980
work with different types of products, where you simply forgot to add a certain property in one place

20
00:01:37,980 --> 00:01:39,120
of your app.

21
00:01:39,180 --> 00:01:44,640
So therefore here in the products.js file in the models folder, I'll create a product class which has a

22
00:01:44,640 --> 00:01:51,030
constructor where I define how a product should look like and I want every product to have a unique

23
00:01:51,030 --> 00:01:57,200
ID, it should also have an owner ID which is the ID of the user who created it.

24
00:01:57,540 --> 00:01:59,550
It should have a title, it should 

25
00:01:59,630 --> 00:02:04,320
have an imageUrl, it should have a description and it should have a price,

26
00:02:04,320 --> 00:02:08,850
these are the things that make up a product for me in this application.

27
00:02:09,030 --> 00:02:13,890
Now of course when we receive all these things as arguments in the constructor, I want to store them

28
00:02:13,890 --> 00:02:18,570
in properties of this object which we can create with the help of this constructor,

29
00:02:18,570 --> 00:02:21,960
so therefore I do this assignment which you also saw before

30
00:02:21,960 --> 00:02:27,570
where I store all that data we receive in properties of the created object.

31
00:02:27,570 --> 00:02:37,660
So here, we store the title, the imageUrl, the IDs and of course, description and the price. With that

32
00:02:37,660 --> 00:02:44,350
set up here, we have a blueprint for a product and we will use then in Redux and we will then in the

33
00:02:44,350 --> 00:02:52,280
end get such a list of products here in our products overview screen. Now to get it there, we need to

34
00:02:52,280 --> 00:02:56,980
tap into Redux and for that to be possible, we need to set up Redux.

35
00:02:56,990 --> 00:03:03,080
So let's go to the store folder now and in there, I want to have an actions subfolder and reducers subfolder,

36
00:03:03,080 --> 00:03:07,820
in this app by the way we will have different reducers and actions,

37
00:03:07,820 --> 00:03:10,640
unlike in the last module here.

38
00:03:10,760 --> 00:03:13,760
So for the moment, we'll start with the products.js

39
00:03:13,830 --> 00:03:19,510
file here in the reducers folder and I'll also add a products.js file in the actions folder.

40
00:03:19,550 --> 00:03:24,980
Again if it's confusing to you that we have the same name here in different folders, you can always see

41
00:03:24,980 --> 00:03:29,440
in which file I am here at the top here with this breadcrumb feature

42
00:03:29,660 --> 00:03:33,480
and of course, you could also work with different names in your app if this is confusing,

43
00:03:33,620 --> 00:03:39,380
I think it's pretty clear though in which file I am working, it's clearly selected here as well.

44
00:03:39,380 --> 00:03:45,200
So let's start in the products reducer and in there I want to define my initial state because this

45
00:03:45,200 --> 00:03:49,600
kind of defines how many products related state slice will look like

46
00:03:49,880 --> 00:03:54,440
and of course, as always in programming there is more than one possible approach,

47
00:03:54,440 --> 00:04:02,890
I think it makes sense to say that we have a list of available products, that's an array and of user

48
00:04:03,190 --> 00:04:06,070
products and user products,

49
00:04:06,070 --> 00:04:08,630
these are simply the products which we created,

50
00:04:08,710 --> 00:04:14,800
so where the owner ID is the ID of the currently logged in user and for the moment, we'll have no

51
00:04:14,800 --> 00:04:19,450
login feature but later that'll be the case, for the moment you will just set this up into a dummy

52
00:04:19,450 --> 00:04:26,380
way. Available product should be all products or maybe also only the products which we didn't create

53
00:04:26,380 --> 00:04:31,990
so that we can't buy our own products, though in reality in most shops, you can also buy what you sell,

54
00:04:31,990 --> 00:04:34,990
so I think we can also just take all products here

55
00:04:34,990 --> 00:04:39,700
but that's something you can also fine tune in your application.

56
00:04:39,700 --> 00:04:47,920
So we have these two product arrays. Now in the reducer here which is a function where we get the state

57
00:04:47,920 --> 00:04:49,960
which should be initialized with our initial state

58
00:04:49,960 --> 00:04:55,360
and should take this as a default value and where we get an action, in there we will later handle

59
00:04:55,360 --> 00:05:02,260
different action type so that we can for example add a new product and so on. For the moment I'll

60
00:05:02,260 --> 00:05:04,380
just always return my state here and therefore

61
00:05:04,450 --> 00:05:09,610
I will always return my initial state of course and that will allow us to then tap into Redux and at

62
00:05:09,610 --> 00:05:12,300
least get that initial state.

63
00:05:12,340 --> 00:05:19,210
Now of course without the possibility of adding new products, our initial state isn't that useful though

64
00:05:19,210 --> 00:05:21,550
because it has empty lists of products here,

65
00:05:21,700 --> 00:05:23,480
so nothing we could render.

66
00:05:23,740 --> 00:05:25,420
So just as I did it before,

67
00:05:25,480 --> 00:05:32,080
I'll also add a data folder and set up some dummy data in here which we'll not use throughout the entire module

68
00:05:32,110 --> 00:05:37,150
but which we can use for now so that we have some products to get started with

69
00:05:37,150 --> 00:05:43,390
and for this, you find attached this dummy-data.js file which you can just take to replace yours or

70
00:05:43,390 --> 00:05:47,230
where you can just copy in the content into your dummy-data.js file

71
00:05:47,230 --> 00:05:50,620
and what I do in there is I import my product model,

72
00:05:50,620 --> 00:05:54,700
so of course therefore you should make sure that this path is correct for you if you just copied my

73
00:05:54,700 --> 00:06:00,940
code and then I set up this product array here where I have a bunch of dummy products and

74
00:06:00,940 --> 00:06:07,150
now it's important, we get the ID of the product, then we got the owner ID, then we got the title and

75
00:06:07,150 --> 00:06:12,100
you should make sure that your product model is set up so that this order is correct.

76
00:06:12,130 --> 00:06:19,630
So here we get the title, then we got the imageUrl as the fourth argument you receive, then

77
00:06:19,630 --> 00:06:23,590
you have the description as the fifth and the price as the last argument,

78
00:06:23,590 --> 00:06:30,250
so make sure that your product model is set up in the way that this is the order of arguments.

79
00:06:30,250 --> 00:06:31,690
This is what you have here,

80
00:06:31,930 --> 00:06:34,050
in the end I export this array as a default and

81
00:06:34,070 --> 00:06:38,160
therefore now in this products reducer, we can simply import this.

82
00:06:38,170 --> 00:06:47,080
So there we can import products, our list of dummy products from the data folder and there from

83
00:06:47,080 --> 00:06:52,750
the dummy-data.js file and we can simply initialize our available products with products here for

84
00:06:52,750 --> 00:06:59,410
the moment and the user products can also be initialized with that, though for the user products there

85
00:06:59,440 --> 00:07:06,310
is one little difference which I want to make, I want to filter them for a certain owner ID because

86
00:07:06,310 --> 00:07:12,820
in the end, not all products will be created by us. Instead here, I will filter that dummy array, look at

87
00:07:12,820 --> 00:07:19,420
every product that only include products in my user products array where the owner ID is equal to

88
00:07:19,420 --> 00:07:26,500
U1 which if you have a look at the dummy data is simply the case for some products, not for all

89
00:07:26,500 --> 00:07:26,960
of them.

90
00:07:27,010 --> 00:07:32,650
Some of them have the U1 owner ID and this will be the products I use here as user products, as

91
00:07:32,650 --> 00:07:39,010
a dummy setup. with that our reducer for the products is set up here. we can ignore the products actions

92
00:07:39,100 --> 00:07:45,070
for the moment, we'll of course add some later and now we can go to the app.js file and set up Redux

93
00:07:45,070 --> 00:07:46,450
there as well.

94
00:07:46,450 --> 00:07:50,100
For that, we need to import something from Redux

95
00:07:50,140 --> 00:07:54,720
and of course, we also need to import something from React Redux.

96
00:07:54,970 --> 00:07:58,870
Now this something we need to import from Redux here and

97
00:07:58,870 --> 00:08:04,060
that is of course the create store function and the combined reducers functions,, so that

98
00:08:04,060 --> 00:08:08,910
we can create one root reducer. At the moment of course we have only one reducer

99
00:08:08,920 --> 00:08:12,610
but as I mentioned in this app, we will actually have multiple reducers in the end,

100
00:08:12,610 --> 00:08:18,300
so here you definitely need to combine your reducers and from React Redux,

101
00:08:18,310 --> 00:08:25,750
we need the provider component which we wrap around our app to provide something. We will then of

102
00:08:25,750 --> 00:08:33,600
course also need to import the products reducer or however you want to name it from the store folder,

103
00:08:33,660 --> 00:08:39,940
there from reducers and there from the products file so that we can thereafter create our root

104
00:08:40,000 --> 00:08:48,490
reducer by calling combined reducers, where we then pass in an object where we map let's say to products

105
00:08:48,520 --> 00:08:55,330
but that is up to you, our products reducer and later we will add more reducers there and then we

106
00:08:55,330 --> 00:09:03,280
can create our store with create store and this in the end takes our root reducer as an argument

107
00:09:03,970 --> 00:09:11,230
and thereafter down there in the jsx code, I will create my provider component in between the opening

108
00:09:11,230 --> 00:09:17,900
and closing tags, I will then also later have my screen, for the moment, we'll not have anything there,

109
00:09:17,920 --> 00:09:23,080
this is not valid jsx by the way but we'll fix it later and for the provider component, of course

110
00:09:23,080 --> 00:09:29,200
we have to set the store prop and set this to the store constant or the store in general we're creating

111
00:09:29,200 --> 00:09:36,180
here. With that, Redux should be set up, with that we'll later be able to tap into it here from the products

112
00:09:36,210 --> 00:09:42,120
overview screen and with that of course, the next step also is to add navigation so we can see that

113
00:09:42,120 --> 00:09:46,670
product overview screen. So let's continue working on these steps

114
00:09:46,710 --> 00:09:47,190
next.