@oxyhq/services 5.17.17 → 5.17.18

package/src/ui/hooks/useSessionSocket.ts

@@ -2,7 +2,6 @@ import { useEffect, useRef } from 'react';
 import io from 'socket.io-client';
 import { toast } from '../../lib/sonner';
 import { logger } from '../../utils/loggerUtils';
-import { tokenService } from '../../core/services/TokenService';
 
 interface UseSessionSocketProps {
   userId: string | null | undefined;
@@ -12,19 +11,15 @@ interface UseSessionSocketProps {
   logout: () => Promise<void>;
   clearSessionState: () => Promise<void>;
   baseURL: string;
-  getAccessToken: () => string | null;
   onRemoteSignOut?: () => void;
   onSessionRemoved?: (sessionId: string) => void;
 }
 
-export function useSessionSocket({ userId, activeSessionId, currentDeviceId, refreshSessions, logout, clearSessionState, baseURL, getAccessToken, onRemoteSignOut, onSessionRemoved }: UseSessionSocketProps) {
+export function useSessionSocket({ userId, activeSessionId, currentDeviceId, refreshSessions, logout, clearSessionState, baseURL, onRemoteSignOut, onSessionRemoved }: UseSessionSocketProps) {
   const socketRef = useRef<any>(null);
   const joinedRoomRef = useRef<string | null>(null);
-  const accessTokenRef = useRef<string | null>(null);
-  const handlersSetupRef = useRef<boolean>(false);
-  const lastRegisteredSocketIdRef = useRef<string | null>(null);
-  const getAccessTokenRef = useRef(getAccessToken);
   
+  // Store callbacks in refs to avoid re-joining when they change
   const refreshSessionsRef = useRef(refreshSessions);
   const logoutRef = useRef(logout);
   const clearSessionStateRef = useRef(clearSessionState);
@@ -33,6 +28,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
   const activeSessionIdRef = useRef(activeSessionId);
   const currentDeviceIdRef = useRef(currentDeviceId);
 
+  // Update refs when callbacks change
   useEffect(() => {
     refreshSessionsRef.current = refreshSessions;
     logoutRef.current = logout;
@@ -41,130 +37,47 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
     onSessionRemovedRef.current = onSessionRemoved;
     activeSessionIdRef.current = activeSessionId;
     currentDeviceIdRef.current = currentDeviceId;
-    getAccessTokenRef.current = getAccessToken;
-  }, [refreshSessions, logout, clearSessionState, onRemoteSignOut, onSessionRemoved, activeSessionId, currentDeviceId, getAccessToken]);
+  }, [refreshSessions, logout, clearSessionState, onRemoteSignOut, onSessionRemoved, activeSessionId, currentDeviceId]);
 
   useEffect(() => {
     if (!userId || !baseURL) {
-      if (socketRef.current) {
-        socketRef.current.disconnect();
-        socketRef.current = null;
-        joinedRoomRef.current = null;
-      }
-      return;
-    }
-    const freshToken = getAccessTokenRef.current();
-    if (!freshToken) {
-      logger.debug('Deferring socket creation - no access token available yet', { component: 'useSessionSocket', userId });
-      if (socketRef.current) {
-        socketRef.current.disconnect();
-        socketRef.current = null;
+      // Clean up if userId or baseURL becomes invalid
+      if (socketRef.current && joinedRoomRef.current) {
+        socketRef.current.emit('leave', { userId: joinedRoomRef.current });
         joinedRoomRef.current = null;
       }
       return;
     }
 
-    const initializeSocket = async () => {
-      try {
-        await tokenService.refreshTokenIfNeeded();
-      } catch (error) {
-        logger.debug('Token refresh failed before socket connection', { component: 'useSessionSocket', userId, error });
-      }
-
-      const accessToken = getAccessTokenRef.current();
-      const tokenChanged = accessTokenRef.current !== accessToken;
-      if (!socketRef.current || tokenChanged) {
-        if (socketRef.current) {
-          socketRef.current.disconnect();
-          socketRef.current = null;
-        }
+    const roomId = `user:${userId}`;
+    
+    // Only create socket if it doesn't exist
+    if (!socketRef.current) {
+      socketRef.current = io(baseURL, {
+        transports: ['websocket'],
+      });
+    }
+    const socket = socketRef.current;
 
-        const socketOptions: any = {
-          transports: ['websocket'],
-        };
-        
-        const freshToken = getAccessTokenRef.current();
-        if (freshToken) {
-          socketOptions.auth = {
-            token: freshToken,
-          };
-        } else {
-          logger.debug('No access token available for socket authentication', { component: 'useSessionSocket', userId });
-          return;
-        }
-        
-        socketRef.current = io(baseURL, socketOptions);
-        accessTokenRef.current = freshToken;
-        joinedRoomRef.current = null;
-        handlersSetupRef.current = false;
+    // Only join if we haven't already joined this room
+    if (joinedRoomRef.current !== roomId) {
+      // Leave previous room if switching users
+      if (joinedRoomRef.current) {
+        socket.emit('leave', { userId: joinedRoomRef.current });
       }
       
-      const socket = socketRef.current;
-      if (!socket) return;
+      socket.emit('join', { userId: roomId });
+      joinedRoomRef.current = roomId;
       
-      if (!joinedRoomRef.current && socket.connected) {
-        joinedRoomRef.current = `user:${userId}`;
-      }
-
-      const handleConnect = () => {
-      const currentToken = getAccessTokenRef.current();
       if (__DEV__) {
-        console.log('[useSessionSocket] Socket connected', {
-          socketId: socket.id,
-          userId,
-          room: `user:${userId}`,
-          hasAuth: !!currentToken,
-        });
-        logger.debug('Socket connected', { component: 'useSessionSocket', socketId: socket.id, userId });
-      }
-      // Server auto-joins room on connection when authenticated
-      // Just track that we're connected
-      if (userId) {
-        joinedRoomRef.current = `user:${userId}`;
+        console.log('Emitting join for room:', roomId);
       }
-    };
-
-    const handleDisconnect = async (reason: string) => {
-      logger.debug('Socket disconnected', { component: 'useSessionSocket', reason, userId });
-      joinedRoomRef.current = null;
-      
-      // If disconnected due to auth error, try to refresh token and reconnect
-      if (reason === 'io server disconnect' || reason.includes('auth') || reason.includes('Authentication')) {
-        try {
-          // Refresh token and reconnect
-          await tokenService.refreshTokenIfNeeded();
-          const freshToken = getAccessTokenRef.current();
-          if (freshToken && socketRef.current) {
-            // Update auth and reconnect
-            socketRef.current.auth = { token: freshToken };
-            socketRef.current.connect();
-          }
-        } catch (error) {
-          logger.debug('Failed to refresh token after disconnect', { component: 'useSessionSocket', userId, error });
-        }
-      }
-    };
-
-    const handleError = (error: Error) => {
-      logger.error('Socket error', error, { component: 'useSessionSocket', userId });
-    };
+    }
 
-    const handleConnectError = async (error: Error) => {
-      logger.debug('Socket connection error', { component: 'useSessionSocket', userId, error: error.message });
-      
-      // If error is due to expired/invalid token, try to refresh and reconnect
-      if (error.message.includes('Authentication') || error.message.includes('expired') || error.message.includes('token')) {
-        try {
-          await tokenService.refreshTokenIfNeeded();
-          const freshToken = getAccessTokenRef.current();
-          if (freshToken && socketRef.current) {
-            // Update auth and reconnect
-            socketRef.current.auth = { token: freshToken };
-            socketRef.current.connect();
-          }
-        } catch (refreshError) {
-          logger.debug('Failed to refresh token after connection error', { component: 'useSessionSocket', userId, error: refreshError });
-        }
+    // Set up event handlers (only once per socket instance)
+    const handleConnect = () => {
+      if (__DEV__) {
+        console.log('Socket connected:', socket.id);
       }
     };
 
@@ -174,13 +87,9 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
       deviceId?: string; 
       sessionIds?: string[] 
     }) => {
-      logger.debug('Received session_update event', {
-        component: 'useSessionSocket',
-        type: data.type,
-        socketId: socket.id,
-        socketConnected: socket.connected,
-        roomId: joinedRoomRef.current,
-      });
+      if (__DEV__) {
+        console.log('Received session_update:', data);
+      }
       
       const currentActiveSessionId = activeSessionIdRef.current;
       const currentDeviceId = currentDeviceIdRef.current;
@@ -304,64 +213,26 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
           try {
             await clearSessionStateRef.current();
           } catch (error) {
-            logger.error('Failed to clear session state after session_update', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
+            if (__DEV__) {
+              console.error('Failed to clear session state after session_update:', error);
+            }
           }
         }
       }
     };
 
-    // Register event handlers (only once per socket instance)
-    // Track by socket.id to prevent duplicate registrations when socket reconnects
-    const currentSocketId = socket.id || 'pending';
-    
-    if (!handlersSetupRef.current || lastRegisteredSocketIdRef.current !== currentSocketId) {
-      // Remove old handlers if socket changed (reconnection)
-      if (socketRef.current && handlersSetupRef.current && lastRegisteredSocketIdRef.current) {
-        try {
-          socketRef.current.off('connect', handleConnect);
-          socketRef.current.off('disconnect', handleDisconnect);
-          socketRef.current.off('error', handleError);
-          socketRef.current.off('session_update', handleSessionUpdate);
-        } catch (error) {
-          // Ignore errors when removing handlers
-        }
-      }
-      
-      // Register handlers on current socket
-      socket.on('connect', handleConnect);
-      socket.on('disconnect', handleDisconnect);
-      socket.on('error', handleError);
-      socket.on('connect_error', handleConnectError);
-      socket.on('session_update', handleSessionUpdate);
-      
-      handlersSetupRef.current = true;
-      lastRegisteredSocketIdRef.current = currentSocketId;
-      
-      logger.debug('Event handlers set up', { component: 'useSessionSocket', socketId: socket.id, userId });
-    }
-
-      if (!socket.connected) {
-        logger.debug('Socket not connected, connecting...', { component: 'useSessionSocket', userId });
-        socket.connect();
-      }
-    };
-
-    initializeSocket();
+    socket.on('connect', handleConnect);
+    socket.on('session_update', handleSessionUpdate);
 
     return () => {
-      // Only clean up handlers if socket still exists and handlers were set up
-      if (socketRef.current && handlersSetupRef.current) {
-        try {
-          socketRef.current.off('connect');
-          socketRef.current.off('disconnect');
-          socketRef.current.off('error');
-          socketRef.current.off('connect_error');
-          socketRef.current.off('session_update');
-        } catch (error) {
-          // Ignore errors when removing handlers
-        }
-        handlersSetupRef.current = false;
+      socket.off('connect', handleConnect);
+      socket.off('session_update', handleSessionUpdate);
+      
+      // Only leave on unmount if we're still in this room
+      if (joinedRoomRef.current === roomId) {
+        socket.emit('leave', { userId: roomId });
+        joinedRoomRef.current = null;
       }
     };
-  }, [userId, baseURL]); // Only depend on userId and baseURL - functions are in refs
-}
+  }, [userId, baseURL]); // Only depend on userId and baseURL - callbacks are in refs
+} 

