@selfcommunity/react-ui 1.2.14-alpha.0 → 1.2.14-alpha.2

package/lib/cjs/components/LeaderboardWidget/LeaderboardWidget.d.ts

@@ -34,7 +34,8 @@ export interface LeaderboardWidgetProps extends WidgetProps {
  *
  *
  * This component renders a widget showing the top 3 users of the leaderboard for the given period (podium) and, optionally, the general ranking list.
- * Leaderboard entries are provided via the `entries` prop; this component does not fetch any data on its own.
+ * Leaderboard entries can be provided via the `entries` prop; if `mode` is `full` and no `entries` are provided, the component fetches the general
+ * ranking on its own.
  * The widget is hidden if the leaderboard feature is disabled or no podium data is available.
 
  #### Import

package/lib/cjs/components/LeaderboardWidget/LeaderboardWidget.js

@@ -11,8 +11,12 @@ const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
 const crown_1 = tslib_1.__importDefault(require("../../assets/leaderboard/crown"));
 const react_core_1 = require("@selfcommunity/react-core");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const RANKING_LIMIT = 5;
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     podiumHeader: `${constants_1.PREFIX}-podium-header`,
@@ -45,7 +49,8 @@ const Root = (0, material_1.styled)(Widget_1.default, {
  *
  *
  * This component renders a widget showing the top 3 users of the leaderboard for the given period (podium) and, optionally, the general ranking list.
- * Leaderboard entries are provided via the `entries` prop; this component does not fetch any data on its own.
+ * Leaderboard entries can be provided via the `entries` prop; if `mode` is `full` and no `entries` are provided, the component fetches the general
+ * ranking on its own.
  * The widget is hidden if the leaderboard feature is disabled or no podium data is available.
 
  #### Import
@@ -92,11 +97,37 @@ function LeaderboardWidget(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, mode = 'full', period = 'month', entries = [], isLoading = true, onSeeMoreClick } = props, rest = tslib_1.__rest(props, ["className", "mode", "period", "entries", "isLoading", "onSeeMoreClick"]);
+    const { className, mode = 'full', period = 'month', entries: entriesProp, isLoading: isLoadingProp = true, onSeeMoreClick } = props, rest = tslib_1.__rest(props, ["className", "mode", "period", "entries", "isLoading", "onSeeMoreClick"]);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     // PREFERENCES
     const leaderboardsEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_LEADERBOARDS_ENABLED);
+    // Self-fetches the leaderboard data when running in `full` mode and no entries are provided by the parent
+    const shouldFetch = mode === 'full' && !entriesProp;
+    const [fetchedEntries, setFetchedEntries] = (0, react_1.useState)([]);
+    const [isFetching, setIsFetching] = (0, react_1.useState)(shouldFetch);
+    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    (0, react_1.useEffect)(() => {
+        if (!shouldFetch) {
+            return;
+        }
+        setIsFetching(true);
+        api_services_1.ScoreService.getLeaderboards({ limit: RANKING_LIMIT })
+            .then((data) => {
+            if (isMountedRef.current) {
+                setFetchedEntries(data.results);
+                setIsFetching(false);
+            }
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            if (isMountedRef.current) {
+                setIsFetching(false);
+            }
+        });
+    }, [shouldFetch, period]);
+    const entries = shouldFetch ? fetchedEntries : entriesProp || [];
+    const isLoading = shouldFetch ? isFetching : isLoadingProp;
     /**
      * Renders nothing if the leaderboard feature is disabled
      */
@@ -116,8 +147,8 @@ function LeaderboardWidget(inProps) {
     if (!podium.length) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.podiumHeader }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.podiumTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.podium.title", defaultMessage: "ui.leaderboardWidget.podium.title", values: { period } }) })) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "center", alignItems: "flex-end", className: classes.podium }, { children: podium.map((entry) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ alignItems: "center", className: (0, classnames_1.default)(classes.podiumItem, `${classes.podiumItem}-${entry.position}`) }, { children: [entry.position === 1 && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", className: classes.podiumCrown, style: { maskImage: `url(${crown_1.default})`, WebkitMaskImage: `url(${crown_1.default})` } })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.podiumAvatarWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.podiumAvatar }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.podiumBadge }, { children: entry.position }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", fontWeight: 600, className: classes.podiumName }, { children: entry.user.real_name || entry.user.username })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", className: classes.podiumScore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.podium.score", defaultMessage: "ui.leaderboardWidget.podium.score", values: { score: entry.total_score } }) }))] }), entry.user.id))) })), mode === 'full' && entries.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.rankingHeader }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.rankingTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.ranking.title", defaultMessage: "ui.leaderboardWidget.ranking.title" }) })) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.rankingList }, { children: entries.map((entry) => {
-                                const isMe = Boolean(scUserContext.user) && entry.user.id === scUserContext.user.id;
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.podiumHeader }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.podiumTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.podium.title", defaultMessage: "ui.leaderboardWidget.podium.title", values: { period } }) })) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "center", alignItems: "flex-end", className: classes.podium }, { children: podium.map((entry) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ alignItems: "center", className: (0, classnames_1.default)(classes.podiumItem, `${classes.podiumItem}-${entry.position}`) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.podiumAvatarWrap }, { children: [entry.position === 1 && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", className: classes.podiumCrown, style: { maskImage: `url(${crown_1.default})`, WebkitMaskImage: `url(${crown_1.default})` } })), (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.podiumAvatar }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.podiumBadge }, { children: entry.position }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", fontWeight: 600, className: classes.podiumName }, { children: entry.user.real_name || entry.user.username })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", className: classes.podiumScore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.podium.score", defaultMessage: "ui.leaderboardWidget.podium.score", values: { score: entry.total_score } }) }))] }), entry.user.id))) })), mode === 'full' && entries.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.rankingHeader }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.rankingTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.ranking.title", defaultMessage: "ui.leaderboardWidget.ranking.title" }) })) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 1, className: classes.rankingList }, { children: entries.map((entry) => {
+                                const isMe = Boolean(scUserContext.user) && entry.user.id === scUserContext.user.id && entry.position <= RANKING_LIMIT;
                                 return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", className: (0, classnames_1.default)(classes.rankingItem, { [classes.rankingItemActive]: isMe }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.rankingPosition }, { children: entry.position })), (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.rankingAvatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", fontWeight: isMe ? 600 : 400, className: classes.rankingName }, { children: isMe ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.ranking.you", defaultMessage: "ui.leaderboardWidget.ranking.you" })) : (entry.user.real_name || entry.user.username) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.rankingScore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.ranking.score", defaultMessage: "ui.leaderboardWidget.ranking.score", values: { score: entry.total_score } }) }))] }), entry.user.id));
                             }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", role: "button", tabIndex: 0, onClick: onSeeMoreClick, className: classes.seeMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardWidget.ranking.seeMore", defaultMessage: "ui.leaderboardWidget.ranking.seeMore" }) }))] }))] }) })));
 }

