diff --git a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap b/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap index 455a808b80..5fd5c91cba 100644 --- a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap +++ b/__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" > -

- CHALLENGES -

-
-

- CHALLENGES -

-
{ diff --git a/src/shared/components/challenge-listing/ChallengeTab/index.jsx b/src/shared/components/challenge-listing/ChallengeTab/index.jsx index a9a4ba1956..19db65caaf 100644 --- a/src/shared/components/challenge-listing/ChallengeTab/index.jsx +++ b/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 = ({ ); @@ -93,7 +143,7 @@ const ChallengeTab = ({ role="presentation" onClick={() => setIsTabClosed(!isTabClosed)} > -

{currentSelected ? 'PAST CHALLENGES' : 'ACTIVE CHALLENGES'}

+

{currentTabName}

ACTIVE CHALLENGES

PAST CHALLENGES

+
+

GIGS

+
) } ); - return desktop ? desktopTab : mobileTab; + return ( + +

{pageTitle}

+
+ {desktop ? desktopTab : mobileTab} + + ); }; ChallengeTab.defaultProps = { + activeBucket: null, + selectBucket: () => {}, setPreviousBucketOfActiveTab: () => {}, setPreviousBucketOfPastChallengesTab: () => {}, previousBucketOfActiveTab: null, @@ -136,11 +201,16 @@ ChallengeTab.defaultProps = { }; 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, }; diff --git a/src/shared/components/challenge-listing/ChallengeTab/style.scss b/src/shared/components/challenge-listing/ChallengeTab/style.scss index 575e052d7c..85817857d7 100644 --- a/src/shared/components/challenge-listing/ChallengeTab/style.scss +++ b/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; + } +} diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx index 00b5c564e7..85d65b32aa 100644 --- a/src/shared/components/challenge-listing/index.jsx +++ b/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 (
- -

CHALLENGES

-
-
@@ -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, diff --git a/src/shared/components/challenge-listing/style.scss b/src/shared/components/challenge-listing/style.scss index a8b290e569..518bc5e05e 100644 --- a/src/shared/components/challenge-listing/style.scss +++ b/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; diff --git a/src/shared/containers/GigsPages.jsx b/src/shared/containers/GigsPages/index.jsx similarity index 91% rename from src/shared/containers/GigsPages.jsx rename to src/shared/containers/GigsPages/index.jsx index f44cd68bc4..757d3167e9 100644 --- a/src/shared/containers/GigsPages.jsx +++ b/src/shared/containers/GigsPages/index.jsx @@ -16,8 +16,11 @@ import _ from 'lodash'; import { v4 as uuidv4 } from 'uuid'; import { getQuery } from 'utils/url'; import ReferralCode from 'components/Gigs/ReferralCode'; +import ChallengeTab from 'components/challenge-listing/ChallengeTab'; import actions from 'actions/growSurf'; +import './style.scss'; + const optimizelyClient = createInstance({ sdkKey: config.OPTIMIZELY.SDK_KEY, }); @@ -27,7 +30,13 @@ const GIGS_SOCIAL_SHARE_IMAGE = 'https://images.ctfassets.net/b5f1djy59z3a/4XlYN function GigsPagesContainer(props) { const { - match, profile, growSurf, getReferralId, tokenV3, + match, + profile, + growSurf, + getReferralId, + tokenV3, + history, + location, } = props; const optProfile = { attributes: {}, @@ -89,6 +98,12 @@ window._chatlio = window._chatlio||[]; image={GIGS_SOCIAL_SHARE_IMAGE} />
+
+ +
{ id ? ( {banner} import(/* webpackChunkName: "gigsPages/chunk" */ 'containers/GigsPages') + renderClientAsync={renderProps => import(/* webpackChunkName: "gigsPages/chunk" */ 'containers/GigsPages') .then(({ default: GigsPagesContainer }) => ( - + )) } renderPlaceholder={() => } - renderServer={() => { + renderServer={(renderProps) => { const p = webpack.resolveWeak('containers/GigsPages'); const GigsPagesContainer = webpack.requireWeak(path.resolve(__dirname, p)); - return ; + return ; }} /> ); diff --git a/src/shared/routes/index.jsx b/src/shared/routes/index.jsx index a723bae367..9f76f31b68 100644 --- a/src/shared/routes/index.jsx +++ b/src/shared/routes/index.jsx @@ -107,7 +107,7 @@ function Routes({ communityId }) {