Merge pull request #6877 from topcoder-platform/develop

PROD -- Add link to gigs on challenge listings page on CA

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

@@ -5,16 +5,9 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
   className="src-shared-components-challenge-listing-___style__ChallengeFiltersExample___3IjeI"
   id="challengeFilterContainer"
 >
-  <h1
-    className="src-shared-components-challenge-listing-___style__tc-title____Rpik"
-  >
-    CHALLENGES
-  </h1>
-  <hr
-    className="src-shared-components-challenge-listing-___style__tc-seperator___2AnJv"
-  />
   <ChallengeTab
     activeBucket="abc"
+    location={Object {}}
     previousBucketOfActiveTab={null}
     previousBucketOfPastChallengesTab={null}
     selectBucket={[MockFunction]}
@@ -75,16 +68,9 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
   className="src-shared-components-challenge-listing-___style__ChallengeFiltersExample___3IjeI"
   id="challengeFilterContainer"
 >
-  <h1
-    className="src-shared-components-challenge-listing-___style__tc-title____Rpik"
-  >
-    CHALLENGES
-  </h1>
-  <hr
-    className="src-shared-components-challenge-listing-___style__tc-seperator___2AnJv"
-  />
   <ChallengeTab
     activeBucket="abc"
+    location={Object {}}
     previousBucketOfActiveTab={null}
     previousBucketOfPastChallengesTab={null}
     selectBucket={[MockFunction]}

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

