fixed issue's comments #5068#issuecomment-741904592, #5068#issuecomment-741600474, #5068#issuecomment-741596441 and hide the sub-community select box for the review bucket

nqviet · nqviet · commit 3c78567d825a · 2020-12-10T16:32:09.000+07:00
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/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
@@ -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
@@ -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
@@ -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
@@ -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,14 +148,16 @@ export default function ChallengeListing(props) {
   );
   // }
 
+  const desktop = useMediaQuery({ minWidth: 1024 });
+
   return (
     <div styleName="ChallengeFiltersExample" id="challengeFilterContainer">
       <ChallengeSearchBar
         setFilterState={props.setFilterState}
       />
 
       <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
@@ -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
diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx
diff --git a/src/shared/containers/challenge-listing/Sidebar.jsx b/src/shared/containers/challenge-listing/Sidebar.jsx
diff --git a/src/shared/reducers/challenge-listing/sidebar.js b/src/shared/reducers/challenge-listing/sidebar.js
diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js