package/src/ui/hooks/useStorage.ts

@@ -1,104 +1,52 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { ApiError } from '../../models/interfaces';
 import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
-import { extractErrorMessage } from '../utils/errorHandlers';
 
 export interface UseStorageOptions {
   onError?: (error: ApiError) => void;
   logger?: (message: string, error?: unknown) => void;
-  errorCode?: string;
 }
 
 export interface UseStorageResult {
   storage: StorageInterface | null;
   isReady: boolean;
-  error: string | null;
-  refresh: () => Promise<StorageInterface | null>;
-  withStorage: <T>(callback: (storage: StorageInterface) => Promise<T>) => Promise<T | null>;
 }
 
-const DEFAULT_ERROR_CODE = 'STORAGE_INIT_ERROR';
-
 /**
- * React hook that exposes a platform-agnostic storage reference.
- * Handles initialization, error propagation, and lazy re-initialization.
- *
- * @param options - Optional configuration for error reporting and logging
+ * Simple React hook that initializes platform-appropriate storage.
+ * Returns storage instance once ready, or null if initialization failed.
  */
 export const useStorage = ({
   onError,
   logger,
-  errorCode = DEFAULT_ERROR_CODE,
 }: UseStorageOptions = {}): UseStorageResult => {
   const [storage, setStorage] = useState<StorageInterface | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const initializingRef = useRef<Promise<StorageInterface | null> | null>(null);
-
-  const notifyError = useCallback(
-    (err: unknown) => {
-      const message = extractErrorMessage(err, 'Failed to initialize storage');
-      setError(message);
-
-      if (logger) {
-        logger(message, err);
-      }
-
-      onError?.({
-        message,
-        code: errorCode,
-        status: 500,
-      });
-    },
-    [errorCode, logger, onError],
-  );
-
-  const createStorageInstance = useCallback(async (): Promise<StorageInterface | null> => {
-    try {
-      const platformStorage = await createPlatformStorage();
-      setStorage(platformStorage);
-      setError(null);
-      return platformStorage;
-    } catch (err) {
-      notifyError(err);
-      setStorage(null);
-      return null;
-    }
-  }, [notifyError]);
-
-  const refresh = useCallback(async (): Promise<StorageInterface | null> => {
-    if (!initializingRef.current) {
-      initializingRef.current = createStorageInstance().finally(() => {
-        initializingRef.current = null;
-      });
-    }
-
-    return initializingRef.current;
-  }, [createStorageInstance]);
+  const initRef = useRef<Promise<void> | null>(null);
 
   useEffect(() => {
-    refresh().catch((err) => {
-      notifyError(err);
-    });
-  }, [refresh, notifyError]);
-
-  const withStorage = useCallback(
-    async <T,>(callback: (resolvedStorage: StorageInterface) => Promise<T>): Promise<T | null> => {
-      const resolvedStorage = storage ?? (await refresh());
-      if (!resolvedStorage) {
-        return null;
+    // Prevent multiple initializations
+    if (initRef.current) return;
+
+    initRef.current = (async () => {
+      try {
+        const storageInstance = await createPlatformStorage();
+        setStorage(storageInstance);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to initialize storage';
+        if (logger) {
+          logger(message, err);
+        }
+        onError?.({
+          message,
+          code: 'STORAGE_INIT_ERROR',
+          status: 500,
+        });
       }
-      return callback(resolvedStorage);
-    },
-    [refresh, storage],
-  );
+    })();
+  }, [logger, onError]);
 
   return {
     storage,
-    isReady: Boolean(storage) && !error,
-    error,
-    refresh,
-    withStorage,
+    isReady: storage !== null,
   };
 };
