@oxyhq/services 6.9.43 → 6.9.45

package/src/ui/screens/HistoryViewScreen.tsx

@@ -1,12 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import {
-    View,
-    StyleSheet,
-    ScrollView,
-} from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
 import { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -14,20 +9,12 @@ import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 
-interface HistoryItem {
-    id: string;
-    query: string;
-    type: 'search' | 'browse';
-    timestamp: Date;
-}
+interface HistoryItem { id: string; query: string; type: 'search' | 'browse'; timestamp: Date; }
 
-const HistoryViewScreen: React.FC<BaseScreenProps> = ({
-    onClose,
-    theme,
-    goBack,
-}) => {
-    // Use useOxy() hook for OxyContext values
+const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }) => {
     const { user } = useOxy();
     const { t } = useI18n();
     const bloomTheme = useTheme();
@@ -37,227 +24,93 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
     const [history, setHistory] = useState<HistoryItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isDeleting, setIsDeleting] = useState(false);
+    const deleteLast15Prompt = usePromptControl();
+    const clearAllPrompt = usePromptControl();
 
-    // Helper to get storage
     const getStorage = async () => {
-        const isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
-
-        if (isReactNative) {
+        const isRN = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+        if (isRN) {
             try {
-                const asyncStorageModule = await import('@react-native-async-storage/async-storage');
-                const storage = asyncStorageModule.default as unknown as {
-                    getItem: (key: string) => Promise<string | null>;
-                    setItem: (key: string, value: string) => Promise<void>;
-                    removeItem: (key: string) => Promise<void>;
-                };
-                return {
-                    getItem: storage.getItem.bind(storage),
-                    setItem: storage.setItem.bind(storage),
-                    removeItem: storage.removeItem.bind(storage),
-                };
-            } catch (error) {
-                if (__DEV__) {
-                    console.error('AsyncStorage not available:', error);
-                }
-                throw new Error('AsyncStorage is required in React Native environment');
-            }
-        } else {
-            // Use localStorage for web
-            return {
-                getItem: async (key: string) => {
-                    if (typeof window !== 'undefined' && window.localStorage) {
-                        return window.localStorage.getItem(key);
-                    }
-                    return null;
-                },
-                setItem: async (key: string, value: string) => {
-                    if (typeof window !== 'undefined' && window.localStorage) {
-                        window.localStorage.setItem(key, value);
-                    }
-                },
-                removeItem: async (key: string) => {
-                    if (typeof window !== 'undefined' && window.localStorage) {
-                        window.localStorage.removeItem(key);
-                    }
-                }
-            };
+                const mod = await import('@react-native-async-storage/async-storage');
+                const s = mod.default as unknown as { getItem: (k: string) => Promise<string | null>; setItem: (k: string, v: string) => Promise<void>; removeItem: (k: string) => Promise<void> };
+                return { getItem: s.getItem.bind(s), setItem: s.setItem.bind(s), removeItem: s.removeItem.bind(s) };
+            } catch (e) { if (__DEV__) console.error('AsyncStorage not available:', e); throw new Error('AsyncStorage required'); }
         }
+        return {
+            getItem: async (k: string) => typeof window !== 'undefined' && window.localStorage ? window.localStorage.getItem(k) : null,
+            setItem: async (k: string, v: string) => { if (typeof window !== 'undefined' && window.localStorage) window.localStorage.setItem(k, v); },
+            removeItem: async (k: string) => { if (typeof window !== 'undefined' && window.localStorage) window.localStorage.removeItem(k); },
+        };
     };
 
