@croacroa/react-native-template 2.1.0 → 3.2.0

package/hooks/useChannel.ts

@@ -0,0 +1,111 @@
+/**
+ * @fileoverview Channel subscription hook
+ * Subscribes to a specific WebSocket channel and accumulates messages in state.
+ * @module hooks/useChannel
+ */
+
+import { useEffect, useState, useCallback, useRef } from "react";
+
+import { WebSocketManager } from "@/services/realtime/websocket-manager";
+import type { WebSocketMessage } from "@/services/realtime/types";
+
+/**
+ * Options for the useChannel hook.
+ */
+export interface UseChannelOptions {
+  /** Maximum number of messages to keep in state (default: 500) */
+  maxMessages?: number;
+}
+
+/**
+ * Return type for the useChannel hook.
+ *
+ * @typeParam T - The shape of the message payload
+ */
+export interface UseChannelReturn<T = unknown> {
+  /** All messages received on this channel (oldest first) */
+  messages: WebSocketMessage<T>[];
+  /** The most recently received message, or null if none */
+  lastMessage: WebSocketMessage<T> | null;
+  /** Send a message to this channel */
+  send: (type: string, payload: T) => void;
+}
+
+/**
+ * Hook for subscribing to a WebSocket channel.
+ *
+ * Subscribes on mount, unsubscribes on unmount, and accumulates all received
+ * messages in a state array. Provides a convenience `send` function that
+ * automatically targets the subscribed channel.
+ *
+ * @typeParam T - The shape of the message payload
+ * @param manager - The WebSocketManager instance (from useWebSocket)
+ * @param channel - The channel name to subscribe to
+ * @returns Object with messages array, lastMessage, and channel-scoped send
+ *
+ * @example
+ * ```tsx
+ * function ChatRoom({ roomId }: { roomId: string }) {
+ *   const { manager } = useWebSocket({ url: WS_URL });
+ *   const { messages, lastMessage, send } = useChannel<ChatPayload>(
+ *     manager,
+ *     `chat:${roomId}`
+ *   );
+ *
+ *   const handleSend = (text: string) => {
+ *     send('chat:message', { text, sender: currentUser.id });
+ *   };
+ *
+ *   return (
+ *     <FlatList
+ *       data={messages}
+ *       renderItem={({ item }) => <MessageBubble message={item} />}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useChannel<T = unknown>(
+  manager: WebSocketManager,
+  channel: string,
+  options: UseChannelOptions = {}
+): UseChannelReturn<T> {
+  const { maxMessages = 500 } = options;
+  const [messages, setMessages] = useState<WebSocketMessage<T>[]>([]);
+  const [lastMessage, setLastMessage] = useState<WebSocketMessage<T> | null>(
+    null
+  );
+  const channelRef = useRef(channel);
+  channelRef.current = channel;
+
+  useEffect(() => {
+    // Reset messages when channel changes
+    setMessages([]);
+    setLastMessage(null);
+
+    const unsubscribe = manager.subscribe<T>(channel, (message) => {
+      setMessages((prev) => {
+        const next = [...prev, message];
+        return next.length > maxMessages ? next.slice(-maxMessages) : next;
+      });
+      setLastMessage(message);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [manager, channel]);
+
+  const send = useCallback(
+    (type: string, payload: T) => {
+      manager.send(type, payload, channelRef.current);
+    },
+    [manager]
+  );
+
+  return {
+    messages,
+    lastMessage,
+    send,
+  };
+}

package/hooks/useDeepLinking.ts

@@ -1,256 +1,256 @@
-import { useEffect, useCallback } from "react";
-import * as Linking from "expo-linking";
-import { router } from "expo-router";
-
-// Define your app's deep link routes
-type DeepLinkRoute =
-  | { path: "login"; params?: never }
-  | { path: "register"; params?: never }
-  | { path: "reset-password"; params: { token: string } }
-  | { path: "profile"; params?: { userId?: string } }
-  | { path: "settings"; params?: never }
-  | { path: "post"; params: { postId: string } };
-
-interface ParsedDeepLink {
-  route: DeepLinkRoute | null;
-  rawUrl: string;
-}
-
-/**
- * Parse a deep link URL into a route and params
- */
-function parseDeepLink(url: string): ParsedDeepLink {
-  try {
-    const parsed = Linking.parse(url);
-    const { path, queryParams } = parsed;
-
-    if (!path) {
-      return { route: null, rawUrl: url };
-    }
-
-    // Map URL paths to app routes
-    switch (path) {
-      case "login":
-        return { route: { path: "login" }, rawUrl: url };
-
-      case "register":
-      case "signup":
-        return { route: { path: "register" }, rawUrl: url };
-
-      case "reset-password":
-        if (queryParams?.token && typeof queryParams.token === "string") {
-          return {
-            route: {
-              path: "reset-password",
-              params: { token: queryParams.token },
-            },
-            rawUrl: url,
-          };
-        }
-        return { route: null, rawUrl: url };
-
-      case "profile":
-        return {
-          route: {
-            path: "profile",
-            params: queryParams?.userId
-              ? { userId: String(queryParams.userId) }
-              : undefined,
-          },
-          rawUrl: url,
-        };
-
-      case "settings":
-        return { route: { path: "settings" }, rawUrl: url };
-
-      case "post":
-        if (queryParams?.id && typeof queryParams.id === "string") {
-          return {
-            route: { path: "post", params: { postId: queryParams.id } },
-            rawUrl: url,
-          };
-        }
-        return { route: null, rawUrl: url };
-
-      default: {
-        // Try to handle paths like /post/123
-        const pathParts = path.split("/");
-        if (pathParts[0] === "post" && pathParts[1]) {
-          return {
-            route: { path: "post", params: { postId: pathParts[1] } },
-            rawUrl: url,
-          };
-        }
-        if (pathParts[0] === "profile" && pathParts[1]) {
-          return {
-            route: { path: "profile", params: { userId: pathParts[1] } },
-            rawUrl: url,
-          };
-        }
-        return { route: null, rawUrl: url };
-      }
-    }
-  } catch (error) {
-    console.error("Failed to parse deep link:", error);
-    return { route: null, rawUrl: url };
-  }
-}
-
-/**
- * Navigate to a deep link route
- */
-function navigateToRoute(route: DeepLinkRoute): void {
-  switch (route.path) {
-    case "login":
-      router.replace("/(public)/login");
-      break;
-
-    case "register":
-      router.replace("/(public)/register");
-      break;
-
-    case "reset-password":
-      // Navigate to forgot password with token
-      router.push({
-        pathname: "/(public)/forgot-password",
-        params: { token: route.params.token },
-      });
-      break;
-
-    case "profile":
-      if (route.params?.userId) {
-        // Navigate to specific user profile
-        router.push({
-          pathname: "/(auth)/profile",
-          params: { userId: route.params.userId },
-        });
-      } else {
-        // Navigate to own profile
-        router.push("/(auth)/profile");
-      }
-      break;
-
-    case "settings":
-      router.push("/(auth)/settings");
-      break;
-
-    case "post":
-      // You'll need to create this route
-      router.push({
-        pathname: "/(auth)/post/[id]" as const,
-        params: { id: route.params.postId },
-      } as Parameters<typeof router.push>[0]);
-      break;
-  }
-}
-
-interface UseDeepLinkingOptions {
-  /**
-   * Called when a deep link is received but couldn't be parsed
-   */
-  onUnknownLink?: (url: string) => void;
-
-  /**
-   * Called before navigating to allow custom handling
-   * Return false to prevent default navigation
-   */
-  onBeforeNavigate?: (route: DeepLinkRoute) => boolean | void;
-
-  /**
-   * Whether deep linking is enabled
-   * @default true
-   */
-  enabled?: boolean;
-}
-
-/**
- * Hook to handle deep links in your app
- *
- * @example
- * ```tsx
- * function App() {
- *   useDeepLinking({
- *     onUnknownLink: (url) => console.log('Unknown link:', url),
- *     onBeforeNavigate: (route) => {
- *       // Custom validation before navigating
- *       if (route.path === 'profile' && !isAuthenticated) {
- *         router.push('/login');
- *         return false; // Prevent default navigation
- *       }
- *     },
- *   });
- *
- *   return <App />;
- * }
- * ```
- */
-export function useDeepLinking(options: UseDeepLinkingOptions = {}): void {
-  const { onUnknownLink, onBeforeNavigate, enabled = true } = options;
-
-  const handleDeepLink = useCallback(
-    (event: { url: string }) => {
-      if (!enabled) return;
-
-      const { route, rawUrl } = parseDeepLink(event.url);
-
-      if (!route) {
-        onUnknownLink?.(rawUrl);
-        console.log("Unknown deep link:", rawUrl);
-        return;
-      }
-
-      // Allow custom handling before navigation
-      const shouldNavigate = onBeforeNavigate?.(route);
-      if (shouldNavigate === false) {
-        return;
-      }
-
-      navigateToRoute(route);
-    },
-    [enabled, onUnknownLink, onBeforeNavigate]
-  );
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    // Handle deep links when app is already open
-    const subscription = Linking.addEventListener("url", handleDeepLink);
-
-    // Handle deep link that opened the app
-    Linking.getInitialURL().then((url) => {
-      if (url) {
-        handleDeepLink({ url });
-      }
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, [enabled, handleDeepLink]);
-}
-
-/**
- * Get the app's deep link URL prefix
- */
-export function getDeepLinkPrefix(): string {
-  return Linking.createURL("/");
-}
-
-/**
- * Create a deep link URL for the app
- *
- * @example
- * ```ts
- * const url = createDeepLink('profile', { userId: '123' });
- * // Returns: yourapp://profile?userId=123
- * ```
- */
-export function createDeepLink(
-  path: string,
-  params?: Record<string, string>
-): string {
-  return Linking.createURL(path, { queryParams: params });
-}
-
-export { parseDeepLink, navigateToRoute };
-export type { DeepLinkRoute, ParsedDeepLink };
+import { useEffect, useCallback } from "react";
+import * as Linking from "expo-linking";
+import { router } from "expo-router";
+
+// Define your app's deep link routes
+type DeepLinkRoute =
+  | { path: "login"; params?: never }
+  | { path: "register"; params?: never }
+  | { path: "reset-password"; params: { token: string } }
+  | { path: "profile"; params?: { userId?: string } }
+  | { path: "settings"; params?: never }
+  | { path: "post"; params: { postId: string } };
+
+interface ParsedDeepLink {
+  route: DeepLinkRoute | null;
+  rawUrl: string;
+}
+
+/**
+ * Parse a deep link URL into a route and params
+ */
+function parseDeepLink(url: string): ParsedDeepLink {
+  try {
+    const parsed = Linking.parse(url);
+    const { path, queryParams } = parsed;
+
+    if (!path) {
+      return { route: null, rawUrl: url };
+    }
+
+    // Map URL paths to app routes
+    switch (path) {
+      case "login":
+        return { route: { path: "login" }, rawUrl: url };
+
+      case "register":
+      case "signup":
+        return { route: { path: "register" }, rawUrl: url };
+
+      case "reset-password":
+        if (queryParams?.token && typeof queryParams.token === "string") {
+          return {
+            route: {
+              path: "reset-password",
+              params: { token: queryParams.token },
+            },
+            rawUrl: url,
+          };
+        }
+        return { route: null, rawUrl: url };
+
+      case "profile":
+        return {
+          route: {
+            path: "profile",
+            params: queryParams?.userId
+              ? { userId: String(queryParams.userId) }
+              : undefined,
+          },
+          rawUrl: url,
+        };
+
+      case "settings":
+        return { route: { path: "settings" }, rawUrl: url };
+
+      case "post":
+        if (queryParams?.id && typeof queryParams.id === "string") {
+          return {
+            route: { path: "post", params: { postId: queryParams.id } },
+            rawUrl: url,
+          };
+        }
+        return { route: null, rawUrl: url };
+
+      default: {
+        // Try to handle paths like /post/123
+        const pathParts = path.split("/");
+        if (pathParts[0] === "post" && pathParts[1]) {
+          return {
+            route: { path: "post", params: { postId: pathParts[1] } },
+            rawUrl: url,
+          };
+        }
+        if (pathParts[0] === "profile" && pathParts[1]) {
+          return {
+            route: { path: "profile", params: { userId: pathParts[1] } },
+            rawUrl: url,
+          };
+        }
+        return { route: null, rawUrl: url };
+      }
+    }
+  } catch (error) {
+    console.error("Failed to parse deep link:", error);
+    return { route: null, rawUrl: url };
+  }
+}
+
+/**
+ * Navigate to a deep link route
+ */
+function navigateToRoute(route: DeepLinkRoute): void {
+  switch (route.path) {
+    case "login":
+      router.replace("/(public)/login");
+      break;
+
+    case "register":
+      router.replace("/(public)/register");
+      break;
+
+    case "reset-password":
+      // Navigate to forgot password with token
+      router.push({
+        pathname: "/(public)/forgot-password",
+        params: { token: route.params.token },
+      });
+      break;
+
+    case "profile":
+      if (route.params?.userId) {
+        // Navigate to specific user profile
+        router.push({
+          pathname: "/(auth)/profile",
+          params: { userId: route.params.userId },
+        });
+      } else {
+        // Navigate to own profile
+        router.push("/(auth)/profile");
+      }
+      break;
+
+    case "settings":
+      router.push("/(auth)/settings");
+      break;
+
+    case "post":
+      // You'll need to create this route
+      router.push({
+        pathname: "/(auth)/post/[id]" as const,
+        params: { id: route.params.postId },
+      } as Parameters<typeof router.push>[0]);
+      break;
+  }
+}
+
+interface UseDeepLinkingOptions {
+  /**
+   * Called when a deep link is received but couldn't be parsed
+   */
+  onUnknownLink?: (url: string) => void;
+
+  /**
+   * Called before navigating to allow custom handling
+   * Return false to prevent default navigation
+   */
+  onBeforeNavigate?: (route: DeepLinkRoute) => boolean | void;
+
+  /**
+   * Whether deep linking is enabled
+   * @default true
+   */
+  enabled?: boolean;
+}
+
+/**
+ * Hook to handle deep links in your app
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   useDeepLinking({
+ *     onUnknownLink: (url) => console.log('Unknown link:', url),
+ *     onBeforeNavigate: (route) => {
+ *       // Custom validation before navigating
+ *       if (route.path === 'profile' && !isAuthenticated) {
+ *         router.push('/login');
+ *         return false; // Prevent default navigation
+ *       }
+ *     },
+ *   });
+ *
+ *   return <App />;
+ * }
+ * ```
+ */
+export function useDeepLinking(options: UseDeepLinkingOptions = {}): void {
+  const { onUnknownLink, onBeforeNavigate, enabled = true } = options;
+
+  const handleDeepLink = useCallback(
+    (event: { url: string }) => {
+      if (!enabled) return;
+
+      const { route, rawUrl } = parseDeepLink(event.url);
+
+      if (!route) {
+        onUnknownLink?.(rawUrl);
+        console.log("Unknown deep link:", rawUrl);
+        return;
+      }
+
+      // Allow custom handling before navigation
+      const shouldNavigate = onBeforeNavigate?.(route);
+      if (shouldNavigate === false) {
+        return;
+      }
+
+      navigateToRoute(route);
+    },
+    [enabled, onUnknownLink, onBeforeNavigate]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    // Handle deep links when app is already open
+    const subscription = Linking.addEventListener("url", handleDeepLink);
+
+    // Handle deep link that opened the app
+    Linking.getInitialURL().then((url) => {
+      if (url) {
+        handleDeepLink({ url });
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [enabled, handleDeepLink]);
+}
+
+/**
+ * Get the app's deep link URL prefix
+ */
+export function getDeepLinkPrefix(): string {
+  return Linking.createURL("/");
+}
+
+/**
+ * Create a deep link URL for the app
+ *
+ * @example
+ * ```ts
+ * const url = createDeepLink('profile', { userId: '123' });
+ * // Returns: yourapp://profile?userId=123
+ * ```
+ */
+export function createDeepLink(
+  path: string,
+  params?: Record<string, string>
+): string {
+  return Linking.createURL(path, { queryParams: params });
+}
+
+export { parseDeepLink, navigateToRoute };
+export type { DeepLinkRoute, ParsedDeepLink };

package/hooks/useExperiment.ts

@@ -0,0 +1,36 @@
+/**
+ * @fileoverview React hook for A/B test experiment variants
+ * Returns the assigned variant for a given experiment, backed by the
+ * FeatureFlags facade.
+ * @module hooks/useExperiment
+ */
+
+import { useState, useEffect } from "react";
+import { FeatureFlags } from "@/services/feature-flags/feature-flag-adapter";
+
+/**
+ * Hook that resolves the assigned variant for an A/B test experiment.
+ *
+ * @param experimentId - The experiment identifier
+ * @returns `{ variant, isLoading }`
+ *
+ * @example
+ * ```tsx
+ * const { variant, isLoading } = useExperiment("onboarding_flow");
+ *
+ * if (isLoading) return <Loader />;
+ * if (variant === "variant_a") return <OnboardingA />;
+ * return <OnboardingControl />;
+ * ```
+ */
+export function useExperiment(experimentId: string) {
+  const [variant, setVariant] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setVariant(FeatureFlags.getExperimentVariant(experimentId));
+    setIsLoading(false);
+  }, [experimentId]);
+
+  return { variant, isLoading };
+}