feat: recommended challenge and thrive articles

.circleci/config.yml

@@ -174,23 +174,20 @@ workflows:
           filters:
             branches:
               only:
-                - develop                
-                - hot-fix-past-challenge-search
+                - develop
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
           filters:
             branches:
               only:
-                - develop
                 - hot-fixes-leaderboard
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
           filters:
             branches:
               only:
-                - develop
                 - feature-contentful
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/default.js

@@ -32,6 +32,9 @@ module.exports = {
    */
   CHALLENGE_DETAILS_REFRESH_DELAY: 3000,
 
+  /* Max number of recommended challenges */
+  CHALLENGE_DETAILS_MAX_NUMBER_RECOMMENDED_CHALLENGES: 3,
+
   COOKIES: {
     /* Expiration time [days] for browser cookies set by the App. */
     MAXAGE: 7,
@@ -115,6 +118,8 @@ module.exports = {
     FORUMS: 'https://apps.topcoder-dev.com/forums',
     HELP: 'https://www.topcoder.com/thrive/tracks?track=Topcoder',
 
+    THRIVE: 'https://www.topcoder.com/thrive',
+
     COMMUNITIES: {
       BLOCKCHAIN: 'https://blockchain.topcoder-dev.com',
       COGNITIVE: 'https://cognitive.topcoder-dev.com',

src/shared/actions/challenge-listing/index.js

@@ -80,26 +80,25 @@ function getActiveChallengesInit(uuid, page, frontFilter) {
   return { uuid, page, frontFilter };
 }
 
-/** TODO: Inspect if the 2 actions bellow can be removed?
- * They do  duplicate what is done in `getActiveChallengesDone` but fetch all challenges
- * which was refactored in listing-improve
+/**
+ * Get all challenges and match with user challenges
+ * @param {String} uuid progress id
+ * @param {String} tokenV3 token v3
+ * @param {Object} filter filter object
+ * @param {number} page start page
  */
-function getAllActiveChallengesInit(uuid) {
-  return uuid;
-}
-function getAllActiveChallengesDone(uuid, tokenV3) {
-  const filter = { status: 'ACTIVE' };
+function getAllActiveChallengesWithUsersDone(uuid, tokenV3, filter, page = 0) {
   const service = getService(tokenV3);
   const calls = [
-    getAll(params => service.getChallenges(filter, params)),
+    getAll(params => service.getChallenges(filter, params), page),
   ];
   let user;
   if (tokenV3) {
     user = decodeToken(tokenV3).handle;
     // Handle any errors on this endpoint so that the non-user specific challenges
     // will still be loaded.
     calls.push(getAll(params => service.getUserChallenges(user, filter, params)
-      .catch(() => ({ challenges: [] }))));
+      .catch(() => ({ challenges: [] }))), page);
   }
   return Promise.all(calls).then(([ch, uch]) => {
     /* uch array contains challenges where the user is participating in
@@ -120,10 +119,22 @@ function getAllActiveChallengesDone(uuid, tokenV3) {
       });
     }
 
-    return { uuid, challenges: ch };
+    return { uuid, challenges: ch, ...filter };
   });
 }
 
+/** TODO: Inspect if the 2 actions bellow can be removed?
+ * They do  duplicate what is done in `getActiveChallengesDone` but fetch all challenges
+ * which was refactored in listing-improve
+ */
+function getAllActiveChallengesInit(uuid) {
+  return uuid;
+}
+function getAllActiveChallengesDone(uuid, tokenV3) {
+  const filter = { status: 'ACTIVE' };
+  return getAllActiveChallengesWithUsersDone(uuid, tokenV3, filter);
+}
+
 /**
  * Gets 1 page of active challenges (including marathon matches) from the backend.
  * Once this action is completed any active challenges saved to the state before
@@ -200,43 +211,33 @@ function getRestActiveChallengesInit(uuid) {
 
 /**
  * Loading all challenges
- * @param {*} uuid
- * @param {*} tokenV3
+ * @param {String} uuid progress id
+ * @param {String} tokenV3 token v3
  */
 function getRestActiveChallengesDone(uuid, tokenV3) {
   const filter = { status: 'ACTIVE' };
-  const service = getService(tokenV3);
-  const calls = [
-    getAll(params => service.getChallenges(filter, params), 1),
-  ];
-  let user;
-  if (tokenV3) {
-    user = decodeToken(tokenV3).handle;
-    calls.push(getAll(params => service.getUserChallenges(user, filter, params)
-      .catch(() => ({ challenges: [] }))), 1);
-  }
-  return Promise.all(calls).then(([ch, uch]) => {
-    /* uch array contains challenges where the user is participating in
-     * some role. The same challenge are already listed in res array, but they
-     * are not attributed to the user there. This block of code marks user
-     * challenges in an efficient way. */
-    if (uch) {
-      const map = {};
-      uch.forEach((item) => { map[item.id] = item; });
-      ch.forEach((item) => {
-        if (map[item.id]) {
-          /* It is fine to reassing, as the array we modifying is created just
-           * above within the same function. */
-          /* eslint-disable no-param-reassign */
-          item.users[user] = true;
-          item.userDetails = map[item.id].userDetails;
-          /* eslint-enable no-param-reassign */
-        }
-      });
-    }
+  return getAllActiveChallengesWithUsersDone(uuid, tokenV3, filter, 1);
+}
 
-    return { uuid, challenges: ch };
-  });
+/**
+ * Prepare for getting all recommended challenges
+ * @param {String} uuid progress id
+ */
+function getAllRecommendedChallengesInit(uuid) {
+  return uuid;
+}
+/**
+ * Get all recommended challenges
+ * @param {String} uuid progress id
+ * @param {String} tokenV3 token v3
+ * @param {*} recommendedTechnology recommended technoloty
+ */
+function getAllRecommendedChallengesDone(uuid, tokenV3, recommendedTechnology) {
+  const filter = {
+    status: 'ACTIVE',
+    technologies: recommendedTechnology,
+  };
+  return getAllActiveChallengesWithUsersDone(uuid, tokenV3, filter);
 }
 
 /**
@@ -333,6 +334,9 @@ export default createActions({
     GET_ALL_ACTIVE_CHALLENGES_INIT: getAllActiveChallengesInit,
     GET_ALL_ACTIVE_CHALLENGES_DONE: getAllActiveChallengesDone,
 
+    GET_ALL_RECOMMENDED_CHALLENGES_INIT: getAllRecommendedChallengesInit,
+    GET_ALL_RECOMMENDED_CHALLENGES_DONE: getAllRecommendedChallengesDone,
+
     GET_ACTIVE_CHALLENGES_INIT: getActiveChallengesInit,
     GET_ACTIVE_CHALLENGES_DONE: getActiveChallengesDone,
 

src/shared/components/TrackIcon/index.jsx

@@ -12,13 +12,26 @@ export default function TrackIcon({
   tcoEligible,
   isDataScience,
   MAIN_URL,
+  challengesUrl,
 }) {
   const TCO_URL = `${MAIN_URL}/tco`;
   return (
     <span styleName="trackIcon">
-      <div styleName={`${(isDataScience ? 'data_science' : track.toLowerCase())} main-icon`}>
-        {Abbreviation[track][subTrack]}
-      </div>
+      {challengesUrl ? (
+        <a
+          href={`${challengesUrl}?filter[subtracks][0]=${
+            encodeURIComponent(subTrack)}`}
+          styleName={`${(isDataScience ? 'data_science' : track.toLowerCase())} main-icon`}
+        >
+          {Abbreviation[track][subTrack]}
+        </a>
+      ) : (
+        <div
+          styleName={`${(isDataScience ? 'data_science' : track.toLowerCase())} main-icon`}
+        >
+          {Abbreviation[track][subTrack]}
+        </div>
+      )}
       <a href={`${TCO_URL}`}>
         <div styleName={tcoEligible ? `${(isDataScience ? 'data_science' : track.toLowerCase())} tco-icon` : 'hidden'}>
 TCO
@@ -32,6 +45,7 @@ TrackIcon.defaultProps = {
   isDataScience: false,
   MAIN_URL: config.URL.BASE,
   tcoEligible: '',
+  challengesUrl: '',
 };
 
 TrackIcon.propTypes = {
@@ -40,4 +54,5 @@ TrackIcon.propTypes = {
   track: PT.string.isRequired,
   subTrack: PT.string.isRequired,
   MAIN_URL: PT.string,
+  challengesUrl: PT.string,
 };

src/shared/components/TrackIcon/style.scss

@@ -7,10 +7,11 @@ $track-space-20: $base-unit * 4;
 $track-radius-4: $corner-radius * 2;
 
 .trackIcon {
-  display: inline-block;
+  display: flex;
   width: $base-unit * 6;
   height: $base-unit * 6;
   margin-right: $track-space-20;
+  flex-direction: column;
 
   @include sm {
     margin-right: $track-space-15;
@@ -25,6 +26,8 @@ $track-radius-4: $corner-radius * 2;
     padding: $track-code-pad - 1 0 $track-code-pad;
     border-radius: $corner-radius;
     cursor: pointer;
+    width: 100%;
+    height: 100%;
 
     &.design,
     &.generic {

src/shared/components/challenge-detail/Header/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /**
  * Challenge header component.
  * This component renders all other child components part of the header.
@@ -47,6 +48,8 @@ export default function ChallengeHeader(props) {
     selectedView,
     showDeadlineDetail,
     hasFirstPlacement,
+    hasThriveArticles,
+    hasRecommendedChallenges,
     isMenuOpened,
     submissionEnded,
     mySubmissions,
@@ -244,15 +247,51 @@ export default function ChallengeHeader(props) {
             <h1 styleName="challenge-header">
               {name}
             </h1>
-            <ChallengeTags
-              subTrack={subTrack}
-              track={trackLower}
-              challengesUrl={challengesUrl}
-              challengeSubtracksMap={challengeSubtracksMap}
-              events={eventNames}
-              technPlatforms={miscTags}
-              setChallengeListingFilter={setChallengeListingFilter}
-            />
+            <div styleName="tag-container">
+              <ChallengeTags
+                subTrack={subTrack}
+                track={trackLower}
+                challengesUrl={challengesUrl}
+                challengeSubtracksMap={challengeSubtracksMap}
+                events={eventNames}
+                technPlatforms={miscTags}
+                setChallengeListingFilter={setChallengeListingFilter}
+              />
+              {(hasRecommendedChallenges || hasThriveArticles) && (
+                <div styleName="recommend-container">
+                  {hasRecommendedChallenges && (
+                    <div
+                      styleName="recommend-tag link"
+                      role="button"
+                      tabIndex={0}
+                      onClick={
+                        () => {
+                          document.getElementById('recommendedActiveChallenges').scrollIntoView();
+                        }}
+                    >
+                      Recommended Challenges
+                    </div>
+                  )}
+
+                  {hasRecommendedChallenges && hasThriveArticles && (
+                    <div styleName="recommend-tag separator" />
+                  )}
+
+                  {hasThriveArticles && (
+                    <div
+                      styleName="recommend-tag link"
+                      role="button"
+                      tabIndex={0}
+                      onClick={
+                        () => {
+                          document.getElementById('recommendedThriveArticles').scrollIntoView();
+                        }}
+                    >Recommended THRIVE Articles
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>
         <div styleName="prizes-ops-container">
@@ -420,6 +459,8 @@ Show Deadlines
 ChallengeHeader.defaultProps = {
   checkpoints: {},
   isMenuOpened: false,
+  hasThriveArticles: false,
+  hasRecommendedChallenges: false,
 };
 
 ChallengeHeader.propTypes = {
@@ -449,6 +490,8 @@ ChallengeHeader.propTypes = {
   }).isRequired,
   challengesUrl: PT.string.isRequired,
   hasRegistered: PT.bool.isRequired,
+  hasThriveArticles: PT.bool,
+  hasRecommendedChallenges: PT.bool,
   submissionEnded: PT.bool.isRequired,
   numWinners: PT.number.isRequired,
   onSelectorClicked: PT.func.isRequired,