Initial Commit

src/hooks/index.ts

@@ -0,0 +1,4 @@
+// Custom React hooks for the Beach Litter Mapping Platform
+
+export { default as useGeolocation } from './useGeolocation';
+export { useAuth } from './useAuth';

src/hooks/useAuth.ts

@@ -0,0 +1,20 @@
+import { useUser, useAuth as useClerkAuth } from '@clerk/clerk-react';
+
+/**
+ * Custom hook for authentication state and user data
+ * Wraps Clerk's useAuth and useUser hooks for easier access
+ */
+export function useAuth() {
+  const { isLoaded: authLoaded, isSignedIn, userId } = useClerkAuth();
+  const { user, isLoaded: userLoaded } = useUser();
+
+  const isLoaded = authLoaded && userLoaded;
+
+  return {
+    isLoaded,
+    isSignedIn,
+    userId,
+    user,
+    isAuthenticated: isSignedIn && !!user,
+  };
+}

src/hooks/useGeolocation.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react';
+import type { Coordinates } from '@/types';
+
+interface GeolocationState {
+  coordinates: Coordinates | null;
+  error: string | null;
+  loading: boolean;
+}
+
+/**
+ * Custom hook to get user's current geolocation
+ */
+export default function useGeolocation() {
+  const [state, setState] = useState<GeolocationState>({
+    coordinates: null,
+    error: null,
+    loading: false,
+  });
+
+  const getCurrentPosition = () => {
+    if (!navigator.geolocation) {
+      setState({
+        coordinates: null,
+        error: 'Geolocation is not supported by your browser',
+        loading: false,
+      });
+      return;
+    }
+
+    setState(prev => ({ ...prev, loading: true, error: null }));
+
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setState({
+          coordinates: {
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+          },
+          error: null,
+          loading: false,
+        });
+      },
+      (error) => {
+        setState({
+          coordinates: null,
+          error: error.message,
+          loading: false,
+        });
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 10000,
+        maximumAge: 0,
+      }
+    );
+  };
+
+  return {
+    ...state,
+    getCurrentPosition,
+  };
+}