From 3c78567d825ae76cab413cfe5db47fb44f0555d6 Mon Sep 17 00:00:00 2001
From: nqv <nqvietit@gmail.com>
Date: Thu, 10 Dec 2020 16:28:46 +0700
Subject: [PATCH 1/3] fixed issue's comments #5068#issuecomment-741904592,
 #5068#issuecomment-741600474, #5068#issuecomment-741596441 and hide the
 sub-community select box for the review bucket

---
 .../__snapshots__/index.jsx.snap              | 26 +-----
 .../components/challenge-listing/index.jsx    |  3 +
 .../reducers/challenge-listing/sidebar.js     |  1 -
 .../actions/challenge-listing/sidebar.js      |  2 -
 .../Filters/FiltersPanel/index.jsx            | 92 ++++++++++---------
 .../Filters/FiltersPanel/style.scss           |  4 +-
 .../Listing/Bucket/index.jsx                  |  8 +-
 .../challenge-listing/Sidebar/index.jsx       | 10 +-
 .../components/challenge-listing/index.jsx    | 22 +----
 .../containers/challenge-detail/index.jsx     | 16 +++-
 .../challenge-listing/FilterPanel.jsx         | 29 +++---
 .../challenge-listing/Listing/index.jsx       | 25 +----
 .../containers/challenge-listing/Sidebar.jsx  | 11 +--
 .../reducers/challenge-listing/sidebar.js     | 11 ---
 src/shared/utils/challenge-listing/buckets.js | 62 ++++---------
 15 files changed, 121 insertions(+), 201 deletions(-)

diff --git a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap b/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap
index 8b59c41356..351bba4c01 100644
--- a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap
@@ -24,18 +24,6 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
         setFilterState={[MockFunction]}
       />
     </div>
-    <div
-      className="src-shared-components-challenge-listing-___style__sidebar-container-desktop___h0bz6"
-    >
-      <Connect(SidebarContainer)
-        expanding={false}
-      />
-      <Connect(Container)
-        communityName={null}
-        isAuth={false}
-        setFilterState={[MockFunction]}
-      />
-    </div>
     <Connect(Listing)
       activeBucket="abc"
       auth={Object {}}
@@ -79,19 +67,6 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
   <div
     className="src-shared-components-challenge-listing-___style__tc-content-wrapper___1MqlF"
   >
-    <div
-      className="src-shared-components-challenge-listing-___style__sidebar-container-mobile___3e65d"
-    >
-      <Connect(SidebarContainer)
-        expanding={false}
-      />
-      <Connect(Container)
-        communityName={null}
-        hidden={true}
-        isAuth={false}
-        setFilterState={[MockFunction]}
-      />
-    </div>
     <div
       className="src-shared-components-challenge-listing-___style__sidebar-container-desktop___h0bz6"
     >
@@ -100,6 +75,7 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
       />
       <Connect(Container)
         communityName={null}
+        hidden={false}
         isAuth={false}
         setFilterState={[MockFunction]}
       />
