@oxyhq/services
Version:
146 lines (145 loc) • 4.35 kB
JavaScript
"use strict";
import { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
import Avatar from "../../components/Avatar.js";
import { Header } from "../../components/index.js";
import { useI18n } from "../../hooks/useI18n.js";
import { useThemeStyles } from "../../hooks/useThemeStyles.js";
import { normalizeTheme } from "../../utils/themeUtils.js";
import { useColorScheme } from "../../hooks/useColorScheme.js";
import { useOxy } from "../../context/OxyContext.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const KarmaLeaderboardScreen = ({
goBack,
theme,
navigate
}) => {
// Use useOxy() hook for OxyContext values
const {
oxyServices
} = useOxy();
const {
t
} = useI18n();
const [leaderboard, setLeaderboard] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const colorScheme = useColorScheme();
const normalizedTheme = normalizeTheme(theme);
const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
// Override primaryColor for Karma screens (purple instead of blue)
const primaryColor = '#d169e5';
useEffect(() => {
setIsLoading(true);
setError(null);
oxyServices.getKarmaLeaderboard().then(data => setLeaderboard(Array.isArray(data) ? data : [])).catch(err => setError(err.message || 'Failed to load leaderboard')).finally(() => setIsLoading(false));
}, [oxyServices]);
return /*#__PURE__*/_jsxs(View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor
}],
children: [/*#__PURE__*/_jsx(Header, {
title: t('karma.leaderboard.title') || 'Karma Leaderboard',
subtitle: t('karma.leaderboard.subtitle') || 'Top contributors in the community',
onBack: goBack,
elevation: "subtle"
}), isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
size: "large",
color: primaryColor,
style: {
marginTop: 40
}
}) : error ? /*#__PURE__*/_jsx(Text, {
style: [styles.error, {
color: '#D32F2F'
}],
children: error
}) : /*#__PURE__*/_jsx(ScrollView, {
contentContainerStyle: styles.listContainer,
children: leaderboard.length === 0 ? /*#__PURE__*/_jsx(Text, {
style: [styles.placeholder, {
color: themeStyles.textColor
}],
children: t('karma.leaderboard.empty') || 'No leaderboard data.'
}) : leaderboard.map((entry, idx) => /*#__PURE__*/_jsxs(TouchableOpacity, {
style: [styles.row, idx < 3 && {
backgroundColor: '#f7eaff'
}],
onPress: () => navigate && navigate('Profile', {
userId: entry.userId,
username: entry.username
}),
activeOpacity: 0.7,
children: [/*#__PURE__*/_jsx(Text, {
style: [styles.rank, {
color: primaryColor
}],
children: idx + 1
}), /*#__PURE__*/_jsx(Avatar, {
name: entry.username || 'User',
size: 40,
style: styles.avatar
}), /*#__PURE__*/_jsx(Text, {
style: [styles.username, {
color: themeStyles.textColor
}],
children: entry.username || entry.userId
}), /*#__PURE__*/_jsx(Text, {
style: [styles.karma, {
color: primaryColor
}],
children: entry.total
})]
}, entry.userId))
})]
});
};
const styles = StyleSheet.create({
container: {
flex: 1
},
listContainer: {
paddingBottom: 40,
paddingTop: 20
},
row: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 12,
paddingHorizontal: 20,
borderBottomWidth: 1,
borderColor: '#eee'
},
rank: {
fontSize: 20,
width: 32,
textAlign: 'center',
fontWeight: 'bold'
},
avatar: {
marginHorizontal: 8
},
username: {
flex: 1,
fontSize: 16,
marginLeft: 8
},
karma: {
fontSize: 18,
fontWeight: 'bold',
marginLeft: 12
},
placeholder: {
fontSize: 16,
color: '#888',
textAlign: 'center',
marginTop: 40
},
error: {
fontSize: 16,
textAlign: 'center',
marginTop: 40
}
});
export default KarmaLeaderboardScreen;
//# sourceMappingURL=KarmaLeaderboardScreen.js.map