package/lib/esm/components/LeaderboardWidget/LeaderboardWidget.d.ts

@@ -34,7 +34,8 @@ export interface LeaderboardWidgetProps extends WidgetProps {
  *
  *
  * This component renders a widget showing the top 3 users of the leaderboard for the given period (podium) and, optionally, the general ranking list.
- * Leaderboard entries are provided via the `entries` prop; this component does not fetch any data on its own.
+ * Leaderboard entries can be provided via the `entries` prop; if `mode` is `full` and no `entries` are provided, the component fetches the general
+ * ranking on its own.
  * The widget is hidden if the leaderboard feature is disabled or no podium data is available.
 
  #### Import

package/lib/esm/components/LeaderboardWidget/LeaderboardWidget.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Avatar, Box, CardContent, Stack, Typography, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -8,9 +8,13 @@ import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import crownIcon from '../../assets/leaderboard/crown';
-import { SCPreferences, SCUserContext, useSCPreferenceEnabled } from '@selfcommunity/react-core';
+import { SCPreferences, SCUserContext, useIsComponentMountedRef, useSCPreferenceEnabled } from '@selfcommunity/react-core';
+import { ScoreService } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import LeaderboardWidgetSkeleton from './Skeleton';
+const RANKING_LIMIT = 5;
 const classes = {
     root: `${PREFIX}-root`,
     podiumHeader: `${PREFIX}-podium-header`,
@@ -43,7 +47,8 @@ const Root = styled(Widget, {
  *
  *
  * This component renders a widget showing the top 3 users of the leaderboard for the given period (podium) and, optionally, the general ranking list.
- * Leaderboard entries are provided via the `entries` prop; this component does not fetch any data on its own.
+ * Leaderboard entries can be provided via the `entries` prop; if `mode` is `full` and no `entries` are provided, the component fetches the general
+ * ranking on its own.
  * The widget is hidden if the leaderboard feature is disabled or no podium data is available.
 
  #### Import
@@ -90,11 +95,37 @@ export default function LeaderboardWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, mode = 'full', period = 'month', entries = [], isLoading = true, onSeeMoreClick } = props, rest = __rest(props, ["className", "mode", "period", "entries", "isLoading", "onSeeMoreClick"]);
+    const { className, mode = 'full', period = 'month', entries: entriesProp, isLoading: isLoadingProp = true, onSeeMoreClick } = props, rest = __rest(props, ["className", "mode", "period", "entries", "isLoading", "onSeeMoreClick"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     // PREFERENCES
     const leaderboardsEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_LEADERBOARDS_ENABLED);
+    // Self-fetches the leaderboard data when running in `full` mode and no entries are provided by the parent
+    const shouldFetch = mode === 'full' && !entriesProp;
+    const [fetchedEntries, setFetchedEntries] = useState([]);
+    const [isFetching, setIsFetching] = useState(shouldFetch);
+    const isMountedRef = useIsComponentMountedRef();
+    useEffect(() => {
+        if (!shouldFetch) {
+            return;
+        }
+        setIsFetching(true);
+        ScoreService.getLeaderboards({ limit: RANKING_LIMIT })
+            .then((data) => {
+            if (isMountedRef.current) {
+                setFetchedEntries(data.results);
+                setIsFetching(false);
+            }
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            if (isMountedRef.current) {
+                setIsFetching(false);
+            }
+        });
+    }, [shouldFetch, period]);
+    const entries = shouldFetch ? fetchedEntries : entriesProp || [];
+    const isLoading = shouldFetch ? isFetching : isLoadingProp;
     /**
      * Renders nothing if the leaderboard feature is disabled
      */
@@ -114,8 +145,8 @@ export default function LeaderboardWidget(inProps) {
     if (!podium.length) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.podiumHeader }, { children: _jsx(Typography, Object.assign({ variant: "h4", className: classes.podiumTitle }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.podium.title", defaultMessage: "ui.leaderboardWidget.podium.title", values: { period } }) })) })), _jsx(Stack, Object.assign({ direction: "row", justifyContent: "center", alignItems: "flex-end", className: classes.podium }, { children: podium.map((entry) => (_jsxs(Stack, Object.assign({ alignItems: "center", className: classNames(classes.podiumItem, `${classes.podiumItem}-${entry.position}`) }, { children: [entry.position === 1 && (_jsx(Box, { component: "span", className: classes.podiumCrown, style: { maskImage: `url(${crownIcon})`, WebkitMaskImage: `url(${crownIcon})` } })), _jsxs(Box, Object.assign({ className: classes.podiumAvatarWrap }, { children: [_jsx(Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.podiumAvatar }), _jsx(Box, Object.assign({ component: "span", className: classes.podiumBadge }, { children: entry.position }))] })), _jsx(Typography, Object.assign({ variant: "body2", fontWeight: 600, className: classes.podiumName }, { children: entry.user.real_name || entry.user.username })), _jsx(Typography, Object.assign({ variant: "caption", className: classes.podiumScore }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.podium.score", defaultMessage: "ui.leaderboardWidget.podium.score", values: { score: entry.total_score } }) }))] }), entry.user.id))) })), mode === 'full' && entries.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.rankingHeader }, { children: _jsx(Typography, Object.assign({ variant: "h4", className: classes.rankingTitle }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.title", defaultMessage: "ui.leaderboardWidget.ranking.title" }) })) })), _jsx(Stack, Object.assign({ className: classes.rankingList }, { children: entries.map((entry) => {
-                                const isMe = Boolean(scUserContext.user) && entry.user.id === scUserContext.user.id;
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.podiumHeader }, { children: _jsx(Typography, Object.assign({ variant: "h4", className: classes.podiumTitle }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.podium.title", defaultMessage: "ui.leaderboardWidget.podium.title", values: { period } }) })) })), _jsx(Stack, Object.assign({ direction: "row", justifyContent: "center", alignItems: "flex-end", className: classes.podium }, { children: podium.map((entry) => (_jsxs(Stack, Object.assign({ alignItems: "center", className: classNames(classes.podiumItem, `${classes.podiumItem}-${entry.position}`) }, { children: [_jsxs(Box, Object.assign({ className: classes.podiumAvatarWrap }, { children: [entry.position === 1 && (_jsx(Box, { component: "span", className: classes.podiumCrown, style: { maskImage: `url(${crownIcon})`, WebkitMaskImage: `url(${crownIcon})` } })), _jsx(Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.podiumAvatar }), _jsx(Box, Object.assign({ component: "span", className: classes.podiumBadge }, { children: entry.position }))] })), _jsx(Typography, Object.assign({ variant: "body2", fontWeight: 600, className: classes.podiumName }, { children: entry.user.real_name || entry.user.username })), _jsx(Typography, Object.assign({ variant: "caption", className: classes.podiumScore }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.podium.score", defaultMessage: "ui.leaderboardWidget.podium.score", values: { score: entry.total_score } }) }))] }), entry.user.id))) })), mode === 'full' && entries.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.rankingHeader }, { children: _jsx(Typography, Object.assign({ variant: "h4", className: classes.rankingTitle }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.title", defaultMessage: "ui.leaderboardWidget.ranking.title" }) })) })), _jsx(Stack, Object.assign({ spacing: 1, className: classes.rankingList }, { children: entries.map((entry) => {
+                                const isMe = Boolean(scUserContext.user) && entry.user.id === scUserContext.user.id && entry.position <= RANKING_LIMIT;
                                 return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", className: classNames(classes.rankingItem, { [classes.rankingItemActive]: isMe }) }, { children: [_jsx(Typography, Object.assign({ variant: "body2", className: classes.rankingPosition }, { children: entry.position })), _jsx(Avatar, { alt: entry.user.username, src: entry.user.avatar, className: classes.rankingAvatar }), _jsx(Typography, Object.assign({ variant: "body2", fontWeight: isMe ? 600 : 400, className: classes.rankingName }, { children: isMe ? (_jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.you", defaultMessage: "ui.leaderboardWidget.ranking.you" })) : (entry.user.real_name || entry.user.username) })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.rankingScore }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.score", defaultMessage: "ui.leaderboardWidget.ranking.score", values: { score: entry.total_score } }) }))] }), entry.user.id));
                             }) })), _jsx(Typography, Object.assign({ component: "span", role: "button", tabIndex: 0, onClick: onSeeMoreClick, className: classes.seeMore }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardWidget.ranking.seeMore", defaultMessage: "ui.leaderboardWidget.ranking.seeMore" }) }))] }))] }) })));
 }