From b521370b3ca9e48b9565ab91c65e8c686d6037b9 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 3 Dec 2021 16:34:21 +0200 Subject: [PATCH 01/13] theme update --- src/shared/actions/mmLeaderboard.js | 14 +- .../components/MMatchLeaderboard/index.jsx | 100 +++++++++-- .../components/MMatchLeaderboard/style.scss | 161 ++++++++++++++++++ 3 files changed, 263 insertions(+), 12 deletions(-) diff --git a/src/shared/actions/mmLeaderboard.js b/src/shared/actions/mmLeaderboard.js index 4f838d4126..d3e66a5a15 100644 --- a/src/shared/actions/mmLeaderboard.js +++ b/src/shared/actions/mmLeaderboard.js @@ -1,7 +1,8 @@ -import { redux } from 'topcoder-react-utils'; +import { redux, config } from 'topcoder-react-utils'; import Service from 'services/mmLeaderboard'; import _ from 'lodash'; + /** * Fetch init */ @@ -39,6 +40,17 @@ async function getMMLeaderboardDone(id) { rank: i + 1, score: r.score % 1 ? Number(r.score).toFixed(5) : r.score, })); + // Fetch member photos for top 3 + const results = await Promise.all( + _.take(data, 3).map(d => fetch(`${config.API.V5}/members/${d.createdBy}`)), + ); + const memberData = await Promise.all(results.map(r => r.json())); + // merge with data + // eslint-disable-next-line array-callback-return + memberData.map((member, indx) => { + data[indx].photoUrl = member.photoURL; + data[indx].ratingColor = member.maxRating && member.maxRating.ratingColor; + }); } return { id, diff --git a/src/shared/components/MMatchLeaderboard/index.jsx b/src/shared/components/MMatchLeaderboard/index.jsx index b2e3196944..a1b83062bd 100644 --- a/src/shared/components/MMatchLeaderboard/index.jsx +++ b/src/shared/components/MMatchLeaderboard/index.jsx @@ -21,9 +21,15 @@ import PT from 'prop-types'; import _ from 'lodash'; import React, { Component } from 'react'; import { fixStyle } from 'utils/contentful'; +import { getRatingColor } from 'utils/tc'; import cn from 'classnames'; import { Scrollbars } from 'react-custom-scrollbars'; -import './style.scss'; +import { config } from 'topcoder-react-utils'; +import { PrimaryButton } from 'topcoder-react-ui-kit'; +import tc from 'components/buttons/themed/tc.scss'; +import defaultStyles from './style.scss'; + +const DEFAULT_AVATAR_URL = 'https://images.ctfassets.net/b5f1djy59z3a/4PTwZVSf3W7qgs9WssqbVa/4c51312671a4b9acbdfd7f5e22320b62/default_avatar.svg'; export default class MMLeaderboard extends Component { constructor(props) { @@ -46,6 +52,8 @@ export default class MMLeaderboard extends Component { tableHeight, tableWidth, headerIndexCol, + theme, + challengeId, } = this.props; let { @@ -76,6 +84,73 @@ export default class MMLeaderboard extends Component { } const renderData = () => { + if (data.length && theme && theme === 'Podium') { + return ( +
+
+
+ {_.take(data, 2).map((member, indx) => ( +
+
+ {`Avatar +
{member.rank}
+
+
+ {member.createdBy} +

{member.score}

+
+
+ ))} +
+
+
+ {`Avatar +
{data[2].rank}
+
+
+ {data[2].createdBy} +

{data[2].score}

+
+
+
+
+
+ {_.slice(data, 3, 7).map(member => ( +
+ {member.rank}.  + {member.createdBy} + {member.score} +
+ ))} +
+ { + data.length > 7 && ( +
+ {_.slice(data, 7, 10).map(member => ( +
+ {member.rank}.  + {member.createdBy} + {member.score} +
+ ))} + { + data.length > 10 && ( + + See Full Leaderbord + + )} +
+ )} +
+
+ ); + } if (property) { if (data.length > 0 && data[0][property]) { if (typeof data[0][property] === 'string') { @@ -107,17 +182,17 @@ export default class MMLeaderboard extends Component { const header = cols => ( - { countRows && ({headerIndexCol}) } + { countRows && ({headerIndexCol}) } { cols.map((c) => { const name = c.headerName; const { styles } = c; return name ? ( - -
+ +
{ name }