- updated /?tags[]=<tag> to /?search=<tag>

- fixed date-range-picker calendar missing the close button

Author: nqviet

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>
           )
         }

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 {

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}

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,
 };

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,
 };

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) => {

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,
 };

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) => {

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)),
   };
 }