@selfcommunity/react-ui 1.3.0-alpha.0 → 1.3.0-alpha.1

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

@@ -1,14 +1,34 @@
 import { WidgetProps } from '../Widget';
 import { SCLeaderboardEntry } from '@selfcommunity/types';
+import { LeaderboardPeriod } from '@selfcommunity/utils';
+export type LeaderboardPositionWidgetPeriod = LeaderboardPeriod;
 export interface LeaderboardPositionWidgetProps extends WidgetProps {
-    position: SCLeaderboardEntry;
+    /**
+     * The leaderboard entry of the logged user. If not provided, the component fetches it on its own.
+     */
+    position?: SCLeaderboardEntry;
+    /**
+     * The period the position refers to.
+     * @default 'month'
+     */
+    period?: LeaderboardPositionWidgetPeriod;
+    /**
+     * If true, shows the skeleton in place of the widget content.
+     * @default true
+     */
     isLoading?: boolean;
+    /**
+     * The url the widget links to.
+     * @default the profile of the logged user
+     */
+    to?: string;
 }
 /**
  * > API documentation for the Community-JS Leaderboard Position Widget component. Learn about the available props and the CSS API.
  *
  *
  * This component renders a widget showing the current logged user position in the leaderboard.
+ * The position can be provided via the `position` prop; if it is not provided, the component fetches it on its own.
  * The widget is hidden if the user is not authenticated, the leaderboard feature is disabled or no position data is available.
 
  #### Import

package/lib/cjs/components/LeaderboardPositionWidget/LeaderboardPositionWidget.js

@@ -10,6 +10,9 @@ const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
 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 classes = {
@@ -31,6 +34,7 @@ const Root = (0, material_1.styled)(Widget_1.default, {
  *
  *
  * This component renders a widget showing the current logged user position in the leaderboard.
+ * The position can be provided via the `position` prop; if it is not provided, the component fetches it on its own.
  * The widget is hidden if the user is not authenticated, the leaderboard feature is disabled or no position data is available.
 
  #### Import
@@ -64,12 +68,38 @@ function LeaderboardPositionWidget(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, position, isLoading = true } = props, rest = tslib_1.__rest(props, ["className", "position", "isLoading"]);
+    const { className, position: positionProp, period = 'month', isLoading: isLoadingProp = true, to } = props, rest = tslib_1.__rest(props, ["className", "position", "period", "isLoading", "to"]);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // PREFERENCES
     const leaderboardsEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_LEADERBOARDS_ENABLED);
+    // Self-fetches the logged user position when it is not provided by the parent
+    const shouldFetch = Boolean(scUserContext.user) && leaderboardsEnabled && !positionProp;
+    const [fetchedPosition, setFetchedPosition] = (0, react_1.useState)(null);
+    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(Object.assign({ limit: 1 }, (0, utils_1.getPeriodRange)(period)))
+            .then((data) => {
+            if (isMountedRef.current) {
+                setFetchedPosition(data.my_position);
+                setIsFetching(false);
+            }
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            if (isMountedRef.current) {
+                setIsFetching(false);
+            }
+        });
+    }, [shouldFetch, period]);
+    const position = shouldFetch ? fetchedPosition : positionProp;
+    const isLoading = shouldFetch ? isFetching : isLoadingProp;
     /**
      * Renders nothing if the user is not authenticated or the leaderboard feature is disabled
      */
@@ -88,6 +118,6 @@ function LeaderboardPositionWidget(inProps) {
     if (!position) {
         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.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardPositionWidget.title", defaultMessage: "ui.leaderboardPositionWidget.title" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: position.user.id }), className: classes.user }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: position.user.username, src: position.user.avatar, className: classes.userAvatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", fontWeight: 600, className: classes.userName }, { children: position.user.real_name || position.user.username }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.footer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.position }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardPositionWidget.position", defaultMessage: "ui.leaderboardPositionWidget.position", values: { position: position.position } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.score }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardPositionWidget.score", defaultMessage: "ui.leaderboardPositionWidget.score", values: { score: position.total_score } }) }))] }))] }) })));
