Merge pull request #5900 from topcoder-platform/feature/recommended-challenges-update

recommended challenge bucket update

Author: luizrrodrigues

.circleci/config.yml

@@ -343,6 +343,7 @@ workflows:
             branches:
               only:
                 - develop
+                - feature/recommended-challenges-update
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -371,6 +372,7 @@ workflows:
             branches:
               only:
                 - develop
+                - feature/recommended-challenges-update
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration

package.json

@@ -150,7 +150,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.2.1",
+    "topcoder-react-lib": "1000.28.3",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/assets/images/icon-not-found.svg

@@ -24,7 +24,7 @@ $down-arrow-size: $base-unit;
     font-size: 13px;
     line-height: 13px;
     margin: 0;
-    padding: 0 0 0 10px;
+    padding: 4.5px 0 4.5px 10px;
     border: none;
     text-transform: none;
   }

src/shared/components/SortingSelectBar/style.scss

@@ -49,7 +49,7 @@ function ChallengeCard({
 
   const registrationPhase = (challenge.phases || []).filter(phase => phase.name === 'Registration')[0];
   const isRegistrationOpen = registrationPhase ? registrationPhase.isOpen : false;
-  const isRecommendedChallenge = challenge.jaccard_index;
+  const isRecommendedChallenge = !!challenge.jaccard_index;
 
   return (
     <div ref={domRef} styleName="challengeCard">

src/shared/components/challenge-listing/ChallengeCard/index.jsx

@@ -306,7 +306,7 @@ export default function FiltersPanel({
 
   const recommendedCheckboxTip = (
     <div styleName="tctooltiptext">
-      <p>Shows available challenges <br /> that match your skills</p>
+      <p>Show the best challenges for you.</p>
     </div>
   );
 

src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx

@@ -9,7 +9,7 @@ import PT from 'prop-types';
 // import qs from 'qs';
 import React, { useRef } from 'react';
 // import { config } from 'topcoder-react-utils';
-import Sort, { SORTS } from 'utils/challenge-listing/sort';
+import Sort from 'utils/challenge-listing/sort';
 import {
   NO_LIVE_CHALLENGES_CONFIG, BUCKETS, BUCKET_DATA, isRecommendedChallengeType,
 } from 'utils/challenge-listing/buckets';
@@ -18,6 +18,7 @@ import Waypoint from 'react-waypoint';
 // import { challenge as challengeUtils } from 'topcoder-react-lib';
 import CardPlaceholder from '../../placeholders/ChallengeCard';
 import ChallengeCard from '../../ChallengeCard';
+import NoRecommenderChallengeCard from '../../NoRecommenderChallengeCard';
 import './style.scss';
 
 // const COLLAPSED_SIZE = 10;
@@ -53,9 +54,6 @@ export default function Bucket({
   isLoggedIn,
   setSearchText,
 }) {
-  const activeBucketData = isRecommendedChallengeType(bucket, filterState)
-    ? [SORTS.BEST_MATCH] : BUCKET_DATA[bucket].sorts.filter(item => item !== 'bestMatch');
-
   const refs = useRef([]);
   refs.current = [];
   const addToRefs = (el) => {
@@ -180,33 +178,50 @@ export default function Bucket({
   //   // instead of waiting for scrolling to hit the react-waypoint to do the loadMore
   //   loadMore();
   // }
-
+  const isRecommended = isRecommendedChallengeType(bucket, filterState);
+  const isHighestPaying = isRecommended && _.sumBy(filteredChallenges, 'jaccard_index') === 0;
+  const sectionTile = isHighestPaying ? 'HIGHEST PAYING OPEN CHALLENGES' : 'Recommended Open Challenges';
   return (
     // challenges.length !== 0
     // && (
-    <div styleName="bucket">
-      <SortingSelectBar
-        onSelect={setSort}
-        options={
-          activeBucketData.map(item => ({
-            label: Sort[item].name,
-            value: item,
-          }))
-        }
-        title={BUCKET_DATA[bucket].name}
-        value={{
-          label: Sort[activeSort].name,
-          value: activeSort,
-        }}
-      />
-      {cards}
+    <div>
       {
-        !expanding && !expandable && loadMore && !loading && activeBucket === bucket ? (
-          <Waypoint onEnter={loadMore} />
-        ) : null
+        isHighestPaying && (!loading || filteredChallenges.length > 0)
+          && <NoRecommenderChallengeCard />
       }
-      {placeholders}
-      {
+      <div styleName="bucket">
+        {
+          isRecommended
+            ? filteredChallenges.length > 0 && (
+              <SortingSelectBar
+                title={sectionTile}
+              />
+            )
+            : (
+              <SortingSelectBar
+                onSelect={setSort}
+                options={
+                  BUCKET_DATA[bucket].sorts.map(item => ({
+                    label: Sort[item].name,
+                    value: item,
+                  }))
+                }
+                title={BUCKET_DATA[bucket].name}
+                value={{
+                  label: Sort[activeSort].name,
+                  value: activeSort,
+                }}
+              />
+            )
+        }
+        {cards}
+        {
+          !expanding && !expandable && loadMore && !loading && activeBucket === bucket ? (
+            <Waypoint onEnter={loadMore} />
+          ) : null
+        }
+        {placeholders}
+        {
       // (expandable || loadMore) && (expandable || !keepPlaceholders) && !loading && !expanded ? (
         (expanding || expandable) && !loading && loadMore && (expandable ? expanded : !expanded) ? (
           <a
@@ -225,7 +240,8 @@ export default function Bucket({
             View more challenges
           </a>
         ) : null
-      }
+        }
+      </div>
     </div>
     // )
   );

src/shared/components/challenge-listing/Listing/Bucket/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Link, config } from 'topcoder-react-utils';
+import './style.scss';
+import NotFoundIcon from 'assets/images/icon-not-found.svg';
+
+const base = config.URL.BASE;
+
+function NoRecommenderChallengeCard() {
+  return (
+    <div styleName="container">
+      <div styleName="icon">
+        <NotFoundIcon />
+      </div>
+      <span styleName="text-header">
+        NO VERIFIED SKILLS ON YOUR PROFILE
+      </span>
+      <span styleName="text">
+        Your recommended challenges are based on your Verified Skills.
+        Competing in <Link styleName="challenge-link" to={`${base}/challenges`}>challenges</Link> is a great way to earn them.
+      </span>
+    </div>
+  );
+}
+
+export default NoRecommenderChallengeCard;