‫And now, to finish this part,
‫let's incorporate a geolocation feature.
‫And to do that, you will actually bring back the custom hook
‫that we wrote earlier in one of the challenges.
‫Now, if you didn't complete that challenge,
‫then you can just grab this custom hook here
‫from this URL that I will provide in this lecture.
‫And so this is now really the power of custom hooks.
‫So we just write them once, and then we can drop them
‫into any project that we want,
‫at least if we made them reusable enough.
‫So let's just copy...
‫Well, actually we're missing this part,
‫so let's copy all of this.
‫And then let's first create a new folder here for our hooks.
‫So then we get a new nice icon there.
‫And then let's say useGeolocation.js.
‫So this one doesn't have to be a JSX file
‫because we are not exporting any JSX.
‫So it's just a JavaScript function.
‫Now, here we are missing the useState hook,
‫so let's include it like this,
‫and then let's actually export this function from here.
‫And here I'm not doing a default export,
‫but really a named export.
‫So that's how I like to do it with hooks,
‫because sometimes we can have multiple custom hooks
‫in the same file.
‫And so then it's easier to have this convention,
‫where we always export them with named exports.
‫Now, there's just one thing that I want to change
‫in this custom hook, which is to have it
‫allow a default position.
‫So I want this custom hook to receive a default position,
‫but if not, then let's set the position to null.
‫So to null instead of an empty object
‫that we have right now.
‫So I think that the empty object
‫doesn't make a lot of sense,
‫and instead, this should be null.
‫And so here, let's now use that default position
‫which will default to null if it's not set.
‫Okay, and so with this, we can then use
‫the get position function on any button
‫to retrieve the current position of our user.
‫And so let's use that here now.
‫And like to always have all my hooks at the very top
‫to keep the code a bit more organized.
‫So let's do that here.
‫And for now, just leaving it empty.
‫So useGeolocation.
‫And then we have have to manually import that here.
‫Import useGeolocation from...
‫We need to move up, then into the hooks folder,
‫and useGeolocation.
‫Now let's just check again what this actually exports.
‫So it exports isLoading, position, error, and getPosition.
‫Now, let's not use the error, but only these other ones.
‫So isLoading, but since we are already using a variable
‫with this name, let's actually rename it.
‫So isLoadingPosition.
‫So just to avoid any confusion.
‫Then we have to position, and let's again rename it
‫to geolocationPosition so that we are really sure
‫what each of the variable names mean.
‫And then let's also get the getPosition function.
‫Okay, and now we need to trigger this
‫with the button right here.
‫So let's place that button also right here in this div,
‫so beside this map container.
‫So for this, we will bring back our button component
‫that we built earlier.
‫And then here, this one is of the type of position.
‫So I know that because here in the CSS module,
‫that's one of the types of classes that we have.
‫So we have the primary button, the back button,
‫and the position button, and that's it.
‫So only those three.
‫And here we also need the onClick handler,
‫which is simply getPosition, like this.
‫And then here, let's do some conditional rendering
‫and ask isLoadingPosition, then here display
‫loading and otherwise use your position.
‫Okay, nice.
‫So we should already see that button here in our UI.
‫And there it is.
‫So let's just reload to make sure.
‫And now let's see.
‫So we click here and then we get the question
‫if we want to allow the geolocation.
‫So let's say so, and then at some point it will finish.
‫It will however, not do anything with the map yet,
‫because we haven't set that up.
‫But if we come here to our map component,
‫somewhere down here in this huge tree, then...
‫Now it went back to app, so that's not helpful.
‫Right here.
‫Yeah, we have our geolocation,
‫and then there we have our position.
‫And so what we want to do then with this position
‫is of course to move the map there.
‫All right, and so let's implement that.
‫So basically we need to do the same thing as before,
‫which is to synchronize this map position now
‫with the geolocation position.
‫So we will need another effect to do that.
‫Now, if we were not using the custom hook
‫for the geolocation, then we could of course
‫directly store the received position into map position.
‫So right here we would then...
‫Yeah, set map position right here.
‫However, since we are using this custom hook,
‫we cannot easily do that.
‫So we could of course pass in a setter function as well,
‫but that's not the point here.
‫So instead, this geolocation hook
‫should actually have its own position state.
‫We just happen to now want to synchronize
‫that state here with our map position
‫so that we can then display exactly that.
‫So let's do that here.
‫And so I was telling you about all that
‫because in React there's right now a push
‫to write as little effects as possible.
‫And so if we did what I mentioned earlier,
‫then we could just avoid this one.
‫So then we wouldn't need this effect.
‫But it's also not a big deal.
‫So all we're going to do is to just synchronize
‫two variables here, very similar to what we have here.
‫So here we will run this effect each time
‫that the geolocation position changes,
‫and then what we want to do here
‫is to check if the position actually exists.
‫So only if it exists, then we want to set the map position.
‫And then let's create an array here.
‫So geolocationPosition.lng, and geolocationposition.,
‫actually here it's the LNG and here the latitude.
‫Okay, so at the beginning,
‫the geolocation position will by default still be null,
‫and so then this code here doesn't run.
‫But then, as we click this button,
‫the geolocation will get retrieved,
‫and then of course this state here will update.
‫And so then this effect will run,
‫which will then in turn set the map position,
‫which will re-render the whole component once more,
‫and then finally the map can move to that new position.
‫So basically this effect here introduces another render,
‫which is one of the reasons why we should avoid
‫having too many effects.
‫But we will learn more about that in the next section.
‫But anyway, I think with this we are done.
‫So let's check, and it should move
‫to somewhere close to Lisbon.
‫So yeah, there it is.
‫So this is not because there's a city there,
‫but really because that's where my GPS location
‫is pointed to.
‫But we can actually change that somewhere.
‫I haven't done that in a long time.
‫So maybe it's right here somewhere.
‫Yeah, I think it's in sensors.
‫Yeah, here we can set the location,
‫for example, to San Francisco.
‫And so if I do this again, then let's see what happens.
‫Yeah, we actually moved to San Francisco.
‫So that's where this is in the US west coast.
‫And so this did work, but now of course, let's go back.
‫And actually this button should really disappear
‫once the geolocation position has been received.
‫So the user will not suddenly move somewhere else,
‫and so it doesn't make a lot of sense
‫that this button stays here after the position
‫has already been received.
‫So yeah, let's load this button here conditionally.
‫So only if there is no geolocation position yet.
‫So in that case, display the button.
‫And so now it is gone.
‫Okay, and with this, our map here
‫is actually feature complete.
‫So it can move between cities like this,
‫and we can use our own position to also move the map
‫to that geo-located position.
‫And finally, as we click somewhere on the map,
‫that will then move there as well, open the form,
‫and place the current clicked position in the URL.
‫Great, and in the next lecture,
‫it's actually time to start working on this form.
‫So let's move there right away.