feat: adding geolocation browser api support

src/__tests__/__snapshots__/app.test.tsx.snap

@@ -7,6 +7,12 @@ exports[`renders app component 1`] = `
     role="main"
   >
     Weather App!
+    <p>
+      latitude: 
+    </p>
+    <p>
+      longitude: 
+    </p>
   </div>
 </div>
 `;

src/pages/Home/index.tsx

@@ -1,7 +1,38 @@
+import { useEffect, useState } from "react";
+
+type Coordinates = {
+  latitude: number;
+  longitude: number;
+};
+
 const Home = () => {
+  const [userLocation, setUserLocation] = useState<Coordinates>();
+
+  const getUserLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          setUserLocation({ latitude, longitude });
+        },
+        (error) => {
+          console.error("Error getting user location", error);
+        }
+      );
+    } else {
+      console.error("Geolocation is not supported by this browser.");
+    }
+  };
+
+  useEffect(() => {
+    getUserLocation();
+  }, []);
+
   return (
     <div id="app" role="main">
       Weather App!
+      <p>latitude: {userLocation?.latitude}</p>
+      <p>longitude: {userLocation?.longitude}</p>
     </div>
   );
 };

src/setupTests.ts

@@ -1 +1,8 @@
 import "@testing-library/jest-dom";
+
+const mockGeolocation = {
+  getCurrentPosition: jest.fn(),
+  watchPosition: jest.fn(),
+};
+
+(global as any).navigator.geolocation = mockGeolocation;