1
00:00:02,550 --> 00:00:04,670
To make sure that they load, again

2
00:00:04,710 --> 00:00:10,080
we need to go back to the action creator and add a brand new action in the orders action creator, excuse

3
00:00:10,080 --> 00:00:10,260
me.

4
00:00:11,590 --> 00:00:18,880
One identifier I need is set orders, just as we had one for set products to set the loaded orders and

5
00:00:18,880 --> 00:00:21,340
then here I have my fetch orders

6
00:00:21,340 --> 00:00:28,120
action creator which takes no arguments but which then returns my async dispatch function here, thanks

7
00:00:28,140 --> 00:00:36,580
to Redux Thunk and there ultimately I dispatch or I send a new action where the type is set orders and

8
00:00:36,580 --> 00:00:41,250
where I have my loaded orders and of course, that should not be an empty array.

9
00:00:41,290 --> 00:00:47,050
Instead we can borrow the logic from the products action creator, from fetch products there. We can take

10
00:00:47,110 --> 00:00:55,850
all that logic, copy all of that here and move it over to the orders action creator and run that before

11
00:00:55,850 --> 00:00:57,180
we dispatch,

12
00:00:57,410 --> 00:01:04,000
here. Now of course we need to fine tune this, for example the request needs to be sent to orders/U1

13
00:01:04,190 --> 00:01:07,940
and again that will be replaced later with a dynamic value,

14
00:01:07,940 --> 00:01:13,880
for now it's hardcoded to fetch to orders for this user. It should be a get request, I want to check this,

15
00:01:13,880 --> 00:01:14,930
that's fine.

16
00:01:14,930 --> 00:01:16,250
Here I got my response data,

17
00:01:16,250 --> 00:01:19,450
now here I got my loaded orders,

18
00:01:19,460 --> 00:01:21,550
that seems to be a more appropriate name,

19
00:01:21,560 --> 00:01:27,170
still I loop through all the data I got and I want to set my loaded orders down there

20
00:01:27,230 --> 00:01:30,050
but now there's one important difference,

21
00:01:30,050 --> 00:01:34,210
I don't create new products here which I add to loaded orders, instead

22
00:01:34,340 --> 00:01:37,680
of course I need to create new orders here

23
00:01:37,890 --> 00:01:43,510
and for that, you need to import order from the order model. Now

24
00:01:43,520 --> 00:01:48,990
also I see there's a missing curly brace, now before I proceed with that by the way,

25
00:01:49,020 --> 00:01:57,550
I need to make sure that I also catch any errors I might be getting and there I want to throw the error,

26
00:01:57,550 --> 00:01:59,220
basically rethrow it,

27
00:01:59,260 --> 00:02:04,530
make sure it reaches my component and I need one more a closing curly brace

28
00:02:07,350 --> 00:02:11,480
but now back to our logic here where I create new orders, there

29
00:02:11,490 --> 00:02:18,920
the ID is the key, just as for the products, the items can be found in my response data because we

30
00:02:18,920 --> 00:02:24,420
basically get back this here right, so the response data will hold a card items key for example which

31
00:02:24,420 --> 00:02:30,360
holds my card items which I need. So response data for the given key and there, .cardItems,

32
00:02:30,360 --> 00:02:38,200
that's where I find my items because that's what we send here in the end to store the card items, then

33
00:02:38,200 --> 00:02:42,610
my order which I create here of course also needs the total amount, 

34
00:02:42,640 --> 00:02:48,700
I get that from resData key and then there if we have a look at Firebase, it's that total amount field

35
00:02:48,700 --> 00:02:48,970
here

36
00:02:52,220 --> 00:02:53,290
and the date.

37
00:02:53,330 --> 00:03:00,520
Well for that, I create a new date object but I initialize this with the resData key.date.

38
00:03:00,540 --> 00:03:05,760
Now we need to create a new data object because resData key.date is just that date string here

39
00:03:05,850 --> 00:03:08,190
and I need a date object, not a date string,

40
00:03:08,190 --> 00:03:13,800
hence we wrap it, this string we wrap it with the date object creation here and therefore we get a data

41
00:03:13,800 --> 00:03:14,220
object and

42
00:03:14,250 --> 00:03:17,130
that's the order which I add here to loaded orders,

43
00:03:17,130 --> 00:03:22,470
we do that for all the orders we're fetching and with that, we can dispatch this and now we just need to

44
00:03:22,470 --> 00:03:24,950
handle it in the orders reducer.

45
00:03:25,080 --> 00:03:32,230
So there, if I handle set orders and for that, you of course need to import this action identifier,

46
00:03:32,290 --> 00:03:37,500
the only thing I need to do is I need to return a new state object where orders is equal to action.orders

47
00:03:37,570 --> 00:03:39,280
and that's all we need to do,

48
00:03:39,280 --> 00:03:40,640
so really simple.

49
00:03:40,720 --> 00:03:42,250
Now why is it that simple?

