1
00:00:01,160 --> 00:00:02,280
‫[Jonas Schmedtmann] In this challenge

2
00:00:02,280 --> 00:00:06,780
‫let's practice creating a custom hook based on some code

3
00:00:06,780 --> 00:00:08,343
‫that is already working.

4
00:00:09,630 --> 00:00:12,600
‫So here we have a very simple application

5
00:00:12,600 --> 00:00:15,690
‫which all it does is to get your position

6
00:00:15,690 --> 00:00:20,160
‫using geolocation as soon as you click on this button.

7
00:00:20,160 --> 00:00:23,370
‫So when you click here, your browser will then automatically

8
00:00:23,370 --> 00:00:26,760
‫ask for your permission and then when you allow,

9
00:00:26,760 --> 00:00:29,190
‫it will give you your GPS position

10
00:00:29,190 --> 00:00:31,590
‫and the link which you can click

11
00:00:31,590 --> 00:00:35,460
‫and which will bring you to the OpenStreetMap application

12
00:00:35,460 --> 00:00:40,080
‫on your location, okay.

13
00:00:40,080 --> 00:00:42,600
‫Also, the app then clicks how many times

14
00:00:42,600 --> 00:00:44,760
‫you have requested your position

15
00:00:44,760 --> 00:00:46,410
‫and so if I click here again,

16
00:00:46,410 --> 00:00:51,183
‫then it changes to 2 and it loads again, okay.

17
00:00:52,200 --> 00:00:54,630
‫And as I was saying in the beginning,

18
00:00:54,630 --> 00:00:57,390
‫I already have all of this code working here

19
00:00:57,390 --> 00:00:59,430
‫in your starter file.

20
00:00:59,430 --> 00:01:03,390
‫So the application, again, is already working just fine

21
00:01:03,390 --> 00:01:07,200
‫and you can of course check out all the JSX code

22
00:01:07,200 --> 00:01:11,850
‫that I wrote here, but what matters is this other code,

23
00:01:11,850 --> 00:01:16,850
‫so all of this here, outside of the JSX return.

24
00:01:16,890 --> 00:01:21,180
‫So my task for you now is to extract this logic

25
00:01:21,180 --> 00:01:25,110
‫into a custom hook called "useGeolocation,"

26
00:01:25,110 --> 00:01:27,210
‫and then use that custom hook

27
00:01:27,210 --> 00:01:29,850
‫to make this component work again,

28
00:01:29,850 --> 00:01:33,270
‫so working in the exact same way as before.

29
00:01:33,270 --> 00:01:37,350
‫Now, I want you to think about the fact that a custom hook

30
00:01:37,350 --> 00:01:40,230
‫should be as reusable as possible

31
00:01:40,230 --> 00:01:44,640
‫and so of course I want you to write a useGeolocation hook

32
00:01:44,640 --> 00:01:47,340
‫that you could then use in any other app

33
00:01:47,340 --> 00:01:48,753
‫that you'll ever build.

34
00:01:49,620 --> 00:01:53,610
‫So if we think about this, then maybe those future apps

35
00:01:53,610 --> 00:01:56,190
‫where you might need this custom hook,

36
00:01:56,190 --> 00:02:00,030
‫they don't want to count how many times we have clicked

37
00:02:00,030 --> 00:02:02,310
‫on the button here, right?

38
00:02:02,310 --> 00:02:06,210
‫And so this state right here might not really be relevant

39
00:02:06,210 --> 00:02:08,310
‫to this custom hook,

40
00:02:08,310 --> 00:02:11,850
‫so this custom hook should really only contain the logic

41
00:02:11,850 --> 00:02:15,720
‫that is about getting the position from geolocation

42
00:02:15,720 --> 00:02:17,730
‫and so that's what I want you to think about

43
00:02:17,730 --> 00:02:20,490
‫while you are doing this exercise.

44
00:02:20,490 --> 00:02:23,730
‫So again, basically make sure to not include

45
00:02:23,730 --> 00:02:27,900
‫this state here, which indicates how many times the button

46
00:02:27,900 --> 00:02:31,020
‫has been clicked, so that's a small additional challenge,

47
00:02:31,020 --> 00:02:33,030
‫but I'm sure you can do it.

48
00:02:33,030 --> 00:02:36,150
‫And again, the goal is to then have the application

49
00:02:36,150 --> 00:02:41,150
‫in the end look and work exactly as it is working right now,

50
00:02:41,550 --> 00:02:43,440
‫so take all the time that you need

51
00:02:43,440 --> 00:02:46,653
‫and then I see you back here with my quick solution.

52
00:02:48,600 --> 00:02:50,910
‫So let's get to work

53
00:02:50,910 --> 00:02:54,450
‫and so let's grab all the logic that is related

54
00:02:54,450 --> 00:02:58,560
‫to the geolocation, so that's all the state

55
00:02:58,560 --> 00:03:01,590
‫and also this event handler here

56
00:03:01,590 --> 00:03:06,360
‫except for this counter here

57
00:03:06,360 --> 00:03:09,240
‫and for now also accept this part here,

58
00:03:09,240 --> 00:03:11,010
‫although that is debatable,

59
00:03:11,010 --> 00:03:13,683
‫but let's just comment this out for now.

60
00:03:14,760 --> 00:03:17,883
‫So let's grab all this code right here,

61
00:03:18,990 --> 00:03:21,813
‫cut it, and then paste it here,

62
00:03:22,860 --> 00:03:26,250
‫but of course now we will need to adjust a few things

63
00:03:26,250 --> 00:03:28,770
‫and the first one is that, of course,

64
00:03:28,770 --> 00:03:32,310
‫now this counting logic here is no longer part

