‫[Jonas Schmedtmann] In this challenge
‫let's practice creating a custom hook based on some code
‫that is already working.
‫So here we have a very simple application
‫which all it does is to get your position
‫using geolocation as soon as you click on this button.
‫So when you click here, your browser will then automatically
‫ask for your permission and then when you allow,
‫it will give you your GPS position
‫and the link which you can click
‫and which will bring you to the OpenStreetMap application
‫on your location, okay.
‫Also, the app then clicks how many times
‫you have requested your position
‫and so if I click here again,
‫then it changes to 2 and it loads again, okay.
‫And as I was saying in the beginning,
‫I already have all of this code working here
‫in your starter file.
‫So the application, again, is already working just fine
‫and you can of course check out all the JSX code
‫that I wrote here, but what matters is this other code,
‫so all of this here, outside of the JSX return.
‫So my task for you now is to extract this logic
‫into a custom hook called "useGeolocation,"
‫and then use that custom hook
‫to make this component work again,
‫so working in the exact same way as before.
‫Now, I want you to think about the fact that a custom hook
‫should be as reusable as possible
‫and so of course I want you to write a useGeolocation hook
‫that you could then use in any other app
‫that you'll ever build.
‫So if we think about this, then maybe those future apps
‫where you might need this custom hook,
‫they don't want to count how many times we have clicked
‫on the button here, right?
‫And so this state right here might not really be relevant
‫to this custom hook,
‫so this custom hook should really only contain the logic
‫that is about getting the position from geolocation
‫and so that's what I want you to think about
‫while you are doing this exercise.
‫So again, basically make sure to not include
‫this state here, which indicates how many times the button
‫has been clicked, so that's a small additional challenge,
‫but I'm sure you can do it.
‫And again, the goal is to then have the application
‫in the end look and work exactly as it is working right now,
‫so take all the time that you need
‫and then I see you back here with my quick solution.
‫So let's get to work
‫and so let's grab all the logic that is related
‫to the geolocation, so that's all the state
‫and also this event handler here
‫except for this counter here
‫and for now also accept this part here,
‫although that is debatable,
‫but let's just comment this out for now.
‫So let's grab all this code right here,
‫cut it, and then paste it here,
‫but of course now we will need to adjust a few things
‫and the first one is that, of course,
‫now this counting logic here is no longer part
‫of getPosition, so let's cut that from here
‫and paste it into some function here.
‫So let's say handleClick,
‫and then let's do that here
‫and so then here we will actually call that other function
‫because inside handleClick is where we will then
‫update the CountClicks state
‫and also actually get the position.
‫So let's save for now, but of course we are now missing
‫all of these variables here
‫and so just like we did previously,
‫we now need to return all those variables from our hook,
‫so that is actually pretty easy.
‫So let's just return an object,
‫so it isLoading with position with the error
‫and then also with the getPosition function, all right.
‫And then we see here we have no longer
‫any yellow underlinings,
‫all we have now yellow is this function
‫because we are not using it anywhere, so let's change that.
‫So useGeolocation and then this will, of course,
‫return an object with these names here,
‫and so let's just copy that, that's a bit easier,
‫so we will destructure all of that right here
‫into these four variables.
‫Now, you could also have done this destructuring here
‫right here inside useGeolocation
‫and then instead of returning the position,
‫you could have returned the latitude
‫and the longitude separately,
‫but here I just returned all of them at once
‫and we can now actually do nested destructuring.
‫So we can also immediately destructure the position
‫right here, so lat and lng and they're called this way
‫because here we are constructing that position object
‫with these exact property names.
‫Okay, then we don't need this anymore and then here,
‫all we have to do is to also call getPosition
‫and with this we should be good to go,
‫so let's just reload here
‫and there we go.
‫So the state updating works here and here as well
‫and of course our link is also still working, nice.
‫So that's actually already it, so this was a fast one,
‫but also a very important challenge
‫which hopefully made it even more clear
‫how we create our own custom hooks.
‫So basically we take all the non-visual logic,
‫so all the logic that contains some React hooks,
‫and which is relevant to a certain thing
‫and so in this case, that thing is to use geolocation.
‫So then we took these three state variables
‫and also this event handler function
‫and then returned off that from here and used it here.
‫And so then we encapsulated all of those states
‫and all the logic inside this custom hook,
‫then of course, this state we left outside
‫which then forced us to do a couple of changes here
‫in the event handler for the button,
‫but all that is pretty simple.
‫And so I hope that you had some fun with this
‫and that you're now ready to move to the section
‫that is coming up next.
‫So see you there.