@oxyhq/services 5.18.1 → 5.18.3

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -1,43 +1,67 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
     View,
     StyleSheet,
     ScrollView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
 import { Header, Section, LoadingState, SettingRow } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useSettingToggles } from '../hooks/useSettingToggle';
 import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
+import type { User } from '../../models/interfaces';
+
+interface SearchSettings {
+    safeSearch: boolean;
+    searchPersonalization: boolean;
+}
 
 const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     goBack,
 }) => {
-    // Use useOxy() hook for OxyContext values
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
-    const [safeSearch, setSafeSearch] = useState(false);
-    const [searchPersonalization, setSearchPersonalization] = useState(true);
     const [isLoading, setIsLoading] = useState(true);
-    const [isSaving, setIsSaving] = useState(false);
 
-    // Load settings
+    // Use the existing useSettingToggles hook for toggle management
+    const { values: settings, toggle, savingKeys, setValues } = useSettingToggles<SearchSettings>({
+        initialValues: { safeSearch: false, searchPersonalization: true },
+        onSave: async (key, value) => {
+            if (!user?.id || !oxyServices) return;
+
+            const fieldMap: Record<keyof SearchSettings, string> = {
+                safeSearch: 'autoFilter',
+                searchPersonalization: 'dataSharing',
+            };
+
+            await oxyServices.updateProfile({
+                privacySettings: {
+                    [fieldMap[key]]: value,
+                },
+            });
+        },
+        errorMessage: (key) => t(`searchSettings.${key}.error`) || `Failed to update ${key}`,
+    });
+
+    const isSaving = savingKeys.size > 0;
+
+    // Load initial settings
     useEffect(() => {
         const loadSettings = async () => {
             try {
                 setIsLoading(true);
                 if (user?.id && oxyServices) {
-                    // Load from user's privacy settings
-                    const userData = await oxyServices.getCurrentUser();
-                    const privacySettings = (userData as any)?.privacySettings || {};
+                    const userData = await oxyServices.getCurrentUser() as User & { privacySettings?: { autoFilter?: boolean; dataSharing?: boolean } };
+                    const privacySettings = userData?.privacySettings || {};
 
-                    // SafeSearch is typically stored in privacySettings.autoFilter or a separate field
-                    setSafeSearch(privacySettings.autoFilter ?? false);
-                    setSearchPersonalization(privacySettings.dataSharing ?? true);
+                    setValues({
+                        safeSearch: privacySettings.autoFilter ?? false,
+                        searchPersonalization: privacySettings.dataSharing ?? true,
+                    });
                 }
             } catch (error) {
                 console.error('Failed to load search settings:', error);
@@ -47,53 +71,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
         };
 
         loadSettings();
-    }, [user?.id, oxyServices]);
-
-    const handleSafeSearchToggle = useCallback(async (value: boolean) => {
-        try {
-            setIsSaving(true);
-            setSafeSearch(value);
-
-            if (user?.id && oxyServices) {
-                // Update privacy settings
-                await oxyServices.updateProfile({
-                    privacySettings: {
-                        autoFilter: value,
-                    },
-                });
-                toast.success(t('searchSettings.safeSearch.updated') || 'SafeSearch setting updated');
-            }
-        } catch (error) {
-            console.error('Failed to update SafeSearch:', error);
-            toast.error(t('searchSettings.safeSearch.error') || 'Failed to update SafeSearch');
-            setSafeSearch(!value); // Revert on error
-        } finally {
-            setIsSaving(false);
-        }
-    }, [user?.id, oxyServices, t]);
-
-    const handlePersonalizationToggle = useCallback(async (value: boolean) => {
-        try {
-            setIsSaving(true);
-            setSearchPersonalization(value);
-
-            if (user?.id && oxyServices) {
-                // Update privacy settings
-                await oxyServices.updateProfile({
-                    privacySettings: {
-                        dataSharing: value,
-                    },
-                });
-                toast.success(t('searchSettings.personalization.updated') || 'Search personalization updated');
-            }
-        } catch (error) {
-            console.error('Failed to update personalization:', error);
-            toast.error(t('searchSettings.personalization.error') || 'Failed to update personalization');
-            setSearchPersonalization(!value); // Revert on error
-        } finally {
-            setIsSaving(false);
-        }
-    }, [user?.id, oxyServices, t]);
+    }, [user?.id, oxyServices, setValues]);
 
     const normalizedTheme = normalizeTheme(theme);
     const themeStyles = useThemeStyles(normalizedTheme);
