1
00:00:02,250 --> 00:00:04,270
Now to logout,

2
00:00:04,290 --> 00:00:07,130
we need a new action which we can dispatch.

3
00:00:07,260 --> 00:00:15,010
So in the auth file in the actions folder, I will add a new action creator, doesn't really matter where

4
00:00:15,010 --> 00:00:23,230
you add it, I add it down there and I export it and name it logout which sounds like a fitting name

5
00:00:23,230 --> 00:00:23,650
to me.

6
00:00:26,350 --> 00:00:31,210
I expect no arguments there and I need an action identifier for logging out though,

7
00:00:31,240 --> 00:00:33,400
so here we can export

8
00:00:36,280 --> 00:00:43,100
const logout with the logout string and use that down there

9
00:00:43,270 --> 00:00:48,510
and in this action creator which is a normal action creator where I don't need to send any HTTP request

10
00:00:48,520 --> 00:00:54,460
or anything like that, I just dispatch this logout action in the end or I create this logout action

11
00:00:54,460 --> 00:00:57,360
object.

12
00:00:57,410 --> 00:01:04,160
Now we can use that and I want to be able to logout with the help of the side drawer, in the side drawer,

13
00:01:04,190 --> 00:01:06,780
I want to have this logout button.

14
00:01:06,860 --> 00:01:10,230
That means that we need to do something which we haven't done before,

15
00:01:10,460 --> 00:01:13,220
we need to add a new button to the side drawer.

16
00:01:13,370 --> 00:01:21,030
Thus far, we only add the automatically created buttons but adding your own content isn't too hard.

17
00:01:21,060 --> 00:01:25,100
For that, let's go to the shop navigator file where we set up the drawer,

18
00:01:25,110 --> 00:01:28,770
here it is and then here

19
00:01:29,000 --> 00:01:36,280
besides my content options, we can also add a content component here.

20
00:01:36,290 --> 00:01:42,320
This allows you to add your own content for the side drawer instead of the default content.

21
00:01:42,320 --> 00:01:46,910
Now this takes a function which receives props because in the end, this is a React component which you

22
00:01:46,910 --> 00:01:53,740
add here, so it gets props and it has to return some jsx and therefore you need to make sure you're

23
00:01:53,750 --> 00:01:58,870
importing react from react and we'll also need a couple of other imports.

24
00:01:58,960 --> 00:02:02,770
We also need to import something from React Native and that should be the save area

25
00:02:02,770 --> 00:02:13,720
view and I also want to import the button from React Native. In addition, from React navigation, we need

26
00:02:13,720 --> 00:02:20,240
to import the drawer items and also from React Native again,

27
00:02:20,310 --> 00:02:28,940
I also need the view. Now with that imported, let's go down to our newly added content component

28
00:02:28,940 --> 00:02:36,970
and here we can now return a view with a style of select one, you can of course also add a stylesheet,

29
00:02:36,970 --> 00:02:42,400
I'll just add inline styling and by the way, this component could of course also reside in a separate

30
00:02:42,400 --> 00:02:49,690
file, it doesn't have to be created on the fly in this file. Now in this view, I want to have a save area

31
00:02:49,690 --> 00:03:02,920
view and in there, make sure you add force inset equal to top always horizontal never and this just controls

32
00:03:02,920 --> 00:03:13,110
how this is laid out and in that save area view, you should now add the drawer items and important, pass

33
00:03:13,110 --> 00:03:18,240
props to those because these are the default drawer items which are rendered and that should still be

34
00:03:18,240 --> 00:03:19,100
the case

35
00:03:19,190 --> 00:03:24,840
and in order for them to be configured correctly, you need to pass in props which is in the end passed

36
00:03:24,840 --> 00:03:28,800
in by React navigation and holds all your drawer config and so on

37
00:03:29,040 --> 00:03:33,390
and now you can add your own extra drawer item here and that will be this button,

38
00:03:33,390 --> 00:03:41,200
the default React Native button where I say logout, where I want to add a color of let's say colors.primary

39
00:03:41,830 --> 00:03:45,640
and where onPress,

40
00:03:45,640 --> 00:03:52,000
I now want to dispatch this logout action and now we'll have a huge problem here,

41
00:03:52,200 --> 00:03:54,360
how can we dispatch this from here?

