Tco23 leaderboards

.circleci/config.yml

@@ -370,7 +370,7 @@ workflows:
           filters:
             branches:
               only:
-                - social-share-updates
+                - tco23-leaderboards
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global

__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap

@@ -70,7 +70,6 @@ exports[`Matches shallow shapshot 1`] = `
           className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk"
         >
           <span>
-            0
              points
           </span>
           <span>
@@ -84,7 +83,7 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-points___2-5d7"
       >
-        0.00
+        NaN
       </td>
     </tr>
     <tr>
@@ -125,7 +124,6 @@ exports[`Matches shallow shapshot 1`] = `
           className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk"
         >
           <span>
-            0
              points
           </span>
           <span>
@@ -139,7 +137,7 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-points___2-5d7"
       >
-        0.00
+        NaN
       </td>
     </tr>
     <tr>
@@ -180,7 +178,6 @@ exports[`Matches shallow shapshot 1`] = `
           className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk"
         >
           <span>
-            0
              points
           </span>
           <span>
@@ -194,7 +191,7 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-points___2-5d7"
       >
-        0.00
+        NaN
       </td>
     </tr>
     <tr>
@@ -235,7 +232,6 @@ exports[`Matches shallow shapshot 1`] = `
           className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk"
         >
           <span>
-            0
              points
           </span>
           <span>
@@ -249,7 +245,7 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-points___2-5d7"
       >
-        0.00
+        NaN
       </td>
     </tr>
   </tbody>

__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap

@@ -47,7 +47,7 @@ exports[`Matches shallow shapshot 1`] = `
       <span
         className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value___2shA5"
       >
-        0.00
+        NaN
       </span>
       <span
         className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value-title___1Jf_7"
@@ -106,7 +106,7 @@ exports[`Matches shallow shapshot 2`] = `
       <span
         className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value___2shA5"
       >
-        0.00
+        NaN
       </span>
       <span
         className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value-title___1Jf_7"

src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx

@@ -39,8 +39,10 @@ class ChallengeHistoryModal extends Component {
     } = this.props;
     const { sortParam } = this.state;
     const challengesOrdered = _.orderBy(challenges, [sortParam.field], [sortParam.order]);
-    const placeLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.placement' : 'place';
-    const pointsLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.tco_points' : 'points';
+    // eslint-disable-next-line
+    const placeLabel = competitor['tco23_leaderboard.challenge_count'] ? 'tco23_leaderboard.placement' : 'tco_leaderboard.placement';
+    // eslint-disable-next-line
+    const pointsLabel = competitor['tco23_leaderboard.tco_points'] ? 'tco23_leaderboard.tco_points' : 'tco_leaderboard.tco_points';
     const styles = THEMES[themeName] || THEMES.Default;
     /* eslint-disable no-confusing-arrow */
     const sortInner = () => themeName === 'TCO23' ? (
@@ -95,7 +97,7 @@ class ChallengeHistoryModal extends Component {
                         }}
                         type="button"
                       >
-                        { sortInner() }
+                        {sortInner()}
                       </button>
                     </div>
                   </th>
@@ -117,31 +119,36 @@ class ChallengeHistoryModal extends Component {
                     }}
                     type="button"
                   >
