feat: past challenges implementation

__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap

@@ -28,6 +28,7 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
       expanding={false}
       filterState={Object {}}
       loadMoreActive={null}
+      loadMoreAll={null}
       loadMoreMy={null}
       loadMoreOnGoing={null}
       loadMoreOpenForRegistration={null}
@@ -93,6 +94,7 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
       expanding={false}
       filterState={Object {}}
       loadMoreActive={null}
+      loadMoreAll={null}
       loadMoreMy={null}
       loadMoreOnGoing={null}
       loadMoreOpenForRegistration={null}

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

@@ -87,6 +87,10 @@ function getMyChallengesInit(uuid, page, frontFilter) {
   return { uuid, page, frontFilter };
 }
 
+function getAllChallengesInit(uuid, page, frontFilter) {
+  return { uuid, page, frontFilter };
+}
+
 /**
  * Get all challenges and match with user challenges
  * @param {String} uuid progress id
@@ -270,6 +274,31 @@ function getMyChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {
   }));
 }
 
+function getAllChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter = {}) {
+  const { sorts, status } = frontFilter;
+  const filter = {
+    backendFilter,
+    frontFilter: {
+      ...frontFilter,
+      perPage: PAGE_SIZE,
+      page: page + 1,
+      sortBy: sorts[BUCKETS.ALL],
+      sortOrder: SORT[sorts[BUCKETS.ALL]].order,
+    },
+  };
+  delete filter.frontFilter.sorts;
+  if (status === 'All') {
+    delete filter.frontFilter.status;
+  }
+  const service = getService(tokenV3);
+  return service.getChallenges(filter).then(ch => ({
+    uuid,
+    allChallenges: ch.challenges,
+    meta: ch.meta,
+    frontFilter,
+  }));
+}
+
 function getTotalChallengesCountInit(uuid) {
   return { uuid };
 }
@@ -463,6 +492,7 @@ export default createActions({
     DROP_ACTIVE_CHALLENGES: _.noop,
     DROP_OPEN_FOR_REGISTRATION_CHALLENGES: _.noop,
     DROP_MY_CHALLENGES: _.noop,
+    DROP_ALL_CHALLENGES: _.noop,
     DROP_PAST_CHALLENGES: _.noop,
 
     // GET_ALL_ACTIVE_CHALLENGES_INIT: getAllActiveChallengesInit,
@@ -474,6 +504,9 @@ export default createActions({
     // GET_ALL_RECOMMENDED_CHALLENGES_INIT: getAllRecommendedChallengesInit,
     // GET_ALL_RECOMMENDED_CHALLENGES_DONE: getAllRecommendedChallengesDone,
 
+    GET_ALL_CHALLENGES_INIT: getAllChallengesInit,
+    GET_ALL_CHALLENGES_DONE: getAllChallengesDone,
+
     GET_ACTIVE_CHALLENGES_INIT: getActiveChallengesInit,
     GET_ACTIVE_CHALLENGES_DONE: getActiveChallengesDone,
 

src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx

@@ -30,6 +30,7 @@ export default function ChallengeFilters({
   auth,
   // isCardTypeSet,
   isReviewOpportunitiesBucket,
+  activeBucket,
   // saveFilter,
   searchText,
   selectCommunity,
@@ -170,6 +171,7 @@ export default function ChallengeFilters({
         isAuth={isAuth}
         auth={auth}
         isReviewOpportunitiesBucket={isReviewOpportunitiesBucket}
+        activeBucket={activeBucket}
         filterState={filterState}
         onClose={() => setExpanded(false)}
         // onSaveFilter={saveFilter}
@@ -211,6 +213,7 @@ ChallengeFilters.propTypes = {
   communityFilters: PT.arrayOf(PT.shape()).isRequired,
   communityName: PT.string,
   defaultCommunityId: PT.string.isRequired,
+  activeBucket: PT.string.isRequired,
   // challenges: PT.arrayOf(PT.shape()),
   expanded: PT.bool.isRequired,
   filterState: PT.shape().isRequired,

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

@@ -32,7 +32,7 @@ import Tooltip from 'components/Tooltip';
 import { config, Link } from 'topcoder-react-utils';
 import { COMPOSE, PRIORITY } from 'react-css-super-themr';
 import { REVIEW_OPPORTUNITY_TYPES } from 'utils/tc';
-import { isFilterEmpty } from 'utils/challenge-listing/buckets';
+import { BUCKETS, isFilterEmpty } from 'utils/challenge-listing/buckets';
 import CheckmarkIcon from './CheckmarkIcon';
 import DateRangePicker from '../DateRangePicker';
 import style from './style.scss';
@@ -49,6 +49,7 @@ export default function FiltersPanel({
   isAuth,
   auth,
   isReviewOpportunitiesBucket,
+  activeBucket,
   onClose,
   // onSaveFilter,
   selectCommunity,
@@ -66,6 +67,8 @@ export default function FiltersPanel({
     _.intersection(visitorGroupIds, communityGroupIds).length,
   );
 
+  const isAllBucket = activeBucket === BUCKETS.ALL;
+
   const getLabel = (community) => {
     const { communityName } = community;
     if (!isAuth) {
@@ -304,6 +307,28 @@ export default function FiltersPanel({
               </div>
             ) : null
           }
+          {/* Only shown when the All Challenges bucket is selected */}
+          { isAllBucket
+            ? (
+              <div styleName="filter status">
+                <label htmlFor="status-select" styleName="left-label">
+                  Status
+                  <input type="hidden" />
+                </label>
+                <Select
+                  placeholder="Select Status"
+                  id="status-select"
+                  onChange={(value) => {
+                    const status = value;
+                    setFilterState({ ..._.clone(filterState), status });
+                  }}
+                  options={['Active', 'Completed', 'All'].map(mapOps)}
+                  simpleValue
+                  value={filterState.status || 'Active'}
+                />
+              </div>
+            ) : null
+          }
           <div styleName="filter dates hidetwomonthdatepicker">
             <label htmlFor="date-range-picker-one-month">
               Date range
