#44 - Add navigate to location functions

src/pages/search/GeolocationButton.tsx

@@ -3,14 +3,21 @@ import { useAppDispatch } from '@store';
 import { getGeolocationGeocode } from '@slices/searchSlice.thunks';
 import { getWeather } from '@slices/weatherSlice.thunks';
 import { unwrapResult } from '@reduxjs/toolkit';
+import { useNavigate } from 'react-router-dom';
 
 export const GeolocationButton = () => {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
-  const getGeoLocation = async () =>
-    dispatch(getGeolocationGeocode())
-      .then(unwrapResult)
-      .then((geolocationGeocode) => dispatch(getWeather(geolocationGeocode)));
+  const getGeoLocation = async () => {
+    navigate('/');
+
+    const geolocationGeocode = unwrapResult(
+      await dispatch(getGeolocationGeocode())
+    );
+
+    return dispatch(getWeather(geolocationGeocode));
+  };
 
   return (
     <div className="mt-3 md:mt-5">

src/pages/search/LocationResults.tsx

@@ -21,11 +21,13 @@ export const LocationResults = () => {
   const { locations, recentLocations, loading, errors } = useSearch();
 
   const getGeocoding = async (text: Text, placeId: string) => {
+    navigate('/');
+
     const geocodeLocation = unwrapResult(await dispatch(getGeocode(placeId)));
 
-    return dispatch(getWeather(geocodeLocation))
-      .then(() => navigate('/'))
-      .then(() => dispatch(setRecentLocation({ text, placeId })));
+    return dispatch(getWeather(geocodeLocation)).then(() =>
+      dispatch(setRecentLocation({ text, placeId }))
+    );
   };
 
   if (loading) {

src/pages/search/Search.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { LocationInput } from '@pages/search/LocationInput';
 import { LocationSelection } from '@pages/search/LocationSelection';
 import { GoogleAttribution } from '@pages/search/GoogleAttribution';
@@ -9,12 +9,11 @@ import { resetLocations } from '@slices/searchSlice';
 export const Search = () => {
   const dispatch = useAppDispatch();
 
-  useEffect(
-    () => () => {
-      dispatch(resetLocations());
-    },
-    [dispatch]
-  );
+  const resetLocationsOnExit = useCallback(() => {
+    dispatch(resetLocations());
+  }, [dispatch]);
+
+  useEffect(() => resetLocationsOnExit, [resetLocationsOnExit]);
 
   return (
     <div className="flex h-screen flex-col">