-                    { sortInner() }
+                    {sortInner()}
                   </button>
                 </div>
               </th>
             </tr>
           </thead>
           <tbody>
             {
-              challengesOrdered.map(challenge => (
-                <tr className={styles.row} key={`${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}`}>
-                  <td className={styles.name}>
-                    <a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id || challenge['challenge.challenge_GUID']}/`} className={styles.link} target="_blank" rel="noopener noreferrer">
-                      {challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id}
-                    </a>
-                  </td>
-                  {
+              challengesOrdered.map((challenge) => {
+                const challengeId = challenge['tco23_leaderboard.challenge_id'] || challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_GUID'] || challenge['challenge.challenge_id'] || challenge.challenge_id;
+                return (
+                  <tr className={styles.row} key={`${challengeId}`}>
+                    <td className={styles.name}>
+                      <a href={`${config.URL.BASE}/challenges/${challengeId || challenge['challenge.challenge_GUID']}/`} className={styles.link} target="_blank" rel="noopener noreferrer">
+                        {challenge.challenge_name || challenge['challenge.challenge_name'] || challengeId}
+                      </a>
+                    </td>
+                    {
                     !isCopilot ? (
-                      <td className={styles.placement}>{challenge['tco_leaderboard.placement'] || challenge.place}<span>placement</span></td>
+                      <td className={styles.placement}>
+                        {challenge[placeLabel]}<span>placement</span>
+                      </td>
                     ) : null
                   }
-                  <td className={styles.points}>
-                    {challenge['tco_leaderboard.tco_points'] || challenge.points}<span>points</span>
-                  </td>
-                </tr>
-              ))
+                    <td className={styles.points}>
+                      {challenge[pointsLabel] || challenge.points}<span>points</span>
+                    </td>
+                  </tr>
+                );
+              })
             }
           </tbody>
         </table>

src/shared/components/Leaderboard/LeaderboardTable/index.jsx

@@ -67,6 +67,12 @@ export default function LeaderboardTable(props) {
   const addSufix = val => isAlgo ? (val !== 1 ? `${val} matches` : `${val} match`) : (val !== 1 ? `${val} challenges` : `${val} challenge`);
   const renderTableRows = comps => (
     comps.map((competitor) => {
+      const tcoPoints = competitor['tco23_leaderboard.tco_points']
+        || competitor['tco_leaderboard.tco_points']
+        || competitor.points
+        || competitor['tco_leaderboard.total_score']
+        || competitor['srm_tco19.score'];
+      const tcoChallengeCnt = competitor['tco23_leaderboard.challenge_count'] || competitor['tco_leaderboard.challenge_count'] || competitor.challengecount;
       let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar;
       if (photoUrl) {
         photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=40`;
@@ -147,13 +153,13 @@ export default function LeaderboardTable(props) {
             }
             <div styleName={`${stylesName}.winnings-info`}>
               {fulfillment && (<span>{fulfillment} fulfillment</span>)}
-              <span>{competitor['tco_leaderboard.tco_points'] || competitor.points} points</span>
+              <span>{tcoPoints} points</span>
               {
                 themeName === 'TCO23' ? (
                   <div onClick={() => onUsernameClick(competitor)} styleName={`${stylesName}.mobile-link`}>
-                    {addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}
+                    {addSufix(tcoChallengeCnt)}
                   </div>
-                ) : <span>{addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}</span>
+                ) : <span>{addSufix(tcoChallengeCnt)}</span>
               }
             </div>
           </td>
@@ -172,15 +178,15 @@ export default function LeaderboardTable(props) {
                       style={{ cursor: 'pointer', display: 'inline-block', color: '#0d61bf' }}
                       onClick={() => onUsernameClick(competitor)}
                     >
-                      { `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}` }
+                      {`${addSufix(tcoChallengeCnt)}`}
                     </div>
-                  ) : `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}`
+                  ) : `${addSufix(tcoChallengeCnt)}`
               ) : (
-                competitor['tco_leaderboard.challenge_count'] || competitor.challengecount
+                tcoChallengeCnt
               )
             }
           </td>
-          <td styleName={`${stylesName}.col-points`}>{formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)}</td>
+          <td styleName={`${stylesName}.col-points`}>{formatPoints(tcoPoints)}</td>
           {
             isTopGear ? (
               <td styleName={`${stylesName}.col-points`}>{competitor.wins}</td>
@@ -193,7 +199,7 @@ export default function LeaderboardTable(props) {
           }
           {
             isAlgo ? (
-              <td styleName={`${stylesName}.col-points`}>{competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']}</td>
+              <td styleName={`${stylesName}.col-points`}>{tcoPoints}</td>
             ) : null
           }
         </tr>

src/shared/components/Leaderboard/Podium/index.jsx

@@ -69,7 +69,7 @@ export default function Podium(props) {
     ));
 
     return (
-      <div styleName={`${stylesName}.PodiumWrap`} style={comps.length === 4 ? { 'justify-content': 'space-between' } : {}}>
+      <div styleName={`${stylesName}.${themeName === 'TCO23' ? 'PodiumWrapCondense' : 'PodiumWrap'}`} style={comps.length === 4 ? { 'justify-content': 'space-between' } : {}}>
         {podiumSpots}
       </div>
     );

src/shared/components/Leaderboard/Podium/themes/default.scss

@@ -18,7 +18,8 @@
   }
 }
 
-.PodiumWrap {
+.PodiumWrap,
+.PodiumWrapCondense {
   display: flex;
   justify-content: center !important;
 

src/shared/components/Leaderboard/Podium/themes/tco23.scss

@@ -23,15 +23,18 @@
   }
 }
 
-.PodiumWrap {
+.PodiumWrap,
+.PodiumWrapCondense {
   display: flex;
   justify-content: center !important;
 
   @include xs-to-sm {
     flex-direction: column;
     align-items: center;
   }
+}
 
+.PodiumWrap {
   .podium-column:nth-child(2) {
     @include md-to-xl {
       margin-top: -16px;
@@ -58,3 +61,19 @@
     margin-right: 0;
   }
 }
+
+.PodiumWrapCondense {
+  @media screen and (min-width: 375px) and (max-width: 768px) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 17px;
+  }
+
+  .podium-column {
+    margin-right: 16px;
+
+    @include xs-to-sm {
+      margin: 0;
+    }
+  }
+}