50
00:03:42,280 --> 00:03:47,530
Because in the action creator, we do all the work. There we map our orders and then here, I just have the

51
00:03:47,530 --> 00:03:50,290
orders key on my action which holds all the mapped orders,

52
00:03:50,440 --> 00:03:53,740
so that's just what I need to store here.

53
00:03:54,150 --> 00:04:03,570
Now the remaining step is that we dispatch fetch orders here in our orders screen. So let's go there

54
00:04:03,840 --> 00:04:10,560
and let's actually add use effect again to do that and to dispatch,

55
00:04:10,560 --> 00:04:14,470
we also need to import use dispatch from React Redux

56
00:04:14,730 --> 00:04:20,050
and then here we can get access to that dispatch function by executing use dispatch

57
00:04:20,250 --> 00:04:28,420
and then here in use effect, we add dispatch as a dependency because in this effect function here, I

58
00:04:28,420 --> 00:04:31,640
dispatch and now I need my order actions,

59
00:04:31,660 --> 00:04:39,730
so let me import everything as orders actions from the store folder, from the actions folder, from the

60
00:04:39,730 --> 00:04:50,840
orders file and with that imported here, we can say orders actions.fetchOrders

61
00:04:51,110 --> 00:04:56,690
like that and then we'll go ahead and make that request and therefore now if we save this and we go to the

62
00:04:56,690 --> 00:05:05,790
orders screen, it's initially empty but very very fast and it loads all the orders which we stored and that

63
00:05:05,790 --> 00:05:14,260
are these three orders which I have here and of course, we can expand this just as before. Now a loading

64
00:05:14,260 --> 00:05:15,790
spinner would be nice as well

65
00:05:15,790 --> 00:05:18,830
and of course you can also pause the video here and try this on your own.

66
00:05:18,830 --> 00:05:24,830
I'll quickly do it the same way as before - import use state from React,

67
00:05:24,900 --> 00:05:36,120
then here set up the isLoading state and set isLoading by executing use state and setting this to

68
00:05:36,120 --> 00:05:42,540
false initially and then here in the effect, in the end I want to use async await.

69
00:05:42,550 --> 00:05:50,920
Now I said that you can't or shouldn't add async here, so we can either use then here simply or wrap this

70
00:05:50,920 --> 00:05:52,150
in a helper function.

71
00:05:52,150 --> 00:06:01,320
Now I will just use the then call, so I will set isLoading to true here and then add then here and once

72
00:06:01,320 --> 00:06:05,880
this is done, I know we have a response, so here I will set isLoading to false.

73
00:06:05,880 --> 00:06:08,680
Now please note that I'm not having error handling here,

74
00:06:08,700 --> 00:06:11,050
so if this fails we're not handling this,

75
00:06:11,070 --> 00:06:13,530
instead we'll always be in the loading state,

76
00:06:13,530 --> 00:06:18,200
so of course you might want to consider adding error handling as well. I'll just not do it here because

77
00:06:18,200 --> 00:06:21,570
I showed how it works, to not bloat this module too much,

78
00:06:21,660 --> 00:06:23,360
I'll not implement it but I can

79
00:06:23,370 --> 00:06:28,710
but of course you could handle errors here if you would want to use this then approach here by also

80
00:06:28,710 --> 00:06:30,400
adding catch,

81
00:06:30,420 --> 00:06:32,790
this is something you can absolutely do here.

82
00:06:33,430 --> 00:06:35,340
I'll focus on the loading part

83
00:06:35,350 --> 00:06:43,000
however. Now since I have all of that set up, we can import the activity indicator and import the view

84
00:06:43,000 --> 00:06:45,560
component and for some styling,

85
00:06:45,570 --> 00:06:55,340
also import the stylesheet API from React Native and then check whether we're in the loading state,

86
00:06:55,370 --> 00:07:04,890
in which case I want to return my centered activity indicator here with a size of large and a color

87
00:07:04,920 --> 00:07:12,180
which should be colors which you need to import, therefore primary, so make sure you have that colors import

88
00:07:12,220 --> 00:07:23,620
added and with that added, here I'll add style equal to styles.centered or

89
00:07:23,620 --> 00:07:32,190
however you want to name it and now add that styles object here with the help of Stylesheet.create

90
00:07:32,840 --> 00:07:44,750
and there centered should have setup of flex one, justify content center and align items center, like

91
00:07:44,750 --> 00:07:53,980
this. With that if we save it, we have a look at orders, we see the spinner. Again it's loading very fast

92
00:07:54,010 --> 00:07:59,890
but you can see it if you look closely, here's the spinner for a fraction of a second and thereafter,

93
00:07:59,980 --> 00:08:06,850
the orders are loaded. So that's now working, storing and fetching orders also works

94
00:08:07,030 --> 00:08:13,770
and with that, we implemented HTTP requests and using a server for storing the data in this app.