@@ -412,6 +437,7 @@ FiltersPanel.propTypes = {
     communityName: PT.string.isRequired,
   })).isRequired,
   defaultCommunityId: PT.string.isRequired,
+  activeBucket: PT.string.isRequired,
   filterState: PT.shape().isRequired,
   // challenges: PT.arrayOf(PT.shape()),
   hidden: PT.bool,

src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss

@@ -382,6 +382,32 @@ $panel-radius-4: $corner-radius * 2;
         }
       }
     }
+
+    &.status {
+      @include calc(width, '50% - 45px - (12px + 112px) * 2 - 96px');
+
+      order: 3; // Show after Date Picker when in lg screen mode
+
+      @include xs-to-sm {
+        margin-top: $panel-space-15;
+        width: 100%;
+      }
+
+      :global(.Select) {
+        z-index: 3;
+      }
+
+      margin-right: $panel-space-30;
+
+      :global(.Select-value) {
+        top: inherit;
+        background: $tc-white !important;
+        font-weight: 300;
+        font-size: 13px;
+        color: $tc-gray-50;
+        line-height: $panel-space-30 - 2;
+      }
+    }
   }
 }
 

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

@@ -23,10 +23,12 @@ function Listing({
   auth,
   allActiveChallengesLoaded,
   allMyChallengesLoaded,
+  allChallengesLoaded,
   allOpenForRegistrationChallengesLoaded,
   challenges,
   openForRegistrationChallenges,
   myChallenges,
+  allChallenges,
   // pastChallenges,
   challengeTypes,
   // userChallenges,
@@ -39,6 +41,8 @@ function Listing({
   loadingReviewOpportunities,
   loadingMyChallenges,
   loadMoreMy,
+  loadingAllChallenges,
+  loadMoreAll,
   loadingOpenForRegistrationChallenges,
   loadMoreOpenForRegistration,
   loadingOnGoingChallenges,
@@ -108,6 +112,12 @@ function Listing({
         loadMore = allActiveChallengesLoaded ? null : loadMoreOnGoing;
         newExpanded = newExpanded || (+meta.ongoingChallengesCount === bucketChallenges.length);
         break;
+      case BUCKETS.ALL:
+        bucketChallenges = [].concat(allChallenges);
+        loading = loadingAllChallenges;
+        loadMore = allChallengesLoaded ? null : loadMoreAll;
+        newExpanded = newExpanded || (+meta.allChallengesCount === bucketChallenges.length);
+        break;
       default:
         break;
     }
@@ -199,14 +209,15 @@ function Listing({
     || loadingOpenForRegistrationChallenges
     || loadingOnGoingChallenges;
   const placeholders = [];
-  if (challenges.length > 0) {
+  if (challenges.length > 0 || (activeBucket === BUCKETS.ALL && allChallenges.length > 0)) {
     return (
       <div styleName="challengeCardContainer">
         {preListingMsg}
-        {(auth.user && myChallenges.length > 0) ? getBucket(BUCKETS.MY) : null}
+        {/* (auth.user && myChallenges.length > 0) ? getBucket(BUCKETS.MY) : null */}
         {/* {extraBucket ? getBucket(extraBucket) : null} */}
-        {openForRegistrationChallenges.length > 0 && getBucket(BUCKETS.OPEN_FOR_REGISTRATION)}
+        {/* openForRegistrationChallenges.length > 0 && getBucket(BUCKETS.OPEN_FOR_REGISTRATION) */}
         {/* {getBucket(BUCKETS.ONGOING)} */}
+        {getBucket(BUCKETS.ALL)}
       </div>
     );
   }
@@ -233,6 +244,7 @@ Listing.defaultProps = {
   challenges: [],
   openForRegistrationChallenges: [],
   myChallenges: [],
+  allChallenges: [],
   // pastChallenges: [],
   challengeTypes: [],
   communityName: null,
@@ -244,6 +256,7 @@ Listing.defaultProps = {
   // loadMorePast: null,
   loadMoreReviewOpportunities: null,
   loadMoreMy: null,
+  loadMoreAll: null,
   loadMoreOpenForRegistration: null,
   loadMoreOnGoing: null,
   preListingMsg: null,
@@ -267,10 +280,12 @@ Listing.propTypes = {
   }).isRequired,
   allActiveChallengesLoaded: PT.bool.isRequired,
   allMyChallengesLoaded: PT.bool.isRequired,
+  allChallengesLoaded: PT.bool.isRequired,
   allOpenForRegistrationChallengesLoaded: PT.bool.isRequired,
   challenges: PT.arrayOf(PT.shape()),
   openForRegistrationChallenges: PT.arrayOf(PT.shape()),
   myChallenges: PT.arrayOf(PT.shape()),
+  allChallenges: PT.arrayOf(PT.shape()),
   // pastChallenges: PT.arrayOf(PT.shape()),
   challengeTypes: PT.arrayOf(PT.shape()),
   challengesUrl: PT.string.isRequired,
@@ -282,10 +297,12 @@ Listing.propTypes = {
   keepPastPlaceholders: PT.bool.isRequired,
   // loadingPastChallenges: PT.bool.isRequired,
   loadingMyChallenges: PT.bool.isRequired,
+  loadingAllChallenges: PT.bool.isRequired,
   loadingOpenForRegistrationChallenges: PT.bool.isRequired,
   loadingOnGoingChallenges: PT.bool.isRequired,
   loadingReviewOpportunities: PT.bool.isRequired,
   loadMoreMy: PT.func,
+  loadMoreAll: PT.func,
   loadMoreOnGoing: PT.func,
   loadMoreOpenForRegistration: PT.func,
   // loadMorePast: PT.func,
@@ -313,6 +330,7 @@ const mapStateToProps = (state) => {
     // allActiveChallengesLoaded: cl.allActiveChallengesLoaded,
     allActiveChallengesLoaded: cl.allActiveChallengesLoaded,
     allMyChallengesLoaded: cl.allMyChallengesLoaded,
+    allChallengesLoaded: cl.allChallengesLoaded,
     allOpenForRegistrationChallengesLoaded: cl.allOpenForRegistrationChallengesLoaded,
     // pastSearchTimestamp: cl.pastSearchTimestamp,
     challengeTypes: cl.challengeTypes,

src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/index.jsx

@@ -68,7 +68,7 @@ function Bucket({
     return (
       <div styleName="active bucket">
         {BUCKET_DATA[bucket].name}
-        {countEl}
+        {bucket !== BUCKETS.ALL && countEl}
         {/* {error} */}
       </div>
     );
@@ -83,7 +83,7 @@ function Bucket({
       tabIndex={0}
     >
       {BUCKET_DATA[bucket].name}
-      {countEl}
+      {bucket !== BUCKETS.ALL && countEl}
       {/* {error} */}
     </div>
   );

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

@@ -31,6 +31,7 @@ export default function ChallengeListing(props) {
     challenges,
     openForRegistrationChallenges,
     myChallenges,
+    allChallenges,
     // pastChallenges,
     // communityFilter,
     communityName,
@@ -100,6 +101,7 @@ export default function ChallengeListing(props) {
       challenges={challenges}
       openForRegistrationChallenges={openForRegistrationChallenges}
       myChallenges={myChallenges}
+      allChallenges={allChallenges}
       // pastChallenges={pastChallenges}
       challengesUrl={props.challengesUrl}
       communityName={props.communityName}
@@ -110,10 +112,12 @@ export default function ChallengeListing(props) {
       keepPastPlaceholders={keepPastPlaceholders}
       // loadingPastChallenges={props.loadingPastChallenges}
       loadingMyChallenges={props.loadingMyChallenges}
+      loadingAllChallenges={props.loadingAllChallenges}
       loadingOpenForRegistrationChallenges={props.loadingOpenForRegistrationChallenges}
       loadingOnGoingChallenges={props.loadingOnGoingChallenges}
       loadingReviewOpportunities={props.loadingReviewOpportunities}
       loadMoreMy={props.loadMoreMy}
+      loadMoreAll={props.loadMoreAll}
       loadMoreOpenForRegistration={props.loadMoreOpenForRegistration}
       loadMoreOnGoing={props.loadMoreOnGoing}
       // loadMorePast={props.loadMorePast}
@@ -180,6 +184,7 @@ ChallengeListing.defaultProps = {
   // extraBucket: null,
   hideTcLinksInFooter: false,
   loadMoreMy: null,
+  loadMoreAll: null,
   loadMoreOpenForRegistration: null,
   loadMoreOnGoing: null,
   // loadMorePast: null,
@@ -203,6 +208,7 @@ ChallengeListing.propTypes = {
   challenges: PT.arrayOf(PT.shape()).isRequired,
   openForRegistrationChallenges: PT.arrayOf(PT.shape()).isRequired,
   myChallenges: PT.arrayOf(PT.arrayOf()).isRequired,
+  allChallenges: PT.arrayOf(PT.arrayOf()).isRequired,
   // pastChallenges: PT.arrayOf(PT.arrayOf()).isRequired,
   challengesUrl: PT.string.isRequired,
   // communityFilter: PT.shape(),
@@ -218,11 +224,13 @@ ChallengeListing.propTypes = {
   // lastUpdateOfActiveChallenges: PT.number.isRequired,
   // loadingChallenges: PT.bool.isRequired,
   loadingMyChallenges: PT.bool.isRequired,
+  loadingAllChallenges: PT.bool.isRequired,
   loadingOpenForRegistrationChallenges: PT.bool.isRequired,
   loadingOnGoingChallenges: PT.bool.isRequired,
   // loadingPastChallenges: PT.bool.isRequired,
   loadingReviewOpportunities: PT.bool.isRequired,
   loadMoreMy: PT.func,
+  loadMoreAll: PT.func,
   loadMoreOpenForRegistration: PT.func,
   loadMoreOnGoing: PT.func,
   // loadMorePast: PT.func,

src/shared/containers/challenge-listing/FilterPanel.jsx

@@ -123,6 +123,7 @@ export class Container extends React.Component {
         }}
         // isSavingFilter={isSavingFilter}
         isReviewOpportunitiesBucket={isForReviewOpportunities}
+        activeBucket={activeBucket}
       />
     );
   }