diff --git a/__tests__/shared/components/challenge-listing/index.jsx b/__tests__/shared/components/challenge-listing/index.jsx
index 1556ed6005..90ff2557e8 100644
--- a/__tests__/shared/components/challenge-listing/index.jsx
+++ b/__tests__/shared/components/challenge-listing/index.jsx
@@ -43,6 +43,9 @@ describe('Matches shallow shapshot 1', () => {
 describe('Matches shallow shapshot 2', () => {
   beforeEach(() => {
     jest.resetModules();
+    jest.mock('react-responsive', () => ({
+      useMediaQuery: () => true,
+    }));
     ChallengeListing = require('components/challenge-listing').default;
   });
 
diff --git a/__tests__/shared/reducers/challenge-listing/sidebar.js b/__tests__/shared/reducers/challenge-listing/sidebar.js
index c95bcbc57d..8c304e5c1a 100644
--- a/__tests__/shared/reducers/challenge-listing/sidebar.js
+++ b/__tests__/shared/reducers/challenge-listing/sidebar.js
@@ -2,7 +2,6 @@ const defaultReducer = require('reducers/challenge-listing/sidebar').default;
 
 const expectedState = {
   activeBucket: 'openForRegistration',
-  past: false,
 };
 
 function testReducer(reducer) {
diff --git a/src/shared/actions/challenge-listing/sidebar.js b/src/shared/actions/challenge-listing/sidebar.js
index 2254de9e80..d126b08bc2 100644
--- a/src/shared/actions/challenge-listing/sidebar.js
+++ b/src/shared/actions/challenge-listing/sidebar.js
@@ -153,8 +153,6 @@ export default createActions({
 
       // UPDATE_ALL_SAVED_FILTERS: updateAllSavedFilters,
       // UPDATE_SAVED_FILTER: updateSavedFilter,
-
-      SET_PAST: isPast => ({ past: isPast }),
     },
   },
 });
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
index a5f2e8209a..5241b79eee 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
+++ b/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 { isFilterEmpty, isPastBucket } from 'utils/challenge-listing/buckets';
 import SwitchWithLabel from 'components/SwitchWithLabel';
 import { challenge as challengeUtils } from 'topcoder-react-lib';
 import { createStaticRanges } from 'utils/challenge-listing/date-range';
@@ -64,7 +64,6 @@ export default function FiltersPanel({
   // isSavingFilter,
   expanded,
   setExpanded,
-  past,
 }) {
   if (hidden && !expanded) {
     return (
@@ -226,7 +225,7 @@ export default function FiltersPanel({
       data: getLabel(community),
     }));
 
-  const disableClearFilterButtons = isFilterEmpty(filterState, past ? 'past' : '', activeBucket);
+  const disableClearFilterButtons = isFilterEmpty(filterState);
 
   // const mapOps = item => ({ label: item, value: item });
   const mapTypes = item => ({ label: item.name, value: item.abbreviation });
@@ -249,6 +248,7 @@ export default function FiltersPanel({
   };
 
   const staticRanges = createStaticRanges();
+  const past = isPastBucket(activeBucket);
 
   return (
     <div styleName="FiltersPanel">
@@ -495,47 +495,52 @@ export default function FiltersPanel({
           ) : null
         }
 
-        <div styleName="filter-row">
-          <div styleName="filter filter community">
-            <label htmlFor="community-select" styleName="label">
-              Sub community
-              <input type="hidden" />
-            </label>
-            <Select
-              autoBlur
-              clearable={false}
-              id="community-select"
-              // onChange={selectCommunity}
-              onChange={(value) => {
-                if (value && value.startsWith('event_')) {
-                  const event = value.split('_')[1];
-                  setFilterState({
-                    ..._.clone(filterState),
-                    events: event === '' ? [] : [event],
-                    groups: [],
-                  });
-                } else {
-                  const group = value;
-                  setFilterState({
-                    ..._.clone(filterState),
-                    groups: group === '' ? [] : [group],
-                    events: [],
-                  });
-                }
-                // setFilterState({ ..._.clone(filterState), groups: [value] });
-              }}
-              options={communityOps}
-              simpleValue
-              value={getCommunityOption()}
-              valueRenderer={option => (
-                <span styleName="active-community">
-                  {option.name}
-                </span>
-              )}
-            />
-          </div>
-        </div>
+        { !isReviewOpportunitiesBucket
+          && (
+            <div styleName="filter-row">
+              <div styleName="filter filter community">
+                <label htmlFor="community-select" styleName="label">
+                  Sub community
+                  <input type="hidden" />
+                </label>
+                <Select
+                  autoBlur
+                  clearable={false}
+                  id="community-select"
+                  // onChange={selectCommunity}
+                  onChange={(value) => {
+                    if (value && value.startsWith('event_')) {
+                      const event = value.split('_')[1];
+                      setFilterState({
+                        ..._.clone(filterState),
+                        events: event === '' ? [] : [event],
+                        groups: [],
+                      });
+                    } else {
+                      const group = value;
+                      setFilterState({
+                        ..._.clone(filterState),
+                        groups: group === '' ? [] : [group],
+                        events: [],
+                      });
+                    }
+                    // setFilterState({ ..._.clone(filterState), groups: [value] });
+                  }}
+                  options={communityOps}
+                  simpleValue
+                  value={getCommunityOption()}
+                  valueRenderer={option => (
+                    <span styleName="active-community">
+                      {option.name}
+                    </span>
+                  )}
+                />
+              </div>
+            </div>
+          )
+        }
       </div>
+
       <div styleName="buttons">
         <Button
           composeContextTheme={COMPOSE.SOFT}
@@ -607,5 +612,4 @@ FiltersPanel.propTypes = {
   onClose: PT.func,
   expanded: PT.bool.isRequired,
   setExpanded: PT.func.isRequired,
-  past: PT.bool.isRequired,
 };
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
index 295d9a8519..b0bb583e25 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
@@ -119,8 +119,8 @@
       display: block;
       color: $tc-black;
       font-size: 11px;
-      line-height: 13px;
-      margin-bottom: 4px;
+      line-height: 15px;
+      margin-bottom: 8px;
     }
 
     @include xs-to-md {
diff --git a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx
index f48d1763fa..9ae33b87fc 100644
--- a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx
+++ b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx
@@ -125,7 +125,13 @@ export default function Bucket({
       challengeType={_.find(challengeTypes, { name: challenge.type })}
       challengesUrl={challengesUrl}
       newChallengeDetails={newChallengeDetails}
-      onTechTagClicked={tag => setFilterState({ ..._.clone(filterState), tags: [tag], types: [] })}
+      onTechTagClicked={(tag) => {
+        setFilterState({
+          ..._.clone(filterState),
+          tags: [tag],
+          types: challengeTypes.map(type => type.abbreviation),
+        });
+      }}
       openChallengesInNewTabs={openChallengesInNewTabs}
       prizeMode={prizeMode}
       key={challenge.id}
diff --git a/src/shared/components/challenge-listing/Sidebar/index.jsx b/src/shared/components/challenge-listing/Sidebar/index.jsx
index ba2fa0dcbd..b6d50b915d 100644
--- a/src/shared/components/challenge-listing/Sidebar/index.jsx
+++ b/src/shared/components/challenge-listing/Sidebar/index.jsx
@@ -18,7 +18,7 @@
 import React from 'react';
 import PT from 'prop-types';
 // import _ from 'lodash';
-import { BUCKETS } from 'utils/challenge-listing/buckets';
+import { BUCKETS, isPastBucket } from 'utils/challenge-listing/buckets';
 import BucketSelector from './BucketSelector';
 // import FiltersEditor from './FiltersEditor';
 // import Footer from './Footer';
@@ -50,19 +50,18 @@ export default function SideBarFilters({
   // updateAllSavedFilters,
   // updateSavedFilter,
   // setFilter,
-  past,
-  setPast,
   previousBucketOfActiveTab,
   previousBucketOfPastChallengesTab,
   setPreviousBucketOfActiveTab,
   setPreviousBucketOfPastChallengesTab,
 }) {
+  const past = isPastBucket(activeBucket);
+
   const onActiveClick = () => {
     if (!past) {
       return;
     }
     setPreviousBucketOfPastChallengesTab(activeBucket);
-    setPast(false);
     if (previousBucketOfActiveTab) {
       selectBucket(previousBucketOfActiveTab);
     } else {
@@ -75,7 +74,6 @@ export default function SideBarFilters({
       return;
     }
     setPreviousBucketOfActiveTab(activeBucket);
-    setPast(true);
     if (previousBucketOfPastChallengesTab) {
       selectBucket(previousBucketOfPastChallengesTab);
     } else {
@@ -193,8 +191,6 @@ SideBarFilters.propTypes = {
   // updateAllSavedFilters: PT.func.isRequired,
   // updateSavedFilter: PT.func.isRequired,
   // setFilter: PT.func.isRequired,
-  past: PT.bool.isRequired,
-  setPast: PT.func.isRequired,
   previousBucketOfActiveTab: PT.string,
   previousBucketOfPastChallengesTab: PT.string,
   setPreviousBucketOfActiveTab: PT.func,
diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx
index eb58d5e3fb..5adc73b831 100644
--- a/src/shared/components/challenge-listing/index.jsx
+++ b/src/shared/components/challenge-listing/index.jsx
@@ -13,6 +13,7 @@ import PT from 'prop-types';
 import Sidebar from 'containers/challenge-listing/Sidebar';
 // import { isReviewOpportunitiesBucket } from 'utils/challenge-listing/buckets';
 // import { config } from 'topcoder-react-utils';
+import { useMediaQuery } from 'react-responsive';
 
 import Listing from './Listing';
 // import ChallengeCardPlaceholder from './placeholders/ChallengeCard';
@@ -147,6 +148,8 @@ export default function ChallengeListing(props) {
   );
   // }
 
+  const desktop = useMediaQuery({ minWidth: 1024 });
+
   return (
     <div styleName="ChallengeFiltersExample" id="challengeFilterContainer">
       <ChallengeSearchBar
@@ -154,7 +157,7 @@ export default function ChallengeListing(props) {
       />
 
       <div styleName="tc-content-wrapper">
-        <div styleName="sidebar-container-mobile">
+        <div styleName={desktop ? 'sidebar-container-desktop' : 'sidebar-container-mobile'}>
           <Sidebar
             expanding={expanding}
           />
@@ -165,23 +168,8 @@ export default function ChallengeListing(props) {
             hideSrm={hideSrm}
             isAuth={Boolean(auth.user)}
             setFilterState={props.setFilterState}
-            hidden
-          />
-        </div>
-
-        <div styleName="sidebar-container-desktop">
-          <Sidebar
-            expanding={expanding}
+            hidden={!desktop}
           />
-
-          <FilterPanel
-            communityName={communityName}
-            defaultCommunityId={defaultCommunityId}
-            hideSrm={hideSrm}
-            isAuth={Boolean(auth.user)}
-            setFilterState={props.setFilterState}
-          />
-
         </div>
 
         {challengeCardContainer}
diff --git a/src/shared/containers/challenge-detail/index.jsx b/src/shared/containers/challenge-detail/index.jsx
index fc53688834..d83434ac2c 100644
--- a/src/shared/containers/challenge-detail/index.jsx
+++ b/src/shared/containers/challenge-detail/index.jsx
@@ -877,10 +877,14 @@ const mapDispatchToProps = (dispatch) => {
           return challengeDetails;
         });
     },
-    setChallengeListingFilter: (filter) => {
+    setChallengeListingFilter: (filter, stateProps) => {
       const cl = challengeListingActions.challengeListing;
       const cls = challengeListingSidebarActions.challengeListing.sidebar;
-      const newFilter = _.assign({}, { types: [], tags: [] }, filter);
+      const newFilter = _.assign(
+        {},
+        { types: stateProps.challengeTypesMap.map(type => type.abbreviation), tags: [] },
+        filter,
+      );
       dispatch(cls.selectBucket(BUCKETS.OPEN_FOR_REGISTRATION));
       dispatch(cl.setFilter(newFilter));
     },
@@ -943,9 +947,17 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...ownProps,
+  ...stateProps,
+  ...dispatchProps,
+  setChallengeListingFilter: filter => dispatchProps.setChallengeListingFilter(filter, stateProps),
+});
+
 const ChallengeDetailContainer = connect(
   mapStateToProps,
   mapDispatchToProps,
+  mergeProps,
 )(ChallengeDetailPageContainer);
 
 export default ChallengeDetailContainer;
diff --git a/src/shared/containers/challenge-listing/FilterPanel.jsx b/src/shared/containers/challenge-listing/FilterPanel.jsx
index 47c26fe9c9..045710dd89 100644
--- a/src/shared/containers/challenge-listing/FilterPanel.jsx
+++ b/src/shared/containers/challenge-listing/FilterPanel.jsx
@@ -4,12 +4,12 @@
 
 import actions from 'actions/challenge-listing/filter-panel';
 import challengeListingActions from 'actions/challenge-listing';
-import sidebarActions from 'actions/challenge-listing/sidebar';
 import communityActions from 'actions/tc-communities';
 import shortId from 'shortid';
 import FilterPanel from 'components/challenge-listing/Filters/FiltersPanel';
 import PT from 'prop-types';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { BUCKETS, isReviewOpportunitiesBucket } from 'utils/challenge-listing/buckets';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -37,7 +37,6 @@ export class Container extends React.Component {
       communityList,
       getCommunityList,
       auth,
-      setPast,
       setSearchText,
     } = this.props;
 
@@ -57,15 +56,10 @@ export class Container extends React.Component {
     }
 
     if (query.bucket) {
-      if (query.bucket === BUCKETS.ALL_PAST || query.bucket === BUCKETS.MY_PAST) {
-        setPast(true);
-      }
-
       if (query.bucket !== BUCKETS.ALL_PAST && query.bucket !== BUCKETS.MY_PAST) {
         delete query.endDateStart;
         delete query.startDateEnd;
       }
-
       delete query.bucket;
     }
 
@@ -93,6 +87,9 @@ export class Container extends React.Component {
     if (!_.isEmpty(query)) {
       setFilterState(query);
     }
+
+    this.outlet = document.createElement('div');
+    document.body.appendChild(this.outlet);
   }
 
   componentDidUpdate() {
@@ -111,6 +108,10 @@ export class Container extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    this.outlet.parentElement.removeChild(this.outlet);
+  }
+
   render() {
     const {
       activeBucket,
@@ -132,7 +133,7 @@ export class Container extends React.Component {
 
     const isForReviewOpportunities = isReviewOpportunitiesBucket(activeBucket);
 
-    return (
+    const filterPanel = (
       <FilterPanel
         {...this.props}
         communityFilters={communityFilters2}
@@ -147,6 +148,12 @@ export class Container extends React.Component {
         onClose={onClose}
       />
     );
+
+    if (hidden) {
+      return expanded ? ReactDOM.createPortal(filterPanel, this.outlet) : filterPanel;
+    }
+
+    return filterPanel;
   }
 }
 
@@ -182,15 +189,12 @@ Container.propTypes = {
   hidden: PT.bool,
   onClose: PT.func.isRequired,
   validTypes: PT.arrayOf(PT.shape()).isRequired,
-  past: PT.bool.isRequired,
-  setPast: PT.func.isRequired,
   setSearchText: PT.func.isRequired,
 };
 
 function mapDispatchToProps(dispatch) {
   const a = actions.challengeListing.filterPanel;
   const cla = challengeListingActions.challengeListing;
-  const sba = sidebarActions.challengeListing.sidebar;
   return {
     ...bindActionCreators(a, dispatch),
     getTypes: () => {
@@ -209,14 +213,12 @@ function mapDispatchToProps(dispatch) {
     selectCommunity: id => dispatch(cla.selectCommunity(id)),
     setFilterState: s => dispatch(cla.setFilter(s)),
     onClose: () => dispatch(a.setExpanded(false)),
-    setPast: isPast => dispatch(sba.setPast(isPast)),
   };
 }
 
 function mapStateToProps(state, ownProps) {
   const cl = state.challengeListing;
   const tc = state.tcCommunities;
-  const sb = state.challengeListing.sidebar;
   return {
     ...ownProps,
     ...state.challengeListing.filterPanel,
@@ -232,7 +234,6 @@ function mapStateToProps(state, ownProps) {
     selectedCommunityId: cl.selectedCommunityId,
     auth: state.auth,
     tokenV2: state.auth.tokenV2,
-    past: sb.past,
   };
 }
 
diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx
index b2b02b8b60..83ddccf09a 100644
--- a/src/shared/containers/challenge-listing/Listing/index.jsx
+++ b/src/shared/containers/challenge-listing/Listing/index.jsx
@@ -37,11 +37,6 @@ const { mapToBackend } = challengeUtils.filter;
 let mounted = false;
 
 export class ListingContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.firstReload = false;
-  }
-
   componentDidMount() {
     const {
       activeBucket,
@@ -118,7 +113,6 @@ 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');
@@ -224,19 +218,7 @@ export class ListingContainer extends React.Component {
       }
       return;
     }
-    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) {
+    if (filterChanged(filter, prevProps.filter)) {
       this.reloadChallenges();
     }
     setTimeout(() => {
@@ -263,8 +245,7 @@ export class ListingContainer extends React.Component {
       sorts,
       filter,
     } = this.props;
-    const filterTemp = _.omit(filter, 'reviewOpportunityTypes', 'customDate',
-      'previousStartDate', 'previousEndDate');
+    const filterTemp = _.omit(filter, 'reviewOpportunityTypes', 'customDate');
     // let communityFilter = communitiesList.data.find(
     // item => item.communityId === selectedCommunityId,
     // );
@@ -760,7 +741,6 @@ ListingContainer.propTypes = {
   getTotalChallengesCount: PT.func.isRequired,
   // userChallenges: PT.arrayOf(PT.string),
   // getUserChallenges: PT.func.isRequired,
-  past: PT.bool.isRequired,
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -820,7 +800,6 @@ const mapStateToProps = (state, ownProps) => {
     expandedTags: cl.expandedTags,
     meta: cl.meta,
     // userChallenges: cl.userChallenges,
-    past: cl.sidebar.past,
   };
 };
 
diff --git a/src/shared/containers/challenge-listing/Sidebar.jsx b/src/shared/containers/challenge-listing/Sidebar.jsx
index c13bfccfff..cd53b07d1d 100644
--- a/src/shared/containers/challenge-listing/Sidebar.jsx
+++ b/src/shared/containers/challenge-listing/Sidebar.jsx
@@ -55,7 +55,7 @@ export class SidebarContainer extends React.Component {
   }
 
   render() {
-    const {
+    // const {
     // activeBucket,
     // communityFilters,
     // deleteSavedFilter,
@@ -69,9 +69,7 @@ export class SidebarContainer extends React.Component {
     // updateAllSavedFilters,
     // updateSavedFilter,
     // userChallenges,
-      past,
-      setPast,
-    } = this.props;
+    // } = this.props;
 
     const {
       previousBucketOfActiveTab,
@@ -128,8 +126,6 @@ export class SidebarContainer extends React.Component {
         setPreviousBucketOfPastChallengesTab={(bucket) => {
           this.setState({ previousBucketOfPastChallengesTab: bucket });
         }}
-        past={past}
-        setPast={setPast}
       />
     );
   }
@@ -164,8 +160,6 @@ SidebarContainer.propTypes = {
   // user: PT.shape(),
   // userChallenges: PT.arrayOf(PT.string),
   expanding: PT.bool,
-  past: PT.bool.isRequired,
-  setPast: PT.func.isRequired,
 };
 
 function mapDispatchToProps(dispatch) {
@@ -201,7 +195,6 @@ function mapStateToProps(state) {
     // user: state.auth.user,
     // userChallenges: state.challengeListing.userChallenges,
     expanding: sb.expanding,
-    past: sb.past,
   };
 }
 
diff --git a/src/shared/reducers/challenge-listing/sidebar.js b/src/shared/reducers/challenge-listing/sidebar.js
index b55abacb5a..bb3822811f 100644
--- a/src/shared/reducers/challenge-listing/sidebar.js
+++ b/src/shared/reducers/challenge-listing/sidebar.js
@@ -175,15 +175,6 @@ function onSelectBucketDone(state) {
 //   return { ...state, savedFilters };
 // }
 
-function onSetPast(state, { payload }) {
-  const { past } = payload;
-
-  return {
-    ...state,
-    past,
-  };
-}
-
 function create(initialState = {}) {
   const a = actions.challengeListing.sidebar;
   return handleActions({
@@ -209,14 +200,12 @@ function create(initialState = {}) {
     //   editSavedFiltersMode: payload,
     // }),
     // [a.updateSavedFilter]: onUpdateSavedFilter,
-    [a.setPast]: onSetPast,
   }, _.defaults(initialState, {
     activeBucket: BUCKETS.OPEN_FOR_REGISTRATION,
     // activeSavedFilter: 0,
     // editSavedFiltersMode: false,
     // savedFilters: [],
     // isSavingFilter: false,
-    past: false,
   }));
 }
 
diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js
index 87e0d1a0b0..54563ceb05 100644
--- a/src/shared/utils/challenge-listing/buckets.js
+++ b/src/shared/utils/challenge-listing/buckets.js
@@ -211,51 +211,27 @@ export function sortChangedBucket(sorts, prevSorts) {
   return '';
 }
 
-export function isFilterEmpty(filter, tab, bucket) {
-  let f;
-  let empty;
-
-  if (tab === 'past') {
-    f = _.pick(filter, 'tracks', 'search', 'types', 'startDateEnd', 'endDateStart');
-    empty = {
-      tracks: {
-        Dev: true,
-        Des: true,
-        DS: true,
-        QA: true,
-      },
-      search: '',
-      types: ['CH', 'F2F', 'TSK'],
-      startDateEnd: null,
-      endDateStart: null,
-    };
-  } else if (bucket === BUCKETS.REVIEW_OPPORTUNITIES) {
-    f = _.pick(filter, 'tracks', 'search', 'reviewOpportunityTypes');
-    empty = {
-      tracks: {
-        Dev: true,
-        Des: true,
-        DS: true,
-        QA: true,
-      },
-      search: '',
-      reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
-    };
-  } else {
-    f = _.pick(filter, 'tracks', 'search', 'types');
-    empty = {
-      tracks: {
-        Dev: true,
-        Des: true,
-        DS: true,
-        QA: true,
-      },
-      search: '',
-      types: ['CH', 'F2F', 'TSK'],
-    };
-  }
+export function isFilterEmpty(filter) {
+  const f = _.pick(filter, 'tracks', 'search', 'types', 'startDateEnd', 'endDateStart', 'reviewOpportunityTypes');
+  const empty = {
+    tracks: {
+      Dev: true,
+      Des: true,
+      DS: true,
+      QA: true,
+    },
+    search: '',
+    types: ['CH', 'F2F', 'TSK'],
+    startDateEnd: null,
+    endDateStart: null,
+    reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
+  };
 
   return _.isEqual(f, empty);
 }
 
+export function isPastBucket(bucket) {
+  return [BUCKETS.ALL_PAST, BUCKETS.MY_PAST].indexOf(bucket) !== -1;
+}
+
 export default undefined;

From 6248ead2f395785ac1965f3d3c016e74a5301d12 Mon Sep 17 00:00:00 2001
From: nqv <nqvietit@gmail.com>
Date: Thu, 10 Dec 2020 19:53:36 +0700
Subject: [PATCH 2/3] fixed for enabling/disabling Clear button

---
 .../Filters/FiltersPanel/index.jsx            |  3 +-
 .../reducers/challenge-listing/index.js       |  2 +-
 src/shared/utils/challenge-listing/buckets.js | 60 ++++++++++++++-----
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
index 5241b79eee..d20e5ddc75 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
@@ -225,8 +225,6 @@ export default function FiltersPanel({
       data: getLabel(community),
     }));
 
-  const disableClearFilterButtons = isFilterEmpty(filterState);
-
   // const mapOps = item => ({ label: item, value: item });
   const mapTypes = item => ({ label: item.name, value: item.abbreviation });
   const getCommunityOption = () => {
@@ -249,6 +247,7 @@ export default function FiltersPanel({
 
   const staticRanges = createStaticRanges();
   const past = isPastBucket(activeBucket);
+  const disableClearFilterButtons = isFilterEmpty(filterState, past ? 'past' : '', activeBucket);
 
   return (
     <div styleName="FiltersPanel">
diff --git a/src/shared/reducers/challenge-listing/index.js b/src/shared/reducers/challenge-listing/index.js
index 07af86f364..41ecc6b941 100644
--- a/src/shared/reducers/challenge-listing/index.js
+++ b/src/shared/reducers/challenge-listing/index.js
@@ -907,7 +907,7 @@ function create(initialState) {
         DS: true,
         QA: true,
       },
-      name: '',
+      search: '',
       tags: [],
       types: [],
       groups: [],
diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js
index 54563ceb05..e50a724de3 100644
--- a/src/shared/utils/challenge-listing/buckets.js
+++ b/src/shared/utils/challenge-listing/buckets.js
@@ -211,21 +211,51 @@ export function sortChangedBucket(sorts, prevSorts) {
   return '';
 }
 
-export function isFilterEmpty(filter) {
-  const f = _.pick(filter, 'tracks', 'search', 'types', 'startDateEnd', 'endDateStart', 'reviewOpportunityTypes');
-  const empty = {
-    tracks: {
-      Dev: true,
-      Des: true,
-      DS: true,
-      QA: true,
-    },
-    search: '',
-    types: ['CH', 'F2F', 'TSK'],
-    startDateEnd: null,
-    endDateStart: null,
-    reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
-  };
+export function isFilterEmpty(filter, tab, bucket) {
+  let f;
+  let empty;
+
+  if (tab === 'past') {
+    f = _.pick(filter, 'tracks', 'search', 'types', 'startDateEnd', 'endDateStart');
+    if (f.types) f.types = [...f.types].sort();
+    empty = {
+      tracks: {
+        Dev: true,
+        Des: true,
+        DS: true,
+        QA: true,
+      },
+      search: '',
+      types: ['CH', 'F2F', 'TSK'],
+      startDateEnd: null,
+      endDateStart: null,
+    };
+  } else if (bucket === BUCKETS.REVIEW_OPPORTUNITIES) {
+    f = _.pick(filter, 'tracks', 'search', 'reviewOpportunityTypes');
+    empty = {
+      tracks: {
+        Dev: true,
+        Des: true,
+        DS: true,
+        QA: true,
+      },
+      search: '',
+      reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
+    };
+  } else {
+    f = _.pick(filter, 'tracks', 'search', 'types');
+    if (f.types) f.types = [...f.types].sort();
+    empty = {
+      tracks: {
+        Dev: true,
+        Des: true,
+        DS: true,
+        QA: true,
+      },
+      search: '',
+      types: ['CH', 'F2F', 'TSK'],
+    };
+  }
 
   return _.isEqual(f, empty);
 }

From 5a62e300051cd0d03c6661fdfcb3bf68bd498d78 Mon Sep 17 00:00:00 2001
From: nqv <nqvietit@gmail.com>
Date: Sun, 13 Dec 2020 01:39:22 +0700
Subject: [PATCH 3/3] - updated /?tags[]=<tag> to /?search=<tag> - fixed
 date-range-picker calendar missing the close button

---
 .../components/DateRangePicker/index.jsx       |  9 +++++++++
 .../components/DateRangePicker/style.scss      | 18 ++++++++++++++++++
 .../challenge-detail/Header/ChallengeTags.jsx  |  4 ++--
 .../challenge-listing/Listing/Bucket/index.jsx |  5 ++++-
 .../Listing/ReviewOpportunityBucket/index.jsx  |  7 ++++++-
 .../challenge-listing/Listing/index.jsx        |  4 ++++
 .../components/challenge-listing/index.jsx     |  3 +++
 .../containers/challenge-detail/index.jsx      |  5 ++++-
 .../challenge-listing/Listing/index.jsx        |  6 ++++++
 9 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/DateRangePicker/index.jsx b/src/shared/components/DateRangePicker/index.jsx
index f9e56e7279..0a58006d46 100644
--- a/src/shared/components/DateRangePicker/index.jsx
+++ b/src/shared/components/DateRangePicker/index.jsx
@@ -466,6 +466,15 @@ function DateRangePicker(props) {
               >
                 Reset
               </button>
+              <button
+                type="button"
+                styleName="close-button"
+                onClick={() => {
+                  setIsComponentVisible(false);
+                }}
+              >
+                &times;
+              </button>
             </div>
           )
         }
diff --git a/src/shared/components/DateRangePicker/style.scss b/src/shared/components/DateRangePicker/style.scss
index f9c5461a6b..532241146a 100644
--- a/src/shared/components/DateRangePicker/style.scss
+++ b/src/shared/components/DateRangePicker/style.scss
@@ -392,6 +392,24 @@
       margin: 20px 12px 0;
     }
   }
+
+  .close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+    line-height: 16px;
+    padding: 15px;
+    font-size: 36px;
+    color: $tc-black;
+    appearance: none;
+    background: none;
+    border: 0;
+
+    @include phone {
+      display: block;
+    }
+  }
 }
 
 .endDate {
diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
index 4f624164a2..ce6190cc3a 100644
--- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
+++ b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
@@ -88,9 +88,9 @@ export default function ChallengeTags(props) {
               && (
               <Tag
                 key={tag}
-                onClick={() => setImmediate(() => setChallengeListingFilter({ tags: [tag] }))
+                onClick={() => setImmediate(() => setChallengeListingFilter({ search: tag }))
                 }
-                to={`${challengesUrl}?tags[]=${
+                to={`${challengesUrl}?search=${
                   encodeURIComponent(tag)}`}
               >
                 {tag}
diff --git a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx
index 9ae33b87fc..c1701786d5 100644
--- a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx
+++ b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx
@@ -49,6 +49,7 @@ export default function Bucket({
   activeBucket,
   // searchTimestamp,
   isLoggedIn,
+  setSearchText,
 }) {
   const refs = useRef([]);
   refs.current = [];
@@ -128,9 +129,10 @@ export default function Bucket({
       onTechTagClicked={(tag) => {
         setFilterState({
           ..._.clone(filterState),
-          tags: [tag],
+          search: tag,
           types: challengeTypes.map(type => type.abbreviation),
         });
+        setSearchText(tag);
       }}
       openChallengesInNewTabs={openChallengesInNewTabs}
       prizeMode={prizeMode}
@@ -256,4 +258,5 @@ Bucket.propTypes = {
   activeBucket: PT.string,
   // searchTimestamp: PT.number,
   isLoggedIn: PT.bool.isRequired,
+  setSearchText: PT.func.isRequired,
 };
diff --git a/src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx b/src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx
index 5da39bea16..e48ad31240 100644
--- a/src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx
+++ b/src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx
@@ -33,6 +33,7 @@ export default function ReviewOpportunityBucket({
   setSort,
   challengeTypes,
   sort,
+  setSearchText,
 }) {
   if (!opportunities.length && !loadMore) return null;
 
@@ -59,7 +60,10 @@ export default function ReviewOpportunityBucket({
       challengeType={_.find(challengeTypes, { name: item.challenge.type }) || {}}
       expandedTags={expandedTags}
       expandTag={expandTag}
-      onTechTagClicked={tag => setFilterState({ tags: [tag] })}
+      onTechTagClicked={(tag) => {
+        setFilterState({ search: tag });
+        setSearchText(tag);
+      }}
       opportunity={item}
       key={item.id}
     />
@@ -132,4 +136,5 @@ ReviewOpportunityBucket.propTypes = {
   setSort: PT.func.isRequired,
   sort: PT.string,
   challengeTypes: PT.arrayOf(PT.shape()).isRequired,
+  setSearchText: PT.func.isRequired,
 };
diff --git a/src/shared/components/challenge-listing/Listing/index.jsx b/src/shared/components/challenge-listing/Listing/index.jsx
index 617173865b..73c19a7d48 100644
--- a/src/shared/components/challenge-listing/Listing/index.jsx
+++ b/src/shared/components/challenge-listing/Listing/index.jsx
@@ -71,6 +71,7 @@ function Listing({
   // pastSearchTimestamp,
   isLoggedIn,
   meta,
+  setSearchText,
 }) {
   // const buckets = getBuckets(userChallenges);
   // const isChallengesAvailable = (bucket) => {
@@ -159,6 +160,7 @@ function Listing({
             sort={sorts[bucket]}
             challengeTypes={challengeTypes}
             isLoggedIn={isLoggedIn}
+            setSearchText={setSearchText}
           />
         )
         : (
@@ -194,6 +196,7 @@ function Listing({
             activeBucket={activeBucket}
             // searchTimestamp={searchTimestamp}
             isLoggedIn={isLoggedIn}
+            setSearchText={setSearchText}
           />
         )
     );
@@ -348,6 +351,7 @@ Listing.propTypes = {
   // userChallenges: PT.arrayOf(PT.string),
   isLoggedIn: PT.bool.isRequired,
   meta: PT.shape().isRequired,
+  setSearchText: PT.func.isRequired,
 };
 
 const mapStateToProps = (state) => {
diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx
index 5adc73b831..87b2e12176 100644
--- a/src/shared/components/challenge-listing/index.jsx
+++ b/src/shared/components/challenge-listing/index.jsx
@@ -49,6 +49,7 @@ export default function ChallengeListing(props) {
     // isBucketSwitching,
     isLoggedIn,
     meta,
+    setSearchText,
   } = props;
 
   // const { challenges } = props;
@@ -144,6 +145,7 @@ export default function ChallengeListing(props) {
       // userChallenges={props.userChallenges}
       isLoggedIn={isLoggedIn}
       meta={meta}
+      setSearchText={setSearchText}
     />
   );
   // }
@@ -258,4 +260,5 @@ ChallengeListing.propTypes = {
   // userChallenges: PT.arrayOf(PT.string),
   isLoggedIn: PT.bool.isRequired,
   meta: PT.shape().isRequired,
+  setSearchText: PT.func.isRequired,
 };
diff --git a/src/shared/containers/challenge-detail/index.jsx b/src/shared/containers/challenge-detail/index.jsx
index d83434ac2c..3966ac53d5 100644
--- a/src/shared/containers/challenge-detail/index.jsx
+++ b/src/shared/containers/challenge-detail/index.jsx
@@ -14,6 +14,7 @@ import pageActions from 'actions/page';
 import ChallengeHeader from 'components/challenge-detail/Header';
 import challengeListingActions from 'actions/challenge-listing';
 import challengeListingSidebarActions from 'actions/challenge-listing/sidebar';
+import challengeListingFilterPanelActions from 'actions/challenge-listing/filter-panel';
 import Registrants from 'components/challenge-detail/Registrants';
 import shortId from 'shortid';
 import Submissions from 'components/challenge-detail/Submissions';
@@ -880,13 +881,15 @@ const mapDispatchToProps = (dispatch) => {
     setChallengeListingFilter: (filter, stateProps) => {
       const cl = challengeListingActions.challengeListing;
       const cls = challengeListingSidebarActions.challengeListing.sidebar;
+      const fp = challengeListingFilterPanelActions.challengeListing.filterPanel;
       const newFilter = _.assign(
         {},
-        { types: stateProps.challengeTypesMap.map(type => type.abbreviation), tags: [] },
+        { types: stateProps.challengeTypes.map(type => type.abbreviation), search: '' },
         filter,
       );
       dispatch(cls.selectBucket(BUCKETS.OPEN_FOR_REGISTRATION));
       dispatch(cl.setFilter(newFilter));
+      dispatch(fp.setSearchText(newFilter.search));
     },
     setSpecsTabState: state => dispatch(pageActions.page.challengeDetails.setSpecsTabState(state)),
     unregisterFromChallenge: (auth, challengeId) => {
diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx
index 83ddccf09a..8c996bd8e8 100644
--- a/src/shared/containers/challenge-listing/Listing/index.jsx
+++ b/src/shared/containers/challenge-listing/Listing/index.jsx
@@ -21,6 +21,7 @@ import { connect } from 'react-redux';
 import ChallengeListing from 'components/challenge-listing';
 import Banner from 'components/tc-communities/Banner';
 import sidebarActions from 'actions/challenge-listing/sidebar';
+import filterPanelActions from 'actions/challenge-listing/filter-panel';
 import communityActions from 'actions/tc-communities';
 // import SORT from 'utils/challenge-listing/sort';
 import { BUCKETS, filterChanged, sortChangedBucket } from 'utils/challenge-listing/buckets';
@@ -447,6 +448,7 @@ export class ListingContainer extends React.Component {
       // isBucketSwitching,
       // userChallenges,
       meta,
+      setSearchText,
     } = this.props;
 
     const { tokenV3 } = auth;
@@ -617,6 +619,7 @@ export class ListingContainer extends React.Component {
           // userChallenges={[]}
           isLoggedIn={isLoggedIn}
           meta={meta}
+          setSearchText={setSearchText}
         />
       </div>
     );
@@ -741,6 +744,7 @@ ListingContainer.propTypes = {
   getTotalChallengesCount: PT.func.isRequired,
   // userChallenges: PT.arrayOf(PT.string),
   // getUserChallenges: PT.func.isRequired,
+  setSearchText: PT.func.isRequired,
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -807,6 +811,7 @@ function mapDispatchToProps(dispatch) {
   const a = actions.challengeListing;
   const ah = headerActions.topcoderHeader;
   const sa = sidebarActions.challengeListing.sidebar;
+  const fp = filterPanelActions.challengeListing.filterPanel;
   const ca = communityActions.tcCommunity;
   return {
     dropChallenges: () => dispatch(a.dropChallenges()),
@@ -880,6 +885,7 @@ function mapDispatchToProps(dispatch) {
     //   dispatch(a.getUserChallengesInit(uuid));
     //   dispatch(a.getUserChallengesDone(userId, tokenV3));
     // },
+    setSearchText: text => dispatch(fp.setSearchText(text)),
   };
 }