@@ -128,8 +106,8 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                     <SettingRow
                         title={t('searchSettings.safeSearch.label') || 'Enable SafeSearch'}
                         description={t('searchSettings.safeSearch.description') || 'Filter out explicit content from search results'}
-                        value={safeSearch}
-                        onValueChange={handleSafeSearchToggle}
+                        value={settings.safeSearch}
+                        onValueChange={() => toggle('safeSearch')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -142,8 +120,8 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                     <SettingRow
                         title={t('searchSettings.personalization.label') || 'Personalized Search'}
                         description={t('searchSettings.personalization.description') || 'Use your activity to improve search results'}
-                        value={searchPersonalization}
-                        onValueChange={handlePersonalizationToggle}
+                        value={settings.searchPersonalization}
+                        onValueChange={() => toggle('searchPersonalization')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}

package/src/ui/server.ts

@@ -0,0 +1,70 @@
+/**
+ * Server-safe UI exports (noops)
+ *
+ * Import from this module for SSR environments where React components
+ * shouldn't be rendered on the server.
+ *
+ * @example
+ * import { OxyProvider, useOxy } from '@oxyhq/services/ui/server';
+ */
+
+// Noop utilities
+const noopComponent = () => null;
+const noopHook = () => ({});
+const noopStorageResult = { storage: null, isReady: false };
+
+// Components (all render null)
+export const OxyProvider = noopComponent;
+export const OxySignInButton = noopComponent;
+export const OxyLogo = noopComponent;
+export const Avatar = noopComponent;
+export const FollowButton = noopComponent;
+export const OxyPayButton = noopComponent;
+export const FontLoader = noopComponent;
+export const setupFonts = () => {};
+export const OxyIcon = noopComponent;
+
+// Context
+export const useOxy = noopHook;
+
+// Hooks (all return empty objects)
+export const useAuth = noopHook;
+export const useFollow = noopHook;
+export const useStorage = () => noopStorageResult;
+
+// Screens (render null)
+export const ProfileScreen = noopComponent;
+
+// Stores (return empty objects)
+export const useAuthStore = noopHook;
+export const useAccountStore = noopHook;
+
+// Styles (empty objects)
+export const fontFamilies = {};
+export const fontStyles = {};
+
+// Toast (noop)
+export const toast = Object.assign(
+    () => {},
+    {
+        success: () => {},
+        error: () => {},
+        info: () => {},
+        warning: () => {},
+        loading: () => {},
+        dismiss: () => {},
+    }
+);
+
+// Core re-exports (these work in both environments)
+export { OxyServices } from '../core';
+export type { User, LoginResponse, ApiError } from '../models/interfaces';
+
+// Error handler utilities (pure functions work everywhere)
+export {
+    handleAuthError,
+    isInvalidSessionError,
+    isTimeoutOrNetworkError,
+    extractErrorMessage,
+} from './utils/errorHandlers';
+export type { HandleAuthErrorOptions } from './utils/errorHandlers';

package/src/ui/utils/iconNames.ts

@@ -0,0 +1,136 @@
+/**
+ * Type-safe icon name utilities
+ *
+ * Provides centralized, typed icon name mappings to eliminate `as any` casts
+ * when using dynamic icon names with @expo/vector-icons.
+ */
+
+/**
+ * Profile field icons (MaterialCommunityIcons)
+ */
+export const PROFILE_FIELD_ICONS = {
+    displayName: 'account-outline',
+    username: 'at',
+    email: 'email-outline',
+    bio: 'text-box-outline',
+    location: 'map-marker-outline',
+    links: 'link-variant',
+    website: 'web',
+    phone: 'phone-outline',
+    birthday: 'cake-variant-outline',
+} as const;
+
+export type ProfileFieldIconKey = keyof typeof PROFILE_FIELD_ICONS;
+
+/**
+ * Get icon name for a profile field
+ */
+export function getProfileFieldIcon(field: string): string {
+    return PROFILE_FIELD_ICONS[field as ProfileFieldIconKey] ?? 'account-outline';
+}
+
+/**
+ * Settings section icons (MaterialCommunityIcons)
+ */
+export const SETTINGS_ICONS = {
+    account: 'account-cog-outline',
+    privacy: 'shield-account-outline',
+    security: 'lock-outline',
+    notifications: 'bell-outline',
+    language: 'translate',
+    appearance: 'palette-outline',
+    storage: 'folder-outline',
+    help: 'help-circle-outline',
+    about: 'information-outline',
+    logout: 'logout',
+} as const;
+
+export type SettingsIconKey = keyof typeof SETTINGS_ICONS;
+
+/**
+ * Get icon name for a settings section
+ */
+export function getSettingsIcon(section: string): string {
+    return SETTINGS_ICONS[section as SettingsIconKey] ?? 'cog-outline';
+}
+
+/**
+ * File type icons (MaterialCommunityIcons)
+ */
+export const FILE_TYPE_ICONS = {
+    image: 'image-outline',
+    video: 'video-outline',
+    audio: 'music-note-outline',
+    document: 'file-document-outline',
+    pdf: 'file-pdf-box',
+    archive: 'folder-zip-outline',
+    code: 'code-tags',
+    spreadsheet: 'file-excel-outline',
+    presentation: 'file-presentation-outline',
+    text: 'file-document-edit-outline',
+    unknown: 'file-outline',
+} as const;
+
+export type FileTypeIconKey = keyof typeof FILE_TYPE_ICONS;
+
+/**
+ * Get icon name for a file type
+ */
+export function getFileTypeIcon(type: string): string {
+    return FILE_TYPE_ICONS[type as FileTypeIconKey] ?? FILE_TYPE_ICONS.unknown;
+}
+
+/**
+ * Action icons (Ionicons)
+ */
+export const ACTION_ICONS = {
+    close: 'close',
+    back: 'chevron-back',
+    forward: 'chevron-forward',
+    add: 'add',
+    remove: 'remove',
+    delete: 'trash-outline',
+    edit: 'pencil-outline',
+    save: 'checkmark',
+    cancel: 'close',
+    search: 'search-outline',
+    filter: 'filter-outline',
+    sort: 'swap-vertical-outline',
+    refresh: 'refresh-outline',
+    share: 'share-outline',
+    copy: 'copy-outline',
+    download: 'download-outline',
+    upload: 'cloud-upload-outline',
+} as const;
+
+export type ActionIconKey = keyof typeof ACTION_ICONS;
+
+/**
+ * Get icon name for an action
+ */
+export function getActionIcon(action: string): string {
+    return ACTION_ICONS[action as ActionIconKey] ?? 'ellipsis-horizontal';
+}
+
+/**
+ * Status icons (Ionicons)
+ */
+export const STATUS_ICONS = {
+    success: 'checkmark-circle',
+    error: 'alert-circle',
+    warning: 'warning',
+    info: 'information-circle',
+    loading: 'hourglass-outline',
+    pending: 'time-outline',
+    online: 'ellipse',
+    offline: 'ellipse-outline',
+} as const;
+
+export type StatusIconKey = keyof typeof STATUS_ICONS;
+
+/**
+ * Get icon name for a status
+ */
+export function getStatusIcon(status: string): string {
+    return STATUS_ICONS[status as StatusIconKey] ?? 'help-circle-outline';
+}

package/src/ui/utils/sessionHelpers.ts

@@ -1,4 +1,3 @@
-import type { OxyServices } from '../../core';
 import type { ClientSession } from '../../models/session';
 
 interface DeviceSession {
@@ -12,6 +11,14 @@ interface DeviceSession {
   isCurrent?: boolean;
 }
 
+/**
+ * Service type for session helpers.
+ * Uses 'any' to work around TypeScript mixin composition type inference issues.
+ * The OxyServices class has these methods but TypeScript can't see them due to the mixin pattern.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type OxyServicesAny = any;
+
 export interface FetchSessionsWithFallbackOptions {
   fallbackDeviceId?: string;
   fallbackUserId?: string;
@@ -68,7 +75,7 @@ export const mapSessionsToClient = (
  * @param options - Optional fallback options
  */
 export const fetchSessionsWithFallback = async (
-  oxyServices: Pick<OxyServices, 'getDeviceSessions' | 'getSessionsBySessionId'>,
+  oxyServices: OxyServicesAny,
   sessionId: string,
   {
     fallbackDeviceId,
@@ -97,7 +104,7 @@ export const fetchSessionsWithFallback = async (
  * @param options - Validation options
  */
 export const validateSessionBatch = async (
-  oxyServices: Pick<OxyServices, 'validateSession'>,
+  oxyServices: OxyServicesAny,
   sessionIds: string[],
   { useHeaderValidation = true, maxConcurrency = 5 }: ValidateSessionBatchOptions = {},
 ): Promise<SessionValidationResult[]> => {

package/src/utils/hookUtils.ts

@@ -4,6 +4,12 @@
 
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 
+// Platform detection for SSR/Node.js/React Native safety
+const isBrowser = typeof window !== 'undefined';
+const hasLocalStorage = isBrowser && typeof window.localStorage !== 'undefined';
+const hasSessionStorage = isBrowser && typeof window.sessionStorage !== 'undefined';
+const hasNavigator = typeof navigator !== 'undefined';
+
 /**
  * Hook for managing async operations with loading, error, and data states
  */
@@ -158,10 +164,11 @@ export function useCounter(initialValue = 0) {
 }
 
 /**
- * Hook for local storage
+ * Hook for local storage (platform-safe)
  */
 export function useLocalStorage<T>(key: string, initialValue: T) {
   const [storedValue, setStoredValue] = useState<T>(() => {
+    if (!hasLocalStorage) return initialValue;
     try {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -175,7 +182,9 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
     try {
       const valueToStore = value instanceof Function ? value(storedValue) : value;
       setStoredValue(valueToStore);
-      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      if (hasLocalStorage) {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
     } catch (error) {
       console.error(`Error setting localStorage key "${key}":`, error);
     }
@@ -185,10 +194,11 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
 }
 
 /**
- * Hook for session storage
+ * Hook for session storage (platform-safe)
  */
 export function useSessionStorage<T>(key: string, initialValue: T) {
   const [storedValue, setStoredValue] = useState<T>(() => {
+    if (!hasSessionStorage) return initialValue;
     try {
       const item = window.sessionStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -202,7 +212,9 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
     try {
       const valueToStore = value instanceof Function ? value(storedValue) : value;
       setStoredValue(valueToStore);
-      window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+      if (hasSessionStorage) {
+        window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+      }
     } catch (error) {
       console.error(`Error setting sessionStorage key "${key}":`, error);
     }
@@ -212,15 +224,17 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
 }
 
 /**
- * Hook for window size
+ * Hook for window size (platform-safe)
  */
 export function useWindowSize() {
   const [windowSize, setWindowSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
+    width: isBrowser ? window.innerWidth : 0,
+    height: isBrowser ? window.innerHeight : 0,
   });
 
   useEffect(() => {
+    if (!isBrowser) return;
+
     const handleResize = () => {
       setWindowSize({
         width: window.innerWidth,
@@ -236,12 +250,14 @@ export function useWindowSize() {
 }
 
 /**
- * Hook for scroll position
+ * Hook for scroll position (platform-safe)
  */
 export function useScrollPosition() {
   const [scrollPosition, setScrollPosition] = useState(0);
 
   useEffect(() => {
+    if (!isBrowser) return;
+
     const handleScroll = () => {
       setScrollPosition(window.pageYOffset);
     };
@@ -254,12 +270,14 @@ export function useScrollPosition() {
 }
 
 /**
- * Hook for online/offline status
+ * Hook for online/offline status (platform-safe)
  */
 export function useOnlineStatus() {
-  const [isOnline, setIsOnline] = useState(navigator.onLine);
+  const [isOnline, setIsOnline] = useState(hasNavigator ? navigator.onLine : true);
 
   useEffect(() => {
+    if (!isBrowser) return;
+
     const handleOnline = () => setIsOnline(true);
     const handleOffline = () => setIsOnline(false);
 
@@ -276,12 +294,14 @@ export function useOnlineStatus() {
 }
 
 /**
- * Hook for media queries
+ * Hook for media queries (platform-safe)
  */
 export function useMediaQuery(query: string): boolean {
   const [matches, setMatches] = useState(false);
 
   useEffect(() => {
+    if (!isBrowser) return;
+
     const media = window.matchMedia(query);
     if (media.matches !== matches) {
       setMatches(media.matches);
@@ -289,7 +309,7 @@ export function useMediaQuery(query: string): boolean {
 
     const listener = () => setMatches(media.matches);
     media.addEventListener('change', listener);
-    
+
     return () => media.removeEventListener('change', listener);
   }, [matches, query]);
 
@@ -297,12 +317,14 @@ export function useMediaQuery(query: string): boolean {
 }
 
 /**
- * Hook for keyboard events
+ * Hook for keyboard events (platform-safe)
  */
 export function useKeyPress(targetKey: string): boolean {
   const [keyPressed, setKeyPressed] = useState(false);
 
   useEffect(() => {
+    if (!isBrowser) return;
+
     const downHandler = ({ key }: KeyboardEvent) => {
       if (key === targetKey) {
         setKeyPressed(true);
@@ -328,10 +350,12 @@ export function useKeyPress(targetKey: string): boolean {
 }
 
 /**
- * Hook for click outside detection
+ * Hook for click outside detection (platform-safe)
  */
 export function useClickOutside(ref: React.RefObject<HTMLElement>, handler: () => void) {
   useEffect(() => {
+    if (!isBrowser) return;
+
     const listener = (event: MouseEvent | TouchEvent) => {
       if (!ref.current || ref.current.contains(event.target as Node)) {
         return;

package/src/utils/requestUtils.ts

@@ -162,12 +162,15 @@ export class RequestQueue {
   }
 }
 
+/** Log level type for SimpleLogger */
+export type LogLevel = 'none' | 'error' | 'warn' | 'info' | 'debug';
+
 /**
  * Simple logger with level support
- * 
+ *
  * Lightweight logger for HTTP clients and utilities.
  * For more advanced logging, use loggerUtils.ts
- * 
+ *
  * @example
  * ```typescript
  * const logger = new SimpleLogger(true, 'debug');
@@ -178,7 +181,7 @@ export class RequestQueue {
  */
 export class SimpleLogger {
   private enabled: boolean;
-  private level: 'none' | 'error' | 'warn' | 'info' | 'debug';
+  private level: LogLevel;
   private prefix: string;
 
   /**
@@ -189,17 +192,17 @@ export class SimpleLogger {
    */
   constructor(
     enabled: boolean = false,
-    level: string = 'error',
+    level: LogLevel = 'error',
     prefix: string = ''
   ) {
     this.enabled = enabled;
-    this.level = level as any;
+    this.level = level;
     this.prefix = prefix;
   }
 
-  private shouldLog(level: string): boolean {
+  private shouldLog(level: LogLevel): boolean {
     if (!this.enabled || this.level === 'none') return false;
-    const levels = ['none', 'error', 'warn', 'info', 'debug'];
+    const levels: LogLevel[] = ['none', 'error', 'warn', 'info', 'debug'];
     return levels.indexOf(level) <= levels.indexOf(this.level);
   }