@oxyhq/services 5.13.1 → 5.13.3

package/src/core/RequestManager.ts

@@ -0,0 +1,240 @@
+/**
+ * Request Manager
+ * 
+ * Handles request-level optimizations: caching, deduplication, queuing, and retry.
+ * Works on top of HttpClient to add performance features.
+ */
+
+import type { AxiosInstance } from 'axios';
+import { TTLCache, registerCacheForCleanup } from '../utils/cache';
+import { RequestDeduplicator, RequestQueue, SimpleLogger } from '../utils/requestUtils';
+import { retryWithBackoff } from '../utils/errorUtils';
+import type { OxyConfig } from '../models/interfaces';
+
+export interface RequestOptions {
+  cache?: boolean;
+  cacheTTL?: number;
+  deduplicate?: boolean;
+  retry?: boolean;
+  maxRetries?: number;
+  timeout?: number;
+  signal?: AbortSignal;
+}
+
+/**
+ * Request Manager
+ * 
+ * Manages request-level optimizations while delegating actual HTTP calls to HttpClient.
+ */
+export class RequestManager {
+  private cache: TTLCache<any>;
+  private deduplicator: RequestDeduplicator;
+  private requestQueue: RequestQueue;
+  private logger: SimpleLogger;
+  private config: OxyConfig;
+  private httpClient: { request: (config: any) => Promise<any> };
+
+  // Performance monitoring
+  private requestMetrics = {
+    totalRequests: 0,
+    successfulRequests: 0,
+    failedRequests: 0,
+    cacheHits: 0,
+    cacheMisses: 0,
+    averageResponseTime: 0,
+  };
+
+  constructor(
+    httpClient: { request: (config: any) => Promise<any> },
+    config: OxyConfig
+  ) {
+    this.httpClient = httpClient;
+    this.config = config;
+
+    // Initialize performance infrastructure
+    this.cache = new TTLCache<any>(config.cacheTTL || 5 * 60 * 1000);
+    registerCacheForCleanup(this.cache);
+    this.deduplicator = new RequestDeduplicator();
+    this.requestQueue = new RequestQueue(
+      config.maxConcurrentRequests || 10,
+      config.requestQueueSize || 100
+    );
+    this.logger = new SimpleLogger(
+      config.enableLogging || false,
+      config.logLevel || 'error',
+      'RequestManager'
+    );
+  }
+
+  /**
+   * Make a request with all performance optimizations
+   */
+  async request<T>(
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
+    url: string,
+    data?: any,
+    options: RequestOptions = {}
+  ): Promise<T> {
+    const {
+      cache = method === 'GET', // Cache GET requests by default
+      cacheTTL,
+      deduplicate = true,
+      retry = this.config.enableRetry !== false,
+      maxRetries = this.config.maxRetries || 3,
+      timeout,
+      signal,
+    } = options;
+
+    // Generate cache key
+    const cacheKey = cache ? `${method}:${url}:${JSON.stringify(data || {})}` : null;
+
+    // Check cache first
+    if (cache && cacheKey) {
+      const cached = this.cache.get(cacheKey) as T | null;
+      if (cached !== null) {
+        this.requestMetrics.cacheHits++;
+        this.logger.debug('Cache hit:', url);
+        return cached;
+      }
+      this.requestMetrics.cacheMisses++;
+    }
+
+    // Request function that uses HttpClient
+    const requestFn = async (): Promise<T> => {
+      const startTime = Date.now();
+      try {
+        const result = await this.httpClient.request({
+          method,
+          url,
+          data: method !== 'GET' ? data : undefined,
+          params: method === 'GET' ? data : undefined,
+          timeout: timeout || this.config.requestTimeout || 5000,
+          signal,
+        });
+
+        const duration = Date.now() - startTime;
+        this.updateMetrics(true, duration);
+        this.config.onRequestEnd?.(url, method, duration, true);
+
+        return result as T;
+      } catch (error: any) {
+        const duration = Date.now() - startTime;
+        this.updateMetrics(false, duration);
+        this.config.onRequestEnd?.(url, method, duration, false);
+        this.config.onRequestError?.(url, method, error);
+        throw error;
+      }
+    };
+
+    // Wrap with retry if enabled
+    const requestWithRetry = retry
+      ? () => this.retryWithBackoff(requestFn, maxRetries)
+      : requestFn;
+
+    // Wrap with deduplication if enabled
+    const dedupeKey = deduplicate ? `${method}:${url}:${JSON.stringify(data || {})}` : null;
+    const finalRequest = dedupeKey
+      ? () => this.deduplicator.deduplicate(dedupeKey, requestWithRetry)
+      : requestWithRetry;
+
+    // Execute request (with queue if needed)
+    const result = await this.requestQueue.enqueue(finalRequest);
+
+    // Cache the result if caching is enabled
+    if (cache && cacheKey && result) {
+      this.cache.set(cacheKey, result, cacheTTL);
+    }
+
+    return result;
+  }
+
+  /**
+   * Exponential backoff retry logic with 4xx error handling
+   */
+  private async retryWithBackoff<T>(
+    fn: () => Promise<T>,
+    maxRetries: number = 3,
+    baseDelay: number = 1000
+  ): Promise<T> {
+    let lastError: any;
+
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        return await fn();
+      } catch (error: any) {
+        lastError = error;
+
+        // Don't retry on 4xx errors (client errors)
+        if (error.response?.status >= 400 && error.response?.status < 500) {
+          throw error;
+        }
+
+        // Don't retry on last attempt
+        if (attempt === maxRetries) {
+          break;
+        }
+
+        // Calculate delay with exponential backoff and jitter
+        const delay = baseDelay * Math.pow(2, attempt) + Math.random() * 1000;
+        this.logger.debug(`Retry attempt ${attempt + 1}/${maxRetries} after ${delay}ms`);
+        await new Promise(resolve => setTimeout(resolve, delay));
+      }
+    }
+
+    throw lastError;
+  }
+
+  /**
+   * Update request metrics
+   */
+  private updateMetrics(success: boolean, duration: number): void {
+    this.requestMetrics.totalRequests++;
+    if (success) {
+      this.requestMetrics.successfulRequests++;
+    } else {
+      this.requestMetrics.failedRequests++;
+    }
+
+    // Update average response time (exponential moving average)
+    const alpha = 0.1; // Smoothing factor
+    this.requestMetrics.averageResponseTime =
+      this.requestMetrics.averageResponseTime * (1 - alpha) + duration * alpha;
+  }
+
+  /**
+   * Get performance metrics
+   */
+  getMetrics(): typeof this.requestMetrics {
+    return { ...this.requestMetrics };
+  }
+
+  /**
+   * Clear request cache
+   */
+  clearCache(): void {
+    this.cache.clear();
+    this.logger.debug('Cache cleared');
+  }
+
+  /**
+   * Clear specific cache entry
+   */
+  clearCacheEntry(key: string): void {
+    this.cache.delete(key);
+  }
+
+  /**
+   * Get cache statistics
+   */
+  getCacheStats(): { size: number; hits: number; misses: number; hitRate: number } {
+    const cacheStats = this.cache.getStats();
+    const total = this.requestMetrics.cacheHits + this.requestMetrics.cacheMisses;
+    return {
+      size: cacheStats.size,
+      hits: this.requestMetrics.cacheHits,
+      misses: this.requestMetrics.cacheMisses,
+      hitRate: total > 0 ? this.requestMetrics.cacheHits / total : 0,
+    };
+  }
+}
+

