@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
200 lines (198 loc) • 6.34 kB
JavaScript
"use strict";
import React, { useState, useMemo, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
import { useOxy } from '../context/OxyContext';
import { toast } from '../../lib/sonner';
import { Header, Section, GroupedSection } from '../components';
import { useI18n } from '../hooks/useI18n';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SavesCollectionsScreen = ({
onClose,
theme,
goBack
}) => {
const {
oxyServices,
user
} = useOxy();
const {
t
} = useI18n();
const [savedItems, setSavedItems] = useState([]);
const [collections, setCollections] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [activeTab, setActiveTab] = useState('saves');
// Load saved items and collections
useEffect(() => {
const loadData = async () => {
try {
setIsLoading(true);
if (user?.id && oxyServices) {
setSavedItems([]);
setCollections([]);
}
} catch (error) {
toast.error(t('saves.loadError') || 'Failed to load saved items');
} finally {
setIsLoading(false);
}
};
loadData();
}, [user?.id, oxyServices, t]);
const themeStyles = useMemo(() => {
const isDarkTheme = theme === 'dark';
return {
textColor: isDarkTheme ? '#FFFFFF' : '#000000',
backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
tabActiveColor: '#007AFF',
tabInactiveColor: isDarkTheme ? '#888888' : '#666666'
};
}, [theme]);
const formatDate = date => {
return date.toLocaleDateString();
};
return /*#__PURE__*/_jsxs(View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor
}],
children: [/*#__PURE__*/_jsx(Header, {
title: t('saves.title') || 'Saves & Collections',
theme: theme,
onBack: goBack || onClose,
variant: "minimal",
elevation: "subtle"
}), /*#__PURE__*/_jsxs(View, {
style: [styles.tabs, {
borderBottomColor: themeStyles.borderColor
}],
children: [/*#__PURE__*/_jsx(TouchableOpacity, {
style: [styles.tab, activeTab === 'saves' && {
borderBottomColor: themeStyles.tabActiveColor
}],
onPress: () => setActiveTab('saves'),
children: /*#__PURE__*/_jsx(Text, {
style: [styles.tabText, {
color: activeTab === 'saves' ? themeStyles.tabActiveColor : themeStyles.tabInactiveColor,
fontWeight: activeTab === 'saves' ? '600' : '400'
}],
children: t('saves.tabs.saves') || 'Saves'
})
}), /*#__PURE__*/_jsx(TouchableOpacity, {
style: [styles.tab, activeTab === 'collections' && {
borderBottomColor: themeStyles.tabActiveColor
}],
onPress: () => setActiveTab('collections'),
children: /*#__PURE__*/_jsx(Text, {
style: [styles.tabText, {
color: activeTab === 'collections' ? themeStyles.tabActiveColor : themeStyles.tabInactiveColor,
fontWeight: activeTab === 'collections' ? '600' : '400'
}],
children: t('saves.tabs.collections') || 'Collections'
})
})]
}), /*#__PURE__*/_jsx(ScrollView, {
style: styles.content,
children: isLoading ? /*#__PURE__*/_jsxs(View, {
style: styles.loadingContainer,
children: [/*#__PURE__*/_jsx(ActivityIndicator, {
size: "large",
color: themeStyles.textColor
}), /*#__PURE__*/_jsx(Text, {
style: [styles.loadingText, {
color: themeStyles.textColor
}],
children: t('saves.loading') || 'Loading...'
})]
}) : activeTab === 'saves' ? savedItems.length === 0 ? /*#__PURE__*/_jsx(View, {
style: styles.emptyContainer,
children: /*#__PURE__*/_jsx(Text, {
style: [styles.emptyText, {
color: themeStyles.textColor
}],
children: t('saves.empty') || 'No saved items yet'
})
}) : /*#__PURE__*/_jsx(Section, {
title: t('saves.savedItems') || 'Saved Items',
theme: theme,
isFirst: true,
children: /*#__PURE__*/_jsx(GroupedSection, {
items: savedItems.map(item => ({
id: item.id,
icon: item.type === 'post' ? 'document-text' : 'folder',
iconColor: item.type === 'post' ? '#007AFF' : '#FF9500',
title: item.title,
subtitle: formatDate(item.savedAt)
})),
theme: theme
})
}) : collections.length === 0 ? /*#__PURE__*/_jsx(View, {
style: styles.emptyContainer,
children: /*#__PURE__*/_jsx(Text, {
style: [styles.emptyText, {
color: themeStyles.textColor
}],
children: t('saves.noCollections') || 'No collections yet'
})
}) : /*#__PURE__*/_jsx(Section, {
title: t('saves.collections') || 'Collections',
theme: theme,
isFirst: true,
children: /*#__PURE__*/_jsx(GroupedSection, {
items: collections.map(collection => ({
id: collection.id,
icon: 'folder',
iconColor: '#FF9500',
title: collection.name,
subtitle: `${collection.itemCount || 0} items`
})),
theme: theme
})
})
})]
});
};
const styles = StyleSheet.create({
container: {
flex: 1
},
tabs: {
flexDirection: 'row',
borderBottomWidth: 1
},
tab: {
flex: 1,
paddingVertical: 16,
alignItems: 'center',
borderBottomWidth: 2,
borderBottomColor: 'transparent'
},
tabText: {
fontSize: 16
},
content: {
flex: 1,
padding: 16
},
loadingContainer: {
padding: 40,
alignItems: 'center',
justifyContent: 'center'
},
loadingText: {
marginTop: 12,
fontSize: 16
},
emptyContainer: {
padding: 40,
alignItems: 'center',
justifyContent: 'center'
},
emptyText: {
fontSize: 16,
textAlign: 'center'
}
});
export default /*#__PURE__*/React.memo(SavesCollectionsScreen);
//# sourceMappingURL=SavesCollectionsScreen.js.map