@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/about/presentation/hooks/useAboutInfo.ts

@@ -0,0 +1,262 @@
+/**
+ * Hook for managing About information
+ * Provides reactive state management for About data
+ * Optimized for performance and memory safety
+ */
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { AppInfo, AboutConfig } from '../../domain/entities/AppInfo';
+import { AboutRepository } from '../../infrastructure/repositories/AboutRepository';
+
+export interface UseAboutInfoOptions {
+  /** Initial configuration */
+  initialConfig?: AboutConfig;
+  /** Auto-initialize on mount */
+  autoInit?: boolean;
+}
+
+export interface UseAboutInfoReturn {
+  /** Current app info */
+  appInfo: AppInfo | null;
+  /** Loading state */
+  loading: boolean;
+  /** Error state */
+  error: string | null;
+  /** Initialize with config */
+  initialize: (config: AboutConfig) => Promise<void>;
+  /** Update with new config */
+  update: (config: AboutConfig) => Promise<void>;
+  /** Update app info */
+  updateAppInfo: (updates: Partial<AppInfo>) => Promise<void>;
+  /** Refresh current app info */
+  refresh: () => Promise<void>;
+  /** Reset to initial state */
+  reset: () => void;
+}
+
+export const useAboutInfo = (
+  options: UseAboutInfoOptions = {}
+): UseAboutInfoReturn => {
+  const { initialConfig, autoInit } = options;
+  const [repository] = useState(() => new AboutRepository());
+  const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Prevent infinite loops and memory leaks
+  const isInitializedRef = useRef(false);
+  const isMountedRef = useRef(true);
+
+  const initialize = useCallback(async (config: AboutConfig, force = false) => {
+    // Prevent multiple initializations unless forced
+    if (isInitializedRef.current && !force) {
+      return;
+    }
+
+    // Check if component is still mounted
+    if (!isMountedRef.current) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const defaultAppInfo: AppInfo = {
+        name: config.appInfo?.name || '',
+        version: config.appInfo?.version || '1.0.0',
+        description: config.appInfo?.description,
+        developer: config.appInfo?.developer,
+        contactEmail: config.appInfo?.contactEmail,
+        websiteUrl: config.appInfo?.websiteUrl,
+        websiteDisplay: config.appInfo?.websiteDisplay,
+        moreAppsUrl: config.appInfo?.moreAppsUrl,
+      };
+
+      await repository.saveAppInfo(defaultAppInfo);
+
+      // Only update state if component is still mounted
+      if (isMountedRef.current) {
+        setAppInfo(defaultAppInfo);
+        isInitializedRef.current = true;
+      }
+    } catch (err) {
+      if (!isMountedRef.current) {
+        return;
+      }
+
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+    } finally {
+      // Only update loading state if component is still mounted
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [repository]);
+
+  const update = useCallback(async (config: AboutConfig) => {
+    if (!isMountedRef.current) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const updatedAppInfo: AppInfo = {
+        name: config.appInfo?.name || '',
+        version: config.appInfo?.version || '1.0.0',
+        description: config.appInfo?.description,
+        developer: config.appInfo?.developer,
+        contactEmail: config.appInfo?.contactEmail,
+        websiteUrl: config.appInfo?.websiteUrl,
+        websiteDisplay: config.appInfo?.websiteDisplay,
+        moreAppsUrl: config.appInfo?.moreAppsUrl,
+      };
+
+      await repository.saveAppInfo(updatedAppInfo);
+
+      // Only update state if component is still mounted
+      if (isMountedRef.current) {
+        setAppInfo(updatedAppInfo);
+      }
+    } catch (err) {
+      if (!isMountedRef.current) {
+        return;
+      }
+
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+    } finally {
+      // Only update loading state if component is still mounted
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [repository]);
+
+  const updateAppInfo = useCallback(async (updates: Partial<AppInfo>) => {
+    if (!appInfo || !isMountedRef.current) {
+      if (isMountedRef.current) {
+        setError('App info not initialized');
+      }
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const updatedInfo = await repository.updateAppInfo(updates);
+
+      // Only update state if component is still mounted
+      if (isMountedRef.current) {
+        setAppInfo(updatedInfo);
+      }
+    } catch (err) {
+      if (!isMountedRef.current) {
+        return;
+      }
+
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+    } finally {
+      // Only update loading state if component is still mounted
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [repository, appInfo]);
+
+  const refresh = useCallback(async () => {
+    if (!isMountedRef.current || !appInfo) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const refreshedInfo = await repository.getAppInfo();
+
+      // Only update state if component is still mounted
+      if (isMountedRef.current) {
+        setAppInfo(refreshedInfo);
+      }
+    } catch (err) {
+      if (!isMountedRef.current) {
+        return;
+      }
+
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+    } finally {
+      // Only update loading state if component is still mounted
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [repository, appInfo]);
+
+  const reset = useCallback(() => {
+    if (!isMountedRef.current) {
+      return;
+    }
+
+    setAppInfo(null);
+    setError(null);
+    setLoading(false);
+    isInitializedRef.current = false;
+  }, []);
+
+  // Cleanup on unmount to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+
+      // Cleanup repository if it has destroy method
+      if (repository && typeof repository.destroy === 'function') {
+        repository.destroy();
+      }
+    };
+  }, [repository]);
+
+
+
+  // Set initial config when provided (if autoInit is not explicitly false)
+  useEffect(() => {
+    if (initialConfig && autoInit !== false && isMountedRef.current && !isInitializedRef.current) {
+      const defaultAppInfo: AppInfo = {
+        name: initialConfig.appInfo?.name || '',
+        version: initialConfig.appInfo?.version || '1.0.0',
+        description: initialConfig.appInfo?.description,
+        developer: initialConfig.appInfo?.developer,
+        contactEmail: initialConfig.appInfo?.contactEmail,
+        websiteUrl: initialConfig.appInfo?.websiteUrl,
+        websiteDisplay: initialConfig.appInfo?.websiteDisplay,
+        moreAppsUrl: initialConfig.appInfo?.moreAppsUrl,
+      };
+
+      setAppInfo(defaultAppInfo);
+      isInitializedRef.current = true;
+    }
+  }, [initialConfig, autoInit]);
+
+  // Auto-initialize with dependency optimization
+  useEffect(() => {
+    if (autoInit === true && initialConfig && isMountedRef.current) {
+      initialize(initialConfig, true);
+    }
+  }, [autoInit, initialConfig, initialize]);
+
+  return {
+    appInfo,
+    loading,
+    error,
+    initialize,
+    update,
+    updateAppInfo,
+    refresh,
+    reset,
+  };
+};

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -0,0 +1,195 @@
+/**
+ * About Screen Component
+ * Main screen component for displaying app information
+ * Fully configurable and generic
+ * Optimized for performance and memory safety
+ */
+import React, { useMemo, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { AboutHeader } from '../components/AboutHeader';
+import { AboutContent } from '../components/AboutContent';
+import { AboutConfig } from '../../domain/entities/AppInfo';
+
+export interface AboutScreenProps {
+  /** Configuration for the about screen */
+  config: AboutConfig;
+  /** Custom container style */
+  containerStyle?: ViewStyle;
+  /** Custom header style */
+  headerStyle?: ViewStyle;
+  /** Custom title style */
+  titleStyle?: TextStyle;
+  /** Custom version style */
+  versionStyle?: TextStyle;
+  /** Show app header with name and version */
+  showHeader?: boolean;
+  /** Custom header component */
+  headerComponent?: React.ReactNode;
+  /** Custom footer component */
+  footerComponent?: React.ReactNode;
+  /** Test ID for E2E testing */
+  testID?: string;
+}
+
+import { useAboutInfo } from '../hooks/useAboutInfo';
+import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+
+export const AboutScreen: React.FC<AboutScreenProps> = ({
+  config,
+  containerStyle,
+  headerStyle,
+  titleStyle,
+  versionStyle,
+  showHeader = true,
+  headerComponent,
+  footerComponent,
+  testID,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  const colors = tokens.colors;
+
+  const { appInfo, loading, error } = useAboutInfo({
+    autoInit: true,
+    initialConfig: config,
+  });
+
+  // Memoize header rendering to prevent unnecessary re-renders
+  const renderHeader = useCallback(() => {
+    if (headerComponent) {
+      return headerComponent;
+    }
+
+    if (!showHeader || !appInfo) {
+      return null;
+    }
+
+    return (
+      <AboutHeader
+        appInfo={appInfo}
+        containerStyle={headerStyle}
+        titleStyle={titleStyle}
+        versionStyle={versionStyle}
+        versionPrefix={config.texts?.versionPrefix}
+      />
+    );
+  }, [headerComponent, showHeader, appInfo, headerStyle, titleStyle, versionStyle, config.texts?.versionPrefix]);
+
+  // Memoize footer rendering
+  const renderFooter = useCallback(() => {
+    if (!footerComponent) {
+      return null;
+    }
+
+    return (
+      <View style={[styles.footer, { borderTopColor: colors.border }]}>
+        {footerComponent}
+      </View>
+    );
+  }, [footerComponent, colors.border]);
+
+  // Memoize content rendering
+  const renderContent = useCallback(() => {
+    if (!appInfo) {
+      return null;
+    }
+
+    return (
+      <AboutContent
+        appInfo={appInfo}
+        config={config}
+      />
+    );
+  }, [appInfo, config]);
+
+  // Memoize container style to prevent unnecessary re-renders
+  const containerStyles = useMemo(() => {
+    return [
+      styles.container,
+      { backgroundColor: colors.backgroundPrimary },
+      containerStyle
+    ];
+  }, [containerStyle, colors.backgroundPrimary]);
+
+  const texts = config.texts || {};
+
+  if (loading) {
+    return (
+      <View style={containerStyles} testID={testID}>
+        <AtomicText
+          type="bodyMedium"
+          color="textSecondary"
+          style={styles.loadingText}
+        >
+          {texts.loading}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={containerStyles} testID={testID}>
+        <AtomicText
+          type="bodyMedium"
+          color="error"
+          style={styles.errorText}
+        >
+          {texts.errorPrefix} {error}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  if (!appInfo) {
+    return (
+      <View style={containerStyles} testID={testID}>
+        <AtomicText
+          type="bodyMedium"
+          color="textSecondary"
+          style={styles.errorText}
+        >
+          {texts.noInfo}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView
+      style={containerStyles}
+      testID={testID}
+      contentContainerStyle={{ paddingBottom: 32 }}
+    >
+      {renderHeader()}
+      {renderContent()}
+      {renderFooter()}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  footer: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+  },
+  loadingText: {
+    textAlign: 'center',
+    fontSize: 16,
+    marginTop: 20,
+  },
+  errorText: {
+    textAlign: 'center',
+    fontSize: 16,
+    marginTop: 20,
+  },
+});

package/src/domains/about/presentation/screens/__tests__/AboutScreen.simple.test.tsx

@@ -0,0 +1,199 @@
+/**
+ * Simple test for AboutScreen component
+ */
+import React from 'react';
+import { AboutScreen } from '../AboutScreen';
+import { AppInfo, AboutConfig } from '../../domain/entities/AppInfo';
+
+describe('AboutScreen', () => {
+  const mockAppInfo: AppInfo = {
+    name: 'Test App',
+    version: '1.0.0',
+    description: 'Test Description',
+    developer: 'Test Developer',
+    contactEmail: 'test@example.com',
+    websiteUrl: 'https://example.com',
+    websiteDisplay: 'example.com',
+    moreAppsUrl: 'https://apps.example.com',
+    privacyPolicyUrl: 'https://example.com/privacy',
+    termsOfServiceUrl: 'https://example.com/terms',
+  };
+
+  const mockConfig: AboutConfig = {
+    appInfo: mockAppInfo,
+    actions: {
+      onEmailPress: jest.fn(),
+      onWebsitePress: jest.fn(),
+      onPrivacyPress: jest.fn(),
+      onTermsPress: jest.fn(),
+      onMoreAppsPress: jest.fn(),
+    },
+  };
+
+  it('should render without crashing', () => {
+    const element = React.createElement(AboutScreen, { config: mockConfig });
+    expect(element).toBeTruthy();
+  });
+
+  it('should render app info after loading', () => {
+    const element = React.createElement(AboutScreen, { config: mockConfig });
+    expect(element).toBeTruthy();
+    expect(mockConfig.appInfo.name).toBe('Test App');
+  });
+
+  it('should render error state when initialization fails', () => {
+    const invalidConfig = null as unknown;
+    
+    const element = React.createElement(AboutScreen, { config: invalidConfig });
+    expect(element).toBeTruthy();
+  });
+
+  it('should render no app info message when app info is null', () => {
+    const emptyConfig: AboutConfig = {
+      appInfo: null as unknown,
+      actions: {},
+    };
+
+    const element = React.createElement(AboutScreen, { config: emptyConfig });
+    expect(element).toBeTruthy();
+  });
+
+  it('should not render header when showHeader is false', () => {
+    const element = React.createElement(AboutScreen, { config: mockConfig, showHeader: false });
+    expect(element).toBeTruthy();
+  });
+
+  it('should render custom header component when provided', () => {
+    const CustomHeader = () => React.createElement('div', { testID: 'custom-header' }, 'Custom Header');
+    
+    const element = React.createElement(AboutScreen, { 
+      config: mockConfig, 
+      headerComponent: React.createElement(CustomHeader) 
+    });
+    expect(element).toBeTruthy();
+  });
+
+  it('should render custom footer component when provided', () => {
+    const CustomFooter = () => React.createElement('div', { testID: 'custom-footer' }, 'Custom Footer');
+    
+    const element = React.createElement(AboutScreen, { 
+      config: mockConfig, 
+      footerComponent: React.createElement(CustomFooter) 
+    });
+    expect(element).toBeTruthy();
+  });
+
+  it('should apply custom container style', () => {
+    const customStyle = { backgroundColor: 'red' };
+    
+    const element = React.createElement(AboutScreen, { 
+      config: mockConfig, 
+      containerStyle: customStyle, 
+      testID: 'screen' 
+    });
+    expect(element).toBeTruthy();
+  });
+
+  it('should apply custom header style', () => {
+    const customStyle = { backgroundColor: 'blue' };
+    
+    const element = React.createElement(AboutScreen, { 
+      config: mockConfig, 
+      headerStyle: customStyle 
+    });
+    expect(element).toBeTruthy();
+  });
+
+  it('should apply custom title style', () => {
+    const customStyle = { color: 'green' } as React.CSSProperties;
+    
+    const element = React.createElement(AboutScreen, { 
+      config: mockConfig, 
+      titleStyle: customStyle 
+    });
+    expect(element).toBeTruthy();
+  });
+
+  it('should apply custom version style', () => {
+    const customStyle = { color: 'purple' };
+    
+    const element = React.createElement(AboutScreen, { 
+      config: mockConfig, 
+      versionStyle: customStyle 
+    });
+    expect(element).toBeTruthy();
+  });
+
+  it('should handle empty config', () => {
+    const emptyConfig: AboutConfig = {
+      appInfo: {
+        name: '',
+        version: '',
+        description: '',
+        developer: '',
+        contactEmail: '',
+        websiteUrl: '',
+        websiteDisplay: '',
+        moreAppsUrl: '',
+        privacyPolicyUrl: '',
+        termsOfServiceUrl: '',
+      },
+      actions: {},
+    };
+
+    const element = React.createElement(AboutScreen, { config: emptyConfig });
+    expect(element).toBeTruthy();
+  });
+
+  it('should handle config with only required fields', () => {
+    const minimalConfig: AboutConfig = {
+      appInfo: {
+        name: 'Minimal App',
+        version: '1.0.0',
+        description: '',
+        developer: '',
+        contactEmail: '',
+        websiteUrl: '',
+        websiteDisplay: '',
+        moreAppsUrl: '',
+        privacyPolicyUrl: '',
+        termsOfServiceUrl: '',
+      },
+      actions: {},
+    };
+
+    const element = React.createElement(AboutScreen, { config: minimalConfig });
+    expect(element).toBeTruthy();
+    expect(minimalConfig.appInfo.name).toBe('Minimal App');
+  });
+
+  it('should handle special characters in text', () => {
+    const configWithSpecialChars: AboutConfig = {
+      appInfo: {
+        ...mockAppInfo,
+        name: 'App & Special <Chars>',
+        description: 'Description with "quotes" and \'apostrophes\'',
+      },
+      actions: {},
+    };
+
+    const element = React.createElement(AboutScreen, { config: configWithSpecialChars });
+    expect(element).toBeTruthy();
+    expect(configWithSpecialChars.appInfo.name).toBe('App & Special <Chars>');
+  });
+
+  it('should handle very long text', () => {
+    const configWithLongText: AboutConfig = {
+      appInfo: {
+        ...mockAppInfo,
+        name: 'A'.repeat(100),
+        description: 'B'.repeat(500),
+      },
+      actions: {},
+    };
+
+    const element = React.createElement(AboutScreen, { config: configWithLongText });
+    expect(element).toBeTruthy();
+    expect(configWithLongText.appInfo.name.length).toBe(100);
+  });
+});