package/src/core/index.ts

@@ -17,6 +17,16 @@ export * from '../models/session';
 export { DeviceManager } from '../utils/deviceManager';
 export type { DeviceFingerprint, StoredDeviceInfo } from '../utils/deviceManager';
 
+// Export language utilities
+export { 
+  SUPPORTED_LANGUAGES,
+  getLanguageMetadata,
+  getLanguageName,
+  getNativeLanguageName,
+  normalizeLanguageCode
+} from '../utils/languageUtils';
+export type { LanguageMetadata } from '../utils/languageUtils';
+
 // Import for default export
 import { OxyServices } from './OxyServices';
 

package/src/index.ts

@@ -23,6 +23,16 @@ export { default as OxyProvider } from './ui/components/OxyProvider';
 export { DeviceManager } from './utils/deviceManager';
 export type { DeviceFingerprint, StoredDeviceInfo } from './utils/deviceManager';
 
+// Language utilities
+export { 
+  SUPPORTED_LANGUAGES,
+  getLanguageMetadata,
+  getLanguageName,
+  getNativeLanguageName,
+  normalizeLanguageCode
+} from './utils/languageUtils';
+export type { LanguageMetadata } from './utils/languageUtils';
+
 // Type exports
 export type {
   OxyConfig,

package/src/models/interfaces.ts

@@ -1,5 +1,24 @@
 export interface OxyConfig {
   baseURL: string;
+  cloudURL?: string;
+  // Performance & caching options
+  enableCache?: boolean;
+  cacheTTL?: number; // Cache TTL in milliseconds (default: 5 minutes)
+  enableRequestDeduplication?: boolean;
+  enableRetry?: boolean;
+  maxRetries?: number;
+  retryDelay?: number;
+  requestTimeout?: number; // Default timeout in milliseconds (default: 5000)
+  // Rate limiting
+  maxConcurrentRequests?: number;
+  requestQueueSize?: number;
+  // Logging
+  enableLogging?: boolean;
+  logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+  // Performance monitoring
+  onRequestStart?: (url: string, method: string) => void;
+  onRequestEnd?: (url: string, method: string, duration: number, success: boolean) => void;
+  onRequestError?: (url: string, method: string, error: Error) => void;
 }
 
 export interface User {

package/src/models/session.ts

@@ -3,8 +3,8 @@ export interface ClientSession {
   deviceId: string;
   expiresAt: string;
   lastActive: string;
-  // Only userId for identification, do not store username
   userId?: string;
+  isCurrent?: boolean;
 }
 
 export interface StorageKeys {

package/src/ui/components/Avatar.tsx

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { memo, useMemo } from 'react';
 import { View, Text, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle, type TextStyle, ActivityIndicator, Platform } from 'react-native';
 import { useThemeColors } from '../styles';
 import { fontFamilies } from '../styles/fonts';
@@ -16,7 +17,10 @@ export interface AvatarProps {
     text?: string;
 
     /**
-     * Full name to derive the initials from (takes first letter)
+     * Full name to derive the initials from
+     * For single word: takes first letter
+     * For multiple words: takes first letter of first and last word (e.g., "John Doe" -> "JD")
+     * For usernames starting with @: takes first two letters after @
      */
     name?: string;
 
@@ -67,9 +71,68 @@ export interface AvatarProps {
     isLoading?: boolean;
 }
 
+/**
+ * Extracts initials from a name string
+ * - Single word: first letter (e.g., "John" -> "J")
+ * - Multiple words: first letter of first and last word (e.g., "John Doe" -> "JD")
+ * - Username starting with @: first two letters after @ (e.g., "@johndoe" -> "JO")
+ */
+const getInitials = (nameStr: string): string => {
+    if (!nameStr?.trim()) return '';
+
+    const trimmed = nameStr.trim();
+    const parts = trimmed.split(/\s+/).filter(part => part.length > 0);
+
+    if (parts.length === 0) return '';
+
+    if (parts.length === 1) {
+        const firstPart = parts[0];
+        // Handle username format (@username)
+        if (firstPart.length >= 2 && firstPart.startsWith('@')) {
+            return firstPart.substring(1, 3).toUpperCase();
+        }
+        return firstPart.charAt(0).toUpperCase();
+    }
+
+    // Multiple words: first letter of first and last word
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+};
+
+/**
+ * Generates a consistent color from a string (name)
+ * Uses a simple hash function to create a deterministic color
+ */
+const generateColorFromString = (str: string): string => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    // Generate a vibrant color with good contrast
+    const hue = Math.abs(hash) % 360;
+    // Use high saturation and medium lightness for vibrant, readable colors
+    return `hsl(${hue}, 65%, 55%)`;
+};
+
+/**
+ * Calculates font size based on avatar size for letter avatars
+ * Uses a larger ratio for better visibility
+ */
+const calculateFontSize = (size: number): number => {
+    // Use larger font size for letter avatars (50-55% of size)
+    return size <= 40
+        ? Math.floor(size * 0.5)
+        : Math.floor(size * 0.45);
+};
+
 /**
  * Avatar component that displays either an image or text avatar
- * Falls back to displaying the first letter of the name if no image is provided
+ * Falls back to displaying initials (1-2 letters) derived from the name if no image is provided
+ * Supports flexible sizing via the size prop (default: 40px)
+ * 
+ * @example
+ * <Avatar name="John Doe" size={100} theme="light" />
+ * <Avatar uri="https://example.com/avatar.jpg" size={50} />
  */
 const Avatar: React.FC<AvatarProps> = ({
     uri,
@@ -84,58 +147,111 @@ const Avatar: React.FC<AvatarProps> = ({
     textStyle,
     isLoading = false,
 }) => {
-    // Get theme colors
     const colors = useThemeColors(theme);
 
-    // Use the primary color from theme as default background if not specified
-    const bgColor = backgroundColor || colors.primary;
+    const displayText = useMemo(
+        () => text || (name ? getInitials(name) : ''),
+        [text, name]
+    );
+
+    // Generate a color from the name for letter avatars (only when no backgroundColor is provided and no uri)
+    const generatedBgColor = useMemo(
+        () => {
+            if (backgroundColor) return backgroundColor;
+            if (uri) return colors.primary; // Use primary for image avatars as fallback
+            // Generate color from name for letter avatars
+            const nameForColor = name || text || 'User';
+            return generateColorFromString(nameForColor);
+        },
+        [backgroundColor, uri, name, text, colors.primary]
+    );
 
-    // Calculate font size based on avatar size
-    const fontSize = Math.floor(size * 0.4);
+    // Memoize computed values to avoid recalculation on every render
+    const bgColor = useMemo(
+        () => generatedBgColor,
+        [generatedBgColor]
+    );
 
-    // Determine what text to display for fallback
-    const displayText = text ||
-        (name ? name.charAt(0).toUpperCase() : '');
+    const fontSize = useMemo(
+        () => calculateFontSize(size),
+        [size]
+    );
 
-    // Style for container based on size
-    const containerStyle = {
-        width: size,
-        height: size,
-        borderRadius: size / 2, // Make it circular
-    };
+    const containerStyle = useMemo(
+        () => ({
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+        }),
+        [size]
+    );
 
+    const textStyleComputed = useMemo(
+        () => [
+            styles.text,
+            {
+                fontSize,
+                fontFamily: fontFamilies.phuduBold,
+                color: textColor,
+                textAlign: 'center' as const,
+                lineHeight: size, // Match line height to size for perfect vertical centering
+                ...(Platform.OS === 'android' && { includeFontPadding: false }), // Remove extra padding for better centering (Android only)
+            },
+            textStyle,
+        ],
+        [fontSize, textColor, textStyle, size]
+    );
+
+    // Early return for loading state
     if (isLoading) {
         return (
-            <View style={[styles.container, containerStyle, { backgroundColor: colors.inputBackground }, style]}>
-                <ActivityIndicator color={colors.primary} size={size > 50 ? 'large' : 'small'} />
+            <View
+                style={[
+                    styles.container,
+                    containerStyle,
+                    { backgroundColor: colors.inputBackground },
+                    style
+                ]}
+            >
+                <ActivityIndicator
+                    color={colors.primary}
+                    size={size > 50 ? 'large' : 'small'}
+                />
             </View>
         );
     }
 
-    // If an image URL is provided, use Image component with optional background
+    // Image avatar
     if (uri) {
         return (
-            <View style={[styles.container, containerStyle, { backgroundColor: bgColor }, style]}>
+            <View
+                style={[
+                    styles.container,
+                    containerStyle,
+                    { backgroundColor: bgColor },
+                    style
+                ]}
+            >
                 <Image
-                    source={{ uri: uri }}
+                    source={{ uri }}
                     style={[styles.image, containerStyle, imageStyle]}
+                    resizeMode="cover"
                 />
             </View>
         );
     }
 
-    // Otherwise show text avatar
+    // Text avatar with initials
     return (
-        <View style={[styles.container, containerStyle, { backgroundColor: bgColor }, style]}>
-            <Text style={[
-                styles.text,
-                {
-                    fontSize,
-                    fontFamily: fontFamilies.phuduBold,
-                },
-                { color: textColor },
-                textStyle
-            ]}>
+        <View
+            style={[
+                styles.container,
+                containerStyle,
+                { backgroundColor: bgColor },
+                style
+            ]}
+        >
+            <Text style={textStyleComputed}>
                 {displayText}
             </Text>
         </View>
@@ -153,9 +269,9 @@ const styles = StyleSheet.create({
         height: '100%',
     },
     text: {
-        // Font family is applied directly in the component to use the constants
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
     },
 });
 
-export default Avatar;
+// Memoize component to prevent unnecessary re-renders when props haven't changed
+export default memo(Avatar);

package/src/ui/components/FollowButton.tsx

@@ -153,6 +153,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
         },
         default: {
+          shadowColor: '#000',
           shadowOffset: { width: 0, height: 2 },
           shadowOpacity: 0.1,
           shadowRadius: 4,

package/src/ui/components/internal/TextField.tsx

@@ -267,10 +267,12 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
             : surfaceScale(0.62);
 
     // Helper function to clone React elements with updated color
+    // React 19: ref is now a regular prop, accessed via element.props.ref
     const cloneWithColor = (element: React.ReactNode, color: string): React.ReactNode => {
         if (React.isValidElement(element) && element.type) {
-            // Avoid spreading props directly to satisfy TS complaining about non-object spread sources
-            return React.cloneElement(element as any, { color });
+            // React 19: ref is now in props, so we spread all props and override color
+            const elementProps = (element as any).props || {};
+            return React.cloneElement(element as any, { ...elementProps, color });
         }
         return element;
     };
@@ -737,20 +739,19 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
                 {/* Underline for filled/standard variants */}
                 {(variant === 'filled' || variant === 'standard') && (
                     <>
-                        <View style={styles.underline} pointerEvents="none" />
+                        <View style={[styles.underline, { pointerEvents: 'none' }]} />
                         <Animated.View
                             style={[
                                 styles.underlineFocused,
-                                { transform: [{ scaleX: focusAnimation }] }
+                                { transform: [{ scaleX: focusAnimation }], pointerEvents: 'none' }
                             ]}
-                            pointerEvents="none"
                         />
                     </>
                 )}
 
                 {/* Label */}
                 {label && (
-                    <View style={styles.labelContainer} pointerEvents="none">
+                    <View style={[styles.labelContainer, { pointerEvents: 'none' }]}>
                         <Animated.Text
                             style={[
                                 styles.label,