[WIP] - Feature/user location

package.json

@@ -41,6 +41,7 @@
     "prettier": "2.5.0",
     "tailwindcss": "2.2.19",
     "typescript": "4.5.2",
+    "typescript-plugin-css-modules": "^3.4.0",
     "vite": "2.6.14",
     "vite-plugin-eslint": "1.3.0",
     "vite-plugin-svgr": "0.6.0",

src/components/IconUserLocation/IconUserLocation.module.css

@@ -0,0 +1,19 @@
+.icon {
+  ---pulse-rgb: 59, 130, 246;
+  ---pulse-opacity: 0.7;
+  @apply w-4 h-4 rounded-full bg-blue-500 border-2 border-white;
+  box-shadow: 0 0 0 rgba(var(---pulse-rgb), var(---pulse-opacity));
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(---pulse-rgb), var(---pulse-opacity));
+  }
+  70% {
+    box-shadow: 0 0 0 0.625rem rgba(var(---pulse-rgb), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(---pulse-rgb), 0);
+  }
+}

src/components/IconUserLocation/IconUserLocation.tsx

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import clsx from "clsx";
+import css from "./IconUserLocation.module.css";
+
+type UserLocationMarkerProps = Omit<HTMLAttributes<HTMLDivElement>, "children">;
+
+export const IconUserLocation = ({
+  className,
+  ...rest
+}: UserLocationMarkerProps): JSX.Element => (
+  <div className={clsx(css.icon, className)} {...rest} />
+);

src/components/MarkerUserLocation.tsx

@@ -0,0 +1,24 @@
+import { divIcon } from "leaflet";
+import { Marker } from "react-leaflet";
+import { renderToStaticMarkup } from "react-dom/server";
+import { useGeoLocation } from "hooks/useGeoLocation";
+import { IconUserLocation } from "components/IconUserLocation/IconUserLocation";
+
+export const MarkerUserLocation = (): JSX.Element | null => {
+  const userLocation = useGeoLocation();
+  console.log(userLocation);
+  if (!userLocation.coords) return null;
+
+  const { latitude, longitude } = userLocation.coords;
+
+  return (
+    <Marker
+      icon={divIcon({
+        html: renderToStaticMarkup(<IconUserLocation />),
+        iconSize: [16, 16],
+        className: "", // disable default styles
+      })}
+      position={[latitude, longitude]}
+    />
+  );
+};

src/hooks/useGeoLocation.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+type Coords = {
+  latitude: number;
+  longitude: number;
+};
+
+type UseGeoLocationReturn = {
+  coords?: Coords;
+  error?: string;
+};
+
+export const useGeoLocation = (): UseGeoLocationReturn => {
+  const [position, setPosition] = useState<Coords>();
+  const [error, setError] = useState<string>();
+
+  const onChange = ({ coords }: { coords: Coords }) => {
+    setPosition({
+      latitude: coords.latitude,
+      longitude: coords.longitude,
+    });
+  };
+
+  const onError = (error: GeolocationPositionError) => setError(error.message);
+
+  useEffect(() => {
+    const geo = navigator.geolocation;
+    if (!geo) return setError("Geolocation is not supported");
+
+    const watcher = geo.watchPosition(onChange, onError);
+
+    // clean-up
+    return () => geo.clearWatch(watcher);
+  }, []);
+
+  return { coords: position, error };
+};

tsconfig.json

@@ -3,6 +3,11 @@
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["vite/client", "vite-plugin-svgr/client", "node", "jest"],
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ],
     "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": false,
@@ -15,7 +20,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "baseUrl": "src",
+    "baseUrl": "src"
   },
-  "include": ["./src"],
+  "include": ["./src"]
 }