+    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.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardPositionWidget.title", defaultMessage: "ui.leaderboardPositionWidget.title" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", component: react_core_1.Link, to: to !== null && to !== void 0 ? to : scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: position.user.id }), className: classes.user }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: position.user.username, src: position.user.avatar, className: classes.userAvatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", fontWeight: 600, className: classes.userName }, { children: position.user.real_name || position.user.username }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.footer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.position }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardPositionWidget.position", defaultMessage: "ui.leaderboardPositionWidget.position", values: { position: position.position } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.score }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.leaderboardPositionWidget.score", defaultMessage: "ui.leaderboardPositionWidget.score", values: { score: position.total_score } }) }))] }))] }) })));
 }
 exports.default = LeaderboardPositionWidget;

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

@@ -17,6 +17,7 @@ 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 PODIUM_LIMIT = 3;
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     podiumHeader: `${constants_1.PREFIX}-podium-header`,
@@ -140,7 +141,10 @@ function LeaderboardWidget(inProps) {
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { mode: mode });
     }
-    const podium = entries.filter((entry) => entry.position <= 3);
+    // Entries can share the same position: the podium shows only the first one of each of the first three positions, while the ranking list below shows them all
+    const podium = entries
+        .filter((entry, index) => entry.position <= PODIUM_LIMIT && entries.findIndex((e) => e.position === entry.position) === index)
+        .slice(0, PODIUM_LIMIT);
     /**
      * Renders nothing if there's no podium data
      */

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

@@ -1,14 +1,34 @@
 import { WidgetProps } from '../Widget';
 import { SCLeaderboardEntry } from '@selfcommunity/types';
+import { LeaderboardPeriod } from '@selfcommunity/utils';
+export type LeaderboardPositionWidgetPeriod = LeaderboardPeriod;
 export interface LeaderboardPositionWidgetProps extends WidgetProps {
-    position: SCLeaderboardEntry;
+    /**
+     * The leaderboard entry of the logged user. If not provided, the component fetches it on its own.
+     */
+    position?: SCLeaderboardEntry;
+    /**
+     * The period the position refers to.
+     * @default 'month'
+     */
+    period?: LeaderboardPositionWidgetPeriod;
+    /**
+     * If true, shows the skeleton in place of the widget content.
+     * @default true
+     */
     isLoading?: boolean;
+    /**
+     * The url the widget links to.
+     * @default the profile of the logged user
+     */
+    to?: string;
 }
 /**
  * > API documentation for the Community-JS Leaderboard Position Widget component. Learn about the available props and the CSS API.
  *
  *
  * This component renders a widget showing the current logged user position in the leaderboard.
+ * The position can be provided via the `position` prop; if it is not provided, the component fetches it on its own.
  * The widget is hidden if the user is not authenticated, the leaderboard feature is disabled or no position data is available.
 
  #### Import

package/lib/esm/components/LeaderboardPositionWidget/LeaderboardPositionWidget.js

@@ -1,13 +1,16 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Avatar, CardContent, Stack, Typography, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
-import { Link, SCPreferences, SCRoutes, SCUserContext, useSCPreferenceEnabled, useSCRouting } from '@selfcommunity/react-core';
+import { Link, SCPreferences, SCRoutes, SCUserContext, useIsComponentMountedRef, useSCPreferenceEnabled, useSCRouting } from '@selfcommunity/react-core';
+import { ScoreService } from '@selfcommunity/api-services';
+import { getPeriodRange, Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import LeaderboardPositionWidgetSkeleton from './Skeleton';
 const classes = {
@@ -29,6 +32,7 @@ const Root = styled(Widget, {
  *
  *
  * This component renders a widget showing the current logged user position in the leaderboard.
+ * The position can be provided via the `position` prop; if it is not provided, the component fetches it on its own.
  * The widget is hidden if the user is not authenticated, the leaderboard feature is disabled or no position data is available.
 
  #### Import
@@ -62,12 +66,38 @@ export default function LeaderboardPositionWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, position, isLoading = true } = props, rest = __rest(props, ["className", "position", "isLoading"]);
+    const { className, position: positionProp, period = 'month', isLoading: isLoadingProp = true, to } = props, rest = __rest(props, ["className", "position", "period", "isLoading", "to"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     const scRoutingContext = useSCRouting();
     // PREFERENCES
     const leaderboardsEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_LEADERBOARDS_ENABLED);
+    // Self-fetches the logged user position when it is not provided by the parent
+    const shouldFetch = Boolean(scUserContext.user) && leaderboardsEnabled && !positionProp;
+    const [fetchedPosition, setFetchedPosition] = useState(null);
+    const [isFetching, setIsFetching] = useState(shouldFetch);
+    const isMountedRef = useIsComponentMountedRef();
+    useEffect(() => {
+        if (!shouldFetch) {
+            return;
+        }
+        setIsFetching(true);
+        ScoreService.getLeaderboards(Object.assign({ limit: 1 }, getPeriodRange(period)))
+            .then((data) => {
+            if (isMountedRef.current) {
+                setFetchedPosition(data.my_position);
+                setIsFetching(false);
+            }
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            if (isMountedRef.current) {
+                setIsFetching(false);
+            }
+        });
+    }, [shouldFetch, period]);
+    const position = shouldFetch ? fetchedPosition : positionProp;
+    const isLoading = shouldFetch ? isFetching : isLoadingProp;
     /**
      * Renders nothing if the user is not authenticated or the leaderboard feature is disabled
      */