65
00:03:32,310 --> 00:03:35,830
‫of getPosition, so let's cut that from here

66
00:03:37,140 --> 00:03:39,153
‫and paste it into some function here.

67
00:03:42,120 --> 00:03:44,463
‫So let's say handleClick,

68
00:03:48,900 --> 00:03:50,640
‫and then let's do that here

69
00:03:50,640 --> 00:03:54,630
‫and so then here we will actually call that other function

70
00:03:54,630 --> 00:03:57,870
‫because inside handleClick is where we will then

71
00:03:57,870 --> 00:04:01,080
‫update the CountClicks state

72
00:04:01,080 --> 00:04:03,963
‫and also actually get the position.

73
00:04:04,980 --> 00:04:08,430
‫So let's save for now, but of course we are now missing

74
00:04:08,430 --> 00:04:10,050
‫all of these variables here

75
00:04:10,050 --> 00:04:12,180
‫and so just like we did previously,

76
00:04:12,180 --> 00:04:17,180
‫we now need to return all those variables from our hook,

77
00:04:17,340 --> 00:04:20,733
‫so that is actually pretty easy.

78
00:04:22,050 --> 00:04:24,660
‫So let's just return an object,

79
00:04:24,660 --> 00:04:29,660
‫so it isLoading with position with the error

80
00:04:32,010 --> 00:04:36,710
‫and then also with the getPosition function, all right.

81
00:04:38,250 --> 00:04:41,160
‫And then we see here we have no longer

82
00:04:41,160 --> 00:04:43,140
‫any yellow underlinings,

83
00:04:43,140 --> 00:04:45,810
‫all we have now yellow is this function

84
00:04:45,810 --> 00:04:49,923
‫because we are not using it anywhere, so let's change that.

85
00:04:52,380 --> 00:04:55,860
‫So useGeolocation and then this will, of course,

86
00:04:55,860 --> 00:04:59,430
‫return an object with these names here,

87
00:04:59,430 --> 00:05:02,313
‫and so let's just copy that, that's a bit easier,

88
00:05:04,110 --> 00:05:08,310
‫so we will destructure all of that right here

89
00:05:08,310 --> 00:05:10,560
‫into these four variables.

90
00:05:10,560 --> 00:05:14,670
‫Now, you could also have done this destructuring here

91
00:05:14,670 --> 00:05:17,820
‫right here inside useGeolocation

92
00:05:17,820 --> 00:05:20,100
‫and then instead of returning the position,

93
00:05:20,100 --> 00:05:22,200
‫you could have returned the latitude

94
00:05:22,200 --> 00:05:24,300
‫and the longitude separately,

95
00:05:24,300 --> 00:05:27,420
‫but here I just returned all of them at once

96
00:05:27,420 --> 00:05:30,870
‫and we can now actually do nested destructuring.

97
00:05:30,870 --> 00:05:34,770
‫So we can also immediately destructure the position

98
00:05:34,770 --> 00:05:39,770
‫right here, so lat and lng and they're called this way

99
00:05:41,070 --> 00:05:44,790
‫because here we are constructing that position object

100
00:05:44,790 --> 00:05:48,483
‫with these exact property names.

101
00:05:50,250 --> 00:05:54,780
‫Okay, then we don't need this anymore and then here,

102
00:05:54,780 --> 00:05:59,100
‫all we have to do is to also call getPosition

103
00:05:59,100 --> 00:06:02,070
‫and with this we should be good to go,

104
00:06:02,070 --> 00:06:03,580
‫so let's just reload here

105
00:06:05,700 --> 00:06:08,133
‫and there we go.

106
00:06:10,200 --> 00:06:13,590
‫So the state updating works here and here as well

107
00:06:13,590 --> 00:06:18,590
‫and of course our link is also still working, nice.

108
00:06:19,230 --> 00:06:23,940
‫So that's actually already it, so this was a fast one,

109
00:06:23,940 --> 00:06:26,460
‫but also a very important challenge

110
00:06:26,460 --> 00:06:28,920
‫which hopefully made it even more clear

111
00:06:28,920 --> 00:06:31,590
‫how we create our own custom hooks.

112
00:06:31,590 --> 00:06:34,620
‫So basically we take all the non-visual logic,

113
00:06:34,620 --> 00:06:38,580
‫so all the logic that contains some React hooks,

114
00:06:38,580 --> 00:06:41,850
‫and which is relevant to a certain thing

115
00:06:41,850 --> 00:06:46,200
‫and so in this case, that thing is to use geolocation.

116
00:06:46,200 --> 00:06:49,290
‫So then we took these three state variables

117
00:06:49,290 --> 00:06:52,170
‫and also this event handler function

118
00:06:52,170 --> 00:06:56,910
‫and then returned off that from here and used it here.

119
00:06:56,910 --> 00:06:59,910
‫And so then we encapsulated all of those states

120
00:06:59,910 --> 00:07:03,810
‫and all the logic inside this custom hook,

121
00:07:03,810 --> 00:07:07,020
‫then of course, this state we left outside

122
00:07:07,020 --> 00:07:10,650
‫which then forced us to do a couple of changes here

123
00:07:10,650 --> 00:07:12,870
‫in the event handler for the button,

124
00:07:12,870 --> 00:07:15,960
‫but all that is pretty simple.

125
00:07:15,960 --> 00:07:18,720
‫And so I hope that you had some fun with this

126
00:07:18,720 --> 00:07:21,900
‫and that you're now ready to move to the section

127
00:07:21,900 --> 00:07:23,670
‫that is coming up next.

128
00:07:23,670 --> 00:07:24,963
‫So see you there.