diff --git a/.circleci/config.yml b/.circleci/config.yml index 01df8e0e32..dfd34be43f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -343,6 +343,7 @@ workflows: branches: only: - develop + - feature/recommended-challenges-update # This is alternate dev env for parallel testing - "build-test": context : org-global @@ -371,6 +372,7 @@ workflows: branches: only: - develop + - feature/recommended-challenges-update # Production builds are exectuted # when PR is merged to the master # Don't change anything in this configuration diff --git a/docs/contentful/Animations.md b/docs/contentful/Animations.md new file mode 100644 index 0000000000..cfa2faace0 --- /dev/null +++ b/docs/contentful/Animations.md @@ -0,0 +1,16 @@ +# Animations On Scroll +Animation Contentful components on scroll is implemented currently for following components: +- [Viewport](./Viewport.md) +- [Image](./Image.md) +- [ContentBlock](./ContentBlock.md) + +![screenshot](./pics/Animation/screenshot.png) + +**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn + +Defining a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one. +![](./pics/anim1.png) + +## Animation Model +To define a default animation only `Name` and `Animate On Scroll` fields are required. There is help hint bellow each fields what is does and how to use it. For further detailed examples see: https://michalsnik.github.io/aos/. All available properties are supported from Contentful animatable components as well. +![](./pics/anim2.png) diff --git a/docs/contentful/AppComponent.md b/docs/contentful/AppComponent.md new file mode 100644 index 0000000000..12c3980e17 --- /dev/null +++ b/docs/contentful/AppComponent.md @@ -0,0 +1,91 @@ +# App Component + +Generic App Component model. + +![screenshot](./pics/AppComponent/screenshot.png) + +**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/7szFFbYqzZLpWkZwqZlXSJ + +## Fields + +- **Name** | Name of the entry. +- **Type** | Type of the App Component. Each type has different props. Please refer to [props](#props-json-object) field below. +- **Theme** | Theme specific for `TCO-Leaderboard` type. +- **Props** | Each type has its own props. Please refer to [props](#props-json-object) field below. + +## TCO-Leaderboard Themes + +### Default + +![default-theme](./pics/AppComponent/default-theme.png) + +### TCO20 + +![tco20-theme](./pics/AppComponent/tco20-theme.png) + +### TCO22 + +![tco22-theme](./pics/AppComponent/tco22-theme.png) + +## Props (JSON Object) + +### Type = `TCO-Leaderboard` + +Render top spots and list of competitors on specific TCO track. + +- **apiUrl** | **String.** Looks API URL | Default: "https://api.topcoder.com/v4/looks/1044/run/json". +- **title** | **String.** Title of the leaderboard. | Default: "Leaderboard". +- **podiumSpots** | **Number.** Number of displayed top spots. | Default: 3. +- **isCopilot** | **Bool.** Display copilot specific fields. | Default: false +- **hasChallengeHistory** | Bool. Display modal of competitor history. | Default: true +- **tcoPointsApiUrl** | **String.** Looks API URL for competitior challenge history. | Default: null +- **memberLimit** | **Number.** Limit the displayed number of rows. | Default: null +- **isAlgo** | **Bool.** Display copilot specific fields. | Default: false + +### Type = `RecruitCRM-Jobs` + +A block that fetches and renders a job listing page driven by recruitCRM. + +### Type = `EmailSubscribeForm` + +Generic subscribe for MailChimp tags component. + +- **listId** | **String (Required).** +- **interests** | **String (Required).** +- **title** | **String.** +- **btnText** | **String.** +- **successTitle** | **String.** +- **successText** | **String.** +- **successLink** | **String.** +- **successLinkText** | **String.** + +### Type = `GSheet` + +Render table that loads data from Google Sheet. + +- **id** | **String (Required).** Google sheet ID. +- **index** | **Number.** The index of the sheet to render, starts by 0 and counting. +- **config** | **Object of:** + - **pick** | **Array of Strings.** Pick sheet header value as table header. + - **containerStyle** | **CSS Object.** Inline styles object to override the container style. + +### Type = `JSON` + +JSON object needed by 3rd party API. + +### Type = `MemberPath` + +Render MemberPath component specifically for http://topcoder.com/start page. + +![member-path](./pics/AppComponent/member-path.png) + +- **data** | **Object of:** + - **title** | **String.** Big top title. + - **items** | **Array of Objects of:** + - **title** | **String.** Box title. + - **iconURL** | **String.** URL of the icon. + - **activeIconURL** | **String.** URL of icon when box is active. + - **contentText** | **String.** Displayed text at the bottom content. + - **btnText** | **String.** Text of the button at the bottom content. + - **btnURL** | **String.** Target link of the button at the bottom content. + - **btnNewTab** | **Bool.** Boolean to control the button to open new tab or not. diff --git a/docs/contentful/Image.md b/docs/contentful/Image.md new file mode 100644 index 0000000000..a58fd52a34 --- /dev/null +++ b/docs/contentful/Image.md @@ -0,0 +1,20 @@ +# Image + +Generic Image model. + +![screenshot](./pics/Image/screenshot.png) + +**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn + +## Fields + +- **Name** | Name of the entry. +- **Source** | The image source. +- **Source Mobile** | The image source for mobile view. This image will be shown when viewport width is lower than and equals to 768px. +- **Alt Text** | Alternate text for the image. Name field will be used if this is not provided. +- **Clip SVG** | A SVG file that define "clip-path" to be applied on the image. Contentful can't display it thus do not get confused just publish it after upload. +- **Extra Styles for Container** | Inline CSS styles to apply on container. +- **Extra Styles For Image** | Inline CSS styles to apply on `` tag itself. +- **Animation On Scroll** | Animation type to apply on scroll. Please refer to [Animation](./Animation.md) for more details. +- **Source Polyfill** | Used as polyfill in cases where source image is not supported by the browser. +- **Source Mobile Polyfill** | Used as polyfill in cases where source image is not supported by the browser. This polyfill will be shown when viewport width is lower than and equals to 768px. \ No newline at end of file diff --git a/docs/contentful/Modal.md b/docs/contentful/Modal.md new file mode 100644 index 0000000000..9907ba25dc --- /dev/null +++ b/docs/contentful/Modal.md @@ -0,0 +1,26 @@ +# Modal + +Generic Modal model. + +![screenshot](./pics/Modal/screenshot.png) + +**Preview:** https://community-app.topcoder.com/examples/contentful/contentblock/75fw42BmbyloyIseNH7gsY + +## Fields + +- **Name** | Name of the entry. +- **Content** | Content entry of the modal. +- **Theme** | Modal theme. +- **Hide Dismiss Icon** | Whether to hide the dismiss icon. +- **Hide Close Button** | By default, modals will render close button inside it. +- **Extra Styles For Container** | CSS inline styles to override the modal container's style. + +## How to use + +In order to use modal, we need to create [Content Block](./ContentBlock.md) entry, and put the modal entry's ID into the text field of the Content Block like so: + +``` +[Link: Modal](https://topcoder.com) +``` + +For more examples, please see this contentful source: https://app.contentful.com/spaces/b5f1djy59z3a/entries/75fw42BmbyloyIseNH7gsY \ No newline at end of file diff --git a/docs/contentful/Quote.md b/docs/contentful/Quote.md new file mode 100644 index 0000000000..4541e2e542 --- /dev/null +++ b/docs/contentful/Quote.md @@ -0,0 +1,19 @@ +# Quote + +Generic Quote model. + +![screenshot](./pics/Quote/screenshot.png) + +**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/7xOMXsGyLLzGUlu8uelMQl + +## Fields + +- **Name** | Name of the entry. +- **Text** | Text to render as a quote. +- **Author Avatar Image** | Avatar image to be shown. +- **Author Name** | The name that will be displayed below the quote text. +- **Author Affiliation** | Affiliation name that will be displayed right after author name. +- **Quote Style** | Predefined quote style. +- **Extra styles for container** | CSS inline styles to override the container's style. +- **Extra styles for content wrapper** | CSS inline styles to override the content wrapper's style. +- **Extra styles for content** | CSS inline styles to override the content's style. \ No newline at end of file diff --git a/docs/contentful/Route.md b/docs/contentful/Route.md index f9dcf815f8..7847f04e0a 100644 --- a/docs/contentful/Route.md +++ b/docs/contentful/Route.md @@ -1,5 +1,5 @@ # Route -A Route that can render a Viewport at its endpoint, and also include sub-routes with Viewports. When linked to community-app it will render its [Viewport](./viewport.md) under the specified `URL`. +A Route that can render a Viewport at its endpoint, and also include sub-routes with Viewports. When linked to community-app it will render its [Viewport](./Viewport.md) under the specified `URL`. ## Fields ![](./pics/Route.png) \ No newline at end of file diff --git a/docs/contentful/Shape.md b/docs/contentful/Shape.md new file mode 100644 index 0000000000..3e1dcaac15 --- /dev/null +++ b/docs/contentful/Shape.md @@ -0,0 +1,15 @@ +## Shape + +Generic Shape model. Primarily used for render shape separator between sections on the page. + +![screenshot](./pics/Shape/screenshot.png) + +**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1hoEvvNhVOZ3crj94JegC6 + +## Fields + +- **Name** | Name of the entry. +- **Shape SVG** | Shape SVG file to be applied to the page. +- **Inline** | Embed the shape as inline SVG element. Defaults to "No" which means the shape is applied as background image to the element. +- **Height** | Shapes need some height defined. Defaults to 100px if not set otherwise. +- **Extra Styles for Container** | Extra CSS inline styles that will overwrite image container defaults. diff --git a/docs/contentful/Tabs.md b/docs/contentful/Tabs.md new file mode 100644 index 0000000000..6938b61d97 --- /dev/null +++ b/docs/contentful/Tabs.md @@ -0,0 +1,48 @@ +# Tabs + +Generic Tabs model. Each tab holds a list of [TabsItem](./TabsItem.md) entry type, that provide content for it. + +![screenshot](./pics/Tabs/screenshot.png) + +**Preview:** https://community-app.topcoder-dev.com/examples/contentful/tabs/5WgUyXj8xlPsFSPaMdC1ze + +## Fields + +- **Name** | Name of the entry. +- **TabList** | List of TabsItem type entry. Please refer to [TabsItem docs](./TabsItem.md) for more details. +- **Theme** | Tabs theme. Please refer to [theme](#theme) for more details. +- **Selected** | Default TabsItem selected. +- **URL Query Name** | Name in URL queries. Defaults to id if not set. +- **Force Render Tab Panel** | When set to true, tabs will render content even not selected. + +## Theme + +Tabs theme. + +### Default + +![default](./pics/Tabs/default.png) + +### Zurich + +![zurich](./pics/Tabs/zurich.png) + +### Underline + +![underline](./pics/Tabs/underline.png) + +### Underline dark + +![underline-dark](./pics/Tabs/underline-dark.png) + +### Pills + +![pills](./pics/Tabs/pills.png) + +### Vertical + +![vertical](./pics/Tabs/vertical.png) + +### Underline box + +![underline-box](./pics/Tabs/underline-box.png) diff --git a/docs/contentful/TabsItem.md b/docs/contentful/TabsItem.md new file mode 100644 index 0000000000..ed57c3316e --- /dev/null +++ b/docs/contentful/TabsItem.md @@ -0,0 +1,11 @@ +# TabsItem + +Generic TabsItem model used specifically for [Tabs](./Tabs.md) type entry. + +![screenshot](./pics/TabsItem/screenshot.png) + +**Preview:** https://community-app.topcoder-dev.com/examples/contentful/tabs/5WgUyXj8xlPsFSPaMdC1ze + +- **Name** | Name of the entry. +- **Tab** | Content of the tab button. +- **Panel** | Content to render when tab is active. diff --git a/docs/contentful/Viewport.md b/docs/contentful/Viewport.md new file mode 100644 index 0000000000..652abec24e --- /dev/null +++ b/docs/contentful/Viewport.md @@ -0,0 +1,6 @@ +# Viewport + +A generic container for other objects, that renders its children into a container element. It supports nested viewports, different layout options for viewport content via themes. Viewport should be considered as the main content layout and grouping component. + +## Fields +![](./pics/Viewport.png) \ No newline at end of file diff --git a/docs/contentful/animations.md b/docs/contentful/animations.md index bc5645786c..cfa2faace0 100644 --- a/docs/contentful/animations.md +++ b/docs/contentful/animations.md @@ -1,10 +1,14 @@ # Animations On Scroll -Animationg Contentful components on scroll is implemetented currently for following components: -- Viewport -- Image -- ContentBlock +Animation Contentful components on scroll is implemented currently for following components: +- [Viewport](./Viewport.md) +- [Image](./Image.md) +- [ContentBlock](./ContentBlock.md) -Definig a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one. +![screenshot](./pics/Animation/screenshot.png) + +**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn + +Defining a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one. ![](./pics/anim1.png) ## Animation Model diff --git a/docs/contentful/index.md b/docs/contentful/index.md index 8ffe8244ed..d85de5fa69 100644 --- a/docs/contentful/index.md +++ b/docs/contentful/index.md @@ -18,15 +18,23 @@ Instructions are also provided below for developments that want to modify/create - [Basics](./content-writer-basics.md) - Content Types - [Accordion](./accordion.md) + - [Animation](./Animation.md) + - [App Component](./AppComponent.md) - [Banner](./banner.md) - [ContentBlock](./ContentBlock.md) - [Content Slider](./slider.md) - [Countdown](./Countdown.md) - [Dashboard Announcement](./DashboardAnnouncement.md) - [Dropdown](./Dropdown.md) + - [Image](./Image.md) + - [Modal](./Modal.md) + - [Shape](./Shape.md) + - [Tabs](./Tabs.md) + - [TabsItem](./TabsItem.md) - [Navigation Menu](./NavigationMenu.md) + - [Quote](./Quote.md) - [Route](./Route.md) - - [Viewport](./viewport.md) + - [Viewport](./Viewport.md) - [Member Card](./memberCard.md) - [Article](./Article.md) - [Preview Content](./preview-content.md) diff --git a/docs/contentful/pics/Animation/screenshot.png b/docs/contentful/pics/Animation/screenshot.png new file mode 100644 index 0000000000..2fa2bf1646 Binary files /dev/null and b/docs/contentful/pics/Animation/screenshot.png differ diff --git a/docs/contentful/pics/AppComponent/default-theme.png b/docs/contentful/pics/AppComponent/default-theme.png new file mode 100644 index 0000000000..304155e4d6 Binary files /dev/null and b/docs/contentful/pics/AppComponent/default-theme.png differ diff --git a/docs/contentful/pics/AppComponent/member-path.png b/docs/contentful/pics/AppComponent/member-path.png new file mode 100644 index 0000000000..e19e046411 Binary files /dev/null and b/docs/contentful/pics/AppComponent/member-path.png differ diff --git a/docs/contentful/pics/AppComponent/screenshot.png b/docs/contentful/pics/AppComponent/screenshot.png new file mode 100644 index 0000000000..9accac58d8 Binary files /dev/null and b/docs/contentful/pics/AppComponent/screenshot.png differ diff --git a/docs/contentful/pics/AppComponent/tco20-theme.png b/docs/contentful/pics/AppComponent/tco20-theme.png new file mode 100644 index 0000000000..7905f06b94 Binary files /dev/null and b/docs/contentful/pics/AppComponent/tco20-theme.png differ diff --git a/docs/contentful/pics/AppComponent/tco22-theme.png b/docs/contentful/pics/AppComponent/tco22-theme.png new file mode 100644 index 0000000000..59f3d9a4dc Binary files /dev/null and b/docs/contentful/pics/AppComponent/tco22-theme.png differ diff --git a/docs/contentful/pics/Image/screenshot.png b/docs/contentful/pics/Image/screenshot.png new file mode 100644 index 0000000000..5b586ef113 Binary files /dev/null and b/docs/contentful/pics/Image/screenshot.png differ diff --git a/docs/contentful/pics/Modal/screenshot.png b/docs/contentful/pics/Modal/screenshot.png new file mode 100644 index 0000000000..df6881ecae Binary files /dev/null and b/docs/contentful/pics/Modal/screenshot.png differ diff --git a/docs/contentful/pics/Quote/screenshot.png b/docs/contentful/pics/Quote/screenshot.png new file mode 100644 index 0000000000..9860b516ca Binary files /dev/null and b/docs/contentful/pics/Quote/screenshot.png differ diff --git a/docs/contentful/pics/Shape/screenshot.png b/docs/contentful/pics/Shape/screenshot.png new file mode 100644 index 0000000000..441c3f4c67 Binary files /dev/null and b/docs/contentful/pics/Shape/screenshot.png differ diff --git a/docs/contentful/pics/Tabs/default.png b/docs/contentful/pics/Tabs/default.png new file mode 100644 index 0000000000..945f9e6801 Binary files /dev/null and b/docs/contentful/pics/Tabs/default.png differ diff --git a/docs/contentful/pics/Tabs/pills.png b/docs/contentful/pics/Tabs/pills.png new file mode 100644 index 0000000000..49982154de Binary files /dev/null and b/docs/contentful/pics/Tabs/pills.png differ diff --git a/docs/contentful/pics/Tabs/screenshot.png b/docs/contentful/pics/Tabs/screenshot.png new file mode 100644 index 0000000000..c6d2f8af4f Binary files /dev/null and b/docs/contentful/pics/Tabs/screenshot.png differ diff --git a/docs/contentful/pics/Tabs/underline-box.png b/docs/contentful/pics/Tabs/underline-box.png new file mode 100644 index 0000000000..6c4859613e Binary files /dev/null and b/docs/contentful/pics/Tabs/underline-box.png differ diff --git a/docs/contentful/pics/Tabs/underline-dark.png b/docs/contentful/pics/Tabs/underline-dark.png new file mode 100644 index 0000000000..ce8c80a2ca Binary files /dev/null and b/docs/contentful/pics/Tabs/underline-dark.png differ diff --git a/docs/contentful/pics/Tabs/underline.png b/docs/contentful/pics/Tabs/underline.png new file mode 100644 index 0000000000..c38f489726 Binary files /dev/null and b/docs/contentful/pics/Tabs/underline.png differ diff --git a/docs/contentful/pics/Tabs/vertical.png b/docs/contentful/pics/Tabs/vertical.png new file mode 100644 index 0000000000..7c1a142397 Binary files /dev/null and b/docs/contentful/pics/Tabs/vertical.png differ diff --git a/docs/contentful/pics/Tabs/zurich.png b/docs/contentful/pics/Tabs/zurich.png new file mode 100644 index 0000000000..c6f20c171e Binary files /dev/null and b/docs/contentful/pics/Tabs/zurich.png differ diff --git a/docs/contentful/pics/TabsItem/screenshot.png b/docs/contentful/pics/TabsItem/screenshot.png new file mode 100644 index 0000000000..82cdb6f163 Binary files /dev/null and b/docs/contentful/pics/TabsItem/screenshot.png differ diff --git a/package.json b/package.json index 47838d7999..c2d172eb45 100644 --- a/package.json +++ b/package.json @@ -150,7 +150,7 @@ "supertest": "^3.1.0", "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3", "tc-ui": "^1.0.12", - "topcoder-react-lib": "1.2.1", + "topcoder-react-lib": "1.2.2", "topcoder-react-ui-kit": "2.0.1", "topcoder-react-utils": "0.7.8", "turndown": "^4.0.2", diff --git a/src/assets/images/icon-not-found.svg b/src/assets/images/icon-not-found.svg new file mode 100644 index 0000000000..eb39f3e40d --- /dev/null +++ b/src/assets/images/icon-not-found.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index 9d98296594..768994e45e 100644 --- a/src/shared/components/SortingSelectBar/style.scss +++ b/src/shared/components/SortingSelectBar/style.scss @@ -24,7 +24,7 @@ $down-arrow-size: $base-unit; font-size: 13px; line-height: 13px; margin: 0; - padding: 0 0 0 10px; + padding: 4.5px 0 4.5px 10px; border: none; text-transform: none; } diff --git a/src/shared/components/challenge-listing/ChallengeCard/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/index.jsx index 8ffc8fb7de..71d4064b00 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/index.jsx +++ b/src/shared/components/challenge-listing/ChallengeCard/index.jsx @@ -49,7 +49,7 @@ function ChallengeCard({ const registrationPhase = (challenge.phases || []).filter(phase => phase.name === 'Registration')[0]; const isRegistrationOpen = registrationPhase ? registrationPhase.isOpen : false; - const isRecommendedChallenge = challenge.jaccard_index; + const isRecommendedChallenge = !!challenge.jaccard_index; return (
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx index b39254214c..7e354fb936 100644 --- a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx +++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx @@ -306,7 +306,7 @@ export default function FiltersPanel({ const recommendedCheckboxTip = (
-

Shows available challenges
that match your skills

+

Show the best challenges for you.

); diff --git a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx index cc4898d94d..a4fd9bca1a 100644 --- a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx +++ b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx @@ -9,7 +9,7 @@ import PT from 'prop-types'; // import qs from 'qs'; import React, { useRef } from 'react'; // import { config } from 'topcoder-react-utils'; -import Sort, { SORTS } from 'utils/challenge-listing/sort'; +import Sort from 'utils/challenge-listing/sort'; import { NO_LIVE_CHALLENGES_CONFIG, BUCKETS, BUCKET_DATA, isRecommendedChallengeType, } from 'utils/challenge-listing/buckets'; @@ -18,6 +18,7 @@ import Waypoint from 'react-waypoint'; // import { challenge as challengeUtils } from 'topcoder-react-lib'; import CardPlaceholder from '../../placeholders/ChallengeCard'; import ChallengeCard from '../../ChallengeCard'; +import NoRecommenderChallengeCard from '../../NoRecommenderChallengeCard'; import './style.scss'; // const COLLAPSED_SIZE = 10; @@ -53,9 +54,6 @@ export default function Bucket({ isLoggedIn, setSearchText, }) { - const activeBucketData = isRecommendedChallengeType(bucket, filterState) - ? [SORTS.BEST_MATCH] : BUCKET_DATA[bucket].sorts.filter(item => item !== 'bestMatch'); - const refs = useRef([]); refs.current = []; const addToRefs = (el) => { @@ -180,33 +178,50 @@ export default function Bucket({ // // instead of waiting for scrolling to hit the react-waypoint to do the loadMore // loadMore(); // } - + const isRecommended = isRecommendedChallengeType(bucket, filterState); + const isHighestPaying = isRecommended && _.sumBy(filteredChallenges, 'jaccard_index') === 0; + const sectionTile = isHighestPaying ? 'HIGHEST PAYING OPEN CHALLENGES' : 'Recommended Open Challenges'; return ( // challenges.length !== 0 // && ( -
- ({ - label: Sort[item].name, - value: item, - })) - } - title={BUCKET_DATA[bucket].name} - value={{ - label: Sort[activeSort].name, - value: activeSort, - }} - /> - {cards} +
{ - !expanding && !expandable && loadMore && !loading && activeBucket === bucket ? ( - - ) : null + isHighestPaying && (!loading || filteredChallenges.length > 0) + && } - {placeholders} - { +
+ { + isRecommended + ? filteredChallenges.length > 0 && ( + + ) + : ( + ({ + label: Sort[item].name, + value: item, + })) + } + title={BUCKET_DATA[bucket].name} + value={{ + label: Sort[activeSort].name, + value: activeSort, + }} + /> + ) + } + {cards} + { + !expanding && !expandable && loadMore && !loading && activeBucket === bucket ? ( + + ) : null + } + {placeholders} + { // (expandable || loadMore) && (expandable || !keepPlaceholders) && !loading && !expanded ? ( (expanding || expandable) && !loading && loadMore && (expandable ? expanded : !expanded) ? ( ) : null - } + } +
// ) ); diff --git a/src/shared/components/challenge-listing/NoChallengeCard/index.jsx b/src/shared/components/challenge-listing/NoChallengeCard/index.jsx deleted file mode 100644 index 36f7130201..0000000000 --- a/src/shared/components/challenge-listing/NoChallengeCard/index.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import './style.scss'; -import ComputerIcon from 'assets/images/icon-computer.svg'; - -function NoChallengeCard() { - return ( -
-
- -
- - There are no challenges open for registration at the moment that match your skills.
- Try exploring other challenges or checking back later. - -
- ); -} - -export default NoChallengeCard; diff --git a/src/shared/components/challenge-listing/NoChallengeCard/style.scss b/src/shared/components/challenge-listing/NoChallengeCard/style.scss deleted file mode 100644 index 0cf45ef169..0000000000 --- a/src/shared/components/challenge-listing/NoChallengeCard/style.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '~styles/mixins'; - -.container { - width: 70%; - height: 150px; - background-color: #fff; - border-radius: 4px; - display: flex; - justify-content: center; - flex-direction: column; - margin: 20px 4px 0 4px; -} - -.icon { - text-align: center; - padding-top: 30px; -} - -.text { - @include roboto-regular; - - font-size: 13px; - text-align: center; - padding-bottom: 26px; - padding-top: 10px; - line-height: 22px; - color: $tc-gray-60; -} diff --git a/src/shared/components/challenge-listing/NoRecommenderChallengeCard/index.jsx b/src/shared/components/challenge-listing/NoRecommenderChallengeCard/index.jsx new file mode 100644 index 0000000000..39ef766991 --- /dev/null +++ b/src/shared/components/challenge-listing/NoRecommenderChallengeCard/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import { Link, config } from 'topcoder-react-utils'; +import './style.scss'; +import NotFoundIcon from 'assets/images/icon-not-found.svg'; + +const base = config.URL.BASE; + +function NoRecommenderChallengeCard() { + return ( +
+
+ +
+ + NO VERIFIED SKILLS ON YOUR PROFILE + + + Your recommended challenges are based on your Verified Skills. + Competing in challenges is a great way to earn them. + +
+ ); +} + +export default NoRecommenderChallengeCard; diff --git a/src/shared/components/challenge-listing/NoRecommenderChallengeCard/style.scss b/src/shared/components/challenge-listing/NoRecommenderChallengeCard/style.scss new file mode 100644 index 0000000000..e1048e8f16 --- /dev/null +++ b/src/shared/components/challenge-listing/NoRecommenderChallengeCard/style.scss @@ -0,0 +1,62 @@ +@import '~styles/mixins'; + +.container { + min-height: 178px; + background-color: #fff; + border-radius: 4px; + display: flex; + justify-content: center; + flex-direction: column; + margin-top: 20px; +} + +.icon { + display: flex; + justify-content: center; + + @include xs-to-sm { + padding-top: 37.61px; + } + + @include sm-to-xl { + padding-top: 46.25px; + } +} + +.text-header { + @include xs-to-lg { + margin: 17.92px 10px 0 10px; + } + + @include lg-to-xl { + margin: 26.68px 10px 0 10px; + } + + @include barlow-semi-bold; + + font-size: 16px; + text-align: center; + line-height: 16px; + color: #2a2a2a; +} + +.text { + @include roboto-regular; + + padding: 8px 10px 24px; + font-size: 16px; + text-align: center; + line-height: 26px; + color: #2a2a2a; +} + +.challenge-link { + color: #2862b9; + text-decoration: underline; + + &:hover, + &:active, + &:visited { + color: #2862b9; + } +} diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx index c05b8ab9fe..bc3bf94b7f 100644 --- a/src/shared/components/challenge-listing/index.jsx +++ b/src/shared/components/challenge-listing/index.jsx @@ -15,7 +15,6 @@ import Sidebar from 'containers/challenge-listing/Sidebar'; // import { config } from 'topcoder-react-utils'; import { useMediaQuery } from 'react-responsive'; -import NoChallengeCard from './NoChallengeCard'; import Listing from './Listing'; // import ChallengeCardPlaceholder from './placeholders/ChallengeCard'; import Banner from './Banner'; @@ -51,7 +50,6 @@ export default function ChallengeListing(props) { // isBucketSwitching, isLoggedIn, setSearchText, - loadingOpenForRegistrationChallenges, } = props; // const { challenges } = props; @@ -151,10 +149,6 @@ export default function ChallengeListing(props) { ); const desktop = useMediaQuery({ minWidth: 1024 }); - const isRecommendedOn = filterState.recommended - && !loadingOpenForRegistrationChallenges - && activeBucket === 'openForRegistration' - && !openForRegistrationChallenges.length; return (
@@ -186,11 +180,7 @@ export default function ChallengeListing(props) { />
- { - isRecommendedOn - ? - : challengeCardContainer - } + { challengeCardContainer }
diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js index d1cf709f58..55883e82a0 100644 --- a/src/shared/utils/challenge-listing/buckets.js +++ b/src/shared/utils/challenge-listing/buckets.js @@ -58,7 +58,7 @@ export const BUCKET_DATA = { // hideCount: false, name: 'Open for registration', sorts: [ - SORTS.BEST_MATCH, + // SORTS.BEST_MATCH, SORTS.MOST_RECENT_START_DATE, // SORTS.TIME_TO_REGISTER, // SORTS.TIME_TO_SUBMIT,