Merge pull request #3617 from topcoder-platform/hot-fix-no-result

Hot fix no result

Author: sushilshinde

.circleci/config.yml

@@ -175,7 +175,7 @@ workflows:
             branches:
               only: 
                 - develop                
-                - hot-fix-challenge-details
+                - hot-fix-no-result
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      

__tests__/shared/components/challenge-listing/Listing/__snapshots__/Bucket.jsx.snap

@@ -7,6 +7,7 @@ exports[`Matches shallow shapshot 1`] = `
   location="/"
 >
   <Bucket
+    activeBucket=""
     bucket={
       Object {
         "filter": Object {
@@ -91,6 +92,7 @@ exports[`Matches shallow shapshot 2`] = `
   location="/"
 >
   <Bucket
+    activeBucket=""
     bucket={
       Object {
         "filter": Object {
@@ -239,6 +241,7 @@ exports[`Matches shallow shapshot 3`] = `
   location="/"
 >
   <Bucket
+    activeBucket=""
     bucket={
       Object {
         "filter": Object {

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

@@ -9,6 +9,7 @@ import PT from 'prop-types';
 import qs from 'qs';
 import React from 'react';
 import Sort from 'utils/challenge-listing/sort';
+import { NO_LIVE_CHALLENGES_CONFIG, BUCKETS } from 'utils/challenge-listing/buckets';
 import SortingSelectBar from 'components/SortingSelectBar';
 import Waypoint from 'react-waypoint';
 import { challenge as challengeUtils } from 'topcoder-react-lib';
@@ -42,6 +43,7 @@ export default function Bucket({
   userHandle,
   expandedTags,
   expandTag,
+  activeBucket,
 }) {
   const filter = Filter.getFilterFunction(bucket.filter);
   const activeSort = sort || bucket.sorts[0];
@@ -67,7 +69,16 @@ export default function Bucket({
     }
   }
 
-  if (!filteredChallenges.length && !loadMore) return null;
+  if (!filteredChallenges.length && !loadMore) {
+    if (activeBucket === BUCKETS.ALL) {
+      return null;
+    }
+    return (
+      <div styleName="no-results">
+        {`${NO_LIVE_CHALLENGES_CONFIG[bucketId]}`}
+      </div>
+    );
+  }
 
   const cards = filteredChallenges.map(item => (
     <ChallengeCard
@@ -158,6 +169,7 @@ Bucket.defaultProps = {
   userHandle: '',
   expandedTags: [],
   expandTag: null,
+  activeBucket: '',
 };
 
 Bucket.propTypes = {
@@ -182,4 +194,5 @@ Bucket.propTypes = {
   userHandle: PT.string,
   expandedTags: PT.arrayOf(PT.number),
   expandTag: PT.func,
+  activeBucket: PT.string,
 };

src/shared/components/challenge-listing/Listing/Bucket/style.scss

@@ -31,3 +31,12 @@
   border: 3px solid #79a3ef;
   border-radius: 4px;
 }
+
+.no-results {
+  @include tc-label-lg;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $base-unit * 5;
+}

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

@@ -6,11 +6,16 @@ import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { connect } from 'react-redux';
-import { BUCKETS, getBuckets, isReviewOpportunitiesBucket } from 'utils/challenge-listing/buckets';
+import {
+  BUCKETS, getBuckets, isReviewOpportunitiesBucket, NO_LIVE_CHALLENGES_CONFIG,
+} from 'utils/challenge-listing/buckets';
+import { challenge as challengeUtils } from 'topcoder-react-lib';
 import Bucket from './Bucket';
 import ReviewOpportunityBucket from './ReviewOpportunityBucket';
 import './style.scss';
 
+const Filter = challengeUtils.filter;
+
 function Listing({
   activeBucket,
   auth,
@@ -39,6 +44,17 @@ function Listing({
   expandTag,
 }) {
   const buckets = getBuckets(_.get(auth.user, 'handle'));
+  const isChallengesAvailable = (bucket) => {
+    const filter = Filter.getFilterFunction(buckets[bucket].filter);
+    const clonedChallenges = _.clone(challenges);
+    const filteredChallenges = [];
+    for (let i = 0; i < clonedChallenges.length; i += 1) {
+      if (filter(clonedChallenges[i])) {
+        filteredChallenges.push(clonedChallenges[i]);
+      }
+    }
+    return filteredChallenges.length > 0;
+  };
   const getBucket = (bucket, expanded = false) => {
     let keepPlaceholders = false;
     let loading;
@@ -96,6 +112,7 @@ function Listing({
             setSort={sort => setSort(bucket, sort)}
             sort={sorts[bucket]}
             userHandle={_.get(auth, 'user.handle')}
+            activeBucket={activeBucket}
           />
         )
     );
@@ -110,6 +127,20 @@ function Listing({
     );
   }
 
+  let isFilled = isChallengesAvailable(BUCKETS.OPEN_FOR_REGISTRATION)
+  || isChallengesAvailable(BUCKETS.ONGOING);
+  if (auth.user) {
+    isFilled = isFilled || isChallengesAvailable(BUCKETS.MY);
+  }
+  if (!isFilled) {
+    return (
+      <div styleName="challengeCardContainer">
+        <div styleName="no-results">
+          {`${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`}
+        </div>
+      </div>
+    );
+  }
   return (
     <div styleName="challengeCardContainer">
       {preListingMsg}

src/shared/components/challenge-listing/Listing/style.scss

@@ -40,4 +40,14 @@
     padding-top: $base-unit;
     margin: 0;
   }
+
+  .no-results {
+    @include tc-label-lg;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $base-unit * 5;
+    border-radius: $corner-radius;
+  }
 }

src/shared/utils/challenge-listing/buckets.js

@@ -119,6 +119,16 @@ const BUCKET_DATA = {
   },
 };
 
+export const NO_LIVE_CHALLENGES_CONFIG = {
+  [BUCKETS.ALL]: 'No Live Challenges found in All Challenges',
+  [BUCKETS.MY]: 'No challenges found in My Challenges',
+  [BUCKETS.OPEN_FOR_REGISTRATION]: 'No challenges found in Open for Registration',
+  [BUCKETS.ONGOING]: 'No challenges found in Ongoing Challenges',
+  [BUCKETS.PAST]: 'No challenges found in Past',
+  [BUCKETS.SAVED_FILTER]: 'No challenges found in Saved filter Challenges',
+  [BUCKETS.UPCOMING]: 'No challenges found in Upcoming Challenges',
+};
+
 /**
  * Returns configuration of all possible challenge buckets.
  * @param {String} userHandle Handle of the authenticated