@@ -21,11 +21,13 @@ const mockData1 = {
   setSort,
   sorts: {},
   auth: {},
+  location: {},
 };
 
 const mockData2 = _.extend({}, mockData1, {
   communityFilter: {},
   loadingChallenges: true,
+  location: {},
 });
 
 describe('Matches shallow shapshot 1', () => {

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

@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { BUCKETS, isPastBucket } from 'utils/challenge-listing/buckets';
 import cn from 'classnames';
 import { useMediaQuery } from 'react-responsive';
 import ArrowIcon from 'assets/images/ico-arrow-down.svg';
+import { config } from 'topcoder-react-utils';
 import PT from 'prop-types';
 
 import './style.scss';
+import { getUpdateQuery } from 'utils/url';
 
 const ChallengeTab = ({
   activeBucket,
@@ -14,41 +16,75 @@ const ChallengeTab = ({
   previousBucketOfPastChallengesTab,
   previousBucketOfActiveTab,
   selectBucket,
+  location,
+  history,
 }) => {
   const past = isPastBucket(activeBucket);
   const [currentSelected, setCurrentSelected] = useState(past);
   const [isTabClosed, setIsTabClosed] = useState(true);
+  const currentTabName = useMemo(() => {
+    if (location.pathname && location.pathname.indexOf(config.GIGS_PAGES_PATH) >= 0) {
+      return 'GIGS';
+    }
+    return currentSelected ? 'PAST CHALLENGES' : 'ACTIVE CHALLENGES';
+  }, [location, currentSelected]);
+  const pageTitle = useMemo(() => {
+    if (location.pathname && location.pathname.indexOf(config.GIGS_PAGES_PATH) >= 0) {
+      return 'GIG WORK OPPORTUNITIES';
+    }
+    return 'CHALLENGES';
+  }, [location]);
 
   useEffect(() => {
     setCurrentSelected(isPastBucket(activeBucket));
   }, [activeBucket]);
 
+  const moveToChallengesPage = (selectedBucket) => {
+    if (currentTabName === 'GIGS') {
+      const queryParams = getUpdateQuery({ bucket: selectedBucket });
+      history.push(`/challenges${queryParams || ''}`);
+    }
+  };
+
   const onActiveClick = () => {
-    if (!past) {
+    if (!past && currentTabName !== 'GIGS') {
       return;
     }
     setPreviousBucketOfPastChallengesTab(activeBucket);
     setCurrentSelected(0);
     setIsTabClosed(true);
+    let selectedBucket = '';
     if (previousBucketOfActiveTab) {
-      selectBucket(previousBucketOfActiveTab);
+      selectedBucket = previousBucketOfActiveTab;
     } else {
-      selectBucket(BUCKETS.OPEN_FOR_REGISTRATION);
+      selectedBucket = BUCKETS.OPEN_FOR_REGISTRATION;
     }
+    moveToChallengesPage(selectedBucket);
+    selectBucket(selectedBucket);
   };
 
   const onPastChallengesClick = () => {
-    if (past) {
+    if (past && currentTabName !== 'GIGS') {
       return;
     }
     setPreviousBucketOfActiveTab(activeBucket);
     setCurrentSelected(1);
     setIsTabClosed(true);
+    let selectedBucket = '';
     if (previousBucketOfPastChallengesTab) {
-      selectBucket(previousBucketOfPastChallengesTab);
+      selectedBucket = previousBucketOfPastChallengesTab;
     } else {
-      selectBucket(BUCKETS.ALL_PAST);
+      selectedBucket = BUCKETS.ALL_PAST;
     }
+    moveToChallengesPage(selectedBucket);
+    selectBucket(selectedBucket);
+  };
+
+  const onGigsClick = () => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    history.push(config.GIGS_PAGES_PATH);
   };
 
   const desktop = useMediaQuery({ minWidth: 1024 });
@@ -57,7 +93,7 @@ const ChallengeTab = ({
     <ul styleName="challenge-tab">
       <li
         key="tab-item-active"
-        styleName={cn('item', { active: !currentSelected })}
+        styleName={cn('item', { active: currentTabName === 'ACTIVE CHALLENGES' })}
         onClick={onActiveClick}
         onKeyDown={(e) => {
           if (e.key !== 'Enter') {
@@ -71,7 +107,7 @@ const ChallengeTab = ({
       </li>
       <li
         key="tab-item-past"
-        styleName={cn('item', { active: currentSelected })}
+        styleName={cn('item', { active: currentTabName === 'PAST CHALLENGES' })}
         onClick={onPastChallengesClick}
         onKeyDown={(e) => {
           if (e.key !== 'Enter') {
@@ -83,6 +119,20 @@ const ChallengeTab = ({
       >
         PAST CHALLENGES
       </li>
+      <li
+        key="tab-item-gigs"
+        styleName={cn('item', { active: currentTabName === 'GIGS' })}
+        onClick={onGigsClick}
+        onKeyDown={(e) => {
+          if (e.key !== 'Enter') {
+            return;
+          }
+          onGigsClick();
+        }}
+        role="presentation"
+      >
+        GIGS
+      </li>
     </ul>
   );
 
@@ -93,7 +143,7 @@ const ChallengeTab = ({
         role="presentation"
         onClick={() => setIsTabClosed(!isTabClosed)}
       >
-        <p styleName="title">{currentSelected ? 'PAST CHALLENGES' : 'ACTIVE CHALLENGES'}</p>
+        <p styleName="title">{currentTabName}</p>
         <div
           role="presentation"
           styleName={cn('icon', { down: !isTabClosed })}
@@ -108,39 +158,59 @@ const ChallengeTab = ({
             <div
               role="presentation"
               onClick={onActiveClick}
-              styleName={cn('item', { active: !currentSelected })}
+              styleName={cn('item', { active: currentTabName === 'ACTIVE CHALLENGES' })}
             >
               <p>ACTIVE CHALLENGES</p>
             </div>
             <div
               role="presentation"
-              styleName={cn('item', { active: currentSelected })}
+              styleName={cn('item', { active: currentTabName === 'PAST CHALLENGES' })}
               onClick={onPastChallengesClick}
             >
               <p>PAST CHALLENGES</p>
             </div>
+            <div
+              role="presentation"
+              styleName={cn('item', { active: currentTabName === 'GIGS' })}
+              onClick={onGigsClick}
+            >
+              <p>GIGS</p>
+            </div>
           </div>
         )
       }
     </React.Fragment>
   );
 
-  return desktop ? desktopTab : mobileTab;
+  return (
+    <React.Fragment>
+      <h1 styleName="tc-title">{pageTitle}</h1>
+      <hr styleName="tc-seperator" />
+      {desktop ? desktopTab : mobileTab}
+    </React.Fragment>
+  );
 };
 
 ChallengeTab.defaultProps = {
+  activeBucket: null,
+  selectBucket: () => {},
   setPreviousBucketOfActiveTab: () => {},
   setPreviousBucketOfPastChallengesTab: () => {},
   previousBucketOfActiveTab: null,
   previousBucketOfPastChallengesTab: null,
 };
 
 ChallengeTab.propTypes = {
-  activeBucket: PT.string.isRequired,
+  location: PT.shape({
+    search: PT.string,
+    pathname: PT.string,
+  }).isRequired,
+  history: PT.shape().isRequired,
+  activeBucket: PT.string,
   setPreviousBucketOfActiveTab: PT.func,
   setPreviousBucketOfPastChallengesTab: PT.func,
   previousBucketOfActiveTab: PT.string,
-  selectBucket: PT.func.isRequired,
+  selectBucket: PT.func,
   previousBucketOfPastChallengesTab: PT.string,
 };
 

src/shared/components/challenge-listing/ChallengeTab/style.scss

@@ -59,6 +59,7 @@
   .active {
     color: $tc-black;
     font-weight: 700;
+    position: relative;
 
     &::after {
       content: "";
@@ -70,7 +71,7 @@
       z-index: 100;
       display: block;
       position: absolute;
-      top: 145px;
+      top: 31px;
     }
   }
 }
@@ -117,3 +118,29 @@
     margin: 0 16px;
   }
 }
+
+.tc-title {
+  @include barlow-condensed;
+
+  color: $tco-black;
+  font-size: 32px;
+  margin: 32px 0 24px 0;
+  line-height: 32px;
+  font-weight: 600;
+  text-transform: uppercase;
+
+  @include xs-to-md {
+    margin: 16px;
+  }
+}
+
+.tc-seperator {
+  background-color: $listing-gray;
+  height: 2px;
+  opacity: 0.5;
+  margin: 0;
+
+  @include xs-to-md {
+    margin: 0 16px;
+  }
+}

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

@@ -54,6 +54,8 @@ export default function ChallengeListing(props) {
     setPreviousBucketOfPastChallengesTab,
     previousBucketOfPastChallengesTab,
     previousBucketOfActiveTab,
+    location,
+    history,
   } = props;
 
   // const { challenges } = props;
@@ -157,17 +159,15 @@ export default function ChallengeListing(props) {
 
   return (
     <div styleName="ChallengeFiltersExample" id="challengeFilterContainer">
-
-      <h1 styleName="tc-title">CHALLENGES</h1>
-      <hr styleName="tc-seperator" />
-
       <ChallengeTab
         activeBucket={activeBucket}
+        history={history}
         setPreviousBucketOfActiveTab={setPreviousBucketOfActiveTab}
         setPreviousBucketOfPastChallengesTab={setPreviousBucketOfPastChallengesTab}
         previousBucketOfPastChallengesTab={previousBucketOfPastChallengesTab}
         previousBucketOfActiveTab={previousBucketOfActiveTab}
         selectBucket={selectBucket}
+        location={location}
       />
 
       <div styleName="tc-content-wrapper">
@@ -221,6 +221,10 @@ ChallengeListing.defaultProps = {
 };
 
 ChallengeListing.propTypes = {
+  location: PT.shape({
+    search: PT.string,
+  }).isRequired,
+  history: PT.shape().isRequired,
   activeBucket: PT.string.isRequired,
   expanding: PT.bool,
   challenges: PT.arrayOf(PT.shape()).isRequired,

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

@@ -22,32 +22,6 @@ $challenge-radius-4: $corner-radius * 2;
   flex: 1;
   margin: 0;
 
-  .tc-title {
-    @include barlow-condensed;
-
-    color: $tco-black;
-    font-size: 32px;
-    margin: 32px 0 24px 0;
-    line-height: 32px;
-    font-weight: 600;
-    text-transform: uppercase;
-
-    @include xs-to-md {
-      margin: 16px;
-    }
-  }
-
-  .tc-seperator {
-    background-color: $listing-gray;
-    height: 2px;
-    opacity: 0.5;
-    margin: 0;
-
-    @include xs-to-md {
-      margin: 0 16px;
-    }
-  }
-
   .tc-content-wrapper {
     display: flex;
     padding: 0;