@oxyhq/services/lib/commonjs/ui/screens/karma/KarmaLeaderboardScreen.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _OxyContext = require("../../context/OxyContext");
var _Avatar = _interopRequireDefault(require("../../components/Avatar"));
var _components = require("../../components");
var _useI18n = require("../../hooks/useI18n");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KarmaLeaderboardScreen = ({
  goBack,
  theme,
  navigate
}) => {
  const {
    oxyServices
  } = (0, _OxyContext.useOxy)();
  const {
    t
  } = (0, _useI18n.useI18n)();
  const [leaderboard, setLeaderboard] = (0, _react.useState)([]);
  const [isLoading, setIsLoading] = (0, _react.useState)(true);
  const [error, setError] = (0, _react.useState)(null);
  const isDarkTheme = theme === 'dark';
  const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
  const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
  const primaryColor = '#d169e5';
  (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.container, {
      backgroundColor
    }],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Header, {
      title: t('karma.leaderboard.title') || 'Karma Leaderboard',
      subtitle: t('karma.leaderboard.subtitle') || 'Top contributors in the community',
      theme: theme,
      onBack: goBack,
      elevation: "subtle"
    }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
      size: "large",
      color: primaryColor,
      style: {
        marginTop: 40
      }
    }) : error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.error, {
        color: '#D32F2F'
      }],
      children: error
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
      contentContainerStyle: styles.listContainer,
      children: leaderboard.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.placeholder, {
          color: textColor
        }],
        children: t('karma.leaderboard.empty') || 'No leaderboard data.'
      }) : leaderboard.map((entry, idx) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
        style: [styles.row, idx < 3 && {
          backgroundColor: '#f7eaff'
        }],
        onPress: () => navigate && navigate('Profile', {
          userId: entry.userId,
          username: entry.username
        }),
        activeOpacity: 0.7,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.rank, {
            color: primaryColor
          }],
          children: idx + 1
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
          name: entry.username || 'User',
          size: 40,
          theme: theme,
          style: styles.avatar
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.username, {
            color: textColor
          }],
          children: entry.username || entry.userId
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.karma, {
            color: primaryColor
          }],
          children: entry.total
        })]
      }, entry.userId))
    })]
  });
};
const styles = _reactNative.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
  }
});
var _default = exports.default = KarmaLeaderboardScreen;
//# sourceMappingURL=KarmaLeaderboardScreen.js.map