42
00:03:54,390 --> 00:03:56,910
Now first of all, if you save this, you should be seeing this.

43
00:03:56,910 --> 00:04:00,130
So here if you expand the drawer, here's the logout button

44
00:04:00,150 --> 00:04:01,470
right so this works

45
00:04:01,470 --> 00:04:05,170
and of course you can style and position this however you want

46
00:04:06,680 --> 00:04:08,420
and by the way just to double check,

47
00:04:08,420 --> 00:04:11,530
we can also see this on Android if we do login there,

48
00:04:16,210 --> 00:04:17,320
here in the drawer

49
00:04:17,320 --> 00:04:25,830
we also have the logout button. By the way, we might want to add a little bit more padding on the top

50
00:04:27,790 --> 00:04:29,700
but how can we dispatch everything?

51
00:04:29,740 --> 00:04:32,230
And I will add some extra padding here

52
00:04:34,050 --> 00:04:34,980
of 20

53
00:04:38,300 --> 00:04:43,820
because my save area view works but it does barely leave more spacing than I need.

54
00:04:43,820 --> 00:04:50,730
So in order to have some extra spacing, a little bit of padding can't hurt,

55
00:04:50,880 --> 00:04:52,110
I think that's better

56
00:04:52,260 --> 00:04:58,880
but again, how can we now make sure that we can dispatch an action here? Well this is a React component

57
00:04:58,890 --> 00:04:59,800
right,

58
00:04:59,910 --> 00:05:03,560
so in the end, we can simply use dispatch here.

59
00:05:05,810 --> 00:05:13,250
So we can import use dispatch here from React Redux,

60
00:05:13,270 --> 00:05:19,390
so what we did before and use that in here because you can use this hook in any component and this is

61
00:05:19,390 --> 00:05:27,800
just a component. So in here before we return jsx, I can get access to my dispatch function with use

62
00:05:27,800 --> 00:05:34,980
dispatch and therefore now here when we press this button, we can call dispatch and dispatch our auth

63
00:05:35,000 --> 00:05:38,810
action and for that of course, you just need to make sure you are importing it,

64
00:05:38,810 --> 00:05:49,340
so import everything as auth actions from the store folder, the actions folder, the auth file and now use

65
00:05:49,340 --> 00:05:57,350
auth actions to create that action, here auth actions.logout like this and

66
00:05:57,360 --> 00:06:02,420
this should dispatch the logout action. Now besides that, I also want to navigate away so we can also

67
00:06:02,420 --> 00:06:11,190
call props.navigation.navigate, that will be available here and go back to the auth screen here,

68
00:06:11,190 --> 00:06:17,070
so basically to this auth screen here in the switch navigator. Our drawer is part of the shop navigator

69
00:06:17,250 --> 00:06:21,480
so we can also go to the auth screen from there.

70
00:06:21,530 --> 00:06:27,040
Now when we dispatch logout, I want to make sure that in the reducer, we're also doing something.

71
00:06:27,230 --> 00:06:30,840
We have our logout action creator here,

72
00:06:30,920 --> 00:06:37,070
so in the reducer, in the auth reducer, I want to have a new case, the logout case and for that, you should make sure

73
00:06:37,070 --> 00:06:39,500
you are importing the logout identifier

74
00:06:39,920 --> 00:06:44,370
and of course here it's very simple, I return my initial state which in the end means that the token

75
00:06:44,370 --> 00:06:49,540
is reset and the userId is reset and now let's give this a try.

76
00:06:49,540 --> 00:06:55,180
If I go back here and I now click logout, I am back on the auth screen,

77
00:06:55,240 --> 00:06:56,350
so that works.

78
00:06:56,350 --> 00:06:58,180
Let's also give it a try on Android,

79
00:07:01,100 --> 00:07:03,070
if I click on logout here,

80
00:07:03,310 --> 00:07:04,430
we're back.

81
00:07:04,480 --> 00:07:05,970
So this is working,

82
00:07:06,250 --> 00:07:14,200
we're almost there with that but we also should be logged out automatically if the token expired because

83
00:07:14,200 --> 00:07:15,820
it has this expiration date

84
00:07:15,820 --> 00:07:18,220
and right now we have no automatic expiry.