-
-

package/src/ui/index.ts

@@ -6,8 +6,8 @@
  */
 import isFrontend from './isFrontend';
 
-// Real UI exports
-let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useOxyAuth, useOxyUser, useOxyKarma, useOxyPayments, useOxyDevices, useOxyNotifications, useOxySocket, useOxyQR, OxyContextProvider, OxyContextState, OxyContextProviderProps, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast;
+// UI exports
+let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast, useStorage;
 
 if (isFrontend) {
   OxyProvider = require('./components/OxyProvider').default;
@@ -20,9 +20,6 @@ if (isFrontend) {
   setupFonts = require('./components/FontLoader').setupFonts;
   OxyIcon = require('./components/icon').OxyIcon;
   useOxy = require('./context/OxyContext').useOxy;
-  OxyContextProvider = require('./context/OxyContext').OxyContextProvider;
-  OxyContextState = require('./context/OxyContext').OxyContextState;
-  OxyContextProviderProps = require('./context/OxyContext').OxyContextProviderProps;
   useFollow = require('./hooks').useFollow;
   ProfileScreen = require('./screens/ProfileScreen').default;
   useAuthStore = require('./stores/authStore').useAuthStore;
@@ -30,10 +27,13 @@ if (isFrontend) {
   fontFamilies = require('./styles/fonts').fontFamilies;
   fontStyles = require('./styles/fonts').fontStyles;
   toast = require('../lib/sonner').toast;
+  useStorage = require('./hooks/useStorage').useStorage;
 } else {
   // Backend: no-op fallbacks
   const noopComponent = () => null;
   const noopHook = () => ({});
+  const noopStorageResult = { storage: null, isReady: false };
+
   OxyProvider = noopComponent;
   OxySignInButton = noopComponent;
   OxyLogo = noopComponent;
@@ -44,9 +44,6 @@ if (isFrontend) {
   setupFonts = () => {};
   OxyIcon = noopComponent;
   useOxy = noopHook;
-  OxyContextProvider = noopComponent;
-  OxyContextState = {};
-  OxyContextProviderProps = {};
   useFollow = noopHook;
   ProfileScreen = noopComponent;
   useAuthStore = noopHook;
@@ -54,6 +51,7 @@ if (isFrontend) {
   fontFamilies = {};
   fontStyles = {};
   toast = () => {};
+  useStorage = () => noopStorageResult;
 }
 
 export {
@@ -67,17 +65,28 @@ export {
   setupFonts,
   OxyIcon,
   useOxy,
-  OxyContextProvider,
-  OxyContextState,
-  OxyContextProviderProps,
   useFollow,
   ProfileScreen,
   useAuthStore,
   useAccountStore,
   fontFamilies,
   fontStyles,
-  toast
+  toast,
+  useStorage,
 };
 
-// Removed convenience re-export of core services from UI context.
+// Re-export core services for convenience in UI context
+export { OxyServices } from '../core';
 export type { User, LoginResponse, ApiError } from '../models/interfaces';
+
+// Export error handler utilities (pure functions, no conditional needed)
+export {
+  handleAuthError,
+  isInvalidSessionError,
+  isTimeoutOrNetworkError,
+  extractErrorMessage,
+} from './utils/errorHandlers';
+export type { HandleAuthErrorOptions } from './utils/errorHandlers';
+
+// Export useStorage hook and types (kept for external consumers)
+export type { UseStorageOptions, UseStorageResult } from './hooks/useStorage';

package/src/ui/navigation/routes.ts

@@ -30,18 +30,22 @@ export type RouteName =
     | 'UserLinks'
     | 'HistoryView'
     | 'SavesCollections'
+    | 'EditProfile' // For backward compatibility, maps to AccountSettings
     | 'KarmaCenter'
     | 'KarmaLeaderboard'
     | 'KarmaRewards'
     | 'KarmaRules'
     | 'AboutKarma'
     | 'KarmaFAQ'
-    | 'EditProfile'
+    // Legacy aliases for backward compatibility
+    | 'SignIn';  // Maps to OxyAuth
 
 // Lazy screen loaders - functions that return screen components on-demand
 // This breaks the require cycle by deferring imports until screens are actually needed
 const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     OxyAuth: () => require('../screens/OxyAuthScreen').default,
+    // Legacy alias - SignIn now maps to OxyAuth
+    SignIn: () => require('../screens/OxyAuthScreen').default,
     AccountOverview: () => require('../screens/AccountOverviewScreen').default,
     AccountSettings: () => require('../screens/AccountSettingsScreen').default,
     AccountCenter: () => require('../screens/AccountCenterScreen').default,
@@ -63,7 +67,7 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     UserLinks: () => require('../screens/UserLinksScreen').default,
     HistoryView: () => require('../screens/HistoryViewScreen').default,
     SavesCollections: () => require('../screens/SavesCollectionsScreen').default,
-    // EditProfile kept for historical references
+    // Backward compatibility - EditProfile maps to AccountSettings
     EditProfile: () => require('../screens/AccountSettingsScreen').default,
     // Karma screens
     KarmaCenter: () => require('../screens/karma/KarmaCenterScreen').default,

package/src/ui/screens/AccountCenterScreen.tsx

@@ -189,7 +189,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('OxyAuth'),
+                                    onPress: () => navigate?.('SignIn'),
                                 },
                             ], [sessions.length, navigate, t, colors])}
 
@@ -208,7 +208,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('OxyAuth'),
+                                    onPress: () => navigate?.('SignIn'),
                                 },
                             ], [navigate, t, colors])}
 

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -143,7 +143,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     React.useEffect(() => {
         if (usersData && usersData.length > 0) {
-            const accountsData = usersData.map(({ sessionId, user: userProfile }) => {
+            const accountsData = usersData.map(({ sessionId, user: userProfile }: { sessionId: string; user: any }) => {
                 if (!userProfile) {
                     return {
                         id: sessionId,