-    // TODO: Integrate with backend API for history storage
-    // Currently uses local storage only. Should fetch from backend API and sync across devices.
-    // Load history from storage
     React.useEffect(() => {
-        const loadHistory = async () => {
+        const load = async () => {
             try {
                 setIsLoading(true);
                 const storage = await getStorage();
-                const historyKey = `history_${user?.id || 'guest'}`;
-                const stored = await storage.getItem(historyKey);
-
-                if (stored) {
-                    const parsed = JSON.parse(stored);
-                    setHistory(parsed.map((item: any) => ({
-                        ...item,
-                        timestamp: new Date(item.timestamp),
-                    })));
-                } else {
-                    setHistory([]);
-                }
-            } catch (error) {
-                setHistory([]);
-            } finally {
-                setIsLoading(false);
-            }
+                const stored = await storage.getItem(`history_${user?.id || 'guest'}`);
+                if (stored) { const parsed = JSON.parse(stored); setHistory(parsed.map((i: HistoryItem) => ({ ...i, timestamp: new Date(i.timestamp) }))); }
+                else setHistory([]);
+            } catch { setHistory([]); } finally { setIsLoading(false); }
         };
-
-        loadHistory();
+        load();
     }, [user?.id]);
 
     const handleDeleteLast15Minutes = useCallback(async () => {
-        confirmAction(
-            t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?',
-            async () => {
-                try {
-                    setIsDeleting(true);
-                    const fifteenMinutesAgo = new Date(Date.now() - 15 * 60 * 1000);
-
-                    const filtered = history.filter(item => item.timestamp < fifteenMinutesAgo);
-                    setHistory(filtered);
-
-                    // Save to storage
-                    const storage = await getStorage();
-                    const historyKey = `history_${user?.id || 'guest'}`;
-                    await storage.setItem(historyKey, JSON.stringify(filtered));
-
-                    toast.success(t('history.deleteLast15Minutes.success') || 'Last 15 minutes deleted');
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Failed to delete history:', error);
-                    }
-                    toast.error(t('history.deleteLast15Minutes.error') || 'Failed to delete history');
-                } finally {
-                    setIsDeleting(false);
-                }
-            }
-        );
+        try {
+            setIsDeleting(true);
+            const cutoff = new Date(Date.now() - 15 * 60 * 1000);
+            const filtered = history.filter(item => item.timestamp < cutoff);
+            setHistory(filtered);
+            const storage = await getStorage();
+            await storage.setItem(`history_${user?.id || 'guest'}`, JSON.stringify(filtered));
+            toast.success(t('history.deleteLast15Minutes.success') || 'Last 15 minutes deleted');
+        } catch (e) { if (__DEV__) console.error('Failed to delete history:', e); toast.error(t('history.deleteLast15Minutes.error') || 'Failed to delete history'); }
+        finally { setIsDeleting(false); }
     }, [history, user?.id, t]);
 
     const handleClearAll = useCallback(async () => {
-        confirmAction(
-            t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.',
-            async () => {
-                try {
-                    setIsDeleting(true);
-                    setHistory([]);
-
-                    // Clear from storage
-                    const storage = await getStorage();
-                    const historyKey = `history_${user?.id || 'guest'}`;
-                    await storage.removeItem(historyKey);
-
-                    toast.success(t('history.clearAll.success') || 'History cleared');
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Failed to clear history:', error);
-                    }
-                    toast.error(t('history.clearAll.error') || 'Failed to clear history');
-                } finally {
-                    setIsDeleting(false);
-                }
-            }
-        );
+        try {
+            setIsDeleting(true); setHistory([]);
+            const storage = await getStorage();
+            await storage.removeItem(`history_${user?.id || 'guest'}`);
+            toast.success(t('history.clearAll.success') || 'History cleared');
+        } catch (e) { if (__DEV__) console.error('Failed to clear history:', e); toast.error(t('history.clearAll.error') || 'Failed to clear history'); }
+        finally { setIsDeleting(false); }
     }, [user?.id, t]);
 
     const formatTime = (date: Date) => {
-        const now = new Date();
-        const diff = now.getTime() - date.getTime();
-        const minutes = Math.floor(diff / 60000);
-        const hours = Math.floor(minutes / 60);
-        const days = Math.floor(hours / 24);
-
-        if (minutes < 1) return t('history.justNow') || 'Just now';
-        if (minutes < 60) return `${minutes} ${t('history.minutesAgo') || 'minutes ago'}`;
-        if (hours < 24) return `${hours} ${t('history.hoursAgo') || 'hours ago'}`;
+        const diff = new Date().getTime() - date.getTime();
+        const min = Math.floor(diff / 60000); const hrs = Math.floor(min / 60); const days = Math.floor(hrs / 24);
+        if (min < 1) return t('history.justNow') || 'Just now';
+        if (min < 60) return `${min} ${t('history.minutesAgo') || 'minutes ago'}`;
+        if (hrs < 24) return `${hrs} ${t('history.hoursAgo') || 'hours ago'}`;
         if (days < 7) return `${days} ${t('history.daysAgo') || 'days ago'}`;
         return date.toLocaleDateString();
     };
 
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-            <Header
-                title={t('history.title') || 'History'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-
+            <Header title={t('history.title') || 'History'} onBack={goBack || onClose} variant="minimal" elevation="subtle" />
             <ScrollView style={styles.content}>
-                {/* Actions */}
                 <Section title={t('history.actions') || 'Actions'} isFirst={true}>
-                    <GroupedSection
-                        items={[
-                            {
-                                id: 'delete-last-15',
-                                icon: 'clock-outline',
-                                iconColor: themeColors.iconStorage,
-                                title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes',
-                                subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries',
-                                onPress: handleDeleteLast15Minutes,
-                                disabled: isDeleting || history.length === 0,
-                            },
-                            {
-                                id: 'clear-all',
-                                icon: 'delete-outline',
-                                iconColor: themeColors.iconSharing,
-                                title: t('history.clearAll.title') || 'Clear All History',
-                                subtitle: t('history.clearAll.subtitle') || 'Remove all history entries',
-                                onPress: handleClearAll,
-                                disabled: isDeleting || history.length === 0,
-                            },
-                        ]}
-
-                    />
+                    <GroupedSection items={[
+                        { id: 'delete-last-15', icon: 'clock-outline', iconColor: themeColors.iconStorage, title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes', subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries', onPress: () => deleteLast15Prompt.open(), disabled: isDeleting || history.length === 0 },
+                        { id: 'clear-all', icon: 'delete-outline', iconColor: themeColors.iconSharing, title: t('history.clearAll.title') || 'Clear All History', subtitle: t('history.clearAll.subtitle') || 'Remove all history entries', onPress: () => clearAllPrompt.open(), disabled: isDeleting || history.length === 0 },
+                    ]} />
                 </Section>
-
-                {/* History List */}
                 <Section title={t('history.recent') || 'Recent History'}>
-                    {isLoading ? (
-                        <LoadingState
-                            message={t('history.loading') || 'Loading history...'}
-                            color={bloomTheme.colors.text}
-                        />
-                    ) : history.length === 0 ? (
-                        <EmptyState
-                            message={t('history.empty') || 'No history yet'}
-                            textColor={bloomTheme.colors.text}
-                        />
-                    ) : (
-                        <GroupedSection
-                            items={history.map((item) => ({
-                                id: item.id,
-                                icon: item.type === 'search' ? 'search' : 'globe',
-                                iconColor: item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo,
-                                title: item.query,
-                                subtitle: formatTime(item.timestamp),
-                            }))}
-                        />
-                    )}
+                    {isLoading ? <LoadingState message={t('history.loading') || 'Loading history...'} color={bloomTheme.colors.text} />
+                     : history.length === 0 ? <EmptyState message={t('history.empty') || 'No history yet'} textColor={bloomTheme.colors.text} />
+                     : <GroupedSection items={history.map(item => ({ id: item.id, icon: item.type === 'search' ? 'search' : 'globe', iconColor: item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo, title: item.query, subtitle: formatTime(item.timestamp) }))} />}
                 </Section>
             </ScrollView>
+            <Prompt.Basic control={deleteLast15Prompt} title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'} description={t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?'} onConfirm={handleDeleteLast15Minutes} confirmButtonCta={t('common.actions.delete') || 'Delete'} confirmButtonColor="negative" />
+            <Prompt.Basic control={clearAllPrompt} title={t('history.clearAll.title') || 'Clear All History'} description={t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.'} onConfirm={handleClearAll} confirmButtonCta={t('history.clearAll.title') || 'Clear All'} confirmButtonColor="negative" />
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flex: 1,
-        padding: 16,
-    },
-});
+const styles = StyleSheet.create({ container: { flex: 1 }, content: { flex: 1, padding: 16 } });
 
 export default React.memo(HistoryViewScreen);
-