@@ -86,5 +116,5 @@ export default function LeaderboardPositionWidget(inProps) {
     if (!position) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.title", defaultMessage: "ui.leaderboardPositionWidget.title" }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: position.user.id }), className: classes.user }, { children: [_jsx(Avatar, { alt: position.user.username, src: position.user.avatar, className: classes.userAvatar }), _jsx(Typography, Object.assign({ variant: "body1", fontWeight: 600, className: classes.userName }, { children: position.user.real_name || position.user.username }))] })), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.footer }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.position }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.position", defaultMessage: "ui.leaderboardPositionWidget.position", values: { position: position.position } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.score }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.score", defaultMessage: "ui.leaderboardPositionWidget.score", values: { score: position.total_score } }) }))] }))] }) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.title", defaultMessage: "ui.leaderboardPositionWidget.title" }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1.5, alignItems: "center", component: Link, to: to !== null && to !== void 0 ? to : scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: position.user.id }), className: classes.user }, { children: [_jsx(Avatar, { alt: position.user.username, src: position.user.avatar, className: classes.userAvatar }), _jsx(Typography, Object.assign({ variant: "body1", fontWeight: 600, className: classes.userName }, { children: position.user.real_name || position.user.username }))] })), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", className: classes.footer }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.position }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.position", defaultMessage: "ui.leaderboardPositionWidget.position", values: { position: position.position } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.score }, { children: _jsx(FormattedMessage, { id: "ui.leaderboardPositionWidget.score", defaultMessage: "ui.leaderboardPositionWidget.score", values: { score: position.total_score } }) }))] }))] }) })));
 }

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

@@ -15,6 +15,7 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import LeaderboardWidgetSkeleton from './Skeleton';
 const RANKING_LIMIT = 5;
+const PODIUM_LIMIT = 3;
 const classes = {
     root: `${PREFIX}-root`,
     podiumHeader: `${PREFIX}-podium-header`,
@@ -138,7 +139,10 @@ export default function LeaderboardWidget(inProps) {
     if (isLoading) {
         return _jsx(LeaderboardWidgetSkeleton, { mode: mode });
     }
-    const podium = entries.filter((entry) => entry.position <= 3);
+    // Entries can share the same position: the podium shows only the first one of each of the first three positions, while the ranking list below shows them all
+    const podium = entries
+        .filter((entry, index) => entry.position <= PODIUM_LIMIT && entries.findIndex((e) => e.position === entry.position) === index)
+        .slice(0, PODIUM_LIMIT);
     /**
      * Renders nothing if there's no podium data
      */