@safercity/sdk-react 0.0.1

package/README.md

@@ -0,0 +1,196 @@
+# @safercity/sdk-react
+
+React hooks and components for SaferCity SDK with TanStack Query integration.
+
+## Installation
+
+```bash
+npm install @safercity/sdk-react @tanstack/react-query
+# or
+bun add @safercity/sdk-react @tanstack/react-query
+```
+
+## Quick Start
+
+### 1. Wrap Your App with Provider
+
+```tsx
+import { SaferCityProvider } from '@safercity/sdk-react';
+
+function App() {
+  return (
+    <SaferCityProvider
+      baseUrl="https://api.safercity.com"
+      token={userToken}
+      tenantId="tenant-123"
+    >
+      <YourApp />
+    </SaferCityProvider>
+  );
+}
+```
+
+### 2. Use Hooks in Components
+
+```tsx
+import { useUsers, usePanics, useCreatePanic } from '@safercity/sdk-react';
+
+function Dashboard() {
+  const { data: users, isLoading } = useUsers();
+  const { data: panics } = usePanics({ status: 'active' });
+  
+  if (isLoading) return <div>Loading...</div>;
+  
+  return (
+    <div>
+      <h1>Users: {users?.data.users.length}</h1>
+      <h1>Active Panics: {panics?.data.panics.length}</h1>
+    </div>
+  );
+}
+
+function PanicButton({ userId }: { userId: string }) {
+  const createPanic = useCreatePanic();
+  
+  const handlePanic = () => {
+    createPanic.mutate({
+      userId,
+      latitude: -26.2041,
+      longitude: 28.0473,
+    });
+  };
+  
+  return (
+    <button onClick={handlePanic} disabled={createPanic.isPending}>
+      {createPanic.isPending ? 'Creating...' : 'Trigger Panic'}
+    </button>
+  );
+}
+```
+
+## Streaming Hook
+
+```tsx
+import { usePanicStream } from '@safercity/sdk-react';
+
+function PanicTracker({ panicId }: { panicId: string }) {
+  const { data, isConnected, error, events } = usePanicStream(panicId, {
+    keepHistory: true,
+    onEvent: (event) => console.log('Update:', event),
+  });
+  
+  if (error) return <div>Error: {error.message}</div>;
+  if (!isConnected) return <div>Connecting...</div>;
+  
+  return (
+    <div>
+      <p>Latest: {data?.data}</p>
+      <p>Total events: {events.length}</p>
+    </div>
+  );
+}
+```
+
+## Available Hooks
+
+### Health & Auth
+- `useHealthCheck()` - API health status
+- `useWhoAmI()` - Current auth context
+
+### Users
+- `useUsers(filters?)` - List users
+- `useUser(userId)` - Get user by ID
+- `useCreateUser()` - Create user mutation
+- `useUpdateUser()` - Update user mutation
+- `useDeleteUser()` - Delete user mutation
+
+### Panics
+- `usePanics(filters?)` - List panics
+- `usePanic(panicId, query?)` - Get panic by ID
+- `useCreatePanic()` - Create panic mutation
+- `useUpdatePanicLocation()` - Update location mutation
+- `useCancelPanic()` - Cancel panic mutation
+- `usePanicStream(panicId, options?)` - Stream panic updates
+
+### Subscriptions
+- `useSubscriptionTypes()` - List subscription types
+- `useSubscriptions(filters?)` - List subscriptions
+- `useSubscriptionStats()` - Get statistics
+- `useCreateSubscription()` - Create subscription mutation
+
+### Location Safety
+- `useLocationSafety(lat, lng, radius?)` - Check location safety
+
+### Crimes
+- `useCrimes(filters?)` - List crimes
+- `useCrimeCategories()` - Get crime categories
+- `useCrimeTypes()` - Get crime types
+
+## Query Keys
+
+Use query keys for manual cache management:
+
+```tsx
+import { saferCityKeys, useQueryClient } from '@safercity/sdk-react';
+
+function RefreshButton() {
+  const queryClient = useQueryClient();
+  
+  const refresh = () => {
+    // Invalidate all user queries
+    queryClient.invalidateQueries({ queryKey: saferCityKeys.users() });
+    
+    // Invalidate specific user
+    queryClient.invalidateQueries({ queryKey: saferCityKeys.usersDetail('user-123') });
+  };
+  
+  return <button onClick={refresh}>Refresh</button>;
+}
+```
+
+## Custom QueryClient
+
+```tsx
+import { SaferCityProvider } from '@safercity/sdk-react';
+import { QueryClient } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+    },
+  },
+});
+
+function App() {
+  return (
+    <SaferCityProvider
+      baseUrl="https://api.safercity.com"
+      token={token}
+      queryClient={queryClient}
+    >
+      <YourApp />
+    </SaferCityProvider>
+  );
+}
+```
+
+## Access Raw Client
+
+```tsx
+import { useSaferCityClient } from '@safercity/sdk-react';
+
+function CustomComponent() {
+  const client = useSaferCityClient();
+  
+  const customRequest = async () => {
+    // Use raw client for custom requests
+    const response = await client._client.get('/custom-endpoint');
+    return response.data;
+  };
+}
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,505 @@
+'use strict';
+
+var sdk = require('@safercity/sdk');
+var react = require('react');
+var reactQuery = require('@tanstack/react-query');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SaferCityContext = react.createContext(null);
+function SaferCityProvider({
+  children,
+  queryClient: externalQueryClient,
+  ...clientOptions
+}) {
+  const client = react.useMemo(
+    () => sdk.createSaferCityClient(clientOptions),
+    // Only recreate if baseUrl or tenantId changes
+    // Token updates should use client.setToken()
+    [clientOptions.baseUrl, clientOptions.tenantId]
+  );
+  react.useMemo(() => {
+    client.setToken(clientOptions.token);
+  }, [client, clientOptions.token]);
+  const queryClient = react.useMemo(
+    () => externalQueryClient ?? new reactQuery.QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 1e3 * 60,
+          // 1 minute
+          gcTime: 1e3 * 60 * 5,
+          // 5 minutes
+          retry: 1,
+          refetchOnWindowFocus: false
+        },
+        mutations: {
+          retry: 0
+        }
+      }
+    }),
+    [externalQueryClient]
+  );
+  const contextValue = react.useMemo(() => ({ client }), [client]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(SaferCityContext.Provider, { value: contextValue, children }) });
+}
+function useSaferCity() {
+  const context = react.useContext(SaferCityContext);
+  if (!context) {
+    throw new Error(
+      "useSaferCity must be used within a SaferCityProvider. Make sure your component is wrapped with <SaferCityProvider>."
+    );
+  }
+  return context;
+}
+function useSaferCityClient() {
+  return useSaferCity().client;
+}
+var saferCityKeys = {
+  all: ["safercity"],
+  // Health
+  health: () => [...saferCityKeys.all, "health"],
+  // Auth
+  auth: () => [...saferCityKeys.all, "auth"],
+  authWhoami: () => [...saferCityKeys.auth(), "whoami"],
+  // Users
+  users: () => [...saferCityKeys.all, "users"],
+  usersList: (filters) => [...saferCityKeys.users(), "list", filters],
+  usersDetail: (userId) => [...saferCityKeys.users(), "detail", userId],
+  // Panics
+  panics: () => [...saferCityKeys.all, "panics"],
+  panicsList: (filters) => [...saferCityKeys.panics(), "list", filters],
+  panicsDetail: (panicId) => [...saferCityKeys.panics(), "detail", panicId],
+  // Subscriptions
+  subscriptions: () => [...saferCityKeys.all, "subscriptions"],
+  subscriptionsList: (filters) => [...saferCityKeys.subscriptions(), "list", filters],
+  subscriptionsTypes: () => [...saferCityKeys.subscriptions(), "types"],
+  subscriptionsStats: () => [...saferCityKeys.subscriptions(), "stats"],
+  // Location Safety
+  locationSafety: (lat, lng) => [...saferCityKeys.all, "location-safety", lat, lng],
+  // Crimes
+  crimes: () => [...saferCityKeys.all, "crimes"],
+  crimesList: (filters) => [...saferCityKeys.crimes(), "list", filters],
+  crimesCategories: () => [...saferCityKeys.crimes(), "categories"],
+  crimesTypes: () => [...saferCityKeys.crimes(), "types"]
+};
+function useHealthCheck(options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.health(),
+    queryFn: () => client.health.check(),
+    ...options
+  });
+}
+function useWhoAmI(options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.authWhoami(),
+    queryFn: () => client.auth.whoami(),
+    ...options
+  });
+}
+function useUsers(filters, options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.usersList(filters),
+    queryFn: () => client.users.list(filters),
+    ...options
+  });
+}
+function useUser(userId, options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.usersDetail(userId),
+    queryFn: () => client.users.get(userId),
+    enabled: !!userId,
+    ...options
+  });
+}
+function useCreateUser(options) {
+  const client = useSaferCityClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: (data) => client.users.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.users() });
+    },
+    ...options
+  });
+}
+function useUpdateUser(options) {
+  const client = useSaferCityClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: ({ userId, data }) => client.users.update(userId, data),
+    onSuccess: (_, { userId }) => {
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.usersDetail(userId) });
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.usersList() });
+    },
+    ...options
+  });
+}
+function useDeleteUser(options) {
+  const client = useSaferCityClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: (userId) => client.users.delete(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.users() });
+    },
+    ...options
+  });
+}
+function usePanics(filters, options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.panicsList(filters),
+    queryFn: () => client.panics.list(filters),
+    ...options
+  });
+}
+function usePanic(panicId, query, options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.panicsDetail(panicId),
+    queryFn: () => client.panics.get(panicId, query),
+    enabled: !!panicId,
+    ...options
+  });
+}
+function useCreatePanic(options) {
+  const client = useSaferCityClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: (data) => client.panics.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.panics() });
+    },
+    ...options
+  });
+}
+function useUpdatePanicLocation(options) {
+  const client = useSaferCityClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: ({ panicId, data }) => client.panics.updateLocation(panicId, data),
+    onSuccess: (_, { panicId }) => {
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.panicsDetail(panicId) });
+    },
+    ...options
+  });
+}
+function useCancelPanic(options) {
+  const client = useSaferCityClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: ({ panicId, data }) => client.panics.cancel(panicId, data),
+    onSuccess: (_, { panicId }) => {
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.panicsDetail(panicId) });
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.panicsList() });
+    },
+    ...options
+  });
+}
+function useSubscriptionTypes(options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.subscriptionsTypes(),
+    queryFn: () => client.subscriptions.listTypes(),
+    staleTime: 1e3 * 60 * 10,
+    // 10 minutes - types don't change often
+    ...options
+  });
+}
+function useSubscriptions(filters, options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.subscriptionsList(filters),
+    queryFn: () => client.subscriptions.list(filters),
+    ...options
+  });
+}
+function useSubscriptionStats(options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.subscriptionsStats(),
+    queryFn: () => client.subscriptions.stats(),
+    ...options
+  });
+}
+function useCreateSubscription(options) {
+  const client = useSaferCityClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: (data) => client.subscriptions.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: saferCityKeys.subscriptions() });
+    },
+    ...options
+  });
+}
+function useLocationSafety(latitude, longitude, radius, options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.locationSafety(latitude, longitude),
+    queryFn: () => client.locationSafety.check({ latitude, longitude, radius }),
+    enabled: latitude !== void 0 && longitude !== void 0,
+    staleTime: 1e3 * 60 * 5,
+    // 5 minutes
+    ...options
+  });
+}
+function useCrimes(filters, options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.crimesList(filters),
+    queryFn: () => client.crimes.list(filters),
+    ...options
+  });
+}
+function useCrimeCategories(options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.crimesCategories(),
+    queryFn: () => client.crimes.categories(),
+    staleTime: 1e3 * 60 * 30,
+    // 30 minutes - categories rarely change
+    ...options
+  });
+}
+function useCrimeTypes(options) {
+  const client = useSaferCityClient();
+  return reactQuery.useQuery({
+    queryKey: saferCityKeys.crimesTypes(),
+    queryFn: () => client.crimes.types(),
+    staleTime: 1e3 * 60 * 30,
+    // 30 minutes
+    ...options
+  });
+}
+function usePanicStream(panicId, options = {}) {
+  const client = useSaferCityClient();
+  const {
+    autoConnect = true,
+    keepHistory = false,
+    maxHistory = 100,
+    transform,
+    onOpen,
+    onEvent,
+    onError,
+    onClose
+  } = options;
+  const [state, setState] = react.useState({
+    data: null,
+    events: [],
+    isConnected: false,
+    isConnecting: false,
+    error: null
+  });
+  const abortControllerRef = react.useRef(null);
+  const isActiveRef = react.useRef(false);
+  const connect = react.useCallback(async () => {
+    if (!panicId || isActiveRef.current) return;
+    isActiveRef.current = true;
+    abortControllerRef.current = new AbortController();
+    setState((prev) => ({
+      ...prev,
+      isConnecting: true,
+      error: null
+    }));
+    try {
+      const eventSourceOptions = {
+        signal: abortControllerRef.current.signal,
+        onOpen: () => {
+          setState((prev) => ({
+            ...prev,
+            isConnected: true,
+            isConnecting: false
+          }));
+          onOpen?.();
+        },
+        onError: (err) => {
+          setState((prev) => ({
+            ...prev,
+            isConnected: false,
+            isConnecting: false,
+            error: err
+          }));
+          onError?.(err);
+        }
+      };
+      const stream = client.panics.streamUpdates(panicId, eventSourceOptions);
+      for await (const event of stream) {
+        if (!isActiveRef.current) break;
+        const transformedEvent = transform ? transform(event) : event;
+        setState((prev) => {
+          const newEvents = keepHistory ? [...prev.events, transformedEvent].slice(-maxHistory) : [];
+          return {
+            ...prev,
+            data: transformedEvent,
+            events: newEvents
+          };
+        });
+        onEvent?.(transformedEvent);
+      }
+    } catch (err) {
+      if (isActiveRef.current) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState((prev) => ({
+          ...prev,
+          isConnected: false,
+          isConnecting: false,
+          error
+        }));
+        onError?.(error);
+      }
+    } finally {
+      isActiveRef.current = false;
+      setState((prev) => ({
+        ...prev,
+        isConnected: false,
+        isConnecting: false
+      }));
+      onClose?.();
+    }
+  }, [panicId, client, transform, keepHistory, maxHistory, onOpen, onEvent, onError, onClose]);
+  const disconnect = react.useCallback(() => {
+    isActiveRef.current = false;
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+  }, []);
+  react.useEffect(() => {
+    if (autoConnect && panicId) {
+      connect();
+    }
+    return () => {
+      disconnect();
+    };
+  }, [autoConnect, panicId, connect, disconnect]);
+  return {
+    ...state,
+    connect,
+    disconnect
+  };
+}
+function useStream(createStream, options = {}) {
+  const {
+    autoConnect = true,
+    keepHistory = false,
+    maxHistory = 100,
+    transform,
+    onOpen,
+    onEvent,
+    onError,
+    onClose
+  } = options;
+  const [state, setState] = react.useState({
+    data: null,
+    events: [],
+    isConnected: false,
+    isConnecting: false,
+    error: null
+  });
+  const isActiveRef = react.useRef(false);
+  const createStreamRef = react.useRef(createStream);
+  createStreamRef.current = createStream;
+  const connect = react.useCallback(async () => {
+    if (isActiveRef.current) return;
+    isActiveRef.current = true;
+    setState((prev) => ({
+      ...prev,
+      isConnecting: true,
+      error: null
+    }));
+    try {
+      const stream = createStreamRef.current();
+      setState((prev) => ({
+        ...prev,
+        isConnected: true,
+        isConnecting: false
+      }));
+      onOpen?.();
+      for await (const event of stream) {
+        if (!isActiveRef.current) break;
+        const transformedEvent = transform ? transform(event) : event;
+        setState((prev) => {
+          const newEvents = keepHistory ? [...prev.events, transformedEvent].slice(-maxHistory) : [];
+          return {
+            ...prev,
+            data: transformedEvent,
+            events: newEvents
+          };
+        });
+        onEvent?.(transformedEvent);
+      }
+    } catch (err) {
+      if (isActiveRef.current) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState((prev) => ({
+          ...prev,
+          isConnected: false,
+          isConnecting: false,
+          error
+        }));
+        onError?.(error);
+      }
+    } finally {
+      isActiveRef.current = false;
+      setState((prev) => ({
+        ...prev,
+        isConnected: false,
+        isConnecting: false
+      }));
+      onClose?.();
+    }
+  }, [transform, keepHistory, maxHistory, onOpen, onEvent, onError, onClose]);
+  const disconnect = react.useCallback(() => {
+    isActiveRef.current = false;
+  }, []);
+  react.useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+    return () => {
+      disconnect();
+    };
+  }, [autoConnect, connect, disconnect]);
+  return {
+    ...state,
+    connect,
+    disconnect
+  };
+}
+
+exports.SaferCityProvider = SaferCityProvider;
+exports.saferCityKeys = saferCityKeys;
+exports.useCancelPanic = useCancelPanic;
+exports.useCreatePanic = useCreatePanic;
+exports.useCreateSubscription = useCreateSubscription;
+exports.useCreateUser = useCreateUser;
+exports.useCrimeCategories = useCrimeCategories;
+exports.useCrimeTypes = useCrimeTypes;
+exports.useCrimes = useCrimes;
+exports.useDeleteUser = useDeleteUser;
+exports.useHealthCheck = useHealthCheck;
+exports.useLocationSafety = useLocationSafety;
+exports.usePanic = usePanic;
+exports.usePanicStream = usePanicStream;
+exports.usePanics = usePanics;
+exports.useSaferCity = useSaferCity;
+exports.useSaferCityClient = useSaferCityClient;
+exports.useStream = useStream;
+exports.useSubscriptionStats = useSubscriptionStats;
+exports.useSubscriptionTypes = useSubscriptionTypes;
+exports.useSubscriptions = useSubscriptions;
+exports.useUpdatePanicLocation = useUpdatePanicLocation;
+exports.useUpdateUser = useUpdateUser;
+exports.useUser = useUser;
+exports.useUsers = useUsers;
+exports.useWhoAmI = useWhoAmI;
+Object.keys(sdk).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return sdk[k]; }
+  });
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map