filter update: fix issue #5068

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

@@ -48,6 +48,7 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
       loadMoreActive={null}
       loadMoreAll={null}
       loadMoreMy={null}
+      loadMoreMyPast={null}
       loadMoreOnGoing={null}
       loadMoreOpenForRegistration={null}
       loadMorePast={null}
@@ -115,6 +116,7 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
       loadMoreActive={null}
       loadMoreAll={null}
       loadMoreMy={null}
+      loadMoreMyPast={null}
       loadMoreOnGoing={null}
       loadMoreOpenForRegistration={null}
       loadMorePast={null}

package.json

@@ -143,7 +143,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": "1000.26.0",
+    "topcoder-react-lib": "1000.26.1",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

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

@@ -284,16 +284,14 @@ function getAllChallengesDone(uuid, page, backendFilter, tokenV3, frontFilter =
     backendFilter,
     frontFilter: {
       ...frontFilter,
+      status: 'Active',
       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,

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

@@ -14,7 +14,7 @@ $challenge-radius-4: $corner-radius * 2;
   padding: 0 $base-unit * 3;
 
   @media (max-width: #{$screen-lg - 1px}) {
-    display: none;
+    padding: 0 $base-unit * 2;
   }
 }
 

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

@@ -58,6 +58,7 @@ export default function FiltersPanel({
   selectCommunity,
   // selectedCommunityId,
   setFilterState,
+  setSearchText,
   // validKeywords,
   validTypes,
   // isSavingFilter,
@@ -340,19 +341,13 @@ export default function FiltersPanel({
                           styleName="input-control"
                           name="past-period"
                           id={range.label}
-                          defaultChecked={range.isCustom
-                            ? (
-                              _.every(staticRanges, r => !r.isSelected({
-                                startDate: filterState.endDateStart,
-                                endDate: filterState.startDateEnd,
-                              }))
-                              && (!!filterState.endDateStart || !!filterState.startDateEnd)
-                            ) : (
-                              range.isSelected({
-                                startDate: filterState.endDateStart,
-                                endDate: filterState.startDateEnd,
-                              })
-                            )
+                          value={range.label}
+                          checked={range.isCustom
+                            ? filterState.customDate
+                            : !filterState.customDate && range.isSelected({
+                              startDate: filterState.endDateStart,
+                              endDate: filterState.startDateEnd,
+                            })
                           }
                           onChange={() => {
                             if (range.isCustom) {
@@ -561,9 +556,10 @@ export default function FiltersPanel({
               endDateStart: null,
               startDateEnd: null,
               reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
-              customDate: true,
+              customDate: false,
             });
             selectCommunity(defaultCommunityId);
+            setSearchText('');
             // localStorage.setItem('trackStatus', JSON.stringify({}));
           }}
           size="sm"
@@ -605,6 +601,7 @@ FiltersPanel.propTypes = {
   selectCommunity: PT.func.isRequired,
   // selectedCommunityId: PT.string.isRequired,
   setFilterState: PT.func.isRequired,
+  setSearchText: PT.func.isRequired,
   // validKeywords: PT.arrayOf(PT.string).isRequired,
   validTypes: PT.arrayOf(PT.shape()).isRequired,
   onClose: PT.func,

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

@@ -284,7 +284,7 @@
           position: relative;
           display: inline-block;
           line-height: 30px;
-          width: 33%;
+          flex: 1 1 33%;
 
           .checkbox-label {
             display: inline-block;

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

@@ -25,6 +25,7 @@ function Listing({
   allMyChallengesLoaded,
   allMyPastChallengesLoaded,
   allChallengesLoaded,
+  allPastChallengesLoaded,
   allOpenForRegistrationChallengesLoaded,
   challenges,
   openForRegistrationChallenges,
@@ -94,7 +95,7 @@ function Listing({
       case BUCKETS.ALL_PAST:
         bucketChallenges = [].concat(pastChallenges);
         loading = loadingPastChallenges;
-        loadMore = loadMorePast;
+        loadMore = allPastChallengesLoaded ? null : loadMorePast;
         newExpanded = newExpanded || (+meta.pastChallengesCount === bucketChallenges.length);
         break;
       // case BUCKETS.PAST:
@@ -302,6 +303,7 @@ Listing.propTypes = {
   allMyChallengesLoaded: PT.bool.isRequired,
   allMyPastChallengesLoaded: PT.bool.isRequired,
   allChallengesLoaded: PT.bool.isRequired,
+  allPastChallengesLoaded: PT.bool.isRequired,
   allOpenForRegistrationChallengesLoaded: PT.bool.isRequired,
   challenges: PT.arrayOf(PT.shape()),
   openForRegistrationChallenges: PT.arrayOf(PT.shape()),
@@ -356,6 +358,7 @@ const mapStateToProps = (state) => {
     allMyChallengesLoaded: cl.allMyChallengesLoaded,
     allMyPastChallengesLoaded: cl.allMyPastChallengesLoaded,
     allChallengesLoaded: cl.allChallengesLoaded,
+    allPastChallengesLoaded: cl.allPastChallengesLoaded,
     allOpenForRegistrationChallengesLoaded: cl.allOpenForRegistrationChallengesLoaded,
     // pastSearchTimestamp: cl.pastSearchTimestamp,
     challengeTypes: cl.challengeTypes,

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

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import PT from 'prop-types';
-import _ from 'lodash';
+// import _ from 'lodash';
 import { BUCKETS } from 'utils/challenge-listing/buckets';
 import BucketSelector from './BucketSelector';
 // import FiltersEditor from './FiltersEditor';
@@ -39,7 +39,7 @@ export default function SideBarFilters({
   // dragState,
   // editSavedFiltersMode,
   // extraBucket,
-  filterState,
+  // filterState,
   // hideTcLinksInFooter,
   isAuth,
   // resetFilterName,
@@ -49,7 +49,7 @@ export default function SideBarFilters({
   // setEditSavedFiltersMode,
   // updateAllSavedFilters,
   // updateSavedFilter,
-  setFilter,
+  // setFilter,
   past,
   setPast,
   previousBucketOfActiveTab,
@@ -62,13 +62,6 @@ export default function SideBarFilters({
       return;
     }
     setPreviousBucketOfPastChallengesTab(activeBucket);
-    setFilter({
-      ..._.omit(filterState, 'status'),
-      endDateStart: null,
-      startDateEnd: null,
-      previousStartDate: filterState.endDateStart,
-      previousEndDate: filterState.startDateEnd,
-    });
     setPast(false);
     if (previousBucketOfActiveTab) {
       selectBucket(previousBucketOfActiveTab);
@@ -82,12 +75,6 @@ export default function SideBarFilters({
       return;
     }
     setPreviousBucketOfActiveTab(activeBucket);
-    setFilter({
-      ..._.omit(filterState, 'previousStartDate', 'previousEndDate'),
-      status: 'Completed',
-      endDateStart: filterState.previousStartDate,
-      startDateEnd: filterState.previousEndDate,
-    });
     setPast(true);
     if (previousBucketOfPastChallengesTab) {
       selectBucket(previousBucketOfPastChallengesTab);
@@ -195,7 +182,7 @@ SideBarFilters.propTypes = {
   // dragSavedFilterStart: PT.func.isRequired,
   // editSavedFiltersMode: PT.bool.isRequired,
   // extraBucket: PT.string,
-  filterState: PT.shape().isRequired,
+  // filterState: PT.shape().isRequired,
   // hideTcLinksInFooter: PT.bool,
   isAuth: PT.bool,
   // resetFilterName: PT.func.isRequired,
@@ -205,7 +192,7 @@ SideBarFilters.propTypes = {
   // setEditSavedFiltersMode: PT.func.isRequired,
   // updateAllSavedFilters: PT.func.isRequired,
   // updateSavedFilter: PT.func.isRequired,
-  setFilter: PT.func.isRequired,
+  // setFilter: PT.func.isRequired,
   past: PT.bool.isRequired,
   setPast: PT.func.isRequired,
   previousBucketOfActiveTab: PT.string,

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

@@ -120,6 +120,7 @@ export default function ChallengeListing(props) {
       loadingOnGoingChallenges={props.loadingOnGoingChallenges}
       loadingReviewOpportunities={props.loadingReviewOpportunities}
       loadMoreMy={props.loadMoreMy}
+      loadMoreMyPast={props.loadMoreMyPast}
       loadMoreAll={props.loadMoreAll}
       loadMoreOpenForRegistration={props.loadMoreOpenForRegistration}
       loadMoreOnGoing={props.loadMoreOnGoing}
@@ -197,6 +198,7 @@ ChallengeListing.defaultProps = {
   // extraBucket: null,
   // hideTcLinksInFooter: false,
   loadMoreMy: null,
+  loadMoreMyPast: null,
   loadMoreAll: null,
   loadMoreOpenForRegistration: null,
   loadMoreOnGoing: null,
@@ -245,6 +247,7 @@ ChallengeListing.propTypes = {
   loadingPastChallenges: PT.bool.isRequired,
   loadingReviewOpportunities: PT.bool.isRequired,
   loadMoreMy: PT.func,
+  loadMoreMyPast: PT.func,
   loadMoreAll: PT.func,
   loadMoreOpenForRegistration: PT.func,
   loadMoreOnGoing: PT.func,

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

@@ -59,14 +59,9 @@ export class Container extends React.Component {
     if (query.bucket) {
       if (query.bucket === BUCKETS.ALL_PAST || query.bucket === BUCKETS.MY_PAST) {
         setPast(true);
-        query.status = 'Completed';
       }
 
-      if (query.bucket === BUCKETS.REVIEW_OPPORTUNITIES) {
-        this.initialDefaultChallengeTypes = true;
-      }
-
-      if (!(query.bucket === BUCKETS.ALL_PAST || query.bucket === BUCKETS.MY_PAST)) {
+      if (query.bucket !== BUCKETS.ALL_PAST && query.bucket !== BUCKETS.MY_PAST) {
         delete query.endDateStart;
         delete query.startDateEnd;
       }
@@ -91,8 +86,8 @@ export class Container extends React.Component {
       this.initialDefaultChallengeTypes = true;
     }
 
-    if (query.name) {
-      setSearchText(query.name);
+    if (query.search) {
+      setSearchText(query.search);
     }
 
     if (!_.isEmpty(query)) {
@@ -108,11 +103,11 @@ export class Container extends React.Component {
     } = this.props;
 
     if (validTypes.length && !this.initialDefaultChallengeTypes) {
-      this.initialDefaultChallengeTypes = true;
       setFilterState({
         ..._.clone(filterState),
         types: validTypes.map(item => item.abbreviation),
       });
+      this.initialDefaultChallengeTypes = true;
     }
   }
 

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

@@ -37,6 +37,11 @@ const { mapToBackend } = challengeUtils.filter;
 let mounted = false;
 
 export class ListingContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.firstReload = false;
+  }
+
   componentDidMount() {
     const {
       activeBucket,
@@ -113,6 +118,7 @@ export class ListingContainer extends React.Component {
       dropOpenForRegistrationChallenges,
       dropPastChallenges,
       getPastChallenges,
+      past,
     } = this.props;
     const oldUserId = _.get(prevProps, 'auth.user.userId');
     const userId = _.get(this.props, 'auth.user.userId');
@@ -136,15 +142,19 @@ export class ListingContainer extends React.Component {
     // }
     const bucket = sortChangedBucket(sorts, prevProps.sorts);
     const f = this.getBackendFilter();
+    const fA = {
+      back: { ..._.clone(f.back), startDateEnd: null, endDateStart: null },
+      front: { ..._.clone(f.front), startDateEnd: null, endDateStart: null },
+    };
     if (bucket) {
       switch (bucket) {
         case BUCKETS.MY: {
           dropMyChallenges();
           getMyChallenges(
             0,
-            f.back,
+            fA.back,
             auth.tokenV3,
-            f.front,
+            fA.front,
           );
           break;
         }
@@ -162,19 +172,19 @@ export class ListingContainer extends React.Component {
           dropOpenForRegistrationChallenges();
           getOpenForRegistrationChallenges(
             0,
-            f.back,
+            fA.back,
             auth.tokenV3,
-            f.front,
+            fA.front,
           );
           break;
         }
         case BUCKETS.ONGOING: {
           dropActiveChallenges();
           getActiveChallenges(
             0,
-            f.back,
+            fA.back,
             auth.tokenV3,
-            f.front,
+            fA.front,
           );
           break;
         }
@@ -214,7 +224,19 @@ export class ListingContainer extends React.Component {
       }
       return;
     }
-    if (filterChanged(filter, prevProps.filter)) {
+    let reload;
+    if (!this.firstReload) {
+      reload = true;
+      this.firstReload = true;
+    } else if (prevProps.past === past) {
+      reload = past
+        ? filterChanged(filter, prevProps.filter)
+        : filterChanged(
+          _.omit(filter, 'startDateEnd', 'endDateStart'),
+          _.omit(prevProps.filter, 'startDateEnd', 'endDateStart'),
+        );
+    }
+    if (reload) {
       this.reloadChallenges();
     }
     setTimeout(() => {
@@ -738,6 +760,7 @@ ListingContainer.propTypes = {
   getTotalChallengesCount: PT.func.isRequired,
   // userChallenges: PT.arrayOf(PT.string),
   // getUserChallenges: PT.func.isRequired,
+  past: PT.bool.isRequired,
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -797,6 +820,7 @@ const mapStateToProps = (state, ownProps) => {
     expandedTags: cl.expandedTags,
     meta: cl.meta,
     // userChallenges: cl.userChallenges,
+    past: cl.sidebar.past,
   };
 };
 
@@ -877,7 +901,6 @@ function mapDispatchToProps(dispatch) {
     //   dispatch(a.getUserChallengesInit(uuid));
     //   dispatch(a.getUserChallengesDone(userId, tokenV3));
     // },
-    setPast: isPast => dispatch(sa.setPast(isPast)),
   };
 }