topcoder-platform · maxceem · Dec 13, 2020 · Dec 10, 2020 · Dec 10, 2020 · Dec 12, 2020
diff --git 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
@@ -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
@@ -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
@@ -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/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
@@ -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
@@ -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/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,8 +225,6 @@ export default function FiltersPanel({
       data: getLabel(community),
     }));
 
-  const disableClearFilterButtons = isFilterEmpty(filterState, past ? 'past' : '', activeBucket);
-
   // const mapOps = item => ({ label: item, value: item });
   const mapTypes = item => ({ label: item.name, value: item.abbreviation });
   const getCommunityOption = () => {
@@ -249,6 +246,8 @@ export default function FiltersPanel({
   };
 
   const staticRanges = createStaticRanges();
+  const past = isPastBucket(activeBucket);
+  const disableClearFilterButtons = isFilterEmpty(filterState, past ? 'past' : '', activeBucket);
 
   return (
     <div styleName="FiltersPanel">
@@ -495,47 +494,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 +611,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
@@ -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
@@ -49,6 +49,7 @@ export default function Bucket({
   activeBucket,
   // searchTimestamp,
   isLoggedIn,
+  setSearchText,
 }) {
   const refs = useRef([]);
   refs.current = [];
@@ -125,7 +126,14 @@ 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),
+          search: tag,
+          types: challengeTypes.map(type => type.abbreviation),
+        });
+        setSearchText(tag);
+      }}
       openChallengesInNewTabs={openChallengesInNewTabs}
       prizeMode={prizeMode}
       key={challenge.id}
@@ -250,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
@@ -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
@@ -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) => {