+
+
+
+ );
+};
+
+CommunityUpdates.propTypes = {
+ blogs: PT.arrayOf(PT.shape()),
+};
+
+CommunityUpdates.defaultProps = {
+ blogs: [],
+};
+
+export default CommunityUpdates;
diff --git a/src/shared/components/Dashboard/CommunityUpdates/styles.scss b/src/shared/components/Dashboard/CommunityUpdates/styles.scss
new file mode 100644
index 0000000000..6a708d9a9c
--- /dev/null
+++ b/src/shared/components/Dashboard/CommunityUpdates/styles.scss
@@ -0,0 +1,159 @@
+@import '~styles/tc-styles';
+
+.community-updates {
+ display: flex;
+ flex-direction: column;
+ color: #3d3d3d;
+
+ header {
+ background-color: $tc-white;
+ padding-bottom: 24px;
+
+ @media only screen and (min-width: 1132px) {
+ margin-top: 0;
+ padding-top: 0;
+ }
+
+ h1.section-title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 29px;
+ color: #3d3d3d;
+ text-align: center;
+ text-transform: uppercase;
+ padding-top: 30px;
+ margin-bottom: 30px;
+ }
+ }
+
+ .posts {
+ padding: 0 10px 6px;
+
+ @media only screen and (min-width: 570px) {
+ display: flex;
+ flex-flow: row wrap;
+ margin: 0 auto;
+ padding-left: 0;
+ padding-right: 0;
+ width: 550px;
+ }
+
+ @media only screen and (min-width: 850px) {
+ width: 830px;
+ }
+
+ @media only screen and (min-width: 1132px) {
+ width: 1110px;
+ }
+
+ .post {
+ margin-top: 6px;
+ background-color: $tc-white;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #f0f0f0;
+
+ @media only screen and (min-width: 570px) {
+ margin-top: 6px;
+ width: 270px;
+ // height: 386px;
+
+ &:nth-child(2n + 1) {
+ margin-right: 10px;
+ }
+ }
+
+ @media only screen and (min-width: 850px) {
+ margin-top: 6px;
+ margin-right: 10px;
+
+ &:nth-child(3) {
+ margin-right: 0;
+ }
+ }
+
+ @media only screen and (min-width: 1132px) {
+ margin-top: 6px;
+
+ &:nth-child(3) {
+ margin-right: 10px;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ .blog-link {
+ min-height: 76px;
+ padding: 20px 10px 12px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 22px;
+ background-color: #f2faff;
+ height: 76px;
+ overflow: hidden;
+
+ @media only screen and (min-width: 570px) {
+ padding: 20px 20px 12px;
+ }
+
+ a {
+ display: block;
+ height: 44px;
+ overflow: hidden;
+ text-decoration: none;
+ color: inherit;
+ }
+ }
+
+ .description {
+ padding: 20px 10px;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ line-height: 18px;
+
+ @media only screen and (min-width: 570px) {
+ padding: 20px;
+ }
+
+ a {
+ display: block;
+ margin-top: 25px;
+ color: #0096ff;
+ text-decoration: none;
+
+ @media only screen and (min-width: 1132px) {
+ margin-top: 0;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+
+ .blog-links {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: $tc-white;
+ min-height: 72px;
+
+ @media only screen and (min-width: 900px) {
+ padding: 30px 0;
+ }
+
+ text-transform: uppercase;
+
+ a {
+ color: #0096ff;
+ font-size: 12px;
+ }
+ }
+}
diff --git a/src/shared/components/Dashboard/Header/index.jsx b/src/shared/components/Dashboard/Header/index.jsx
new file mode 100644
index 0000000000..777d8afd11
--- /dev/null
+++ b/src/shared/components/Dashboard/Header/index.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import Handle from 'components/Handle';
+import DefaultUserIcon from '../../../../assets/images/ico-user-default.svg';
+import './styles.scss';
+
+export default function Header(props) {
+ const { title, profile, financials } = props;
+ return (
+ From the Community Blog
+
+ {
+ blogs.map(blog => (
+
+
+
+ ))
+ }
+
+ {blog.title}
+
+
+
+ View More
+
+
+
+ );
+}
+
+Header.propTypes = {
+ title: PT.string,
+ profile: PT.shape(),
+ financials: PT.number,
+};
+
+Header.defaultProps = {
+ title: '',
+ profile: {
+ maxRating: {},
+ },
+ financials: 0,
+};
diff --git a/src/shared/components/Dashboard/Header/styles.scss b/src/shared/components/Dashboard/Header/styles.scss
new file mode 100644
index 0000000000..329904f689
--- /dev/null
+++ b/src/shared/components/Dashboard/Header/styles.scss
@@ -0,0 +1,110 @@
+.header-dashboard {
+ max-width: 1242px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.page-state-header {
+ background-color: #fcfcfc;
+ padding: 15px;
+ border-bottom: 1px solid #f0f0f0;
+
+ header {
+ display: flex;
+ flex-direction: column;
+
+ h1 {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 31px;
+ color: #3d3d3d;
+ text-transform: uppercase;
+ text-align: center;
+ margin-bottom: 15px;
+ }
+
+ .info {
+ display: flex;
+ flex-direction: row;
+
+ .pic {
+ img.profile-circle {
+ border-radius: 50%;
+ display: inline;
+ width: 60px;
+ height: 60px;
+ }
+ }
+ }
+
+ .user-metrics {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ margin-bottom: 12px;
+ margin-left: 15px;
+
+ .money-earned {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .number {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ font-size: 18px;
+ line-height: 23px;
+ color: #3d3d3d;
+ }
+
+ p:not(.number) {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 13px;
+ text-transform: lowercase;
+ margin-left: 5px;
+ color: #a3a3ae;
+
+ @media only screen and (min-width: 600px) {
+ font-size: 12px;
+ line-height: 14px;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media (min-width: 768px) {
+ .page-state-header {
+ padding: 30px 60px;
+
+ header {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ .page-info {
+ order: 2;
+ display: flex;
+ flex-direction: row;
+
+ h1 {
+ font-size: 36px;
+ line-height: 43px;
+ }
+ }
+
+ .info {
+ order: 1;
+ }
+
+ .user-metrics {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
diff --git a/src/shared/components/Dashboard/MyChallenges/ChallengeFilter.jsx b/src/shared/components/Dashboard/MyChallenges/ChallengeFilter.jsx
new file mode 100644
index 0000000000..1da0da3304
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/ChallengeFilter.jsx
@@ -0,0 +1,40 @@
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+
+import './ChallengeFilter.scss';
+
+const ChallengeFilter = (props) => {
+ const { groups, selectedGroupId, selectGroup } = props;
+ return (
+
+
+
+
+
+
+ {title}
+
+
+ {
+ profile &&
+
+
+ }
+
+
+ }
+ ${financials.toLocaleString()}
+Earned
+
+ {
+ groups.map(group => (
+
+ );
+};
+
+ChallengeFilter.propTypes = {
+ groups: PT.arrayOf(PT.shape()),
+ selectedGroupId: PT.string,
+ selectGroup: PT.func.isRequired,
+};
+
+ChallengeFilter.defaultProps = {
+ groups: [],
+ selectedGroupId: '',
+};
+
+export default ChallengeFilter;
diff --git a/src/shared/components/Dashboard/MyChallenges/ChallengeFilter.scss b/src/shared/components/Dashboard/MyChallenges/ChallengeFilter.scss
new file mode 100644
index 0000000000..87bef5d7a5
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/ChallengeFilter.scss
@@ -0,0 +1,29 @@
+@import '~styles/tc-includes';
+
+.container {
+ width: 270px;
+ background-color: #48f;
+ border-radius: 2px;
+ padding: 10px;
+ align-self: flex-start;
+ color: $tc-white;
+ font-size: 12px;
+ line-height: 24px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ margin-left: 15px;
+
+ .row {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 12px;
+ margin: 2px 0;
+ cursor: pointer;
+ border-radius: 4px;
+
+ &.selected,
+ &:hover {
+ background-color: $tc-white;
+ color: #48f;
+ }
+ }
+}
diff --git a/src/shared/components/Dashboard/MyChallenges/ChallengeLinks.jsx b/src/shared/components/Dashboard/MyChallenges/ChallengeLinks.jsx
new file mode 100644
index 0000000000..4dbf46bd85
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/ChallengeLinks.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+
+import { challengeLinks as getLink } from 'utils/tc';
+import './ChallengeLinks.scss';
+
+const ChallengeLinks = (props) => {
+ const { viewMode, challenge } = props;
+ return (
+ selectGroup(group.id)}
+ styleName={cn(['row', { selected: group.id === selectedGroupId }])}
+ >
+ {group.name}
+ {group.number}
+
+ ))
+ }
+
+
+
+ {challenge.subTrack === 'MARATHON_MATCH' &&
+ );
+};
+
+ChallengeLinks.propTypes = {
+ viewMode: PT.oneOf(['tile', 'list']).isRequired,
+ challenge: PT.shape().isRequired,
+};
+
+export default ChallengeLinks;
diff --git a/src/shared/components/Dashboard/MyChallenges/ChallengeLinks.scss b/src/shared/components/Dashboard/MyChallenges/ChallengeLinks.scss
new file mode 100644
index 0000000000..a43c42033c
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/ChallengeLinks.scss
@@ -0,0 +1,133 @@
+@import '~styles/tc-includes';
+
+.challenge-links.tile-view {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+
+ a {
+ text-decoration: none;
+
+ p {
+ color: #a3a3ae;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 10px;
+ line-height: 14px;
+ text-transform: uppercase;
+ align-self: flex-start;
+ }
+ }
+
+ .stats,
+ .registrants,
+ .submissions,
+ .forum {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .registrants,
+ .submissions,
+ .form {
+ cursor: pointer;
+ }
+
+ .registrants {
+ margin-right: 15px;
+ }
+
+ div[class$="-icon"] {
+ margin-right: 3px;
+ }
+
+ .registrants-icon {
+ @include background-image-size(15px, 16px);
+
+ background-image: url(assets/images/dashboard/ico-users.svg);
+ }
+
+ .submissions-icon {
+ @include background-image-size(22px, 14px);
+
+ background-image: url(assets/images/dashboard/ico-submissions.svg);
+ }
+
+ .forum-icon {
+ @include background-image-size(20px, 17px);
+
+ background-image: url(assets/images/dashboard/ico-posts.svg);
+ }
+}
+
+.challenge-links.list-view {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+ padding: 0 15px;
+
+ @media only screen and (min-width: 1000px) {
+ padding: 0 30px;
+ }
+
+ a {
+ width: 35px;
+ height: 48px;
+ text-align: center;
+ text-decoration: none;
+ display: flex;
+
+ &.registrants,
+ &.submissions,
+ &.forum {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .icon {
+ order: 2;
+ }
+
+ p {
+ order: 1;
+ color: #a3a3ae;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: uppercase;
+ }
+ }
+
+ .registrants-icon,
+ .submissions-icon {
+ margin: 5px auto 0;
+ }
+
+ .registrants-icon {
+ @include background-image-size(14px, 19px);
+
+ background-image: url(assets/images/dashboard/ico-users.svg);
+ }
+
+ .submissions-icon {
+ @include background-image-size(24px, 17px);
+
+ background-image: url(assets/images/dashboard/ico-submissions.svg);
+ }
+
+ .forum-icon {
+ margin: 3px auto 2px;
+
+ @include background-image-size(30px, 27px);
+
+ background-image: url(assets/images/dashboard/ico-posts.svg);
+ }
+}
diff --git a/src/shared/components/Dashboard/MyChallenges/ChallengeTile.jsx b/src/shared/components/Dashboard/MyChallenges/ChallengeTile.jsx
new file mode 100644
index 0000000000..848beae8f5
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/ChallengeTile.jsx
@@ -0,0 +1,226 @@
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+
+import { stripUnderscore, challengeLinks as getLink } from 'utils/tc';
+import ChallengeLinks from './ChallengeLinks';
+import './ChallengeTile.scss';
+
+function listRoles(roles) {
+ if (!roles) {
+ return 'No assigned role.';
+ }
+
+ const rolesString = roles.join(', ');
+
+ if (rolesString.length > 60) {
+ return `${rolesString.slice(0, 57)}...`;
+ }
+ return rolesString;
+}
+
+const ChallengeTile = (props) => {
+ const { challenge, viewMode } = props;
+ return (
+ {challenge.numRegistrants[0]}
} + {challenge.subTrack !== 'MARATHON_MATCH' &&{challenge.numRegistrants}
} + + + +{challenge.numSubmissions}
+ + + +Posts
+ +
+ {
+ viewMode === 'tile' &&
+
+ );
+};
+
+ChallengeTile.propTypes = {
+ viewMode: PT.oneOf(['tile', 'list']).isRequired,
+ challenge: PT.shape().isRequired,
+};
+
+export default ChallengeTile;
diff --git a/src/shared/components/Dashboard/MyChallenges/ChallengeTile.scss b/src/shared/components/Dashboard/MyChallenges/ChallengeTile.scss
new file mode 100644
index 0000000000..c978080234
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/ChallengeTile.scss
@@ -0,0 +1,814 @@
+@import '~styles/tc-styles';
+
+// Common styles between tile and list view
+
+.challenge {
+ .private-challenge-banner {
+ width: 100%;
+ flex: 1;
+ display: flex;
+
+ .title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 18px;
+ line-height: 23px;
+ color: #3d3d3d;
+ text-transform: uppercase;
+ }
+
+ img {
+ width: auto;
+ }
+
+ span {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 11px;
+ line-height: 15px;
+ text-transform: uppercase;
+ color: #b7b7b7;
+ text-align: center;
+ }
+ }
+
+ .invite-only-banner {
+ width: 100%;
+ flex: 1;
+ display: flex;
+
+ .title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 18px;
+ line-height: 23px;
+ color: #3d3d3d;
+ text-transform: uppercase;
+ }
+
+ img {
+ width: auto;
+ }
+
+ span {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 11px;
+ line-height: 15px;
+ text-transform: uppercase;
+ color: #b7b7b7;
+ text-align: center;
+ }
+ }
+}
+
+// Default Challenge Tile Stylings
+.challenge.tile-view {
+ header {
+ width: 270px;
+ border-bottom: 1px solid #f0f0f0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 5px 10px;
+
+ a.name,
+ span.name {
+ display: block;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 16px;
+ max-height: 48px;
+ overflow: hidden;
+ color: #3d3d3d;
+ text-decoration: none;
+ text-transform: uppercase;
+ margin-bottom: 5px;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ p.subtrack-color {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 10px;
+ line-height: 14px;
+ text-transform: uppercase;
+ margin-bottom: 5px;
+ }
+ }
+
+ .challenge-card__bottom {
+ width: 268px;/* 2px adjustment for 2 1px borders */
+ flex: 2;
+ display: flex;
+ flex-direction: column;
+ }
+
+ // challenge details section
+ .challenge-details {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 0;
+ flex: 2;
+ }
+
+ .private-challenge-banner {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .title {
+ margin-bottom: 60px;
+ }
+
+ span {
+ margin-top: 20px;
+ }
+ }
+
+ .invite-only-banner {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .title {
+ margin-bottom: 60px;
+ }
+
+ span {
+ margin-top: 20px;
+ }
+ }
+
+ // roles bar is common for both active and completed
+ .roles {
+ width: 100%;
+ border-radius: 0 0 4px 4px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ min-height: 36px;
+ padding: 0 20px;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 17px;
+ background-color: #f6f6f6;
+
+ span {
+ padding: 0;
+
+ @include ellipsis;
+
+ span:first-child {
+ color: #a3a3ae;
+ white-space: nowrap;
+ }
+ }
+ }
+
+ .active-challenge {
+ height: 390px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ position: relative;
+ width: 270px;
+ border: 1px solid #e0e0e0;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: $tc-white;
+
+ .challenge-details {
+ .currentPhase {
+ margin-bottom: 20px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 18px;
+ line-height: 23px;
+ text-transform: uppercase;
+ color: #3d3d3d;
+ }
+
+ .challenge-calendar {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 75px;
+ height: 63px;
+ background-image: url(assets/images/dashboard/ico-calendar.svg);
+
+ > p {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 700;
+ }
+
+ .ends-in {
+ margin-top: 3px;
+ font-size: 10px;
+ line-height: 13px;
+ text-transform: uppercase;
+ color: #7f7f7f;
+ }
+
+ .time-remaining {
+ margin-top: 5px;
+ font-size: 24px;
+ color: #3d3d3d;
+ }
+
+ .unit-of-time {
+ margin-top: 1px;
+ font-size: 10px;
+ text-transform: lowercase;
+ color: #7f7f7f;
+ }
+
+ &.challenge-late {
+ .ends-in,
+ .time-remaining,
+ .unit-of-time {
+ color: #e66;
+ }
+ }
+ }
+
+ .stalled-challenge {
+ min-height: 83px;
+ padding: 21px 20px 0;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 18px;
+ text-transform: uppercase;
+ text-align: center;
+ color: #a3a3ae;
+ }
+
+ .phase-action {
+ min-height: 55px;
+
+ .submit {
+ margin: 12px;
+ display: block;
+ text-align: center;
+
+ &.btn-danger {
+ color: #e66e66;
+ background-color: $tc-white;
+ border-color: #e66e66;
+
+ &:hover {
+ background-color: #e66e66;
+ color: $tc-white;
+ }
+
+ &:active {
+ background-color: #e0493e;
+ box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+
+ .submitted {
+ position: relative;
+ height: 30px;
+ line-height: 30px;
+ margin-bottom: 25px;
+ padding-left: 35px;
+ padding-right: 20px;
+ border: 1px solid #f0f0f0;
+ border-radius: 4px;
+ background-color: $tc-white;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ text-transform: uppercase;
+ color: #3d3d3d;
+
+ &::before {
+ content: '';
+ width: 15px;
+ height: 15px;
+ background: url(assets/images/dashboard/ico-checkmark.svg);
+ background-size: 15px 15px;
+ position: absolute;
+ bottom: 6px;
+ left: 14px;
+ }
+ }
+ }
+ }
+ }
+
+ .completed-challenge {
+ height: 390px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ width: 270px;
+ border: 1px solid #e0e0e0;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: $tc-white;
+ position: relative;
+
+ header {
+ position: relative;
+
+ .date-completed {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 10px;
+ line-height: 14px;
+ text-transform: uppercase;
+ color: #a3a3ae;
+ margin-bottom: 5px;
+ }
+
+ .winner-ribbon {
+ position: absolute;
+ z-index: 1;
+ bottom: -33px;
+ left: -2px;
+
+ @include background-image-size(73px, 26px);
+
+ background: url(assets/images/dashboard/ico-winner-ribbon.svg);
+ }
+ }
+
+ .challenge-details {
+ justify-content: space-between;
+ align-items: center;
+
+ &.DATA_SCIENCE {
+ flex: 2;
+ justify-content: center;
+ }
+
+ .design-challenge-user-place {
+ display: flex;
+ flex-direction: column;
+ flex: 2;
+
+ .tile-view {
+ flex: 2;
+ justify-content: flex-end;
+ }
+ }
+
+ .dev-challenge-user-place {
+ display: flex;
+ flex-direction: column;
+ flex: 2;
+
+ .tile-view {
+ flex: 2;
+ }
+ }
+
+ .marathon-score {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+
+ .score {
+ margin-bottom: 5px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ line-height: 38px;
+ color: #3d3d3d;
+ }
+
+ p:last-child {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 14px;
+ color: #a3a3ae;
+ text-transform: uppercase;
+ }
+ }
+ }
+ }
+
+ @media only screen and (max-width: 768px) {
+ .active-challenge,
+ .completed-challenge {
+ height: auto;
+ margin: auto;
+ }
+ }
+
+ .past-design-details {
+ img {
+ height: 200px;
+ }
+ }
+}
+
+.challenge.list-view {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 10px;
+ padding: 20px 0;
+ padding-left: 5px;
+ min-height: 110px;
+ border: 1px solid #e0e0e0;
+ border-radius: 6px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: $tc-white;
+
+ // common styles for active and completed
+
+ header {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 0 15px;
+ border-right: 1px solid #f0f0f0;
+
+ @media only screen and (min-width: 1000px) {
+ padding: 0 30px;
+ }
+
+ a.name,
+ span.name {
+ display: block;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 16px;
+ max-height: 32px;
+ overflow: hidden;
+ color: #3d3d3d;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ p.subtrack-color {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: uppercase;
+ }
+
+ .roles {
+ max-width: 362px;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ line-height: 18px;
+ color: #3d3d3d;
+
+ @include ellipsis;
+
+ span:first-child {
+ color: #a3a3ae;
+ white-space: nowrap;
+ }
+ }
+ }
+
+ .challenge-details {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 15px;
+ border-right: 1px solid #f0f0f0;
+
+ @media only screen and (min-width: 1000px) {
+ padding: 0 10px 0 30px;
+ }
+
+ .challenge-info {
+ .currentPhase {
+ margin-bottom: 10px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 18px;
+ color: #3d3d3d;
+ text-transform: uppercase;
+ }
+
+ .ends-in {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ color: #a3a3ae;
+ }
+
+ &.challenge-late {
+ .ends-in,
+ .time-remaining,
+ .unit-of-time {
+ color: #e66;
+ }
+ }
+ }
+
+ .marathon-score {
+ text-align: center;
+
+ .score {
+ margin-bottom: 5px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ line-height: 38px;
+ color: #3d3d3d;
+ }
+
+ p:last-child {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ color: #a3a3ae;
+ text-transform: uppercase;
+ }
+ }
+
+ .phase-action {
+ .submit {
+ display: block;
+ margin: 6px 0;
+ text-align: center;
+
+ &.btn-danger {
+ color: #e66e66;
+ background-color: $tc-white;
+ border-color: #e66e66;
+
+ &:hover {
+ background-color: #e66e66;
+ color: $tc-white;
+ }
+
+ &:active {
+ background-color: #e0493e;
+ box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+
+ .submitted {
+ position: relative;
+ height: 30px;
+ line-height: 30px;
+ padding-left: 35px;
+ padding-right: 20px;
+ border: 1px solid #f0f0f0;
+ border-radius: 4px;
+ background-color: $tc-white;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ text-transform: uppercase;
+ color: #3d3d3d;
+
+ &::before {
+ content: '';
+ width: 15px;
+ height: 15px;
+ background: url(assets/images/dashboard/ico-checkmark.svg);
+ background-size: 15px 15px;
+ position: absolute;
+ bottom: 6px;
+ left: 14px;
+ }
+ }
+ }
+ }
+
+ .private-challenge-banner {
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .invite-only-banner {
+ flex-direction: row;
+ justify-content: space-between;
+
+ .invite-only-banner__description {
+ .title {
+ margin-bottom: 10px;
+ }
+ }
+ }
+
+ // specific styles for active challenges in list view
+ .active-challenge {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+
+ header {
+ max-width: 470px;
+ flex: 1;
+ }
+
+ .challenge-details {
+ flex: 2;
+ }
+ }
+
+ // specific styles for completed challenges in list view
+ .completed-challenge {
+ width: 100%;
+ display: flex;
+ flex-flow: row wrap;
+ overflow: hidden;
+
+ header {
+ flex: 2;
+ }
+
+ .challenge-details {
+ flex: 1;
+ }
+ }
+}
+
+// Dynamic colors based on track
+.DESIGN {
+ &.tile-view {
+ header {
+ border-left: 3px solid #21b2f1;
+ border-radius: 3px 0 0;
+ }
+ }
+
+ &.challenge.list-view {
+ border-left: 3px solid #21b2f1;
+ }
+
+ .subtrack-color {
+ color: #21b2f1;
+ }
+}
+
+.DEVELOP {
+ &.tile-view {
+ header {
+ border-left: 3px solid #05c14f;
+ border-radius: 3px 0 0;
+ }
+ }
+
+ &.challenge.list-view {
+ border-left: 3px solid #05c14f;
+ }
+
+ .subtrack-color {
+ color: #05c14f;
+ }
+}
+
+.DATA_SCIENCE {
+ &.tile-view {
+ header {
+ border-left: 3px solid #fc9a00;
+ border-radius: 3px 0 0;
+ }
+ }
+
+ &.challenge.list-view {
+ border-left: 3px solid #fc9a00;
+ }
+
+ .subtrack-color {
+ color: #fc9a00;
+ }
+}
+
+.COPILOT {
+ &.tile-view {
+ header {
+ border-left: 3px solid #7d939e;
+ border-radius: 3px 0 0;
+ }
+ }
+
+ &.challenge.list-view {
+ border-left: 3px solid #7d939e;
+ }
+
+ .subtrack-color {
+ color: #7d939e;
+ }
+}
+
+.challenge-tile {
+ &.tile-view {
+ margin-bottom: 13px;
+
+ @media only screen and (max-width: 767px) {
+ display: inline-block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 15px;
+ }
+
+ @media only screen and (min-width: 768px) {
+ &:nth-child(2n + 1) {
+ margin-left: 15px;
+ }
+ }
+
+ @media only screen and (min-width: 870px) {
+ margin-left: 15px;
+
+ &:nth-child(3n) {
+ margin-left: 0;
+ }
+ }
+
+ @media only screen and (min-width: 1155px) {
+ &:nth-child(3n) {
+ margin-left: 15px;
+ }
+
+ &:nth-child(4n) {
+ margin-left: 0;
+ }
+ }
+ }
+
+ &.list-view {
+ width: 100%;
+ }
+}
+
+a.tc-btn {
+ height: 40px;
+ padding: 0 15px;
+ line-height: 40px;
+ border-radius: 4px;
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ background-image: none;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ font-style: normal;
+ color: $tc-white;
+ text-transform: uppercase;
+ outline: none;
+ text-shadow: none;
+
+ &:focus {
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ color: $tc-white;
+ }
+
+ &:hover {
+ background-color: #097dce;
+ border-color: #097dce;
+ color: $tc-white;
+ }
+
+ &:active {
+ background-color: #097dce;
+ background-image: none;
+ border-color: #097dce;
+ box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
+ line-height: 30px;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ cursor: default;
+ }
+}
+
+.labels {
+ position: relative;
+}
+
+.group-label {
+ background-color: #48f;
+ padding: 2px 5px;
+ border-radius: 2px;
+ font-size: 10px;
+ line-height: 14px;
+ color: #fff;
+ position: absolute;
+ right: -9px;
+ bottom: 2px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+}
diff --git a/src/shared/components/Dashboard/MyChallenges/index.jsx b/src/shared/components/Dashboard/MyChallenges/index.jsx
new file mode 100644
index 0000000000..089c2284b2
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/index.jsx
@@ -0,0 +1,181 @@
+/* eslint jsx-a11y/no-noninteractive-element-interactions:0 */
+
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+import _ from 'lodash';
+
+import config from 'utils/config';
+import ChallengeTile from './ChallengeTile';
+import ChallengeFilter from './ChallengeFilter';
+import './styles.scss';
+
+export default class MyChallenges extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ activeTab: 0,
+ viewMode: 'tile',
+ selectedGroupId: '',
+ };
+ this.setViewMode = this.setViewMode.bind(this);
+ this.setTab = this.setTab.bind(this);
+ this.selectGroup = this.selectGroup.bind(this);
+ }
+
+ setViewMode(viewMode) {
+ this.setState({
+ viewMode,
+ });
+ }
+
+ setTab(activeTab) {
+ this.setState({
+ activeTab,
+ });
+ }
+
+ selectGroup(id) {
+ this.setState({
+ selectedGroupId: id,
+ });
+ }
+
+ render() {
+ let challenges = this.props.challenges;
+ if (this.state.selectedGroupId) {
+ challenges = _.filter(challenges, c => c.groups[this.state.selectedGroupId]);
+ }
+
+ const groups = _.map(this.props.groups, (g) => {
+ const group = _.cloneDeep(g);
+ group.number = _.filter(this.props.challenges, (c) => {
+ if (c.groups[group.id]) {
+ // eslint-disable-next-line no-param-reassign
+ c.groupLabel = group.name;
+ return true;
+ }
+ return false;
+ },
+ ).length;
+ return group;
+ });
+
+ groups.unshift({
+ name: 'All communities',
+ id: '',
+ number: this.props.challenges.length,
+ });
+
+ return (
+
+ {
+ challenge.status === 'ACTIVE' &&
+
+ }
+ {
+ viewMode === 'list' &&
+
+
+ {
+ !challenge.isPrivate &&
+ {challenge.name}
+ }
+ {
+ challenge.isPrivate &&
+ {challenge.name}
+ }
+
+
+ }
+
+
+ {stripUnderscore(challenge.subTrack)}
+ { + challenge.groupLabel && +{challenge.groupLabel}
+ } +
+
+
+
+ {
+ challenge.track !== 'DATA_SCIENCE' &&
+ {challenge.userCurrentPhase}
+ { + challenge.userCurrentPhaseEndTime && +
+
+ }
+ {
+ !challenge.userCurrentPhaseEndTime &&
+ {challenge.isLate ? 'Late for' : 'Ends In'}
+{challenge.userCurrentPhaseEndTime[0]}
+{challenge.userCurrentPhaseEndTime[1]}
+
+ This challenge is currently paused.
+
+ }
+ {
+ challenge.userAction &&
+
+ {
+ challenge.userAction === 'Submit' &&
+ Submit
+ }
+ {
+ challenge.userAction === 'Submit' &&
+ Unregister
+ }
+ {
+ challenge.userAction === 'Appeal' &&
+ View Scorecards
+ }
+ {
+ challenge.userAction === 'Appeal' && challenge.isSubmitter &&
+ Complete Appeals
+ }
+ {
+ challenge.userAction === 'Submitted' &&
+
+ }
+ Submitted
+ }
+ {
+ challenge.userAction === 'Registered' &&
+ Registered
+ }
+ + Role: + {listRoles(challenge.userDetails.roles)} +
+ } +
+ {
+ challenge.status === 'ACTIVE' &&
+
+ }
+
+
+ {
+ !challenge.isPrivate &&
+ {challenge.name}
+ }
+ {
+ challenge.isPrivate &&
+
+ }
+
+
+ }
+ {stripUnderscore(challenge.subTrack)}
++ Role: + {listRoles(challenge.userDetails.roles)} +
+
+
+
+
+ {
+ challenge.userAction &&
+ {challenge.userCurrentPhase}
+ { + challenge.userCurrentPhaseEndTime && +{`Ends ${challenge.userCurrentPhaseEndTime[2]}`}
+ } + { + !challenge.userCurrentPhaseEndTime && +This challenge is currently paused.
+ } +
+ {
+ challenge.userAction === 'Submit' &&
+ Submit
+ }
+ {
+ challenge.userAction === 'Submit' &&
+ Unregister
+ }
+ {
+ challenge.userAction === 'Appeal' &&
+ View Scorecards
+ }
+ {
+ challenge.userAction === 'Appeal' && challenge.isSubmitter &&
+ Complete Appeals
+ }
+ {
+ challenge.userAction === 'Submitted' &&
+
+ }
+ Submitted
+ }
+ {
+ challenge.userAction === 'Registered' &&
+ Registered
+ }
+
+
+
+ {
+ this.state.activeTab === 0 && this.props.challenges && this.props.challenges.length > 0 &&
+
+ {
+ this.state.viewMode === 'list' &&
+
+ }
+ {
+ this.state.activeTab === 1 && this.props.groups && this.props.groups.length > 0 &&
+
+ {
+ this.props.groups.map(group => (
+
+ }
+ {
+ this.state.activeTab === 0 &&
+
+ );
+ }
+}
+
+MyChallenges.propTypes = {
+ challenges: PT.arrayOf(PT.shape()),
+ groups: PT.arrayOf(PT.shape()),
+};
+
+MyChallenges.defaultProps = {
+ challenges: [],
+ groups: [],
+};
diff --git a/src/shared/components/Dashboard/MyChallenges/styles.scss b/src/shared/components/Dashboard/MyChallenges/styles.scss
new file mode 100644
index 0000000000..33fbc93872
--- /dev/null
+++ b/src/shared/components/Dashboard/MyChallenges/styles.scss
@@ -0,0 +1,280 @@
+// adopt from 'topcoder-app/assets/css/my-dashboard/my-challenges.scss'
+
+@import '~styles/tc-includes';
+
+.challenges {
+ header {
+ position: relative;
+ display: flex;
+ justify-content: space-around;
+ }
+
+ .section-title {
+ color: #3d3d3d;
+ text-align: center;
+ display: flex;
+ padding-top: 30px;
+
+ h1 {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 29px;
+ margin: 0 50px;
+ padding-bottom: 30px;
+ cursor: pointer;
+ }
+
+ .active {
+ border-bottom: 3px solid #1bf;
+ }
+ }
+
+ .challenge-view-toggle {
+ position: absolute;
+ bottom: 30px;
+ right: 55px;
+
+ @media only screen and (max-width: 767px) {
+ display: none;
+ }
+
+ button {
+ margin-right: 17px;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ background-color: $tc-white;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 11px;
+ line-height: 16px;
+ text-transform: uppercase;
+ color: #a3a3ae;
+ cursor: pointer;
+ transition: none;
+
+ &:hover {
+ color: #000;
+ transition: none;
+ }
+
+ &.disabled {
+ color: #000;
+ cursor: default;
+
+ &.tile::before {
+ background: url(assets/images/dashboard/grid-on.svg);
+ }
+
+ &.list::before {
+ background: url(assets/images/dashboard/list-on.svg);
+ }
+ }
+
+ &::before {
+ content: '';
+ display: inline-block;
+ margin-bottom: 2px;
+ margin-right: 4px;
+ vertical-align: middle;
+ width: 12px;
+ height: 12px;
+ background-size: 12px, 12px;
+ background-repeat: no-repeat;
+ }
+
+ &.tile {
+ &::before {
+ background: url(assets/images/dashboard/grid-off.svg);
+ }
+
+ &:hover::before {
+ background: url(assets/images/dashboard/grid-on.svg);
+ }
+ }
+
+ &.list {
+ &::before {
+ background: url(assets/images/dashboard/list-off.svg);
+ }
+
+ &:hover::before {
+ background: url(assets/images/dashboard/list-on.svg);
+ }
+ }
+ }
+ }
+
+ .section-loading {
+ min-height: 500px;
+ }
+
+ .hasChallenges {
+ padding: 20px 15px 5px;
+ border-top: 1px solid #f0f0f0;
+ border-bottom: 1px solid #f0f0f0;
+ background-color: #fcfcfc;
+
+ &.list-view-active {
+ padding-top: 0;
+ border: 0;
+ background-color: $tc-white;
+
+ .section-titles {
+ display: flex;
+ max-width: 1122px;
+ margin: 0 auto;
+ border: 1px solid $tc-white;
+ padding-left: 5px;
+
+ div {
+ display: inline-block;
+ flex: 2;
+ align-self: flex-end;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 15px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ color: #7f7f7f;
+ font-size: 12px;
+ text-transform: uppercase;
+
+ @media only screen and (min-width: 1000px) {
+ padding-left: 30px;
+ }
+ }
+
+ .challenge-title,
+ .phase-title {
+ border-right: 1px solid $tc-white;
+ }
+
+ .regs-subs-title {
+ flex: 1;
+ }
+ }
+
+ .filter-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ max-width: 1122px;
+ margin: 0 auto 12px;
+ }
+ }
+
+ .challenges {
+ display: flex;
+ flex-direction: column;
+ margin-left: 0;
+
+ &.tile-view,
+ &.list-view {
+ @media only screen and (min-width: 768px) {
+ display: flex;
+ margin: 0 auto;
+ overflow: visible;
+ white-space: normal;
+ }
+ }
+
+ &.tile-view {
+ @media only screen and (min-width: 768px) {
+ flex-flow: row-reverse wrap;
+ width: 555px;
+ }
+
+ @media only screen and (min-width: 870px) {
+ width: 840px;
+ }
+
+ @media only screen and (min-width: 1155px) {
+ width: 1125px;
+ }
+ }
+
+ &.list-view {
+ flex-flow: column nowrap;
+ align-items: center;
+ max-width: 1122px;
+ }
+ }
+ }
+
+ .my-challenges-links {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: $tc-white;
+ min-height: 72px;
+ text-transform: uppercase;
+ flex-direction: row;
+ padding: 15px 0;
+ font-size: 12px;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+
+ @media only screen and (min-width: 900px) {
+ padding: 30px 0;
+ }
+
+ a {
+ color: #0096ff;
+ }
+
+ a:not(:first-child) {
+ margin-left: 30px;
+ }
+ }
+}
+
+@media (min-width: 768px) {
+ .my-challenges {
+ .my-challenges-links {
+ a:not(:first-child) {
+ margin-left: 15px;
+ }
+ }
+ }
+}
+
+.communities {
+ display: flex;
+ flex-direction: row;
+ padding: 20px 15px 5px;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media only screen and (min-width: 768px) {
+ width: 555px;
+ }
+
+ @media only screen and (min-width: 870px) {
+ width: 840px;
+ }
+
+ @media only screen and (min-width: 1155px) {
+ width: 1125px;
+ }
+}
+
+.community-tile {
+ width: 270px;
+ height: 390px;
+ border: 1px solid #e0e0e0;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: #fff;
+ margin-right: 15px;
+ margin-bottom: 15px;
+
+ header {
+ border: 1px solid #f0f0f0;
+ height: 68px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
+}
diff --git a/src/shared/components/Dashboard/Program/IosCard.jsx b/src/shared/components/Dashboard/Program/IosCard.jsx
new file mode 100644
index 0000000000..4681aed3ae
--- /dev/null
+++ b/src/shared/components/Dashboard/Program/IosCard.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+
+import config from 'utils/config';
+import { stripUnderscore } from 'utils/tc';
+import './IosCard.scss';
+
+const IosCard = (props) => {
+ const { challenge } = props;
+ /* global location */
+ const SUBDOMAIN = location.href.search('//members') >= 0 ? 'members' : 'www';
+ return (
+
+
+ {
+ this.state.activeTab === 0 &&
+ this.setTab(0)} + > + My Challenges +
+this.setTab(1)} + > + My Communities +
+
+
+
+
+ }
+
+
+ }
+ {
+ this.state.viewMode === 'list' && challenges.length > 0 &&
+
+
+
+
+ }
+ Challenges
+ Phase
+ Registrations & Submissions
+
+ {
+ this.state.viewMode === 'tile' &&
+
+
+ {group.name}
+
+ ))
+ }
+
+ View More
+ Past Challenges
+
+ }
+
+
+
+
+
+ );
+};
+
+IosCard.propTypes = {
+ challenge: PT.shape().isRequired,
+};
+
+export default IosCard;
+
diff --git a/src/shared/components/Dashboard/Program/IosCard.scss b/src/shared/components/Dashboard/Program/IosCard.scss
new file mode 100644
index 0000000000..c7c97cd45a
--- /dev/null
+++ b/src/shared/components/Dashboard/Program/IosCard.scss
@@ -0,0 +1,258 @@
+@import '~styles/tc-styles';
+
+// Default Challenge Tile Stylings
+.challenge.tile-view {
+ position: relative;
+ width: 270px;
+ height: 370px;
+ border: 1px solid #dcdcdc;
+ border-radius: 4px;
+ background-color: $tc-white;
+
+ .challenge-track {
+ width: 5px;
+ height: 91px;
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ border-top-left-radius: 4px;
+ }
+
+ header {
+ height: 91px;
+ border-bottom: 1px solid #f0f0f0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ a.name {
+ display: block;
+ padding: 15px 20px 0;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ color: #3d3d3d;
+ text-decoration: none;
+
+ @include ellipsis;
+
+ text-transform: uppercase;
+ }
+
+ p.subtrack-color {
+ padding: 0 20px;
+ margin-top: 5px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: uppercase;
+ }
+
+ .challenge-links {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ padding: 0 20px;
+ margin-bottom: 10px;
+
+ a {
+ text-decoration: none;
+
+ p {
+ color: #a3a3ae;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: uppercase;
+ }
+ }
+
+ .stats,
+ .registrants,
+ .submissions,
+ .forum {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .registrants,
+ .submissions,
+ .form {
+ cursor: pointer;
+ }
+
+ .registrants {
+ margin-right: 15px;
+ }
+ }
+ }
+
+ .challenge-details {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .currentPhase {
+ margin-top: 40px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 18px;
+ line-height: 23px;
+ text-transform: uppercase;
+ color: #3d3d3d;
+ }
+ }
+
+ .prize-money {
+ margin-top: 32px;
+ margin-bottom: 10px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 24px;
+ }
+
+ .technologies {
+ height: 36px;
+ margin-bottom: 33px;
+ padding: 0 20px;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ line-height: 18px;
+ }
+
+ .challenge-calendar {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 75px;
+ height: 63px;
+ margin-top: 16px;
+ background-image: url(assets/images/dashboard/ico-calendar.svg);
+
+ > p {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ }
+
+ .starts-in {
+ margin-top: 3px;
+ font-size: 10px;
+ line-height: 13px;
+ text-transform: uppercase;
+ color: #7f7f7f;
+ }
+
+ .time-remaining {
+ margin-top: 5px;
+ font-size: 24px;
+ color: #3d3d3d;
+ }
+
+ .unit-of-time {
+ margin-top: 1px;
+ font-size: 10px;
+ text-transform: lowercase;
+ color: #7f7f7f;
+ }
+ }
+
+ .stalled-challenge {
+ margin-top: 31px;
+ margin-bottom: 12px;
+ height: 36px;
+ padding: 0 20px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 18px;
+ text-transform: uppercase;
+ text-align: center;
+ color: #a3a3ae;
+ }
+
+ .phase-action {
+ margin-bottom: 25px;
+ }
+
+ .roles {
+ min-height: 36px;
+ margin-bottom: 25px;
+ color: #3d3d3d;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ line-height: 18px;
+ }
+
+ div[class$="-icon"] {
+ margin-right: 3px;
+ }
+
+ .registrants-icon {
+ width: 15px;
+ height: 16px;
+ background-image: url(assets/images/dashboard/ico-users.svg);
+ background-size: 15px 16px;
+ }
+
+ .submissions-icon {
+ width: 22px;
+ height: 14px;
+ background-image: url(assets/images/dashboard/ico-submissions.svg);
+ }
+
+ .forum-icon {
+ width: 20px;
+ height: 17px;
+ background-image: url(assets/images/dashboard/ico-posts.svg);
+ }
+
+ // Dynamic colors based on track
+ &.DESIGN {
+ .challenge-track {
+ background-color: #21b2f1;
+ }
+
+ header p.subtrack-color {
+ color: #21b2f1;
+ }
+ }
+
+ &.DEVELOP {
+ .challenge-track {
+ background-color: #05c14f;
+ }
+
+ header p.subtrack-color {
+ color: #05c14f;
+ }
+ }
+
+ &.DATA_SCIENCE {
+ .challenge-track {
+ background-color: #fc9a00;
+ }
+
+ header p.subtrack-color {
+ color: #fc9a00;
+ }
+ }
+
+ &.COPILOT {
+ .challenge-track {
+ background-color: #7d939e;
+ }
+
+ header p.subtrack-color {
+ color: #7d939e;
+ }
+ }
+}
diff --git a/src/shared/components/Dashboard/Program/index.jsx b/src/shared/components/Dashboard/Program/index.jsx
new file mode 100644
index 0000000000..86452e7743
--- /dev/null
+++ b/src/shared/components/Dashboard/Program/index.jsx
@@ -0,0 +1,91 @@
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+
+import React from 'react';
+import PT from 'prop-types';
+
+import config from 'utils/config';
+import IosCard from './IosCard';
+import MemberIcon from '../../../../assets/images/Member-06.svg';
+import './styles.scss';
+
+const Program = (props) => {
+ const { challenges, iosRegistered, registerIos } = props;
+ return (
+
+
+ {challenge.name}
+
+
+
+ {stripUnderscore(challenge.subTrack)}
+
+
+ {challenge.userCurrentPhase}
+ { + challenge.userCurrentPhaseEndTime && +
+
+ }
+ {
+ !challenge.userCurrentPhaseEndTime &&
+ Ends In
+{challenge.userCurrentPhaseEndTime[0]}
+{challenge.userCurrentPhaseEndTime[1]}
+This challenge is currently paused.
+ }
+ {
+ challenge.reviewType === 'PEER' &&
+ Peer Review Challenge
+ } + { + challenge.reviewType !== 'PEER' && +{`$${(challenge.totalPrize || 0).toLocaleString()}`}
+ } +{challenge.technologies}
+
+ {
+ iosRegistered &&
+
+
+ }
+
+ {
+ !iosRegistered &&
+
+
+ );
+};
+
+Program.propTypes = {
+ challenges: PT.arrayOf(PT.shape()).isRequired,
+ iosRegistered: PT.bool.isRequired,
+ registerIos: PT.func.isRequired,
+};
+
+export default Program;
+
diff --git a/src/shared/components/Dashboard/Program/styles.scss b/src/shared/components/Dashboard/Program/styles.scss
new file mode 100644
index 0000000000..ec1ff316ea
--- /dev/null
+++ b/src/shared/components/Dashboard/Program/styles.scss
@@ -0,0 +1,279 @@
+@import '~styles/tc-styles';
+
+.programs {
+ .section-loading {
+ min-height: 200px;
+ }
+
+ h1.section-title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 29px;
+ color: #3d3d3d;
+ text-align: center;
+ text-transform: uppercase;
+ padding-top: 30px;
+ margin-bottom: 30px;
+
+ span {
+ text-transform: none;
+ }
+ }
+
+ .unregistered {
+ .empty-state-placeholder {
+ .title {
+ text-transform: none;
+ }
+ }
+ }
+
+ .registered {
+ padding: 20px 15px 5px;
+ border-top: 1px solid #f0f0f0;
+ border-bottom: 1px solid #f0f0f0;
+ background-color: #fcfcfc;
+
+ .badge-and-challenges {
+ white-space: nowrap;
+ overflow-y: hidden;
+ overflow-x: scroll;
+
+ @media only screen and (min-width: 768px) {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: 0 auto;
+ overflow: visible;
+ white-space: normal;
+ width: 555px;
+ }
+
+ @media only screen and (min-width: 870px) {
+ width: 840px;
+ }
+
+ @media only screen and (min-width: 1155px) {
+ width: 1125px;
+ }
+ }
+
+ .registered-badge {
+ display: inline;
+ vertical-align: top;
+ height: 370px;
+ min-width: 270px;
+ border: 1px solid #dcdcdc;
+ border-radius: 4px;
+ background-color: $tc-white;
+
+ @media only screen and (max-width: 767px) {
+ display: inline-block;
+ }
+
+ .flex-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ p {
+ margin-top: 60px;
+ margin-bottom: 37px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 20px;
+ color: #3d3d3d;
+ }
+
+ .badge-timeline {
+ width: 120px;
+ }
+
+ a {
+ display: block;
+ margin-top: 37px;
+ text-decoration: none;
+ }
+ }
+
+ .ios-card {
+ display: inline;
+ margin-bottom: 15px;
+
+ @media only screen and (max-width: 767px) {
+ display: inline-block;
+ margin-left: 15px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ &:nth-child(2n) {
+ margin-left: 15px;
+ }
+ }
+
+ @media only screen and (min-width: 870px) {
+ margin-left: 15px;
+
+ &:nth-child(4n) {
+ margin-left: 0;
+ }
+ }
+
+ @media only screen and (min-width: 1155px) {
+ &:nth-child(4n) {
+ margin-left: 15px;
+ }
+ }
+ }
+ }
+}
+
+.empty-state-placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #3d3d3d;
+ padding: 20px 10px;
+
+ @media only screen and (min-width: 768px) {
+ padding: 30px 20px;
+ }
+
+ .title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 29px;
+ text-align: center;
+ text-transform: uppercase;
+ }
+
+ .content {
+ margin-top: 20px;
+
+ @media only screen and (min-width: 768px) {
+ margin-top: 30px;
+ }
+ }
+
+ .description {
+ max-width: 650px;
+ margin-top: 20px;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 15px;
+ line-height: 24px;
+ text-align: center;
+
+ @media only screen and (min-width: 768px) {
+ margin-top: 30px;
+ }
+
+ @media only screen and (min-width: 900px) {
+ max-width: 856px;
+ }
+ }
+
+ .help-links {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+
+ @media only screen and (min-width: 768px) {
+ margin-top: 30px;
+ }
+
+ .help-link {
+ &:not(:first-child) {
+ margin-top: 30px;
+ }
+ }
+
+ a {
+ text-transform: uppercase;
+ display: block;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+
+ // used more generic css class (secondary-cta)
+ // remove learn-more class once we are sure that it is not being used in any empty state
+ &.secondary-cta,
+ &.learn-more {
+ font-size: 12px;
+ line-height: 12px;
+ color: #a3a3ae;
+ }
+ }
+ }
+}
+
+.empty-state-placeholder.sky {
+ background-image: url(assets/images/pattern-ios-challenges.png);
+ background-repeat: repeat;
+
+ .title {
+ color: $tc-white;
+ }
+
+ .description {
+ color: $tc-white;
+ }
+
+ .help-links {
+ .help-link {
+ .learn-more {
+ color: #f6f6f6;
+ }
+ }
+ }
+}
+
+a.tc-btn {
+ height: 40px;
+ padding: 0 15px;
+ line-height: 40px;
+ border-radius: 4px;
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ background-image: none;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ font-style: normal;
+ color: $tc-white;
+ text-transform: uppercase;
+ outline: none;
+ text-shadow: none;
+
+ &:focus {
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ color: $tc-white;
+ }
+
+ &:hover {
+ background-color: #097dce;
+ border-color: #097dce;
+ color: $tc-white;
+ }
+
+ &:active {
+ background-color: #097dce;
+ background-image: none;
+ border-color: #097dce;
+ box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
+ line-height: 30px;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ cursor: default;
+ }
+}
diff --git a/src/shared/components/Dashboard/SRM/SRMTile.jsx b/src/shared/components/Dashboard/SRM/SRMTile.jsx
new file mode 100644
index 0000000000..ce7acb06b2
--- /dev/null
+++ b/src/shared/components/Dashboard/SRM/SRMTile.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import config from 'utils/config';
+import { timeDiff, localTime } from 'utils/tc';
+import './SRMTile.scss';
+
+const SRMTile = (props) => {
+ const { srm } = props;
+ return (
+ + iOS Community +
+
+
+ }
+ {
+ iosRegistered &&
+
+
+ iOS Community
+
+
+ Earn iOS topcoder badges and exclusive access to iOS challenges,
+ prizes and special community-related events.
+
+
+
+
+ Participate
+
+
+ Learn More
+
+
+
+ }
+
+
+
+
+
+ {
+ challenges.map(challenge => (
+
+
+ ))
+ }
+
+ {
+ srm.status === 'FUTURE' &&
+
+ );
+};
+
+SRMTile.propTypes = {
+ srm: PT.shape().isRequired,
+};
+
+export default SRMTile;
diff --git a/src/shared/components/Dashboard/SRM/SRMTile.scss b/src/shared/components/Dashboard/SRM/SRMTile.scss
new file mode 100644
index 0000000000..c99ed64ba7
--- /dev/null
+++ b/src/shared/components/Dashboard/SRM/SRMTile.scss
@@ -0,0 +1,308 @@
+@import '~styles/tc-styles';
+
+// common styles for both list and tile view
+.srm {
+ .noclick {
+ cursor: default;
+ }
+
+ .phase-status {
+ .registered {
+ position: relative;
+ height: 30px;
+ line-height: 30px;
+ padding-left: 35px;
+ padding-right: 20px;
+ border: 1px solid #f0f0f0;
+ border-radius: 4px;
+ background-color: $tc-white;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ text-transform: uppercase;
+ color: #3d3d3d;
+
+ &::before {
+ content: '';
+ width: 15px;
+ height: 15px;
+ background: url(assets/images/dashboard/ico-checkmark.svg);
+ background-size: 15px 15px;
+ position: absolute;
+ bottom: 6px;
+ left: 14px;
+ }
+ }
+
+ a {
+ display: block;
+ }
+ }
+}
+
+.srm.tile-view {
+ position: relative;
+ width: 270px;
+ height: 321px;
+ border: 1px solid #dcdcdc;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: $tc-white;
+
+ &:hover {
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+ }
+
+ .past-srm {
+ header {
+ a {
+ line-height: 29px;
+ }
+ }
+ }
+
+ .challenge-track {
+ width: 5px;
+ height: 52px;
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ border-top-left-radius: 4px;
+ background-color: #f39426;
+ }
+
+ header {
+ padding: 0 20px;
+ height: 52px;
+ border-bottom: 1px solid #f0f0f0;
+ display: flex;
+ flex-flow: column wrap;
+
+ a {
+ display: block;
+ width: 210px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 49px;
+ color: #3d3d3d;
+ text-decoration: none;
+
+ @include ellipsis;
+ }
+
+ .ended-on {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ text-transform: uppercase;
+ color: #a3a3ae;
+ }
+ }
+
+ .srm-details {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .starts-in,
+ .ended-on {
+ margin-top: 40px;
+ margin-bottom: 20px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 24px;
+
+ span {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ }
+ }
+ }
+
+ .member-stats {
+ display: flex;
+ flex-flow: column wrap;
+ align-items: center;
+
+ .points {
+ margin-top: 40px;
+ margin-bottom: 20px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 24px;
+ display: flex;
+ flex-flow: column wrap;
+ align-items: center;
+
+ span {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ height: 24px;// matches the line-height of the section
+ }
+ }
+
+ .ranks {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin-bottom: 10px;
+
+ .division {
+ width: 84px;
+ height: 84px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ background-color: #f6f6f6;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ color: #3d3d3d;
+
+ p:last-child {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 9px;
+ color: #a3a3ae;
+ text-transform: uppercase;
+ display: flex;
+ flex-flow: column wrap;
+ }
+ }
+
+ .room {
+ width: 84px;
+ height: 84px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ background-color: #f6f6f6;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ color: #3d3d3d;
+ margin-left: 15px;
+
+ p:last-child {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 9px;
+ color: #a3a3ae;
+ text-transform: uppercase;
+ display: flex;
+ flex-flow: column wrap;
+ }
+ }
+ }
+
+ .placement {
+ color: #a3a3ae;
+ text-transform: uppercase;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ margin-bottom: 60px;
+ }
+ }
+
+ .srm-calendar {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 76px;
+ height: 91px;
+ background-image: url(assets/images/dashboard/ico-calendar-detailed.svg);
+
+ span {
+ display: block;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ color: #b7b7b7;
+
+ &.day {
+ margin-top: 2px;
+ font-size: 24px;
+ color: #3d3d3d;
+ }
+
+ &.month,
+ &.time-zone {
+ letter-spacing: 1.6px;
+ font-size: 10px;
+ }
+
+ &.month {
+ margin-top: 3px;
+ margin-left: 3px;
+ }
+
+ &.time-zone {
+ margin-top: 3px;
+ margin-left: 2px;
+ }
+
+ &.hour {
+ margin-top: 18px;
+ margin-left: 3px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ color: #3d3d3d;
+ }
+ }
+ }
+
+ .phase-status {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
+ margin-top: 22px;
+ margin-bottom: 40px;
+ }
+}
+
+a.tc-btn {
+ height: 40px;
+ padding: 0 15px;
+ line-height: 40px;
+ border-radius: 4px;
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ background-image: none;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ font-style: normal;
+ color: $tc-white;
+ text-transform: uppercase;
+ outline: none;
+ text-shadow: none;
+
+ &:focus {
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ color: $tc-white;
+ }
+
+ &:hover {
+ background-color: #097dce;
+ border-color: #097dce;
+ color: $tc-white;
+ }
+
+ &:active {
+ background-color: #097dce;
+ background-image: none;
+ border-color: #097dce;
+ box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
+ line-height: 30px;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ cursor: default;
+ }
+}
diff --git a/src/shared/components/Dashboard/SRM/index.jsx b/src/shared/components/Dashboard/SRM/index.jsx
new file mode 100644
index 0000000000..b3887c5fbd
--- /dev/null
+++ b/src/shared/components/Dashboard/SRM/index.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import config from 'utils/config';
+import SRMTile from './SRMTile';
+import './styles.scss';
+
+const SRM = (props) => {
+ const { srms } = props;
+ return (
+
+
+
+ {srm.name}
+
+
+ }
+
+
+ + Starts in {`${timeDiff(srm.codingStartAt, 'quantity')} + ${timeDiff(srm.codingStartAt, 'unit')}`} +
+
+ {localTime(srm.codingStartAt, 'DD')}
+ {localTime(srm.codingStartAt, 'MMM')}
+ {localTime(srm.codingStartAt, 'hh:mm a')}
+ {localTime(srm.codingStartAt, 'z')}
+
+
+ {srm.userStatus === 'registered' &&
+ Registered
}
+ {
+ srm.userStatus !== 'registered' &&
+
+ Register
+
+
+ }
+
+
+
+
+
+
+ );
+};
+
+SRM.propTypes = {
+ srms: PT.arrayOf(PT.shape()),
+};
+
+SRM.defaultProps = {
+ srms: [],
+};
+
+export default SRM;
diff --git a/src/shared/components/Dashboard/SRM/styles.scss b/src/shared/components/Dashboard/SRM/styles.scss
new file mode 100644
index 0000000000..191a4b3550
--- /dev/null
+++ b/src/shared/components/Dashboard/SRM/styles.scss
@@ -0,0 +1,210 @@
+@import '~styles/tc-styles';
+
+.srms {
+ min-height: 50px;
+ display: flex;
+ flex-direction: column;
+
+ > header {
+ position: relative;
+ margin-bottom: 30px;
+
+ a.viewSRMs {
+ position: absolute;
+ top: 3px;
+ right: 10px;
+ text-decoration: underline;
+ }
+ }
+
+ .section-title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 29px;
+ color: #3d3d3d;
+ text-align: center;
+ text-transform: uppercase;
+ padding-top: 30px;
+ }
+
+ section {
+ padding: 20px 15px 5px;
+ border-top: 1px solid #f0f0f0;
+ border-bottom: 1px solid #f0f0f0;
+ background-color: #fcfcfc;
+
+ .srm-tiles {
+ white-space: nowrap;
+ overflow-y: hidden;
+ overflow-x: scroll;
+
+ @media only screen and (min-width: 768px) {
+ display: flex;
+ flex-flow: row wrap;
+ margin: 0 auto;
+ overflow: visible;
+ white-space: normal;
+ width: 555px;
+ }
+
+ @media only screen and (min-width: 870px) {
+ width: 840px;
+ }
+
+ @media only screen and (min-width: 1155px) {
+ width: 1125px;
+ }
+
+ .srm-tile {
+ display: inline;
+ margin-bottom: 15px;
+
+ @media only screen and (max-width: 767px) {
+ display: inline-block;
+ margin-left: 15px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ &:nth-child(2n + 1) {
+ margin-right: 15px;
+ }
+ }
+
+ @media only screen and (min-width: 870px) {
+ margin-right: 15px;
+
+ &:nth-child(3n) {
+ margin-right: 0;
+ }
+ }
+
+ @media only screen and (min-width: 1155px) {
+ &:nth-child(3n) {
+ margin-right: 15px;
+ }
+
+ &:nth-child(4n) {
+ margin-right: 0;
+ }
+ }
+ }
+
+ .srm-links-card {
+ display: inline;
+ width: 270px;
+ height: 321px;
+ vertical-align: top;
+ margin-bottom: 15px;
+ padding: 0 21px;
+ border: 1px solid #dcdcdc;
+ background-color: $tc-white;
+ border-radius: 4px;
+
+ @media only screen and (max-width: 767px) {
+ display: inline-block;
+ margin-left: 15px;
+ }
+
+ a {
+ width: 196px;
+ text-align: center;
+ }
+ }
+
+ .flex-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ h2 {
+ margin-top: 60px;
+ margin-bottom: 55px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 24px;
+ line-height: 1;
+ text-align: center;
+ color: #3d3d3d;
+ text-transform: uppercase;
+ white-space: normal;
+ max-width: 100%;
+ }
+
+ a {
+ margin-bottom: 21px;
+ }
+ }
+ }
+ }
+
+ .srms-links {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: $tc-white;
+ min-height: 72px;
+ text-transform: uppercase;
+
+ @media only screen and (min-width: 900px) {
+ padding: 30px 0;
+ }
+
+ a {
+ color: #0096ff;
+ font-size: 12px;
+ }
+
+ a:not(:first-child) {
+ margin-left: 30px;
+ }
+ }
+}
+
+a.tc-btn {
+ height: 40px;
+ padding: 0 15px;
+ line-height: 40px;
+ border-radius: 4px;
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ background-image: none;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 12px;
+ font-style: normal;
+ color: $tc-white;
+ text-transform: uppercase;
+ outline: none;
+ text-shadow: none;
+
+ &:focus {
+ border: 1px solid #0096ff;
+ background-color: #0096ff;
+ color: $tc-white;
+ }
+
+ &:hover {
+ background-color: #097dce;
+ border-color: #097dce;
+ color: $tc-white;
+ }
+
+ &:active {
+ background-color: #097dce;
+ background-image: none;
+ border-color: #097dce;
+ box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
+ line-height: 30px;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ cursor: default;
+ }
+}
diff --git a/src/shared/components/Dashboard/SubtrackStats/index.jsx b/src/shared/components/Dashboard/SubtrackStats/index.jsx
new file mode 100644
index 0000000000..64f5e3de48
--- /dev/null
+++ b/src/shared/components/Dashboard/SubtrackStats/index.jsx
@@ -0,0 +1,139 @@
+/* global window */
+
+import React from 'react';
+import PT from 'prop-types';
+import Slider from 'react-slick';
+import _ from 'lodash';
+
+import config from 'utils/config';
+import { stripUnderscore, getRatingColor } from 'utils/tc';
+import './styles.scss';
+
+export default class SubtrackStats extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {};
+ this.updateDimensions = this.updateDimensions.bind(this);
+ }
+
+ componentDidMount() {
+ window.addEventListener('resize', this.updateDimensions);
+ this.updateDimensions();
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.updateDimensions);
+ }
+
+ getSlidesNumber() {
+ const width = this.state.width;
+ if (width >= 1350) {
+ return 7;
+ // desktop
+ } else if (width >= 1180) {
+ // desktop
+ return 6;
+ } else if (width >= 1010) {
+ // desktop
+ return 5;
+ }
+ // tablet & mobile
+ return 4;
+ }
+
+ updateDimensions() {
+ this.setState({ width: window.innerWidth });
+ }
+
+ render() {
+ const { subtracks, handle } = this.props;
+
+ const subtracksEle = tracks => (
+ + Single Round Matches +
+
+ {
+ srms.map(srm => (
+
+
+
+ ))
+ }
+
+
+
+
+ View Past SRMS
+ Launch Arena
+
+
+ {
+ tracks.map(subtrack => (
+
+
+ );
+
+ const navButton = () => ();
+
+ const settings = {
+ dots: false,
+ infinite: false,
+ speed: 500,
+ prevArrow: navButton(),
+ nextArrow: navButton(),
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ centerMode: true,
+ };
+
+ return (
+
+
+
+ ))
+ }
+ + {stripUnderscore(subtrack.subTrack)} +
++ {subtrack.stat} + { + (subtrack.track === 'DEVELOP' || subtrack.track === 'DATA_SCIENCE') && + () + } +
+{subtrack.statType}
+
+ {
+ subtracks && subtracks.length > 0 &&
+
+ );
+ }
+}
+
+SubtrackStats.propTypes = {
+ subtracks: PT.arrayOf(PT.shape()),
+ handle: PT.string,
+};
+
+SubtrackStats.defaultProps = {
+ subtracks: [],
+ handle: '',
+};
diff --git a/src/shared/components/Dashboard/SubtrackStats/styles.scss b/src/shared/components/Dashboard/SubtrackStats/styles.scss
new file mode 100644
index 0000000000..e44212586f
--- /dev/null
+++ b/src/shared/components/Dashboard/SubtrackStats/styles.scss
@@ -0,0 +1,193 @@
+@import '~styles/tc-includes';
+
+.subtrack-stats {
+ width: 100%;
+ max-width: 1242px;
+ background-color: #fff;
+ margin: 0 auto;
+
+ .ratings {
+ .tracks {
+ white-space: nowrap;
+ overflow-y: hidden;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+
+ @media only screen and (min-width: 768px) {
+ display: none;
+ }
+ }
+
+ .responsive-carousel {
+ @media only screen and (max-width: 768px) {
+ display: none;
+ }
+ }
+
+ .slide-wrapper {
+ display: inline-block;
+ }
+
+ .track:not(:first-child)::before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 22px;
+ left: -30px;
+ width: 1px;
+ height: 60px;
+ transform: translateX(0) translateY(20px) rotate(30deg);
+ background-color: #d1d3d4;
+
+ @media only screen and (min-width: 768px) {
+ top: 24px;
+ left: -18px;
+ }
+ }
+
+ .track {
+ position: relative;
+ display: inline-block;
+ margin-right: 65px;
+ padding: 20px 0;
+
+ @media only screen and (min-width: 768px) {
+ width: 130px;
+ margin-right: 20px;
+ padding: 30px 20px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #fcfcfc;
+
+ .subtrack {
+ color: #3d3d3d;
+ border-bottom-color: #3d3d3d;
+ }
+
+ p:last-child {
+ color: #3d3d3d;
+ }
+ }
+ }
+
+ &:first-child {
+ margin-left: 20px;
+ }
+
+ &:last-child {
+ margin-right: 20px;
+ }
+
+ .flex-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ p {
+ font-family: Sofia Pro, Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ color: #a3a3ae;
+
+ &:last-child {
+ text-transform: uppercase;
+ }
+ }
+
+ .subtrack {
+ padding-bottom: 7px;
+ border-bottom: 1px solid #d1d3d4;
+ width: 90px;
+
+ @include ellipsis;
+
+ text-align: center;
+ }
+
+ .rating {
+ position: relative;
+ margin-top: 17px;
+ margin-bottom: 7px;
+ font-size: 32px;
+
+ @media only screen and (max-width: 767px) {
+ margin-top: 10px;
+ }
+
+ span {
+ position: absolute;
+ top: 5px;
+ right: -10px;
+ width: 6px;
+ height: 6px;
+ background-color: #5e9ef1;
+ }
+ }
+ }
+ }
+
+ :global {
+ @import "~slick-carousel/slick/slick.scss";
+
+ .slick-slider {
+ position: relative;
+ }
+
+ .slick-slide {
+ display: block;
+ text-align: center;
+ }
+
+ .slick-arrow {
+ transition: opacity 0.2s ease-out;
+ font-size: 2rem;
+ position: absolute;
+ opacity: 0.75;
+ cursor: pointer;
+ height: 148px;
+ width: 80px;
+ line-height: 148px;
+ top: 0;
+ background-color: #fcfcfc;
+ color: #a3a3ae;
+ text-align: center;
+ display: flex !important;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 99;
+ }
+
+ .slick-disabled {
+ display: none !important;
+ }
+
+ .slick-prev {
+ left: 0;
+
+ &::before {
+ content: "";
+ display: block;
+ width: 20px;
+ height: 38px;
+ background-image: url(assets/images/dashboard/arrow-prev.svg);
+ background-size: 20px 38px;
+ }
+ }
+
+ .slick-next {
+ right: 0;
+
+ &::before {
+ content: "";
+ display: block;
+ width: 20px;
+ height: 38px;
+ background-image: url(assets/images/dashboard/arrow-next.svg);
+ background-size: 20px 38px;
+ }
+ }
+ }
+}
diff --git a/src/shared/components/Handle/index.jsx b/src/shared/components/Handle/index.jsx
new file mode 100644
index 0000000000..31745aa47e
--- /dev/null
+++ b/src/shared/components/Handle/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import { getRatingColor } from 'utils/tc';
+import './styles.scss';
+
+const Handle = (props) => {
+ const { handle, rating, size } = props;
+ const color = getRatingColor(rating);
+ return (
+ {handle}
+ );
+};
+
+Handle.propTypes = {
+ handle: PT.string,
+ rating: PT.number,
+ size: PT.number,
+};
+
+Handle.defaultProps = {
+ handle: '',
+ rating: 0,
+ size: 24,
+};
+
+export default Handle;
diff --git a/src/shared/components/Handle/styles.scss b/src/shared/components/Handle/styles.scss
new file mode 100644
index 0000000000..55f0aee88b
--- /dev/null
+++ b/src/shared/components/Handle/styles.scss
@@ -0,0 +1,5 @@
+.handle {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ line-height: 1.2;
+}
diff --git a/src/shared/components/LeaderboardAvatar/style.scss b/src/shared/components/LeaderboardAvatar/style.scss
index 69d726d20d..f0f71c8365 100644
--- a/src/shared/components/LeaderboardAvatar/style.scss
+++ b/src/shared/components/LeaderboardAvatar/style.scss
@@ -1,5 +1,4 @@
@import '~styles/tc-styles';
-
$leader-space-10: $base-unit * 2;
$leader-space-15: $base-unit * 3;
$leader-space-20: $base-unit * 4;
diff --git a/src/shared/components/Select.jsx b/src/shared/components/Select.jsx
index 97d6031063..0dfcaed88d 100644
--- a/src/shared/components/Select.jsx
+++ b/src/shared/components/Select.jsx
@@ -4,6 +4,7 @@ import PT from 'prop-types';
import ReactSelect from 'react-select';
import 'react-select/dist/react-select.css';
+/* TODO: Do we really need the instanceId? */
export default function Select(props) {
return (
+
+ }
+
+ {
+ subtracksEle(subtracks)
+ }
+
+
+
+ {
+ _.chunk(subtracks, this.getSlidesNumber()).map(chunk => (
+
+
+
+ {
+ subtracksEle(chunk)
+ }
+
+ ))
+ }
+
- {
- sortingOptions.map(optionName => (
-
- ))
- }
-
- );
- }
-
- return (
-
-
- );
- }
+export default function SortingSelectBar({ onSelect, options, title, value }) {
+ return (
+ {filterName}
-
- this.onSelectOption(optionName.value)}
- value={{
- label: selectedSortingOption,
- value: selectedSortingOption,
- }}
- placeholder="Select an option"
- />
-
- {options}
- - Sort by: -
-
+
+ );
}
SortingSelectBar.defaultProps = {
- onSortingSelect: _.noop,
- value: '',
- sortingOptions: [],
- filterName: '',
+ onSelect: _.noop,
+ options: null,
+ title: '',
+ value: null,
};
SortingSelectBar.propTypes = {
- filterName: PT.string,
- sortingOptions: PT.arrayOf(PT.string),
- onSortingSelect: PT.func,
- value: PT.string,
+ onSelect: PT.func,
+ options: PT.arrayOf(PT.shape()),
+ title: PT.string,
+ value: PT.shape(),
};
-
-export default SortingSelectBar;
diff --git a/src/shared/components/challenge-listing/ChallengeStatus/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx
similarity index 92%
rename from src/shared/components/challenge-listing/ChallengeStatus/index.jsx
rename to src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx
index e1941bab62..4779da3d4a 100644
--- a/src/shared/components/challenge-listing/ChallengeStatus/index.jsx
+++ b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx
@@ -3,13 +3,13 @@ import React, { Component } from 'react';
import PT from 'prop-types';
import moment from 'moment';
import LeaderboardAvatar from 'components/LeaderboardAvatar';
-import ChallengeProgressBar from '../ChallengeProgressBar';
-import ProgressBarTooltip from '../Tooltips/ProgressBarTooltip';
-import RegistrantsIcon from '../Icons/RegistrantsIcon';
-import SubmissionsIcon from '../Icons/SubmissionsIcon';
-import Tooltip from '../Tooltips/Tooltip';
-import UserAvatarTooltip from '../Tooltips/UserAvatarTooltip';
-import ForumIcon from '../Icons/forum.svg';
+import ChallengeProgressBar from '../../ChallengeProgressBar';
+import ProgressBarTooltip from '../../Tooltips/ProgressBarTooltip';
+import RegistrantsIcon from '../../Icons/RegistrantsIcon';
+import SubmissionsIcon from '../../Icons/SubmissionsIcon';
+import Tooltip from '../../Tooltips/Tooltip';
+import UserAvatarTooltip from '../../Tooltips/UserAvatarTooltip';
+import ForumIcon from '../../Icons/forum.svg';
import './style.scss';
// Constants
@@ -138,9 +138,8 @@ function getProfile(user) {
class ChallengeStatus extends Component {
constructor(props) {
super(props);
-
- const CHALLENGE_URL = `${props.MAIN_URL}/challenge-details/`;
- const DS_CHALLENGE_URL = `https:${props.config.COMMUNITY_URL}/longcontest/stats/?module=ViewOverview&rd=`;
+ const CHALLENGE_URL = `${config.URL.BASE}/challenge-details/`;
+ const DS_CHALLENGE_URL = `${config.URL.COMMUNITY}/longcontest/stats/?module=ViewOverview&rd=`;
const FORUM_URL = `${config.URL.FORUMS}/?module=Category&categoryID=`;
this.state = {
winners: '',
@@ -198,7 +197,7 @@ class ChallengeStatus extends Component {
activeChallenge() {
const { challenge } = this.props;
const { FORUM_URL } = this.state;
- const MM_LONGCONTEST = `https:${this.props.config.COMMUNITY_URL}/longcontest/?module`;
+ const MM_LONGCONTEST = `${config.URL.COMMUNITY}/longcontest/?module`;
const MM_REG = `${MM_LONGCONTEST}=ViewRegistrants&rd=`;
const MM_SUB = `${MM_LONGCONTEST}=ViewStandings&rd=`;
@@ -254,7 +253,7 @@ class ChallengeStatus extends Component {
}
- {title}
+ { + options ? ( +
+ onSelect(item.value)}
+ value={value}
+ placeholder="Select an option"
+ />
+
+ ) : null
+ }
+ + Sort by: +
+
@@ -339,7 +338,7 @@ class ChallengeStatus extends Component {
.map(winner => ({
handle: winner.handle,
position: winner.placement,
- photoURL: winner.photoURL || `${this.props.MAIN_URL}/i/m/${winner.handle}.jpeg`,
+ photoURL: winner.photoURL || `${config.URL.BASE}/i/m/${winner.handle}.jpeg`,
}));
if (winners && winners.length > MAX_VISIBLE_WINNERS) {
@@ -381,17 +380,13 @@ class ChallengeStatus extends Component {
ChallengeStatus.defaultProps = {
challenge: {},
- config: {},
detailLink: '',
sampleWinnerProfile: undefined,
- MAIN_URL: config.URL.BASE,
};
ChallengeStatus.propTypes = {
challenge: PT.shape(),
- config: PT.shape(),
detailLink: PT.string,
- MAIN_URL: PT.string,
};
export default ChallengeStatus;
diff --git a/src/shared/components/challenge-listing/ChallengeStatus/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss
similarity index 100%
rename from src/shared/components/challenge-listing/ChallengeStatus/style.scss
rename to src/shared/components/challenge-listing/ChallengeCard/Status/style.scss
diff --git a/src/shared/components/challenge-listing/ChallengeCard/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/index.jsx
index 7f8625860f..64aa22aab7 100644
--- a/src/shared/components/challenge-listing/ChallengeCard/index.jsx
+++ b/src/shared/components/challenge-listing/ChallengeCard/index.jsx
@@ -7,7 +7,7 @@ import React from 'react';
import PT from 'prop-types';
import TrackIcon from 'components/TrackIcon';
-import ChallengeStatus from '../ChallengeStatus';
+import ChallengeStatus from './Status';
import PrizesTooltip from '../Tooltips/PrizesTooltip';
import TrackAbbreviationTooltip from '../Tooltips/TrackAbbreviationTooltip';
import './style.scss';
@@ -24,7 +24,6 @@ const numberWithCommas = n => (n ? n.toString().replace(/\B(?=(\d{3})+(?!\d))/g,
function ChallengeCard({
challenge: passedInChallenge,
- config: configFromProps,
sampleWinnerProfile,
onTechTagClicked,
}) {
@@ -84,7 +83,7 @@ function ChallengeCard({
-
+
this.dragHandler(event)}
- onDragStart={(event) => {
- this.drag = {
- currentIndex: index,
- startIndex: index,
- y: event.screenY,
- };
- }}
- onNameChange={(name) => {
- const newFilters = _.clone(this.state.filters);
- newFilters[index].filter = _.clone(newFilters[index].filter);
- newFilters[index].filter.name = name.slice(0, MAX_FILTER_NAME_LENGTH);
- this.setState({ filters: newFilters });
- }}
- onRemove={() => {
- const filterToRemove = this.state.filters[index].filter;
- fetch(`${SAVE_FILTERS_API}/${filterToRemove.uuid}`, {
- headers: {
- Authorization: `Bearer ${this.props.token}`,
- 'Content-Type': 'application/json',
- },
- method: 'DELETE',
- });
- const newFilters = _.clone(this.state.filters);
- newFilters.splice(index, 1);
- this.setState({ filters: newFilters });
- }}
- />
- ));
- return (
- = FILTER_ID.FIRST_USER_DEFINED}
- key={`${filter.name}-filter`}
- name={filter.name}
- onClick={() => this.selectFilter(index)}
- />
- ));
- const myFilters = filters.slice(FILTER_ID.FIRST_USER_DEFINED);
- const domain = SideBarFilters.domainFromUrl(this.props.config.MAIN_URL);
- return (
- selectBucket(bucket)}
+ />
+ );
+
+ const savedFiltersRender = savedFilters.map((item, index) => (
+ selectSavedFilter(index)}
+ />
+ ));
+
+ return (
+ - changeFilterName(index, name)}
+ deleteSavedFilter={() => deleteSavedFilter(item.id)}
+ dragSavedFilterMove={e => dragSavedFilterMove(e, dragState)}
+ dragSavedFilterStart={e => dragSavedFilterStart(index, e)}
+ resetFilterName={() => resetFilterName(index)}
+ key={item.id}
+ name={item.name}
+ updateSavedFilter={() => updateSavedFilter(item)}
+ />
+ ));
+
+ return (
+
-
- );
-
- const myChallenges = () => (
-
-
- );
-
- const others = SidebarMock.others.map(other => (
-
-
- ));
-
- const myFilters = SidebarMock.myFilters.map(other => (
-
-
- ));
-
+export default function SideBarFilters(props) {
return (
-
${numberWithCommas(challenge.totalPrize)}
Purse
@@ -94,7 +93,6 @@ function ChallengeCard({
- {
- Object.keys(filterChallengesStore).map((filterName) => {
- let expansionButtion;
- const unfilteredChallenges = filterChallengesStore[filterName];
- const filteredChallenges = _.sortBy(_.filter(unfilteredChallenges, additionalFilter),
- sortingFunctionStore[filterSortingStore[filterName]]);
- let initialChallenges = unfilteredChallenges;
-
- const challengeCountTotal = filterTotalCountStore[filterName];
- const trimmedFilterName = filterName.replace(/\s+/g, '-').toLowerCase();
- const filter = findFilterByName(filterName, filters);
- const { sortingOptions } = filter;
- const { length: filteredChallengeNumber } = filteredChallenges;
- const { length: unFilteredChallengeNumber } = unfilteredChallenges;
- const challengeCategoryExpandable = isChallengeCategoryExpandable({
- initialNumberToShow,
- filteredChallengeNumber,
- unFilteredChallengeNumber,
- challengeCountTotal,
- });
-
- if (!expanded) initialChallenges = filteredChallenges.slice(0, initialNumberToShow);
- if (!expanded && challengeCategoryExpandable) {
- expansionButtion = getExpandBucketButton(
- () => this.onExpandFilterResult(filterName),
- style['view-more'],
- );
- }
-
- return (
-
- );
- }
-}
-
-ChallengeCardContainer.defaultProps = {
- challengeGroupId: '',
- onTechTagClicked: _.noop,
- onExpandFilterResult: _.noop,
- filters: defaultFilters,
- additionalFilter() {
- return true;
- },
- currentFilterName: '',
- challenges: [],
- expanded: false,
- config: {},
-};
-
-ChallengeCardContainer.propTypes = {
- auth: PT.shape({
- tokenV3: PT.string,
- user: PT.shape({
- handle: PT.string,
- }),
- }).isRequired,
- challengeGroupId: PT.string,
- onTechTagClicked: PT.func,
- onExpandFilterResult: PT.func,
- additionalFilter: PT.func,
- challenges: PT.arrayOf(PT.shape()),
- currentFilterName: PT.string,
- filters: PT.arrayOf(PT.shape({
- check: PT.func,
- name: PT.string,
- getApiUrl: PT.func,
- sortingOptions: PT.arrayOf(PT.string),
- allIncluded: PT.bool,
- info: PT.shape(),
- })),
- expanded: PT.oneOfType([PT.bool, PT.string]),
- getChallenges: PT.func.isRequired,
- getMarathonMatches: PT.func.isRequired,
- config: PT.shape(),
-};
-
-export default ChallengeCardContainer;
diff --git a/src/shared/components/challenge-listing/ChallengeCardContainer/sortingFunctionStore.js b/src/shared/components/challenge-listing/ChallengeCardContainer/sortingFunctionStore.js
deleted file mode 100644
index 125eff8504..0000000000
--- a/src/shared/components/challenge-listing/ChallengeCardContainer/sortingFunctionStore.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const getTimeStamp = dateTime => new Date(dateTime).getTime();
-
-export default {
- 'Most recent': item => -getTimeStamp(item.submissionEndTimestamp),
- 'Time to register': item => getTimeStamp(item.registrationEndDate || item.submissionEndDate),
- 'Time to submit': item => item.submissionEndTimestamp,
- 'Phase end time': item => item.currentPhaseRemainingTime,
- '# of registrants': item => -item.numRegistrants,
- '# of submissions': item => -item.numSubmissions,
- 'Prize high to low': item => -item.totalPrize,
- 'Title A-Z': item => item.name,
- 'Current phase': item => item.status,
-};
diff --git a/src/shared/components/challenge-listing/ChallengeCardContainer/storeConstructorHelpers.js b/src/shared/components/challenge-listing/ChallengeCardContainer/storeConstructorHelpers.js
deleted file mode 100644
index 96e32dc804..0000000000
--- a/src/shared/components/challenge-listing/ChallengeCardContainer/storeConstructorHelpers.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/* global
- fetch, Promise
-*/
-
-import _ from 'lodash';
-import challengeFilters from './challengeFilters';
-
-// construct a store with filter/bucket name as key and its current
-// matched challenges as value
-export function getFilterChallengesStore(filters, challenges) {
- const nonAllInclusiveFilters = _.filter(filters, filter => (!filter.allIncluded));
- const filterChallengesStore = nonAllInclusiveFilters.reduce(
- (filterStore, filter) => _.set(filterStore, filter.name, []),
- {},
- );
-
- return challenges.reduce((filterStore, challenge) => (
- nonAllInclusiveFilters.reduce((store, filter) => {
- if (filter.check(challenge)) store[filter.name].push(challenge);
- return store;
- }, filterStore)
- ), filterChallengesStore);
-}
-
-// construct a store with filter/bucket name as key and its stored
-// sorting setting name as value
-export function getFilterSortingStore(filters, sortingSetting = {}) {
- return filters.reduce((filterSortingStore, filter) => (
- _.set(
- filterSortingStore,
- filter.name,
- sortingSetting[filter.name] || filter.sortingOptions[0],
- )
- ), {});
-}
-
-// construct a store with filter/bucket name as key and its total challenge
-// count as value if available
-export function getFilterTotalCountStore() {
- return Promise.all(
- challengeFilters.map((filter) => {
- const newFilter = _.assign({}, filter);
-
- if (filter.getApiUrl) {
- return fetch(filter.getApiUrl(1, 1))
- .then(response => response.json())
- .then((responseJson) => {
- if (responseJson.result) {
- return _.set(newFilter, 'totalCount', responseJson.result.metadata.totalCount);
- }
- return _.set(newFilter, 'totalCount', responseJson.total);
- });
- }
- return _.set(newFilter, 'totalCount', null);
- }),
- ).then(filters => (
- filters.reduce((filterTotalCountStore, filter) => (
- _.set(filterTotalCountStore, filter.name, filter.totalCount)
- ), {})
- ));
-}
diff --git a/src/shared/components/challenge-listing/Filters/BaseFilter.js b/src/shared/components/challenge-listing/Filters/BaseFilter.js
deleted file mode 100644
index ab6433ec87..0000000000
--- a/src/shared/components/challenge-listing/Filters/BaseFilter.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * An abstract filter object.
- * It is the base class for hierarchy of filter objects implemented in various
- * components inside the challenge listing page. It describes their common
- * interface, thus making it easier to combine and handle them together.
- */
-
-import _ from 'lodash';
-
-class BaseFilter {
-
- /**
- * Creates a new filter object.
- * @param {Object|String|undefined} arg
- * 1) When argument is an object, we assume it is a filter of a compatible
- * type, and we create the new filter as a copy of the given one.
- * 2) When param is a string, we assume it is a string obtained from a previous
- * call to stringify() method of a filter of the same type, and we create
- * the filter encoded in that string.
- * 3) When no argument is passed, we create a dummy filter, which accept any
- * object passed in.
- * Default implementation in this base class does nothing in any of these cases.
- */
- constructor(arg) {
- _.noop(arg);
- }
-
- /**
- * Returns the count of active primitive filters. Just for visualization
- * purposes.
- * @return The count.
- */
- count() {
- _.noop(this);
- return 0;
- }
-
- /**
- * Returns a filter function, which can be passed to an array's fitler()
- * method to filter it with this filter. This is more efficient, than providing
- * a filter() method, which applies current filter to an array passed in as
- * the argument.
- * @return (Function(Object)) Filter function.
- */
- getFilterFunction() {
- _.noop(this);
- return () => true;
- }
-
- merge() {
- _.noop(this);
- return this;
- }
-
- /**
- * Serialises the filter into a string.
- * @return {String} String representation of the filter.
- */
- stringify() {
- _.noop(this);
- return '';
- }
-}
-
-export default BaseFilter;
diff --git a/src/shared/components/challenge-listing/Filters/ChallengeFilter.js b/src/shared/components/challenge-listing/Filters/ChallengeFilter.js
deleted file mode 100644
index 30afcc01d1..0000000000
--- a/src/shared/components/challenge-listing/Filters/ChallengeFilter.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/* global
- atob, btoa
-*/
-
-/**
- * This Filter class represents the filters managed by the ChallengeFilters
- * component. It inherits the filters managed by the FilterPanel.
- */
-
-import _ from 'lodash';
-
-import FilterPanelFilter from './FiltersPanel/FilterPanelFilter';
-
-export const DATA_SCIENCE_TRACK = 'datasci';
-export const DESIGN_TRACK = 'design';
-export const DEVELOP_TRACK = 'develop';
-
-/**
- * Returns true if two sets have at least a single equal element.
- * @param {Set} a
- * @param {Set} b
- * @return Boolean result.
- */
-function doIntersect(a, b) {
- const it = a.values();
- let d = it.next();
- while (!d.done) {
- if (b.has(d.value)) return true;
- d = it.next();
- }
- return false;
-}
-
-class ChallengeFilter extends FilterPanelFilter {
-
- constructor(arg) {
- if (!arg) {
- super();
- this.tracks = new Set([DATA_SCIENCE_TRACK, DESIGN_TRACK, DEVELOP_TRACK]);
- } else if (arg.isSavedFilter) {
- // If this is a saved filter then the track information is
- // present on the 'type' attribute
-
- super(arg);
- const filters = arg.filter.split('&');
- const tracks = filters.filter(e => e.startsWith('tracks'))
- .map(element => element.split('=')[1]);
- this.tracks = new Set(tracks);
- } else if (_.isObject(arg)) {
- if (!arg.isChallengeFilter) throw new Error('Invalid argument!');
- super(arg);
- this.tracks = new Set(arg.tracks);
- } else if (_.isString(arg)) {
- const f = JSON.parse(atob(arg));
- super(f[0]);
- this.tracks = new Set(f[1] ? f[1].split(',') : undefined);
- } else throw new Error('Invalid argument!');
- this.isChallengeFilter = true;
- }
-
- count() {
- return 1 + super.count();
- }
-
- getFilterFunction() {
- const parent = super.getFilterFunction();
- return (item) => {
- if (this.tracks.size && item.communities && !doIntersect(this.tracks, item.communities)) {
- return false;
- }
- return parent(item);
- };
- }
-
- merge(filter) {
- super.merge(filter);
- if (!filter.isChallengeFilter) return this;
- this.tracks = new Set(filter.tracks);
- return this;
- }
-
- stringify() {
- return btoa(JSON.stringify([
- super.stringify(),
- [...this.tracks].join(','),
- ]));
- }
-
- getTracks() {
- return Array.from(this.tracks).join('&');
- }
-
-/**
- * Get an URL Encoded string representation of the filter tracks.
- * Used for saving to the backend and displaying on the URL for deep linking.
- */
- getURLEncoded() {
- const str = this.tracks.size > 0 ?
- Array.from(this.tracks).reduce((acc, track) => `${acc}&tracks=${encodeURIComponent(track)}`, '') : '';
- return `${super.getURLEncoded()}${str}`;
- }
-}
-
-export default ChallengeFilter;
diff --git a/src/shared/components/challenge-listing/Filters/ChallengeFilterWithSearch.js b/src/shared/components/challenge-listing/Filters/ChallengeFilterWithSearch.js
deleted file mode 100644
index c310deb73f..0000000000
--- a/src/shared/components/challenge-listing/Filters/ChallengeFilterWithSearch.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * This filter extends ChallengeFilter to add the filtering by a free-text
- * string, which components are searched in challenge names, platforms and
- * technologies.
- */
-
-import _ from 'lodash';
-import BaseFilter from './ChallengeFilter';
-
-class Filter extends BaseFilter {
-
- constructor(filterString) {
- if (filterString) {
- const f = JSON.parse(filterString);
- super(f[0]);
- this.query = f[1];
- } else {
- super();
- this.query = '';
- }
- }
-
- clone() {
- const res = Filter();
- _.merge(res, _.cloneDeep(this));
- return res;
- }
-
- count() {
- let res = super.count();
- if (this.query) res += 1;
- return res;
- }
-
- getFilterFunction() {
- const parent = super.getFilterFunction();
- return (item) => {
- if (!parent(item)) return false;
- if (this.query) {
- const str = `${item.name} ${item.platforms} ${item.technologies}`.toLowerCase();
- if (str.indexOf(this.query.toLowerCase()) < 0) return false;
- }
- return true;
- };
- }
-
- stringify() {
- return JSON.stringify([
- super.stringify(),
- this.query,
- ]);
- }
-}
-
-export default Filter;
diff --git a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx b/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
index 27d1c96306..cd68ae5cac 100644
--- a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
+++ b/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
@@ -1,291 +1,187 @@
-/* eslint jsx-a11y/no-static-element-interactions:0 */
-
/**
* Challenge search & filters panel.
- *
- * It consists of the always visible search panel and of the filters pannel,
- * which can be hidden/shown by the dedicated switch in the search panel.
- *
- * Thus the search panel contains:
- * - Search string input field & search button;
- * - Data Science / Design / Development switches;
- * - Filters panel hide/show switch.
- *
- * For the content of filters panel look into docs of the FiltersPanel component.
- *
- * This component accepts two optional callbacks via the 'onFilter' and 'onSearch'
- * properties.
- *
- * When provided, the 'onFilter' callback is triggered each time the user changes
- * any filter. An auxiliary filter function is passed in as the first argument.
- * That function can be passed into the .filter() method of challenge objects
- * array to filter it according to the current set of filters.
- *
- * When provided, the 'onSearch' callback is triggered each time the user presses
- * Enter inside the search input field, or clicks the search button next to that
- * field. The search&filter query string is passed as the first argument into
- * this callback. This query string can be appended to a call to V2 TopCoder API
- * to perform the search. IMPORTANT: As it seems that V2 API is not really compatible
- * with the search and filtering demanded, in the current implementation an empty
- * string is passed into the first argument of this callback, and the next three
- * arguments are used to pass in:
- * - The search string;
- * - The set of Data Science / Design / Development switch values,
- * which is a JS set of DATA_SCIENCE_TRACK, DESIGN_TRACK, and DEVELOP_TRACK
- * constants;
- * - The filter function.
- * Using this data we can use existing V2 API to fetch challenges from the
- * Design and Development tracks, and then filter them on the front-end side.
*/
import _ from 'lodash';
import React from 'react';
import PT from 'prop-types';
import SwitchWithLabel from 'components/SwitchWithLabel';
+import * as Filter from 'utils/challenge-listing/filter';
+import { COMPETITION_TRACKS as TRACKS } from 'utils/tc';
-import ChallengeFilter, { DATA_SCIENCE_TRACK, DESIGN_TRACK, DEVELOP_TRACK } from './ChallengeFilter';
import ChallengeSearchBar from './ChallengeSearchBar';
import EditTrackPanel from './EditTrackPanel';
-import FiltersIcon from './FiltersSwitch/FiltersIcon';
+import FiltersIcon from './FiltersSwitch/filters-icon.svg';
import FiltersPanel from './FiltersPanel';
import FiltersSwitch from './FiltersSwitch';
import FiltersCardsType from './FiltersCardsType';
import './ChallengeFilters.scss';
-class ChallengeFilters extends React.Component {
-
- constructor(props) {
- super(props);
- this.state = {
- filter: props.filter,
- filtersCount: props.filter.count(),
- showFilters: false,
- showEditTrackPanel: false,
- };
- this.searchBarProps = {
- placeholder: 'Search Challenges',
- };
- if (props.searchQuery) {
- this.searchBarProps.query = props.searchQuery;
- }
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.filter !== nextProps.filter) {
- this.setState({
- filter: nextProps.filter,
- filtersCount: nextProps.filter.count(),
- });
- }
- }
-
- /**
- * Clears the filters.
- */
- onClearFilters() {
- const filter = new ChallengeFilter();
- this.setState({ filter, filtersCount: 0 });
- this.props.onFilter(filter);
- }
-
- /**
- * Updates the count of active filters (displayed in the filter panel switch),
- * caches the set of active filters for subsequent searches, and triggers the
- * 'onFilter' callback provided by the parent component, if any.
- *
- * When the parent 'onFilter' callback is triggered, an auxiliary filter function
- * is passed in as the first argument. That filter function should be passed into
- * the .filter() method of the challenge objects array to perform the filtering.
- *
- * @param {Object} filters Filters object, received from the FiltersPanel component.
- */
- onFilter(filter) {
- const f = (new ChallengeFilter(this.state.filter)).merge(filter);
- this.setState({
- filter: f,
- filtersCount: f.count(),
- });
- this.props.onFilter(f);
- }
-
- /**
- * Triggers the 'onSearch' callback provided by the parent component, if any.
- *
- * The challenge query string for V2 API is passed into the callback as the
- * first argument. As V2 API does not really support the intended searching
- * and filtering, at the moment an empty string is always passed into the
- * first argument, and all search & filtering data are passed into the next
- * three arguments:
- * - The search string;
- * - The set of values of Data Science / Design / Development track switches
- * (JS Set of DATA_SCIENCE_TRACK, DESIGN_TRACK, DEVELOP_TRACK constants);
- * - The filter function.
- *
- * @param {String} searchString
- */
- onSearch(searchString) {
- if (!this.props.onSearch) return;
- this.props.onSearch(searchString, this.state.filter);
- }
-
- /**
- * Sets the keywords filter in the FilterPanel to the specified value.
- * @param {String} keywords A comma-separated list of the keywords.
- */
- setKeywords(keywords) {
- if (this.filtersPanel) this.filtersPanel.onKeywordsChanged([keywords]);
- }
-
- /**
- * Sets/unsets the specified track in the this.tracks set.
- * @param {String} community One of DATA_SCIENCE_TRACK, DESIGN_TRACK, DEVELOP_TRACK.
- * @param {Boolean} set True to include the track into the set, false to remove it.
- */
- setTracks(track, set) {
- const filter = new ChallengeFilter(this.state.filter);
- if (set) filter.tracks.add(track);
- else filter.tracks.delete(track);
- this.props.onFilter(filter);
- this.setState({ filter });
- }
-
- /**
- * Hide/Show the EditTrackPanel
- */
- toggleEditTrackPanel() {
- this.setState({ showEditTrackPanel: !this.state.showEditTrackPanel });
- }
-
- /**
- * Hide/Show the filters
- */
- toggleShowFilters() {
- this.setState({ showFilters: !this.state.showFilters });
- }
-
- render() {
- return (
-
- this.onSortingSelect(filterName, optionName)}
- value={filterSortingStore[filterName]}
- key={`${trimmedFilterName}-sorting-bar`}
- />
- this.props.onTechTagClicked(tag),
- )}
- renderItemTemplate={getChallengeCardPlaceholder}
- fetchItems={(pageIndex, pageSize = 50) => {
- const f = {};
- if (filter.filteringParams.status) {
- f.status = filter.filteringParams.status;
- }
- if (this.props.challengeGroupId) {
- f.groupIds = this.props.challengeGroupId;
- }
- const fm = _.clone(f);
- if (fm.status === 'completed') fm.status = 'past';
- return Promise.all([
- this.props.getChallenges(f, {
- limit: pageSize,
- offset: pageIndex * pageSize,
- },
- this.props.auth.tokenV3,
- undefined,
- filter.filteringParams.user ?
- this.props.auth.user.handle && this.props.auth.user :
- undefined).then(res =>
- res.challenges.map(i => normalizeChallenge(i)),
- ),
- this.props.getMarathonMatches(f, {
- limit: pageSize,
- offset: pageIndex * pageSize,
- },
- this.props.auth.tokenV3,
- undefined,
- filter.filteringParams.user && this.props.auth.user ?
- this.props.auth.user.handle : undefined).then(res =>
- res.challenges.map(i => normalizeMarathonMatch(i)),
- ),
- ]).then(([a, b]) => a.concat(b));
- }}
- batchNumber={batchLoadNumber}
- filter={additionalFilter}
- tempDataFilter={filterName}
- sort={sortingFunctionStore[filterSortingStore[filterName]]}
- uniqueIdentifier={challengeUniqueIdentifier}
- />
- {expansionButtion}
-
- );
- })
- }
-
-
diff --git a/src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/EditMyFilters.jsx b/src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/EditMyFilters.jsx
deleted file mode 100644
index 35317ec430..0000000000
--- a/src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/EditMyFilters.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/* global
- fetch
-*/
-/* eslint jsx-a11y/no-static-element-interactions:0 */
-
-/**
- * Sidebar content in the Edit My Filters mode. Implemented as a stateful component,
- * so that it controls reordering of filters by dragging on its own, using its
- * local state, and when the Done button is clicked, the resulting order is
- * submitted to the parent component via a callback.
- */
-
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-import { ActiveFilterItem } from '../FilterItems';
-import './EditMyFilters.scss';
-
-export const SAVE_FILTERS_API = 'https://lc1-user-settings-service.herokuapp.com/saved-searches';
-const MAX_FILTER_NAME_LENGTH = 35;
-
-class EditMyFilters extends React.Component {
-
- constructor(props) {
- super(props);
- this.state = {
- filters: props.filters.map((filter, index) => ({
- filter,
- key: index,
- })),
- };
- }
-
- onDone() {
- const filters = this.state.filters.map(item => item.filter);
- this.props.onDone(filters);
- }
-
- /**
- * Handles dragging of a filter item.
- * @param {Object} event ReactJS onDrag event.
- *
- * NOTE: This implementation of dragging has a flaw: if you take an item and
- * drug it down, you'll see that it is correctly moved down the list, but its
- * highlighting (at least in Chrome) remains in the original position. Compare
- * to the situation, when you drag an item upward the list: the highlighting
- * moves properly with the item. This is related to the way ReactJS interacts
- * with DOM, and, most probably, it is just easier to adopt some 3-rd party
- * Drag-n-Drop library, then to find out a work-around.
- */
- dragHandler(event) {
- // For a reason not clear to me, shortly after starting to drag a filter,
- // and also when the user releases the mouse button, thus ending the drag,
- // this handler gets an event with 'screenY' position equal 0. This breaks
- // the dragging handling, which works just fine otherwise. Hence, this simple
- // fix of the issue, until the real problem is figured out.
- if (!event.screenY) return;
-
- // Calculation of the target position of the dragged item inside the filters
- // array.
- const filters = this.state.filters;
- const shift = (event.screenY - this.drag.y) / event.target.offsetHeight;
- let index = Math.round(this.drag.startIndex + shift);
- if (index < 0) index = 0;
- else if (index >= filters.length) index = filters.length - 1;
- if (index === this.drag.index) return;
-
- // If current and target positions are different, we move the filter item,
- // updating the state.
- const newFilters = _.clone(filters);
- const thisFilter = newFilters.splice(this.drag.currentIndex, 1)[0];
- newFilters.splice(index, 0, thisFilter);
- this.drag.currentIndex = index;
- this.setState({ filters: newFilters });
- }
-
- render() {
- const filters = this.state.filters.map(({ filter, key }, index) => (
-
- this.onSearch(str)}
- {...this.searchBarProps}
- />
+export default function ChallengeFilters({
+ challengeGroupId,
+ communityFilters,
+ communityName,
+ expanded,
+ filterState,
+ isCardTypeSet,
+ saveFilter,
+ searchText,
+ selectCommunity,
+ selectedCommunityId,
+ setCardType,
+ setExpanded,
+ setFilterState,
+ setSearchText,
+ showTrackModal,
+ trackModalShown,
+ validKeywords,
+ validSubtracks,
+}) {
+ let filterRulesCount = 0;
+ if (filterState.tags) filterRulesCount += 1;
+ if (filterState.subtracks) filterRulesCount += 1;
+ if (filterState.endDate || filterState.startDate) filterRulesCount += 1;
+
+ const isTrackOn = track =>
+ !filterState.tracks || Boolean(filterState.tracks[track]);
+
+ const switchTrack = (track, on) => {
+ const act = on ? Filter.addTrack : Filter.removeTrack;
+ setFilterState(act(filterState, track));
+ };
+
+ return (
+ setExpanded(false)}
+ onSaveFilter={saveFilter}
+ selectCommunity={selectCommunity}
+ selectedCommunityId={selectedCommunityId}
+ setFilterState={setFilterState}
+ setSearchText={setSearchText}
+ validKeywords={validKeywords}
+ validSubtracks={validSubtracks}
+ />
+
+ showTrackModal(false)}
+ designEnabled={isTrackOn(TRACKS.DESIGN)}
+ switchDesign={on => switchTrack(TRACKS.DESIGN, on)}
+ devEnabled={isTrackOn(TRACKS.DEVELOP)}
+ switchDev={on => switchTrack(TRACKS.DEVELOP, on)}
+ dataScienceEnabled={isTrackOn(TRACKS.DATA_SCIENCE)}
+ switchDataScience={on => switchTrack(TRACKS.DATA_SCIENCE, on)}
+ />
+
+ );
+}
ChallengeFilters.defaultProps = {
communityName: null,
- filter: new ChallengeFilter(),
isCardTypeSet: '',
- searchQuery: '',
- onFilter: _.noop,
- onSaveFilter: _.noop,
- onSearch: _.noop,
setCardType: _.noop,
};
ChallengeFilters.propTypes = {
challengeGroupId: PT.string.isRequired,
+ communityFilters: PT.arrayOf(PT.shape()).isRequired,
communityName: PT.string,
- filter: PT.instanceOf(ChallengeFilter),
+ expanded: PT.bool.isRequired,
+ filterState: PT.shape().isRequired,
isCardTypeSet: PT.string,
- searchQuery: PT.string,
- onFilter: PT.func,
- onSearch: PT.func,
- onSaveFilter: PT.func,
+ saveFilter: PT.func.isRequired,
+ selectCommunity: PT.func.isRequired,
+ selectedCommunityId: PT.string.isRequired,
setCardType: PT.func,
- validKeywords: PT.arrayOf(TagShape).isRequired,
- validSubtracks: PT.arrayOf(TagShape).isRequired,
+ setExpanded: PT.func.isRequired,
+ setFilterState: PT.func.isRequired,
+ searchText: PT.string.isRequired,
+ setSearchText: PT.func.isRequired,
+ showTrackModal: PT.func.isRequired,
+ trackModalShown: PT.bool.isRequired,
+ validKeywords: PT.arrayOf(PT.string).isRequired,
+ validSubtracks: PT.arrayOf(PT.string).isRequired,
};
-
-export default ChallengeFilters;
diff --git a/src/shared/components/challenge-listing/Filters/ChallengeFilters.scss b/src/shared/components/challenge-listing/Filters/ChallengeFilters.scss
index 55bb8ccee3..7bb45ec9bf 100644
--- a/src/shared/components/challenge-listing/Filters/ChallengeFilters.scss
+++ b/src/shared/components/challenge-listing/Filters/ChallengeFilters.scss
@@ -90,6 +90,10 @@
margin-right: 10px;
position: relative;
top: 3px;
+
+ path {
+ fill: #737380;
+ }
}
}
}
diff --git a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx
index 93bed5c96d..e4c68aaaf8 100644
--- a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx
@@ -17,63 +17,38 @@ import PT from 'prop-types';
import './style.scss';
import ZoomIcon from './ui-zoom.svg';
-class ChallengeSearchBar extends React.Component {
-
- constructor(props) {
- super(props);
- this.state = {
- value: '',
- };
- if (this.props.query) {
- this.state.value = this.props.query;
- this.onSearch();
- }
- }
-
- onKeyPress(event) {
- switch (event.key) {
- case 'Enter':
- return this.onSearch();
- default:
- return null;
- }
- }
-
- onSearch() {
- if (this.props.onSearch) this.props.onSearch(this.state.value);
- }
-
- render() {
- return (
-
+ this.setState({ showFilters: false })}
- onClearFilters={() => this.onClearFilters()}
- onFilter={filter => this.onFilter(filter)}
- onSaveFilter={() => this.props.onSaveFilter(this.state.filter)}
- ref={(node) => { this.filtersPanel = node; }}
- validKeywords={this.props.validKeywords}
- validSubtracks={this.props.validSubtracks}
- />
-
- this.toggleEditTrackPanel()}
- designEnabled={this.state.filter.tracks.has(DESIGN_TRACK)}
- switchDesign={enable => this.setTracks(DESIGN_TRACK, enable)}
- devEnabled={this.state.filter.tracks.has(DEVELOP_TRACK)}
- switchDev={enable => this.setTracks(DEVELOP_TRACK, enable)}
- dataScienceEnabled={this.state.filter.tracks.has(DATA_SCIENCE_TRACK)}
- switchDataScience={enable => this.setTracks(DATA_SCIENCE_TRACK, enable)}
- />
+
- );
- }
-}
-const TagShape = PT.shape({
- label: PT.string.isRequired,
- value: PT.string.isRequired,
-});
+
+ setFilterState(Filter.setText(filterState, text))}
+ placeholder="Search Challenges"
+ query={searchText}
+ setQuery={setSearchText}
+ />
+ {
+ isCardTypeSet === 'Challenges' ?
+ (
+
+
+ switchTrack(TRACKS.DESIGN, on)}
+ />
+
+
+ switchTrack(TRACKS.DEVELOP, on)}
+ />
+
+
+ switchTrack(TRACKS.DATA_SCIENCE, on)}
+ />
+
+
+ ) : ''
+ }
+
{
- this.props.isCardTypeSet === 'Challenges' ?
+ isCardTypeSet === 'Challenges' ?
(
-
-
- this.setTracks(DESIGN_TRACK, enable)}
- />
-
-
- this.setTracks(DEVELOP_TRACK, enable)}
- />
-
-
- this.setTracks(DATA_SCIENCE_TRACK, enable)}
- />
-
+ showTrackModal(true)}
+ role="button"
+ styleName="track-btn"
+ tabIndex={0}
+ >
+ Tracks
+
) : ''
}
-
- {
- this.props.isCardTypeSet === 'Challenges' ?
- (
- this.toggleEditTrackPanel()} styleName="track-btn">
- Tracks
-
-
- ) : ''
- }
- this.toggleShowFilters()}
- styleName="filter-btn"
- >
- this.setState({ showFilters: active })}
- styleName="FiltersSwitch"
- />
+ {/* TODO: Two components below are filter switch buttons for
+ * mobile and desktop views. Should be refactored to use the
+ * same component, which automatically changes its style depending
+ * on the viewport size. */}
+ setExpanded(!expanded)}
+ role="button"
+ styleName="filter-btn"
+ tabIndex={0}
+ >
+
-
- this.setState({ value: event.target.value })}
- onKeyPress={event => this.onKeyPress(event)}
- placeholder={this.props.placeholder}
- type="text"
- value={this.state.value}
- />
- this.onSearch()}
- >
-
- );
- }
+export default function ChallengeSearchBar({
+ onSearch,
+ placeholder,
+ query,
+ setQuery,
+}) {
+ return (
+
+ setQuery(event.target.value)}
+ onKeyPress={event => (event.key === 'Enter' ? onSearch(query) : null)}
+ placeholder={placeholder}
+ type="text"
+ value={query}
+ />
+ onSearch(query)}
+ >
+
+ );
}
ChallengeSearchBar.defaultProps = {
- onSearch: () => true,
placeholder: '',
- query: '',
};
ChallengeSearchBar.propTypes = {
- onSearch: PT.func,
+ onSearch: PT.func.isRequired,
placeholder: PT.string,
- query: PT.string,
+ query: PT.string.isRequired,
+ setQuery: PT.func.isRequired,
};
-
-export default ChallengeSearchBar;
diff --git a/src/shared/components/challenge-listing/Filters/EditTrackPanel/index.jsx b/src/shared/components/challenge-listing/Filters/EditTrackPanel/index.jsx
index 3711dd2d3f..ef2d8cb88d 100644
--- a/src/shared/components/challenge-listing/Filters/EditTrackPanel/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/EditTrackPanel/index.jsx
@@ -21,7 +21,7 @@
import React from 'react';
import PT from 'prop-types';
import Switch from 'components/Switch';
-import UiSimpleRemove from '../../Icons/UiSimpleRemove';
+import UiSimpleRemove from '../../Icons/ui-simple-remove.svg';
import './style.scss';
const EditTrackPanel = props => (
diff --git a/src/shared/components/challenge-listing/Filters/FiltersCardsType/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersCardsType/index.jsx
index 5161003a07..1b112aa926 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersCardsType/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/FiltersCardsType/index.jsx
@@ -10,32 +10,26 @@ import PT from 'prop-types';
import config from 'utils/config';
import './style.scss';
-const FiltersCardsType = ({ isCardTypeSet, ARENA_URL }) => (
+const FiltersCardsType = ({ isCardTypeSet }) => (
e.preventDefault()}
- >
- Challenges
-
+ >Challenges
- SRMs
-
+ >SRMs
);
FiltersCardsType.defaultProps = {
isCardTypeSet: false,
- ARENA_URL: config.ARENA_URL,
};
FiltersCardsType.propTypes = {
isCardTypeSet: PT.oneOfType([PT.bool, PT.string]),
- ARENA_URL: PT.string,
};
export default FiltersCardsType;
diff --git a/src/shared/components/challenge-listing/Filters/FiltersCardsType/style.scss b/src/shared/components/challenge-listing/Filters/FiltersCardsType/style.scss
index 57ad4347ef..0925fd28c0 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersCardsType/style.scss
+++ b/src/shared/components/challenge-listing/Filters/FiltersCardsType/style.scss
@@ -29,6 +29,10 @@ $type-radius-4: $corner-radius * 2;
margin-right: $type-space-20;
}
+ &:visited {
+ color: $tc-dark-blue-70;
+ }
+
&:hover {
color: $tc-dark-blue;
text-decoration: none;
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/FilterPanelFilter.js b/src/shared/components/challenge-listing/Filters/FiltersPanel/FilterPanelFilter.js
deleted file mode 100644
index f39fbacd87..0000000000
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/FilterPanelFilter.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/* global
- atob, btoa
-*/
-
-/**
- * This Filter class represents the filters managed by the FiltersPanel component.
- * Have a look at the base class for additional details.
- */
-
-import _ from 'lodash';
-import moment from 'moment';
-import BaseFilter from '../BaseFilter';
-
-class FilterPanelFilter extends BaseFilter {
-
- constructor(arg) {
- if (!arg) {
- super();
- this.groupId = null;
- this.endDate = null;
- this.keywords = [];
- this.startDate = null;
- this.subtracks = [];
- } else if (arg.isSavedFilter) {
- super(arg);
- const filters = arg.filter.split('&');
-
- this.groupId = filters.filter(e => e.startsWith('groupId'))
- .map(e => e.split('=')[1])[0] || null;
-
- this.startDate = filters.filter(e => e.startsWith('startDate'))
- .map(element => element.split('=')[1]);
- this.startDate = this.startDate[0] ? moment(this.startDate[0]) : null;
- this.endDate = filters.filter(e => e.startsWith('endDate'))
- .map(element => element.split('=')[1]);
- this.endDate = this.endDate[0] ? moment(this.endDate[0]) : null;
-
- this.keywords = filters.filter(e => e.startsWith('keywords'))
- .map(element => element.split('=')[1]);
- // We use "challengeTypes" to represent subtracks to maintain compatibility with old app
- this.subtracks = filters.filter(e => e.startsWith('challengeTypes'))
- .map(element => element.split('=')[1]);
- } else if (_.isObject(arg)) {
- if (!arg.isFilterPanelFilter) throw new Error('Invalid argument!');
- super(arg);
- this.groupId = arg.groupId || null;
- this.endDate = arg.endDate ? moment(arg.endDate) : null;
- this.keywords = _.cloneDeep(arg.keywords);
- this.startDate = arg.startDate ? moment(arg.startDate) : null;
- this.subtracks = _.cloneDeep(arg.subtracks);
- } else if (_.isString(arg)) {
- const f = JSON.parse(atob(arg));
- super(f[0]);
- this.endDate = f[1] === 'null' ? null : moment(f[1]);
- this.keywords = f[2].split(',');
- this.startDate = f[3] === 'null' ? null : moment(f[3]);
- this.subtracks = f[4].split(',');
- this.groupId = f[5] || null;
- } else throw new Error('Invalid argument!');
- this.isFilterPanelFilter = true;
- }
-
- count() {
- let res = super.count();
- if (this.keywords.length && this.keywords[0]) res += 1;
- if (this.subtracks.length && this.subtracks[0]) res += 1;
- if (this.endDate || this.startDate) res += 1;
- if (this.groupId) res += 1;
- return res;
- }
-
- getFilterFunction() {
- const parent = super.getFilterFunction();
- return (item) => {
- if (this.groupId && !item.groups[this.groupId]) return false;
- const filterSubtrack = this.subtracks.map(st =>
- st.toLowerCase().split(' ').join(''));
- const itemSubtrack = item.subTrack.toLowerCase().split('_').join('');
- if (!parent(item)) return false;
- if (this.subtracks.length && this.subtracks[0]
- && !filterSubtrack.includes(itemSubtrack)) return false;
- if (this.startDate && this.startDate.isAfter(item.submissionEndDate)) return false;
- if (this.endDate && this.endDate.isBefore(item.createdAt)) return false;
- if (!this.keywords.length || !this.keywords[0]) return true;
- const data = ` ${item.name} ${item.platforms} ${item.technologies} `.toLowerCase();
- for (let i = 0; i !== this.keywords.length; i += 1) {
- if (data.indexOf(` ${this.keywords[i].toLowerCase()} `) >= 0) return true;
- }
- return false;
- };
- }
-
- merge(filter) {
- super.merge(filter);
- if (!filter.isFilterPanelFilter) return this;
- this.groupId = filter.groupId;
- this.endDate = filter.endDate ? moment(filter.endDate) : null;
- this.keywords = _.cloneDeep(filter.keywords);
- this.startDate = filter.startDate ? moment(filter.startDate) : null;
- this.subtracks = _.cloneDeep(filter.subtracks);
- return this;
- }
-
- stringify() {
- return btoa(JSON.stringify([
- super.stringify(),
- this.endDate ? this.endDate.toString() : 'null',
- this.keywords.join(','),
- this.startDate ? this.startDate.toString() : 'null',
- this.subtracks.join(','),
- this.groupId,
- ]));
- }
- /**
- * Get an URL Encoded string representation of the filter properties.
- * Used for saving to the backend and displaying on the URL for deep linking.
- * We use "challengeTypes" to represent subtracks to maintain compatibility with old app
- */
- getURLEncoded() {
- let result = '';
- result += this.startDate ? `&startDate=${this.startDate.format('YYYY-MM-DD')}` : '';
- result += this.endDate ? `&endDate=${this.endDate.format('YYYY-MM-DD')}` : '';
- result += this.keywords.length > 0 ?
- this.keywords.reduce((acc, keyword) => `${acc}&keywords=${keyword}`, '') : '';
- result += this.subtracks.length > 0 ?
- this.subtracks.reduce((acc, subtrack) => `${acc}&challengeTypes=${subtrack}`, '') : '';
- result += this.groupId ? `&groupId=${this.groupId}` : '';
- return result;
- }
-}
-
-export default FilterPanelFilter;
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
index 50c86747dc..b5155f881b 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
@@ -20,214 +20,145 @@
*/
import _ from 'lodash';
+import * as Filter from 'utils/challenge-listing/filter';
import React from 'react';
import PT from 'prop-types';
import Select from 'components/Select';
import moment from 'moment';
-
-import FilterPanelFilter from './FilterPanelFilter';
-import UiSimpleRemove from '../../Icons/UiSimpleRemove';
+import UiSimpleRemove from '../../Icons/ui-simple-remove.svg';
import './style.scss';
import DateRangePicker from '../DateRangePicker';
-class FiltersPanel extends React.Component {
-
- constructor(props) {
- super(props);
- this.state = {
- filter: props.filter,
- };
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.filter !== nextProps.filter) {
- this.setState({
- filter: nextProps.filter,
- });
- }
- }
-
- /**
- * Clears the the filters.
- * Note that this method does not call the onFilter() callback passed via props,
- * if any, just the onClearFilters().
- */
- onClearFilters() {
- this.props.onClearFilters();
- this.setState({ filter: new FilterPanelFilter() });
- }
-
- /**
- * Handles updates of the dates filter.
- * @param {Moment} startDate
- * @param {Moment} endDate
- */
- onDatesChanged(startDate, endDate) {
- const filter = new FilterPanelFilter(this.state.filter);
- filter.startDate = moment(startDate);
- filter.endDate = moment(endDate);
- this.props.onFilter(filter);
- this.setState({ filter });
- }
-
- /**
- * Handles updates of the keywords filter.
- * @param {Array} keywords An array of selected keywords.
- */
- onKeywordsChanged(keywords) {
- const filter = new FilterPanelFilter(this.state.filter);
- filter.keywords = keywords;
- this.props.onFilter(filter);
- this.setState({ filter });
- }
-
- /**
- * Handles updates of the subtracks filter.
- * @param {Array} subtracks An array of selected subtracks.
- */
- onSubtracksChanged(subtracks) {
- const filter = new FilterPanelFilter(this.state.filter);
- filter.subtracks = subtracks;
- this.props.onFilter(filter);
- this.setState({ filter });
- }
-
- /**
- * Triggers the 'onFilter' callback, if it is provided in properties.
- */
- filter() {
- this.props.onFilter(this.state.filter);
- }
-
- render() {
- let className = 'FiltersPanel';
- if (this.props.hidden) className += ' hidden';
-
- let communityOps;
- if (this.props.challengeGroupId) {
- communityOps = [{
- label: this.props.communityName,
- value: this.props.communityName,
- }, {
- label: 'All',
- value: 'all',
- }];
- }
-
- return (
-
-
-
+
+ Notify me
- Filters
- this.props.onClose()}>
-
-
-
@@ -98,9 +98,9 @@ const UpcomingSRMs = ({ srmChallenge }) => (
-
-
+
+ Register
-
-
- {this.props.challengeGroupId ? (
-
-
-
- ) : null}
+export default function FiltersPanel({
+ communityFilters,
+ filterState,
+ hidden,
+ onClose,
+ onSaveFilter,
+ selectCommunity,
+ selectedCommunityId,
+ setFilterState,
+ setSearchText,
+ validKeywords,
+ validSubtracks,
+}) {
+ let className = 'FiltersPanel';
+ if (hidden) className += ' hidden';
+
+ const communityOps = communityFilters.map(item => ({
+ label: item.name,
+ value: item.id,
+ }));
+
+ const mapOps = item => ({ label: item, value: item });
+
+ return (
+
+
-
+
-
+
diff --git a/src/shared/components/challenge-listing/SRMCard/index.jsx b/src/shared/components/challenge-listing/SRMCard/index.jsx
index a1d1d65257..ed24290b6e 100755
--- a/src/shared/components/challenge-listing/SRMCard/index.jsx
+++ b/src/shared/components/challenge-listing/SRMCard/index.jsx
@@ -76,7 +76,7 @@ const HappeningNow = () => (
{renderLeaderboard}
+ Filters
+ onClose()}>
+
+
+
);
+Division.propTypes = {
+ division: PT.string.isRequired,
+};
+
module.exports = Division;
diff --git a/src/shared/components/challenge-listing/SRMCard/PastSRMCard.jsx b/src/shared/components/challenge-listing/SRMCard/PastSRMCard.jsx
index 80c4338b2a..59a3f6cb86 100644
--- a/src/shared/components/challenge-listing/SRMCard/PastSRMCard.jsx
+++ b/src/shared/components/challenge-listing/SRMCard/PastSRMCard.jsx
@@ -48,14 +48,14 @@ const PastSRMCard = () => (
+
+ );
}
FiltersPanel.defaultProps = {
- communityName: null,
- filter: new FilterPanelFilter(),
hidden: false,
- onClearFilters: _.noop,
- onFilter: _.noop,
onSaveFilter: _.noop,
onClose: _.noop,
};
-const SelectOptions = PT.arrayOf(
- PT.shape({
- label: PT.string.isRequired,
- value: PT.string.isRequired,
- }),
-);
-
FiltersPanel.propTypes = {
- challengeGroupId: PT.string.isRequired,
- communityName: PT.string,
- filter: PT.instanceOf(FilterPanelFilter),
+ communityFilters: PT.arrayOf(PT.shape()).isRequired,
+ filterState: PT.shape().isRequired,
hidden: PT.bool,
- onClearFilters: PT.func,
- onFilter: PT.func,
onSaveFilter: PT.func,
- validKeywords: SelectOptions.isRequired,
- validSubtracks: SelectOptions.isRequired,
+ selectCommunity: PT.func.isRequired,
+ selectedCommunityId: PT.string.isRequired,
+ setFilterState: PT.func.isRequired,
+ setSearchText: PT.func.isRequired,
+ validKeywords: PT.arrayOf(PT.string).isRequired,
+ validSubtracks: PT.arrayOf(PT.string).isRequired,
onClose: PT.func,
};
-
-export default FiltersPanel;
diff --git a/src/shared/components/challenge-listing/Filters/FiltersSwitch/FiltersIcon.jsx b/src/shared/components/challenge-listing/Filters/FiltersSwitch/FiltersIcon.jsx
deleted file mode 100644
index 25edc79004..0000000000
--- a/src/shared/components/challenge-listing/Filters/FiltersSwitch/FiltersIcon.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import PT from 'prop-types';
-
-export default function FiltersIcon(props) {
- const c = props.color;
- const s = props.size;
- return (
-
- );
-}
-
-FiltersIcon.defaultProps = {
- color: 'black',
- size: 16,
- className: '',
-};
-
-FiltersIcon.propTypes = {
- color: PT.string,
- size: PT.number,
- className: PT.string,
-};
diff --git a/src/shared/components/challenge-listing/Filters/FiltersSwitch/filters-icon.svg b/src/shared/components/challenge-listing/Filters/FiltersSwitch/filters-icon.svg
new file mode 100644
index 0000000000..0124575f05
--- /dev/null
+++ b/src/shared/components/challenge-listing/Filters/FiltersSwitch/filters-icon.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/shared/components/challenge-listing/Filters/FiltersSwitch/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersSwitch/index.jsx
index 8962276592..ae243f7648 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersSwitch/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/FiltersSwitch/index.jsx
@@ -15,18 +15,16 @@
import React from 'react';
import PT from 'prop-types';
-import FiltersIcon from './FiltersIcon';
+import FiltersIcon from './filters-icon.svg';
import './style.scss';
export default function FiltersSwitch(props) {
let className = 'FiltersSwitch';
if (props.active) className += ' active';
- /* We subtract 1 because filtering by the track is always counted, but we don't
- * want to account for it in the filters panel switch. */
let filtersCount;
- if (props.filtersCount > 1) {
- filtersCount = {props.filtersCount - 1};
+ if (props.filtersCount) {
+ filtersCount = {props.filtersCount};
}
return (
diff --git a/src/shared/components/challenge-listing/Filters/FiltersSwitch/style.scss b/src/shared/components/challenge-listing/Filters/FiltersSwitch/style.scss
index 72bf97cef9..ed0663f59e 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersSwitch/style.scss
+++ b/src/shared/components/challenge-listing/Filters/FiltersSwitch/style.scss
@@ -15,6 +15,10 @@ $switch-radius-4: $corner-radius * 2;
margin-right: $switch-space-10;
position: relative;
top: $base-unit - 2;
+
+ path {
+ fill: #5d5d66;
+ }
}
&.active {
diff --git a/src/shared/components/challenge-listing/Icons/UiSimpleRemove.jsx b/src/shared/components/challenge-listing/Icons/UiSimpleRemove.jsx
deleted file mode 100644
index e7a40217c7..0000000000
--- a/src/shared/components/challenge-listing/Icons/UiSimpleRemove.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-const UiSimpleRemove = ({ className, width, height }) => {
- return (
-
- )
-}
-
-export default UiSimpleRemove
diff --git a/src/shared/components/challenge-listing/Icons/forum.svg b/src/shared/components/challenge-listing/Icons/forum.svg
index 9fb22a9f35..c508c2e119 100644
--- a/src/shared/components/challenge-listing/Icons/forum.svg
+++ b/src/shared/components/challenge-listing/Icons/forum.svg
@@ -1,4 +1,4 @@
-
+
+
-
-
-
-
-
-
-
- { this.onDatesChanged(dates.startDate, dates.endDate)}
- startDate={this.state.filter.startDate}
- />}
-
+
+
+
-
-
+
- );
- }
+
+
+
+
+
+
+ {
+ let d = dates.endDate ? dates.endDate.toISOString() : null;
+ let state = Filter.setEndDate(filterState, d);
+ d = dates.startDate ? dates.startDate.toISOString() : null;
+ state = Filter.setStartDate(state, d);
+ setFilterState(state);
+ }}
+ startDate={
+ filterState.startDate && moment(filterState.startDate)
+ }
+ />
+
+
+
+
+
-
- );
- }
-}
-
-EditMyFilters.defaultProps = {
- onDone: _.noop,
- token: '',
-};
-
-EditMyFilters.propTypes = {
- filters: PT.arrayOf(PT.shape({})).isRequired,
- onDone: PT.func,
- token: PT.string,
-};
-
-export default EditMyFilters;
diff --git a/src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/index.js b/src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/index.js
deleted file mode 100644
index 866fe2e694..0000000000
--- a/src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import EditMyFilters, { SAVE_FILTERS_API } from './EditMyFilters';
-
-export { SAVE_FILTERS_API };
-
-export default EditMyFilters;
diff --git a/src/shared/components/challenge-listing/SideBarFilters/FilterItems/index.jsx b/src/shared/components/challenge-listing/SideBarFilters/FilterItems/index.jsx
deleted file mode 100644
index a193de8ac1..0000000000
--- a/src/shared/components/challenge-listing/SideBarFilters/FilterItems/index.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/* eslint jsx-a11y/no-static-element-interactions:0 */
-
-/**
- * This file exports two similar components: one represents a row in the sidebar,
- * when the sidebar is in its regular state; the other represents a row in the
- * sidebar, when the sidebar is in the Edit My Filters state.
- */
-
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-import './style.scss';
-
-import ArrowsMoveVertical from '../../Icons/ArrowsMoveVertical';
-import UiSimpleRemove from '../../Icons/UiSimpleRemove';
-
-/**
- * A single line in the sidebar in the 'Edit My Filters' mode. It shows the filter
- * name, and additional controls, if hovered. It triggers a few callbacks on user
- * interactions.
- */
-function ActiveFilterItem(props) {
- return (
- - My filters -
- this.onDone()}>
- Done
-
- {filters}
-
- Drag the filters to set the order you prefer;
- use the "x" mark to delete the filter(s) you don't need.
-
- props.onDrag(event)}
- onDragStart={event => props.onDragStart(event)}
- >
-
- );
-}
-
-ActiveFilterItem.defaultProps = {
- onDrag: _.noop,
- onDragStart: _.noop,
- onNameChange: _.noop,
- onRemove: _.noop,
-};
-
-ActiveFilterItem.propTypes = {
- name: PT.string.isRequired,
- onRemove: PT.func,
- onDrag: PT.func,
- onDragStart: PT.func,
- onNameChange: PT.func,
-};
-
-/**
- * A single line in the sidebar in its normal mode. It shows the filter name and
- * the count of matching items. Can be highlighted.
- */
-function FilterItem(props) {
- let baseClasses = 'FilterItem';
- if (props.highlighted) baseClasses += ' highlighted';
- return (
- Delete Filter
-
-
- {props.name}
- {(props.name === 'Past challenges' || props.myFilter) ? '' : props.count}
-
- );
-}
-
-FilterItem.defaultProps = {
- highlighted: false,
- onClick: _.noop,
- myFilter: false,
-};
-
-FilterItem.propTypes = {
- count: PT.number.isRequired,
- highlighted: PT.bool,
- onClick: PT.func,
- name: PT.string.isRequired,
- myFilter: PT.bool,
-};
-
-export { ActiveFilterItem, FilterItem };
diff --git a/src/shared/components/challenge-listing/SideBarFilters/SideBarFilter.js b/src/shared/components/challenge-listing/SideBarFilters/SideBarFilter.js
deleted file mode 100644
index aebf7e0bd1..0000000000
--- a/src/shared/components/challenge-listing/SideBarFilters/SideBarFilter.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/* global
- atob, btoa
-*/
-
-/* eslint constructor-super: 0 */ // line 63 need that super in the catch block
-
-/**
- * The SideBarFilter extends the ChallengeFilter from the ChallengeFilters
- * component. This way any ChallengeFilter can be easily added to the sidebar.
- * At the same time, it adds some functionality necessary for standard filters
- * in the sidebar.
- */
-
-import _ from 'lodash';
-import uuid from 'uuid/v4';
-import moment from 'moment';
-import ChallengeFilter from '../Filters/ChallengeFilter';
-
-export const MODE = {
- ALL_CHALLENGES: 'All Challenges',
- MY_CHALLENGES: 'My Challenges',
- OPEN_FOR_REGISTRATION: 'Open for registration',
- ONGOING_CHALLENGES: 'Ongoing challenges',
- PAST_CHALLENGES: 'Past challenges',
- OPEN_FOR_REVIEW: 'Open for review',
- UPCOMING_CHALLENGES: 'Upcoming challenges',
- CUSTOM: 'custom',
-};
-
-export const openForRegistrationFilter = (item) => {
- const registrationPhase = item.allPhases.filter(d => d.phaseType === 'Registration')[0];
- const registrationOpen = registrationPhase && registrationPhase.phaseStatus === 'Open';
- const reviewPhase = item.allPhases.filter(d => d.phaseType === 'Iterative Review');
- const isReviewClosed = !_.isEmpty(reviewPhase) && _.every(reviewPhase, phase => phase.phaseStatus === 'Closed');
- const checkPointPhase = item.allPhases.filter(d => d.phaseType === 'Checkpoint Submission')[0];
- const isCheckPointClosed = checkPointPhase && checkPointPhase.phaseStatus === 'Closed';
- const isFirst2Finish = item.subTrack === 'FIRST_2_FINISH';
-
- return (item.track === 'DEVELOP' && !isFirst2Finish && registrationOpen)
- // First 2 Finish challenges may be closed even if registration is open
- || (item.track === 'DEVELOP' && isFirst2Finish && registrationOpen && !isReviewClosed)
- || (item.track === 'DESIGN' && registrationOpen && !isCheckPointClosed)
- || (item.subTrack.startsWith('MARATHON') && !item.status.startsWith('PAST'));
-};
-
-class SideBarFilter extends ChallengeFilter {
-
- // In addition to the standard arguments accepted by all parent filter classes,
- // argument of this class may also be one of the filter modes, defined above.
- constructor(arg) {
- if (!arg) {
- super();
- this.mode = MODE.ALL_CHALLENGES;
- this.name = MODE.ALL_CHALLENGES;
- this.uuid = MODE.ALL_CHALLENGES;
- } else if (arg.isSavedFilter) {
- super(arg);
- this.isCustomFilter = arg.isCustomFilter;
- const mode = arg.filter.split('&').filter(ele => ele.startsWith('mode='))[0];
- const name = arg.filter.split('&').filter(ele => ele.startsWith('name='))[0];
- const modes = Object.keys(MODE).map(key => MODE[key]);
- this.mode = mode ? modes[+mode.split('=')[1]] : MODE.CUSTOM;
- this.name = arg.name || (name ? decodeURIComponent(name.split('=')[1]) : name) || 'Custom';
- this.uuid = arg.id || uuid();
- } else if (_.isObject(arg)) {
- if (!arg.isSideBarFilter) throw new Error('Invalid argument!');
- super(arg);
- this.isCustomFilter = arg.isCustomFilter;
- this.mode = _.clone(arg.mode);
- this.name = _.clone(arg.name);
- this.uuid = _.clone(arg.uuid);
- } else if (_.isString(arg)) {
- try {
- const f = JSON.parse(atob(arg));
- super(f[0]);
- this.mode = f[1];
- this.name = f[2];
- this.uuid = f[3];
- } catch (e) {
- super();
- this.mode = arg;
- this.name = arg;
- this.uuid = arg === MODE.CUSTOM ? uuid() : this.mode;
- }
- } else throw new Error('Invalid argument!');
- this.isSideBarFilter = true;
- }
-
- count() {
- if (this.mode === MODE.CUSTOM) return super.count();
- return this.mode === MODE.ALL_CHALLENGES ? 0 : 1;
- }
-
- getFilterFunction() {
- switch (this.mode) {
- case MODE.ALL_CHALLENGES: return () => true;
- case MODE.MY_CHALLENGES: return item => item.myChallenge;
- case MODE.OPEN_FOR_REVIEW: return item => item.allPhases.filter(d => d.phaseType === 'Registration')[0].phaseStatus === 'REVIEW';
- // The API has some incosistencies in the challenge items
- // thus we have to check all fields that define a challenges as 'Open for registration'
- case MODE.OPEN_FOR_REGISTRATION:
- return openForRegistrationFilter;
- case MODE.ONGOING_CHALLENGES:
- return item => !openForRegistrationFilter(item) && item.status === 'ACTIVE';
- case MODE.PAST_CHALLENGES: return item => item.status === 'COMPLETED';
- case MODE.UPCOMING_CHALLENGES: return item => moment(item.registrationStartDate) > moment();
- default: return super.getFilterFunction();
- }
- }
-
- merge(filter) {
- super.merge(filter);
- if (!filter.isSideBarFilter) return this;
- this.mode = _.clone(filter.mode);
- this.name = _.clone(filter.name);
- this.uuid = _.clone(filter.uuid);
- return this;
- }
-
- copySidebarFilterProps(filter) {
- if (!filter.isSideBarFilter) return this;
- this.name = _.clone(filter.name);
- this.uuid = _.clone(filter.uuid);
- return this;
- }
-
- stringify() {
- return btoa(JSON.stringify([
- super.stringify(),
- this.mode,
- this.name,
- this.uuid,
- ]));
- }
-
- /**
- * Get an URL Encoded string representation of the filter.
- * Used for saving to the backend and displaying on the URL for deep linking.
- */
- getURLEncoded() {
- const modes = Object.keys(MODE).map(key => MODE[key]);
- const mode = `&mode=${modes.indexOf(this.mode)}`;
- const name = `&name=${this.name}`;
- return `${super.getURLEncoded()}${mode}${name}`;
- }
-}
-
-export default SideBarFilter;
diff --git a/src/shared/components/challenge-listing/SideBarFilters/index.jsx b/src/shared/components/challenge-listing/SideBarFilters/index.jsx
deleted file mode 100644
index d569008084..0000000000
--- a/src/shared/components/challenge-listing/SideBarFilters/index.jsx
+++ /dev/null
@@ -1,482 +0,0 @@
-/* global
- fetch, window
-*/
-
-/* eslint jsx-a11y/no-static-element-interactions:0 */
-
-/**
- * Sidebar Filters Component (for an additional filtering of the challenge listing).
- *
- * It renders a list of filters separated in a few sections. Each filter shows
- * the number of challenges matching it, and, when clicked, it is highlighted
- * and triggers the onFilter() callback to order the parent container to filter
- * the challenge listing.
- *
- * This componet has My Filters section, where the filters can be added by
- * the parent component, using the addFilter() method. That section has a button,
- * which switches the sidebar into My Filters Edit mode, where the names of
- * My Filters, and their ordering can be changed. Also the filters can be removed
- * in that mode.
- */
-
-import _ from 'lodash';
-import uuid from 'uuid/v4';
-import React from 'react';
-import PT from 'prop-types';
-import EditMyFilters, { SAVE_FILTERS_API } from './EditMyFilters';
-import SideBarFilter, { MODE } from './SideBarFilter';
-import { FilterItem } from './FilterItems';
-import './style.scss';
-
-/*
- * Default set of filters displayed in the component.
- * Note that groupping of these into difference sections is defined in the jsx
- * layout markup. The js logic behind this does not care about that groupping.
- */
-const DEFAULT_FILTERS = [
- new SideBarFilter(MODE.ALL_CHALLENGES),
- new SideBarFilter(MODE.MY_CHALLENGES),
- new SideBarFilter(MODE.OPEN_FOR_REGISTRATION),
- new SideBarFilter(MODE.ONGOING_CHALLENGES),
- new SideBarFilter(MODE.PAST_CHALLENGES),
- new SideBarFilter(MODE.OPEN_FOR_REVIEW),
- new SideBarFilter(MODE.UPCOMING_CHALLENGES),
-];
-
-/*
- * This auxiliary object holds the indices of standard filters in the filters array.
- */
-const FILTER_ID = {
- ALL_CHALLENGES: 0,
- MY_CHALLENGES: 1,
- OPEN_FOR_REGISTRATION: 2,
- ONGOING_CHALLENGES: 3,
- PAST_CHALLENGES: 4,
- OPEN_FOR_REVIEW: 5,
- UPCOMING_CHALLENGES: 6,
- FIRST_USER_DEFINED: 7,
-};
-
-/*
- * Component modes.
- */
-const MODES = {
- EDIT_MY_FILTERS: 0,
- SELECT_FILTER: 1,
-};
-
-/*
- * When a new filter is added via the addFilter() method, its name is set equal
- * to `${MY_FILTER_BASE_NAME} N` where N is least integers, which is still larger
- * that all other such indices in the similar filter names.
- */
-const MY_FILTER_BASE_NAME = 'My Filter';
-
-const RSS_LINK = 'http://feeds.topcoder.com/challenges/feed?list=active&contestType=all';
-
-class SideBarFilters extends React.Component {
-
- static domainFromUrl(url) {
- // if MAIN_URL is not defined or null return default domain (production)
- if (url == null) {
- return 'topcoder.com';
- }
- const firstSlashIndex = url.indexOf('/');
- const secondSlashIndex = url.indexOf('/', firstSlashIndex + 1);
- const fullDomainName = url.slice(secondSlashIndex + 1);
- const lastDotIndex = fullDomainName.lastIndexOf('.');
- const secondLastDotIndex = fullDomainName.lastIndexOf('.', lastDotIndex - 1);
- if (secondLastDotIndex === -1) {
- return fullDomainName;
- }
- return fullDomainName.slice(secondLastDotIndex + 1, fullDomainName.length);
- }
-
- constructor(props) {
- super(props);
-
- const { challengeGroupId: cgi } = props;
-
- const authToken = (props.auth && props.auth.tokenV2) || null;
-
- this.state = {
- authToken,
- currentFilter: DEFAULT_FILTERS[3],
- filters: _.clone(DEFAULT_FILTERS),
- mode: MODES.SELECT_FILTER,
- };
-
- for (let i = 0; i < this.state.filters.length; i += 1) {
- const item = this.state.filters[i];
- item.count = props.challenges.filter(item.getFilterFunction())
- .filter(it => !cgi || it.groups[cgi]).length;
- }
- for (let i = 0; i !== this.state.filters.length; i += 1) {
- const f = this.state.filters[i];
- // Match of UUID means that one of the filters we have already matches
- // the one passed from the parent component, so we have just select it,
- // and we can exit the constructor right after.
- if (f.uuid === props.filter.uuid) {
- this.state.currentFilter = f;
- return;
- }
- }
- // A fancy staff: if the parent has passed a filter, which does not exists
- // (it is taken from a deep link), we add it to the list of filters and
- // also select it.
- // if the filter is one of the default filters then
- // select it by default. We check on name and assume that
- // a custom filter will never be named the same as a default filter.
- if (_.values(MODE).includes(props.filter.name)) {
- this.state.currentFilter = DEFAULT_FILTERS[_.values(MODE).indexOf(props.filter.name)];
- } else {
- const f = new SideBarFilter(props.filter);
- f.count = props.challenges.filter(f.getFilterFunction())
- .filter(it => !cgi || it.groups[cgi]).length;
- this.state.currentFilter = f;
- this.state.filters.push(f);
- }
- }
-
- /**
- * Retrieve the saved filters for a logged in user.
- */
- componentDidMount() {
- if (this.state.authToken) {
- fetch(SAVE_FILTERS_API, {
- headers: {
- Authorization: `Bearer ${this.state.authToken}`,
- 'Content-Type': 'application/json',
- },
- })
- .then(res => res.json())
- .then((data) => {
- const myFilters = data.map((item) => {
- const filter = item;
- filter.isSavedFilter = true;
- filter.isCustomFilter = true;
- return new SideBarFilter(filter);
- });
- this.setState({
- filters: this.state.filters.concat(myFilters),
- });
- });
- }
- }
- /**
- * When a new array of challenges is passed from the parent component via props,
- * this method updates counters of challenges matching each of the filters in
- * this sidebar.
- */
- componentWillReceiveProps(nextProps) {
- const { challengeGroupId: cgi } = nextProps;
- let currentFilter;
- const filters = [];
- this.state.filters.forEach((filter) => {
- const filterClone = new SideBarFilter(filter);
- if (this.state.currentFilter === filter) currentFilter = filterClone;
- filterClone.groupId = nextProps.filter.groupId;
- filterClone.count = nextProps.challenges.filter(filterClone.getFilterFunction())
- .filter(it => !cgi || it.groups[cgi]).length;
- filters.push(filterClone);
- });
- for (let i = 0; i < filters.length; i += 1) {
- if (filters[i].mode === 'All Challenges') {
- filters[i].count = 0;
- for (let j = 0; j < filters.length; j += 1) {
- if (filters[j].mode === 'Open for registration' || filters[j].mode === 'Ongoing challenges') {
- filters[i].count += filters[j].count;
- }
- }
- }
- }
- this.setState({
- currentFilter,
- filters,
- });
- }
-
- /**
- * When sidebar updates, this method checks that some of the fitlers is highlighted,
- * if not, it resets the current filter to the All Challenges.
- * This allows to handle properly the following situation:
- * - The user selects a custom filter from My Filters;
- * - Then it clicks Edit My Filters and remove that filter;
- * - Then he clicks Done and returns to the standard component mode.
- * Without this method, he will still see the set of challenges filtered by
- * the already removed filter, and no indication in the sidebar, by what filtered
- * they are filtered.
- */
- componentDidUpdate() {
- if (this.state.filters.indexOf(this.state.currentFilter) < 0) {
- this.selectFilter(FILTER_ID.ALL_CHALLENGES);
- }
- }
-
- /**
- * Generates the default name for a new filter.
- * It will be `${MY_FILTER_BASE_NAME} N`, where N is an integer, which makes
- * this filter name unique among other filters in the sidebar.
- */
- getAvailableFilterName() {
- let maxId = 0;
- for (let i = FILTER_ID.FIRST_USER_DEFINED; i < this.state.filters.length; i += 1) {
- const name = this.state.filters[i].name;
- if (name.startsWith(MY_FILTER_BASE_NAME)) {
- const id = Number(name.slice(1 + MY_FILTER_BASE_NAME.length));
- if (!isNaN(id) && (maxId < id)) maxId = id;
- }
- }
- return `${MY_FILTER_BASE_NAME} ${1 + maxId}`;
- }
-
- /**
- * Adds new custom filter to the sidebar.
- * @param {String} filter.name Name of the filter to show in the sidebar.
- * @param {Func} filter.filter Filter function, which should be serializable
- * via toString() and deserializable via eval() (i.e. it should not depend on
- * variables/functions in its outer scope).
- */
- addFilter(filter) {
- const f = (new SideBarFilter(MODE.CUSTOM)).merge(filter);
- f.uuid = uuid();
- const filters = _.clone(this.state.filters);
- f.count = this.props.challenges.filter(f.getFilterFunction()).length;
- filters.push(f);
- this.setState({ filters });
- this.saveFilters(filters.slice(FILTER_ID.FIRST_USER_DEFINED));
- }
-
- /**
- * Renders the component in the Edit My Filters mode.
- */
- editMyFiltersMode() {
- const domain = SideBarFilters.domainFromUrl(this.props.config.MAIN_URL);
- return (
-
-
- );
- }
-
-/**
- * Updates already saved filters on the backend.
- * Used to update name of the filter but can be used to update
- * other properties if needed.
- */
- updateFilters(filters) {
- // For each filter in filters, serialize it and then
- // make a fetch PUT request
- // there is no need to do anything with the response
- filters.forEach((filter) => {
- fetch(`${SAVE_FILTERS_API}/${filter.uuid}`, {
- headers: {
- Authorization: `Bearer ${this.state.authToken}`,
- 'Content-Type': 'application/json',
- },
- method: 'PUT',
- body: JSON.stringify({
- name: filter.name,
- filter: filter.getURLEncoded(),
- // TODO: The saved-search API requires type to be one of develop, design,
- // or data. As this is not consistent with the frontend functionality, the API
- // needs to be updated in future, till then we use hardcoded 'develop'.
- type: 'develop',
- }),
- });
- });
- }
- /**
- * Saves My Filters to the backend
- */
- saveFilters(filters) {
- // This code saves the stringified representation of
- // the filters to the remote server.
- const [filter] = _.takeRight(filters);
-
- fetch(SAVE_FILTERS_API, {
- headers: {
- Authorization: `Bearer ${this.state.authToken}`,
- 'Content-Type': 'application/json',
- },
- method: 'POST',
- body: JSON.stringify({
- name: this.getAvailableFilterName(),
- filter: filter.getURLEncoded(),
- // The saved-search API requires type to be one of develop, design,
- // or data. We are using the filter property to store tracks info and passing
- // in type as develop just to keep the backend happy.
- type: 'develop',
- }),
- })
- .then(res => res.json())
- .then((res) => {
- // Replace the SideBarFilter object created at the client side with a new
- // SideBarFilter object which has correct id from the server response.
- const updatedFilters = this.state.filters.filter(e => e.uuid !== filter.uuid);
- const savedFilter = res;
- savedFilter.isSavedFilter = true;
- savedFilter.isCustomFilter = true;
- updatedFilters.push(new SideBarFilter(savedFilter));
- this.setState({ filters: updatedFilters });
- });
- }
-
- /**
- * Renders the component in the regular mode.
- */
- selectFilterMode() {
- if (this.state.filters[FILTER_ID.ALL_CHALLENGES].count === 0) return null;
-
- const filters = this.state.filters.map((filter, index) => (
-
- {
- const filters = _.clone(this.state.filters).slice(0, FILTER_ID.FIRST_USER_DEFINED);
- this.setState({
- filters: filters.concat(myFilters),
- mode: MODES.SELECT_FILTER,
- });
- this.updateFilters(myFilters);
- }}
- />
-
-
-
-
- );
- }
-
- /**
- * Selects the filter with the specified index.
- */
- selectFilter(index) {
- if (this.state.filters[index].mode === 'Open for review') {
- // Jump to Development Review Opportunities page
- window.location.href = `${this.props.config.MAIN_URL}/review/development-review-opportunities/`;
- } else {
- const currentFilter = this.state.filters[index];
- this.setState({ currentFilter }, () => this.props.onFilter(currentFilter));
- }
- }
-
- /**
- * Selects the filter with the specified name.
- */
- selectFilterWithName(filterName) {
- // find a filter with matching name
- const selectedFilter = _.find(this.state.filters, filter => filter.name === filterName);
- if (selectedFilter.mode === 'Open for review') {
- // Jump to Development Review Opportunities page
- window.location.href = `${this.props.config.MAIN_URL}/review/development-review-opportunities/`;
- return;
- }
- const mergedFilter = this.props.filter.copySidebarFilterProps(selectedFilter);
- this.setState({ currentFilter: mergedFilter }, () => this.props.onFilter(mergedFilter));
- }
-
- /**
- * Renders the component.
- */
- render() {
- switch (this.state.mode) {
- case MODES.SELECT_FILTER: return this.selectFilterMode();
- case MODES.EDIT_MY_FILTERS: return this.editMyFiltersMode();
- default: return ;
- }
- }
-}
-
-SideBarFilters.defaultProps = {
- filter: new SideBarFilter(MODE.ALL_CHALLENGES),
- isAuth: false,
- onFilter: _.noop,
- challengeGroupId: '',
- config: {
- MAIN_URL: '',
- },
- auth: null,
-};
-
-SideBarFilters.propTypes = {
- challenges: PT.arrayOf(PT.shape({
- registrationOpen: PT.string.isRequired,
- })).isRequired,
- filter: PT.instanceOf(SideBarFilter),
- challengeGroupId: PT.string,
- onFilter: PT.func,
- isAuth: PT.bool,
- config: PT.shape({
- MAIN_URL: PT.string,
- }),
- auth: PT.shape({
- tokenV2: PT.string,
- }),
-};
-
-export default SideBarFilters;
diff --git a/src/shared/components/challenge-listing/SideBarFilters/style.scss b/src/shared/components/challenge-listing/SideBarFilters/style.scss
deleted file mode 100644
index 87f98bd886..0000000000
--- a/src/shared/components/challenge-listing/SideBarFilters/style.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@import "~styles/tc-styles";
-
-.SideBarFilters {
- font: 400 13px/30px Roboto;
- width: 100%;
-
- .FilterBox {
- background: $tc-white;
- padding: 2 * $base-unit;
- padding-bottom: 2 * $base-unit;
- border-radius: $corner-radius * 2;
-
- hr {
- color: $tc-gray-10;
- background: $tc-gray-10;
- border: 0;
- height: 1px;
- margin: 2 * $base-unit;
- }
-
- .my-filters {
- display: block;
- position: relative;
- padding: 0 3 * $base-unit;
- margin-top: 7 * $base-unit;
-
- @include xs {
- padding: 0;
- }
-
- h1 {
- display: inline-block;
- margin: 0;
- padding: 0;
- font-weight: 500;
- font-size: 12px;
- color: $tc-gray-50;
- letter-spacing: 0;
- line-height: 30px;
- border: none;
- text-transform: uppercase;
-
- @include xs {
- font-size: 15px;
- }
- }
-
- .edit-link {
- float: right;
- font-weight: 400;
- font-size: 11px;
- color: $tc-dark-blue;
- line-height: $base-unit * 4;
- cursor: pointer;
-
- @include xs {
- font-size: 13px;
- }
- }
- }
-
- .get-rss {
- text-align: center;
-
- a {
- color: $tc-gray-50;
- font-size: 13px;
- line-height: 30px;
- }
- }
- }
- // sidebar footer
- .sidebar-footer {
- padding: 10px;
-
- @include xs-to-sm {
- display: none;
- }
-
- ul {
- display: inline-block;
- }
-
- li {
- display: inline-block;
- font-weight: 400;
- font-size: 13px;
- color: $tc-gray-70;
- line-height: 30px;
- }
-
- li a {
- font-weight: 400;
- font-size: 13px;
- color: $tc-gray-70;
- display: inline-block;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- .copyright {
- display: inline-block;
- position: absolute;
- right: 0;
- font-weight: 500;
- font-size: 13px;
- color: $tc-gray-30;
- line-height: 30px;
- }
- }
-}
diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/index.jsx b/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/index.jsx
new file mode 100644
index 0000000000..793dd78cf9
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/index.jsx
@@ -0,0 +1,53 @@
+/**
+ * Regular sidebar row.
+ */
+
+import _ from 'lodash';
+import * as Filter from 'utils/challenge-listing/filter';
+import PT from 'prop-types';
+import React from 'react';
+import './style.scss';
+
+export default function Bucket({
+ active,
+ bucket,
+ challenges,
+ disabled,
+ onClick,
+}) {
+ let count;
+ if (!bucket.hideCount && !disabled) {
+ const filter = Filter.getFilterFunction(bucket.filter);
+ count = challenges.filter(filter).length;
+ count = {count};
+ }
+
+ if (active) return
- {filters[FILTER_ID.ALL_CHALLENGES]}
-
- {this.props.isAuth ? {filters[FILTER_ID.MY_CHALLENGES]} : ''}
- {filters[FILTER_ID.OPEN_FOR_REGISTRATION]}
- {filters[FILTER_ID.ONGOING_CHALLENGES]}
- {filters[FILTER_ID.OPEN_FOR_REVIEW]}
- {filters[FILTER_ID.UPCOMING_CHALLENGES]}
-
- {filters[FILTER_ID.PAST_CHALLENGES]} - { - myFilters.length ? -
-
-
- - {filters[FILTER_ID.PAST_CHALLENGES]} - { - myFilters.length ? -
-
- {myFilters}
-
: ''
- }
- -
- Get the RSS feed
-
- {bucket.name}{count}
;
+
+ return (
+ (e.key === 'Enter' ? onClick() : null)}
+ role="button"
+ styleName="bucket"
+ tabIndex={0}
+ >{bucket.name}{count}
+ );
+}
+
+Bucket.defaultProps = {
+ active: false,
+ disabled: false,
+ onClick: _.noop,
+};
+
+Bucket.propTypes = {
+ active: PT.bool,
+ bucket: PT.shape({
+ hideCount: PT.bool,
+ name: PT.string.isRequired,
+ }).isRequired,
+ challenges: PT.arrayOf(PT.shape).isRequired,
+ disabled: PT.bool,
+ onClick: PT.func,
+};
diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/style.scss b/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/style.scss
new file mode 100644
index 0000000000..d435477fc2
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/style.scss
@@ -0,0 +1,31 @@
+@import "~styles/tc-styles";
+
+.active {
+ background: $tc-gray-10;
+ cursor: default;
+ font-weight: 600;
+
+ @include xs {
+ background: $tc-white;
+ }
+}
+
+.bucket {
+ color: $tc-black;
+ border-radius: 2 * $corner-radius;
+ cursor: pointer;
+ outline: none;
+ padding: 0 2 * $base-unit 0 3 * $base-unit;
+
+ @include xs {
+ font-size: 15px;
+ padding: 2px 0;
+ }
+}
+
+.right {
+ color: $tc-gray-50;
+ float: right;
+ position: static;
+ font-weight: 700;
+}
diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx b/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx
new file mode 100644
index 0000000000..ef33836d81
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx
@@ -0,0 +1,126 @@
+/**
+ * Sidebar content in the regular mode: Renders a list of challenge buckets,
+ * and custom user-saved filters, allowing to switch between them. It also
+ * has a link switching the sidebar into filters editor mode.
+ */
+
+import config from 'utils/config';
+import PT from 'prop-types';
+import React from 'react';
+import { BUCKETS } from 'utils/challenge-listing/buckets';
+import { getFilterFunction } from 'utils/challenge-listing/filter';
+
+import Bucket from './Bucket';
+
+import './style.scss';
+
+const RSS_LINK = 'http://feeds.topcoder.com/challenges/feed?list=active&contestType=all';
+
+export default function BucketSelector({
+ activeBucket,
+ activeSavedFilter,
+ buckets,
+ challenges,
+ communityFilter,
+ disabled,
+ filterState,
+ isAuth,
+ savedFilters,
+ selectBucket,
+ selectSavedFilter,
+ setEditSavedFiltersMode,
+}) {
+ let filteredChallenges = challenges.filter(getFilterFunction(filterState));
+
+ if (communityFilter) {
+ filteredChallenges = filteredChallenges.filter(
+ getFilterFunction(communityFilter));
+ }
+
+ const getBucket = bucket => (
+
+ {getBucket(BUCKETS.ALL)}
+ {isAuth ? getBucket(BUCKETS.MY) : null}
+ {getBucket(BUCKETS.OPEN_FOR_REGISTRATION)}
+ {getBucket(BUCKETS.ONGOING)}
+
+ { + disabled ? Open for review : ( + Open for review + ) + } + {getBucket(BUCKETS.PAST)} + {getBucket(BUCKETS.UPCOMING)} + { + savedFilters.length ? +
+
+ );
+}
+
+BucketSelector.defaultProps = {
+ communityFilter: null,
+ disabled: false,
+ isAuth: false,
+};
+
+BucketSelector.propTypes = {
+ activeBucket: PT.string.isRequired,
+ activeSavedFilter: PT.number.isRequired,
+ buckets: PT.shape().isRequired,
+ challenges: PT.arrayOf(PT.shape({
+ registrationOpen: PT.string.isRequired,
+ })).isRequired,
+ communityFilter: PT.shape(),
+ disabled: PT.bool,
+ filterState: PT.shape().isRequired,
+ isAuth: PT.bool,
+ savedFilters: PT.arrayOf(PT.shape()).isRequired,
+ selectBucket: PT.func.isRequired,
+ selectSavedFilter: PT.func.isRequired,
+ setEditSavedFiltersMode: PT.func.isRequired,
+};
diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/style.scss b/src/shared/components/challenge-listing/Sidebar/BucketSelector/style.scss
new file mode 100644
index 0000000000..4c7cade1f5
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/style.scss
@@ -0,0 +1,66 @@
+@import "~styles/tc-styles";
+
+.get-rss {
+ text-align: center;
+
+ a {
+ color: $tc-gray-50;
+ font-size: 13px;
+ line-height: 30px;
+ }
+}
+
+.my-filters {
+ display: block;
+ position: relative;
+ padding: 0 3 * $base-unit;
+ margin-top: 7 * $base-unit;
+
+ @include xs {
+ padding: 0;
+ }
+
+ h1 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ font-weight: 500;
+ font-size: 12px;
+ color: $tc-gray-50;
+ letter-spacing: 0;
+ line-height: 30px;
+ border: none;
+ text-transform: uppercase;
+
+ @include xs {
+ font-size: 15px;
+ }
+ }
+
+ .edit-link {
+ float: right;
+ font-weight: 400;
+ font-size: 11px;
+ color: $tc-dark-blue;
+ line-height: $base-unit * 4;
+ cursor: pointer;
+
+ @include xs {
+ font-size: 13px;
+ }
+ }
+}
+
+.openForReview {
+ color: $tc-black;
+ border-radius: 2 * $corner-radius;
+ cursor: pointer;
+ display: block;
+ padding: 0 2 * $base-unit 0 3 * $base-unit;
+
+ @include xs {
+ font-size: 15px;
+ padding: 2px 0;
+ }
+}
+
diff --git a/src/shared/components/challenge-listing/Sidebar/FiltersEditor/Item/index.jsx b/src/shared/components/challenge-listing/Sidebar/FiltersEditor/Item/index.jsx
new file mode 100644
index 0000000000..1599a265ea
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/FiltersEditor/Item/index.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import './style.scss';
+
+import ArrowsMoveVertical from '../../../Icons/ArrowsMoveVertical';
+import UiSimpleRemove from '../../../Icons/ui-simple-remove.svg';
+
+export default function Item(props) {
+ return (
+ + { + disabled ? Open for review : ( + Open for review + ) + } + {getBucket(BUCKETS.PAST)} + {getBucket(BUCKETS.UPCOMING)} + { + savedFilters.length ? +
+
+ {savedFiltersRender}
+
: ''
+ }
+ +
+ Get the RSS feed
+
+ props.dragSavedFilterMove(event)}
+ onDragStart={event => props.dragSavedFilterStart(event)}
+ >
+
+ );
+}
+
+Item.propTypes = {
+ deleteSavedFilter: PT.func.isRequired,
+ dragSavedFilterMove: PT.func.isRequired,
+ dragSavedFilterStart: PT.func.isRequired,
+ name: PT.string.isRequired,
+ changeFilterName: PT.func.isRequired,
+ resetFilterName: PT.func.isRequired,
+ updateSavedFilter: PT.func.isRequired,
+};
diff --git a/src/shared/components/challenge-listing/SideBarFilters/FilterItems/style.scss b/src/shared/components/challenge-listing/Sidebar/FiltersEditor/Item/style.scss
similarity index 71%
rename from src/shared/components/challenge-listing/SideBarFilters/FilterItems/style.scss
rename to src/shared/components/challenge-listing/Sidebar/FiltersEditor/Item/style.scss
index 4b07614586..9e2820e5db 100644
--- a/src/shared/components/challenge-listing/SideBarFilters/FilterItems/style.scss
+++ b/src/shared/components/challenge-listing/Sidebar/FiltersEditor/Item/style.scss
@@ -1,7 +1,5 @@
@import "~styles/tc-styles";
-// Styling of ActiveFilterItem.
-
.ActiveFilterItem {
cursor: pointer;
margin: 0 -2 * $base-unit;
@@ -88,37 +86,3 @@
top: 30px;
z-index: 10;
}
-
-// Styling of FilterItem.
-
-.FilterItem {
- color: $tc-black;
- border-radius: 2 * $corner-radius;
- cursor: pointer;
- padding: 0 2 * $base-unit 0 3 * $base-unit;
-
- @include xs {
- font-size: 15px;
- padding: 2px 0;
- }
-
- .right {
- color: $tc-gray-50;
- float: right;
- position: static;
- font-weight: 700;
- }
-}
-
-.FilterItem.highlighted {
- background: $tc-gray-10;
- cursor: default;
-
- @include xs {
- background: $tc-white;
- }
-
- .left {
- font-weight: 600;
- }
-}
diff --git a/src/shared/components/challenge-listing/Sidebar/FiltersEditor/index.jsx b/src/shared/components/challenge-listing/Sidebar/FiltersEditor/index.jsx
new file mode 100644
index 0000000000..e0661cfdbc
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/FiltersEditor/index.jsx
@@ -0,0 +1,73 @@
+/**
+ * Content of the sidebar in filters editor mode. In that mode the sidebar
+ * allows to reorder / rename user-saved filters.
+ */
+
+import PT from 'prop-types';
+import React from 'react';
+
+import Item from './Item';
+import './style.scss';
+
+export default function FiltersEditor({
+ changeFilterName,
+ deleteSavedFilter,
+ dragState,
+ dragSavedFilterMove,
+ dragSavedFilterStart,
+ resetFilterName,
+ savedFilters,
+ setEditSavedFiltersMode,
+ updateAllSavedFilters,
+ updateSavedFilter,
+}) {
+ const savedFilterItems = savedFilters.map((item, index) => (
+ Delete Filter
+
+
+
+ );
+}
+
+FiltersEditor.propTypes = {
+ changeFilterName: PT.func.isRequired,
+ deleteSavedFilter: PT.func.isRequired,
+ dragState: PT.shape().isRequired,
+ dragSavedFilterMove: PT.func.isRequired,
+ dragSavedFilterStart: PT.func.isRequired,
+ resetFilterName: PT.func.isRequired,
+ savedFilters: PT.arrayOf(PT.shape()).isRequired,
+ setEditSavedFiltersMode: PT.func.isRequired,
+ updateAllSavedFilters: PT.func.isRequired,
+ updateSavedFilter: PT.func.isRequired,
+};
diff --git a/src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/EditMyFilters.scss b/src/shared/components/challenge-listing/Sidebar/FiltersEditor/style.scss
similarity index 100%
rename from src/shared/components/challenge-listing/SideBarFilters/EditMyFilters/EditMyFilters.scss
rename to src/shared/components/challenge-listing/Sidebar/FiltersEditor/style.scss
diff --git a/src/shared/components/challenge-listing/Sidebar/Footer/index.jsx b/src/shared/components/challenge-listing/Sidebar/Footer/index.jsx
new file mode 100644
index 0000000000..d7e5a4c836
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/Footer/index.jsx
@@ -0,0 +1,23 @@
+/**
+ * Sidebar footer. Contains About / Contact / Help / Privacy / Terms links
+ * and Topcoder copyright.
+ */
+
+import config from 'utils/config';
+import React from 'react';
+import './style.scss';
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/shared/components/challenge-listing/Sidebar/Footer/style.scss b/src/shared/components/challenge-listing/Sidebar/Footer/style.scss
new file mode 100644
index 0000000000..b9b53a02b7
--- /dev/null
+++ b/src/shared/components/challenge-listing/Sidebar/Footer/style.scss
@@ -0,0 +1,42 @@
+@import "~styles/tc-styles";
+
+.sidebar-footer {
+ padding: 10px;
+
+ @include xs-to-sm {
+ display: none;
+ }
+
+ ul {
+ display: inline-block;
+ }
+
+ li {
+ display: inline-block;
+ font-weight: 400;
+ font-size: 13px;
+ color: $tc-gray-70;
+ line-height: 30px;
+ }
+
+ li a {
+ font-weight: 400;
+ font-size: 13px;
+ color: $tc-gray-70;
+ display: inline-block;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .copyright {
+ display: inline-block;
+ position: absolute;
+ right: 0;
+ font-weight: 500;
+ font-size: 13px;
+ color: $tc-gray-30;
+ line-height: 30px;
+ }
+}
diff --git a/src/shared/components/challenge-listing/Sidebar/SidebarRow/index.jsx b/src/shared/components/challenge-listing/Sidebar/SidebarRow/index.jsx
deleted file mode 100644
index d17dd98d4d..0000000000
--- a/src/shared/components/challenge-listing/Sidebar/SidebarRow/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PT from 'prop-types';
-import './style.scss';
-
-export default function SidebarRow(props) {
- return (
- + My filters +
+ {
+ updateAllSavedFilters();
+ setEditSavedFiltersMode(false);
+ }}
+ role="button"
+ styleName="done-button"
+ tabIndex={0}
+ >
+ Done
+
+ { savedFilterItems }
+
+ Drag the filters to set the order you prefer;
+ use the "x" mark to delete the filter(s) you don't need.
+
+
- {props.children}
-
- );
-}
-
-SidebarRow.defaultProps = {
- children: [],
-};
-
-SidebarRow.propTypes = {
- children: PT.node,
-};
diff --git a/src/shared/components/challenge-listing/Sidebar/SidebarRow/style.scss b/src/shared/components/challenge-listing/Sidebar/SidebarRow/style.scss
deleted file mode 100644
index a91888f9ef..0000000000
--- a/src/shared/components/challenge-listing/Sidebar/SidebarRow/style.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '~styles/tc-styles';
-
-.sidebar-row {
- display: flex;
-
- .l-row {
- font-family: 'Roboto';
- font-weight: 400;
- font-size: 13px;
- color: $tc-black;
- line-height: $base-unit * 6;
-
- @include xs {
- font-size: 15px;
- line-height: $base-unit * 7;
- }
- }
-
- .r-row {
- font-family: 'Roboto';
- font-weight: 700;
- font-size: 13px;
- color: $tc-gray-50;
- line-height: $base-unit * 6;
- margin-left: auto;
-
- @include xs {
- font-size: 15px;
- line-height: $base-unit * 7;
- }
- }
-}
diff --git a/src/shared/components/challenge-listing/Sidebar/index.jsx b/src/shared/components/challenge-listing/Sidebar/index.jsx
index 9ccd5a38ef..b69c96654e 100644
--- a/src/shared/components/challenge-listing/Sidebar/index.jsx
+++ b/src/shared/components/challenge-listing/Sidebar/index.jsx
@@ -1,85 +1,96 @@
-/* global
- JSON
-*/
+/* eslint jsx-a11y/no-static-element-interactions:0 */
+
+/**
+ * Sidebar Filters Component (for an additional filtering of the challenge listing).
+ *
+ * It renders a list of filters separated in a few sections. Each filter shows
+ * the number of challenges matching it, and, when clicked, it is highlighted
+ * and triggers the onFilter() callback to order the parent container to filter
+ * the challenge listing.
+ *
+ * This componet has My Filters section, where the filters can be added by
+ * the parent component, using the addFilter() method. That section has a button,
+ * which switches the sidebar into My Filters Edit mode, where the names of
+ * My Filters, and their ordering can be changed. Also the filters can be removed
+ * in that mode.
+ */
import React from 'react';
import PT from 'prop-types';
-import SidebarRow from './SidebarRow';
+import BucketSelector from './BucketSelector';
+import FiltersEditor from './FiltersEditor';
+import Footer from './Footer';
import './style.scss';
-export default function ChallengesSidebar({ SidebarMock }) {
- const all = () => (
- {SidebarMock.all.name}
-{/* SidebarMock.all.value */ ''}
-{SidebarMock.myChallenges.name}
-{/* SidebarMock.myChallenges.value */ ''}
-{other.name}
-{/* other.value */ ''}
-{other.name}
-{/* other.value */ ''}
-
-
-
-
- {all()}
-
-
-
- {myChallenges()}
-
-
-
- {others}
-
-
-
-
-
-
-
-
- {myFilters}
- MY FILTERS
- -
-
-
Topcoder © 2017.
+
+
);
}
-ChallengesSidebar.defaultProps = {
- SidebarMock: undefined,
+SideBarFilters.defaultProps = {
+ communityFilter: null,
+ disabled: false,
+ dragState: {},
+ isAuth: false,
};
-ChallengesSidebar.propTypes = {
- SidebarMock: PT.shape(),
+SideBarFilters.propTypes = {
+ activeBucket: PT.string.isRequired,
+ activeSavedFilter: PT.number.isRequired,
+ buckets: PT.shape().isRequired,
+ challenges: PT.arrayOf(PT.shape({
+ registrationOpen: PT.string.isRequired,
+ })).isRequired,
+ changeFilterName: PT.func.isRequired,
+ communityFilter: PT.shape(),
+ deleteSavedFilter: PT.func.isRequired,
+ disabled: PT.bool,
+ dragState: PT.shape(),
+ dragSavedFilterMove: PT.func.isRequired,
+ dragSavedFilterStart: PT.func.isRequired,
+ editSavedFiltersMode: PT.bool.isRequired,
+ filterState: PT.shape().isRequired,
+ isAuth: PT.bool,
+ resetFilterName: PT.func.isRequired,
+ savedFilters: PT.arrayOf(PT.shape()).isRequired,
+ selectBucket: PT.func.isRequired,
+ selectSavedFilter: PT.func.isRequired,
+ setEditSavedFiltersMode: PT.func.isRequired,
+ updateAllSavedFilters: PT.func.isRequired,
+ updateSavedFilter: PT.func.isRequired,
};
diff --git a/src/shared/components/challenge-listing/Sidebar/style.scss b/src/shared/components/challenge-listing/Sidebar/style.scss
index fc41868818..bfda4a8e47 100644
--- a/src/shared/components/challenge-listing/Sidebar/style.scss
+++ b/src/shared/components/challenge-listing/Sidebar/style.scss
@@ -1,124 +1,21 @@
-@import '~styles/tc-styles';
-$sidebar-space-10: $base-unit * 2;
-$sidebar-space-15: $base-unit * 3;
-$sidebar-space-20: $base-unit * 4;
-$sidebar-space-30: $base-unit * 6;
-$sidebar-space-40: $base-unit * 8;
-$sidebar-radius-4: $corner-radius * 2;
-
-.clickable {
- cursor: pointer;
-}
-
-.challenges-sidebar {
- padding: $sidebar-space-10;
- background: $tc-white;
- border-radius: $sidebar-radius-4;
-
- .header {
- background: $tc-gray-10;
- border-radius: $sidebar-radius-4;
- padding: 0 $sidebar-space-10 0 $sidebar-space-15;
- margin-bottom: $sidebar-space-10;
-
- @include xs {
- padding: 0;
- background: $tc-white;
- }
-
- .l-row {
- font-weight: 700;
- font-size: 13px;
- color: $tc-black;
- line-height: $sidebar-space-30;
-
- @include xs {
- font-size: 15px;
- }
- }
- }
-
- .challenges {
- border-top: 1px solid $tc-gray-10;
- margin: 0 $sidebar-space-10;
- padding: $sidebar-space-10 0 $sidebar-space-10 $base-unit;
-
- @include xs {
- margin: 0;
- padding: $sidebar-space-10 0 $sidebar-space-10 0;
- }
- }
-
- .filters {
- margin-bottom: $sidebar-space-10;
-
- .l-row {
- font-weight: 500;
- font-size: 12px;
- color: $tc-gray-50;
- letter-spacing: 0;
- line-height: $base-unit * 4;
-
- @include xs {
- font-size: 15px;
- }
+@import "~styles/tc-styles";
+
+.SideBarFilters {
+ font: 400 13px/30px Roboto;
+ width: 100%;
+
+ .FilterBox {
+ background: $tc-white;
+ padding: 2 * $base-unit;
+ padding-bottom: 2 * $base-unit;
+ border-radius: $corner-radius * 2;
+
+ hr {
+ color: $tc-gray-10;
+ background: $tc-gray-10;
+ border: 0;
+ height: 1px;
+ margin: 2 * $base-unit;
}
-
- .r-row {
- font-weight: 400;
- font-size: 11px;
- line-height: $base-unit * 4;
-
- @include xs {
- font-size: 13px;
- }
-
- a {
- color: $tc-dark-blue;
- }
- }
- }
-}
-// sidebar footer
-.sidebar-footer {
- padding: $sidebar-space-10;
-
- ul {
- display: flex;
- flex-wrap: wrap;
- }
-
- li {
- font-weight: 400;
- font-size: 13px;
- color: $tc-gray-70;
- line-height: $sidebar-space-30;
- }
-
- li a {
- font-weight: 400;
- font-size: 13px;
- color: $tc-gray-70;
- display: inline-block;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- .copyright {
- font-weight: 500;
- font-size: 13px;
- color: $tc-gray-30;
- line-height: $sidebar-space-30;
- }
-
- /*
- On mobile devices, the ChallengesSidebar is not on the side
- but on top of the list of challenges. Also, the footer is
- not displayed.
- */
- @include xs-to-sm {
- display: none;
}
}
diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx
index 872a9c50e6..d4aa75a747 100755
--- a/src/shared/components/challenge-listing/index.jsx
+++ b/src/shared/components/challenge-listing/index.jsx
@@ -1,468 +1,145 @@
-/* global JSON */
-
/**
- * This component implements a demo of ChallengeFilters in action.
- *
- * It uses ChallengeFilters component to show the challenge search & filter panel,
- * and it implements a simple logic to search, filter, and display the challenges
- * using TC API V2. As TC API V2 does not really provides the necessary ways to
- * filter and search the challenges, this example component always query all
- * challenges from the queried competition tracks (Data Science, Design, or
- * Development), and then performs the filtering of the results at the front-end
- * side, achieving the same behavior, visible for the end-user, as was requested in
- * the related challenge.
+ * Challenge listing component.
*/
import _ from 'lodash';
+import ChallengeFilters from 'containers/challenge-listing/FilterPanel';
import React from 'react';
import PT from 'prop-types';
-import config from 'utils/config';
import Sticky from 'react-stickynode';
+import * as Filter from 'utils/challenge-listing/filter';
+import Sidebar from 'containers/challenge-listing/Sidebar';
-import ChallengeFilterWithSearch from './Filters/ChallengeFilterWithSearch';
-import ChallengeFilters from './Filters/ChallengeFilters';
-import SideBarFilter, { MODE as SideBarFilterModes } from './SideBarFilters/SideBarFilter';
-import SideBarFilters from './SideBarFilters';
-import ChallengeCard from './ChallengeCard';
-import ChallengeCardContainer from './ChallengeCardContainer';
-import ChallengeCardPlaceholder from './placeholders/ChallengeCardPlaceholder';
-import SidebarFilterPlaceholder from './placeholders/SidebarFilterPlaceholder';
+import Listing from './Listing';
+import ChallengeCardPlaceholder from './placeholders/ChallengeCard';
import SRMCard from './SRMCard';
-import ChallengesSidebar from './Sidebar';
import './style.scss';
-/**
- * Helper function for generation of VALID_KEYWORDS and VALID_TRACKS arrays.
- * @param {String} keyword
- * @return {Object} The valid object to include into the array which will be
- * passed into the ChallengeFilters component.
- */
-function keywordsMapper(keyword) {
- return {
- label: keyword,
- value: keyword,
- };
-}
-
// Number of challenge placeholder card to display
const CHALLENGE_PLACEHOLDER_COUNT = 8;
-// A mock list of SRMs side bar
-const SRMsSidebarMock = {
- all: { name: 'All SRMs', value: 853 },
- myChallenges: { name: 'My Challenges', value: 3 },
- others: [
- { name: 'Upcoming SRM', value: 16 },
- { name: 'Past SRM', value: 34 },
- ],
- myFilters: [
- { name: 'TCO Finals', value: 23 },
- ],
-};
-
-/** Fetch Past challenges
- * {param} limit: Number of challenges to fetch
- * {param} helper: Function to invoke to map response
- */
-/*
-function fetchPastChallenges(limit, helper, groupIds, tokenV3) {
- const cService = getChallengesService(tokenV3);
- const MAX_LIMIT = 50;
- const result = [];
- const numFetch = Math.ceil(limit / MAX_LIMIT);
- const handleResponse = res => helper(res);
- for (let i = 0; i < numFetch; i += 1) {
- result.push(cService.getChallenges({
- groupIds,
- status: 'COMPLETED',
- }, {
- limit: MAX_LIMIT,
- offset: i * MAX_LIMIT,
- }).then(handleResponse));
- }
- return result;
-}
-*/
-
-// helper function to serialize object to query string
-const serialize = filter => filter.getURLEncoded();
-
-// helper function to de-serialize query string to filter object
-const deserialize = (queryString) => {
- const filter = new SideBarFilter({
- filter: queryString,
- isSavedFilter: true, // So that we can reuse constructor for deserializing
- });
- if (!_.values(SideBarFilterModes).includes(filter.name)) {
- filter.isCustomFilter = true;
- }
- return filter;
-};
-
-// The demo component itself.
-class ChallengeFiltersExample extends React.Component {
-
- /**
- * ChallengeFiltersExample was brought from another project without server rendering support.
- * To make rendering on the server consistent with the client rendering, we have to make sure all
- * setState calls will preform after this component is mounted. So we moved all the code which
- * can call setState from the constructor to here. Also we added some logic to make sure we
- * load data only once.
- */
- componentDidMount() {
- /*
- if (!this.state.isSRMChallengesLoading && !this.state.isSRMChallengesLoaded) {
- // eslint-disable-next-line react/no-did-mount-set-state
- this.setState({ isSRMChallengesLoading: true });
- /* Fetching of SRM challenges */
- /*
- fetch(`${this.props.config.API_URL}/srms/?filter=status=FUTURE`)
- .then(res => res.json())
- .then((json) => {
- this.setState({
- srmChallenges: json.result.content,
- isSRMChallengesLoading: false,
- isSRMChallengesLoaded: true,
- });
- });
- }
- */
- }
-
- /**
- * Searches the challenges for with the specified search string, competition
- * tracks, and filters.
- *
- * As TopCoder API v2 does not provide all necessary search & filtering
- * capabilites, this function fetches all challenges from the requested
- * tracks, then filters them by searching for 'searchString' in challenge
- * name, platforms, and techologies, and by filtering them with 'filter'
- * function, and then sets the remaining challenges into the component state.
- *
- * @param {String} searchString The search string.
- * @param {Function(Challenge)} filter Additional filter function.
- */
- onSearch(searchString) {
- const f = new ChallengeFilterWithSearch();
- _.merge(f, this.getFilter());
- f.query = searchString;
- if (f.query) this.onFilterByTopFilter(f);
- else this.saveFiltersToHash(this.getFilter());
- }
-
- onFilterByTopFilter(filter, isSidebarFilter) {
- let updatedFilter;
- if (filter.query && filter.query !== '') {
- updatedFilter = filter;
- updatedFilter.isCustomFilter = true;
- updatedFilter.mode = SideBarFilterModes.CUSTOM;
- } else {
- const f = this.getFilter();
- const mergedFilter = Object.assign({}, f, filter);
- if (isSidebarFilter) {
- if (f.groupId) mergedFilter.groupId = f.groupId;
- }
- updatedFilter = new SideBarFilter(mergedFilter);
- if (!isSidebarFilter) {
- updatedFilter.mode = SideBarFilterModes.CUSTOM;
- }
- }
- this.saveFiltersToHash(updatedFilter, updatedFilter.query || this.getSearchQuery());
- }
+export default function ChallengeListing(props) {
+ let challenges = props.challenges;
- // set current card type
- /*
- setCardType(cardType) {
- this.setState({
- currentCardType: cardType,
- });
+ if (props.communityFilter) {
+ challenges = challenges.filter(
+ Filter.getFilterFunction(props.communityFilter));
}
- */
- /**
- * Creates filter object from the text filter representation in the state.
- * @return {Object}
- */
- getFilter() {
- const q = this.getSearchQuery();
- let f = deserialize(this.props.filter);
- if (q) {
- f = _.merge(new ChallengeFilterWithSearch(), f);
- f.query = q;
- }
- return f;
- }
+ challenges = challenges.filter(
+ Filter.getFilterFunction(props.filterState));
- /**
- * Extracts free text search query from the filter string.
- * @return {String}
- */
- getSearchQuery() {
- return this.props.filter.split('&').filter(e =>
- e.startsWith('query')).map(element => element.split('=')[1])[0];
- }
+ const expanded = false;
- /**
- * Saves current filters to the URL hash.
- */
- saveFiltersToHash(filter, searchQuery) {
- let urlString = searchQuery ? `&query=${searchQuery}` : '';
- urlString += serialize(filter);
- this.props.setFilter(urlString);
+ let challengeCardContainer;
+ if (!expanded && props.loadingChallenges) {
+ const challengeCards = _.range(CHALLENGE_PLACEHOLDER_COUNT)
+ .map(key =>
+ { props.editSavedFiltersMode ? (
+
+
+
+ );
+ } else {
+ challengeCardContainer = (
+
+ { challengeCards }
+
+
-
- { challengeCards }
-
+ return (
+
+ this.setCardType(cardType) */}
+ isCardTypeSet={'Challenges' /* this.state.currentCardType */}
+ />
+
+ {
- if (this.challengeFilters) this.challengeFilters.setKeywords(tag);
- }}
- key={challenge.id}
- />
- );
- challengeCardContainer = (
-
+ {/*
- );
- } else if (filter.isCustomFilter) {
- if (currentFilter.mode === SideBarFilterModes.CUSTOM) {
- challenges = this.props.challenges.filter(currentFilter.getFilterFunction());
- }
-
- const cardify = challenge => (
-
+ {
- if (this.challengeFilters) this.challengeFilters.setKeywords(tag);
- }}
- challenges={_.uniqBy(challenges, 'id')}
- challengeGroupId={this.props.challengeGroupId}
- currentFilterName={sidebarFilterName}
- expanded={sidebarFilterName !== 'All Challenges'}
- getChallenges={this.props.getChallenges}
- getMarathonMatches={this.props.getMarathonMatches}
- additionalFilter={
- challenge => filterFunc(challenge) && sidebarFilterFunc(challenge)
- }
- // Handle onExpandFilterResult to update the sidebar
- onExpandFilterResult={
- filterName => this.sidebar.selectFilterWithName(filterName)
- }
- />
- );
- }
-
- // Upcoming srms
- // let futureSRMChallenge = this.state.srmChallenges.filter(challenge =>
- // challenge.status === 'FUTURE');
- /*
- futureSRMChallenge = futureSRMChallenge.sort(
- (a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
- );
-
- const UpcomingSrm = futureSRMChallenge.map(
- srmChallenge => (
-
+ {/* happening now */}
- );
- } else {
- const filterFunc = filter.getFilterFunction();
- const sidebarFilterFunc = (challenge) => {
- if (currentFilter.mode !== SideBarFilterModes.CUSTOM) {
- return true;
- }
- return currentFilter.getFilterFunction()(challenge);
- };
-
- challengeCardContainer = (
-
- {challenges.filter(filter.getFilterFunction()).map(cardify)}
+
-
- this.onFilterByTopFilter(topFilter)}
- onSaveFilter={(filterToSave) => {
- if (this.sidebar) {
- const f = (new SideBarFilter(SideBarFilterModes.CUSTOM)).merge(filterToSave);
- f.name = this.sidebar.getAvailableFilterName();
- this.sidebar.addFilter(f);
- }
- }}
- challengeGroupId={this.props.challengeGroupId}
- communityName={this.props.communityName}
- searchQuery={this.getSearchQuery()}
- onSearch={query => this.onSearch(query)}
- validKeywords={this.props.challengeTags.map(keywordsMapper)}
- validSubtracks={this.props.challengeSubtracks.map(keywordsMapper)}
- setCardType={_.noop/* cardType => this.setCardType(cardType) */}
- isCardTypeSet={'Challenges' /* this.state.currentCardType */}
- ref={(node) => { this.challengeFilters = node; }}
- />
-
-
Community 2
+
+ Dashboard – Dashboard page.
+
);
}
diff --git a/src/shared/services/api.js b/src/shared/services/api.js
index ac99179748..f5b8bdc88a 100644
--- a/src/shared/services/api.js
+++ b/src/shared/services/api.js
@@ -11,7 +11,7 @@ import config from 'utils/config';
* as in these cases we are fine with the same interface, and the only
* thing we need to be different is the base URL and auth token to use.
*/
-class Api {
+export default class Api {
/**
* @param {String} base Base URL of the API.
@@ -137,6 +137,3 @@ export function getApiV3(token) {
}
return lastApiV3;
}
-
-/* Default export is reserved for the combined API object. */
-export default undefined;
diff --git a/src/shared/services/challenges.js b/src/shared/services/challenges.js
index 38d03393f0..6ce76759eb 100644
--- a/src/shared/services/challenges.js
+++ b/src/shared/services/challenges.js
@@ -3,13 +3,95 @@
* challenges via TC API.
*/
+import _ from 'lodash';
import qs from 'qs';
+import { COMPETITION_TRACKS } from 'utils/tc';
import { getApiV2, getApiV3 } from './api';
export const ORDER_BY = {
SUBMISSION_END_DATE: 'submissionEndDate',
};
+/**
+ * Normalizes a regular challenge object received from the backend.
+ * NOTE: This function is copied from the existing code in the challenge listing
+ * component. It is possible, that this normalization is not necessary after we
+ * have moved to Topcoder API v3, but it is kept for now to minimize a risk of
+ * breaking anything.
+ * @param {Object} challenge Challenge object received from the backend.
+ * @param {String} username Optional.
+ * @return {Object} Normalized challenge.
+ */
+export function normalizeChallenge(challenge, username) {
+ const registrationOpen = challenge.allPhases.filter(d =>
+ d.phaseType === 'Registration',
+ )[0].phaseStatus === 'Open' ? 'Yes' : 'No';
+ const groups = {};
+ if (challenge.groupIds) {
+ challenge.groupIds.forEach((id) => {
+ groups[id] = true;
+ });
+ }
+ _.defaults(challenge, {
+ communities: new Set([COMPETITION_TRACKS[challenge.track]]),
+ groups,
+ platforms: '',
+ registrationOpen,
+ technologies: '',
+ submissionEndTimestamp: challenge.submissionEndDate,
+ users: username ? { username: true } : {},
+ });
+}
+
+/**
+ * Normalizes a marathon match challenge object received from the backend.
+ * NOTE: This function is copied from the existing code in the challenge listing
+ * component. It is possible, that this normalization is not necessary after we
+ * have moved to Topcoder API v3, but it is kept for now to minimize a risk of
+ * breaking anything.
+ * @param {Object} challenge MM challenge object received from the backend.
+ * @param {String} username Optional.
+ * @return {Object} Normalized challenge.
+ */
+export function normalizeMarathonMatch(challenge, username) {
+ const endTimestamp = new Date(challenge.endDate).getTime();
+ const allphases = [{
+ challengeId: challenge.id,
+ phaseType: 'Registration',
+ phaseStatus: endTimestamp > Date.now() ? 'Open' : 'Close',
+ scheduledEndTime: challenge.endDate,
+ }];
+ const groups = {};
+ if (challenge.groupIds) {
+ challenge.groupIds.forEach((id) => {
+ groups[id] = true;
+ });
+ }
+ _.defaults(challenge, {
+ challengeCommunity: 'Data',
+ challengeType: 'Marathon',
+ allPhases: allphases,
+ currentPhases: allphases.filter(phase => phase.phaseStatus === 'Open'),
+ communities: new Set([COMPETITION_TRACKS.DATA_SCIENCE]),
+ currentPhaseName: endTimestamp > Date.now() ? 'Registration' : '',
+ groups,
+ numRegistrants: challenge.numRegistrants ? challenge.numRegistrants[0] : 0,
+ numSubmissions: challenge.userIds ? challenge.userIds.length : 0,
+ platforms: '',
+ prizes: [0],
+ registrationOpen: endTimestamp > Date.now() ? 'Yes' : 'No',
+ registrationStartDate: challenge.startDate,
+ submissionEndDate: challenge.endDate,
+ submissionEndTimestamp: endTimestamp,
+ technologies: '',
+ totalPrize: 0,
+ track: 'DATA_SCIENCE',
+ status: endTimestamp > Date.now() ? 'ACTIVE' : 'COMPLETED',
+ subTrack: 'MARATHON_MATCH',
+ users: username ? { username: true } : {},
+ });
+}
+
class ChallengesService {
/**
@@ -38,7 +120,7 @@ class ChallengesService {
.then(res => (res.ok ? res.json() : new Error(res.statusText)))
.then(res => (
res.result.status === 200 ? {
- challenges: res.result.content,
+ challenges: res.result.content || [],
totalCount: res.result.metadata.totalCount,
} : new Error(res.result.content)
));
@@ -86,7 +168,11 @@ class ChallengesService {
* @return {Promise} Resolves to the api response.
*/
getChallenges(filters, params) {
- return this.private.getChallenges('/challenges/', filters, params);
+ return this.private.getChallenges('/challenges/', filters, params)
+ .then((res) => {
+ res.challenges.forEach(item => normalizeChallenge(item));
+ return res;
+ });
}
/**
@@ -96,7 +182,11 @@ class ChallengesService {
* @return {Promise} Resolve to the api response.
*/
getMarathonMatches(filters, params) {
- return this.private.getChallenges('/marathonMatches/', filters, params);
+ return this.private.getChallenges('/marathonMatches/', filters, params)
+ .then((res) => {
+ res.challenges.forEach(item => normalizeMarathonMatch(item));
+ return res;
+ });
}
/**
@@ -108,7 +198,11 @@ class ChallengesService {
*/
getUserChallenges(username, filters, params) {
const endpoint = `/members/${username.toLowerCase()}/challenges/`;
- return this.private.getChallenges(endpoint, filters, params);
+ return this.private.getChallenges(endpoint, filters, params)
+ .then((res) => {
+ res.challenges.forEach(item => normalizeChallenge(item, username));
+ return res;
+ });
}
/**
@@ -120,7 +214,11 @@ class ChallengesService {
*/
getUserMarathonMatches(username, filters, params) {
const endpoint = `/members/${username.toLowerCase()}/mms/`;
- return this.private.api.get(endpoint, filters, params);
+ return this.private.getChallenges(endpoint, filters, params)
+ .then((res) => {
+ res.challenges.forEach(item => normalizeMarathonMatch(item, username));
+ return res;
+ });
}
}
diff --git a/src/shared/services/dashboard.js b/src/shared/services/dashboard.js
new file mode 100644
index 0000000000..06273f53ad
--- /dev/null
+++ b/src/shared/services/dashboard.js
@@ -0,0 +1,248 @@
+/**
+ * This module provides a service for convenient manipulation with Topcoder
+ * dashboard resources via TC API.
+ */
+
+import _ from 'lodash';
+
+import { getApiV3 } from './api';
+
+// following functions are adopted from topcoder-app repo to process subtrack ranks
+function sortByDate(arr) {
+ arr.sort((a, b) => {
+ if (!(a.mostRecentSubmission || a.mostRecentEventDate)) return -1;
+ if (!(b.mostRecentSubmission || b.mostRecentEventDate)) return 1;
+ const aDate = new Date(a.mostRecentSubmission || a.mostRecentEventDate);
+ const bDate = new Date(b.mostRecentSubmission || b.mostRecentEventDate);
+ if (aDate > bDate) {
+ return -1;
+ } else if (aDate < bDate) {
+ return 1;
+ }
+ return 0;
+ });
+}
+
+function getRanks(s) {
+ if (!s) {
+ return [];
+ }
+ const stats = _.cloneDeep(s);
+ let dev = [];
+ let design = [];
+ const dataScience = [];
+ let copilot = [];
+
+ if (stats.DEVELOP && stats.DEVELOP.subTracks) {
+ dev = stats.DEVELOP.subTracks.map(subTrack => ({
+ track: 'DEVELOP',
+ subTrack: subTrack.name,
+ rank: subTrack.rank ? subTrack.rank.overallRank : 0,
+ rating: subTrack.rank ? subTrack.rank.rating || 0 : 0,
+ wins: subTrack.wins,
+ submissions: (subTrack.submissions && subTrack.submissions.submissions) || 0,
+ mostRecentEventDate: new Date(subTrack.mostRecentEventDate),
+ mostRecentSubmissionDate: new Date(subTrack.mostRecentSubmission),
+ })).filter(
+ subTrack => !(subTrack.subTrack === 'COPILOT_POSTING' && subTrack.track === 'DEVELOP'),
+ );
+ }
+ // show # of wins for design
+ if (stats.DESIGN && stats.DESIGN.subTracks) {
+ design = stats.DESIGN.subTracks.map(subTrack => ({
+ track: 'DESIGN',
+ subTrack: subTrack.name,
+ rank: false,
+ challenges: subTrack.challenges,
+ wins: subTrack.wins,
+ submissions: (subTrack.submissions) || 0,
+ mostRecentEventDate: new Date(subTrack.mostRecentEventDate),
+ mostRecentSubmissionDate: new Date(subTrack.mostRecentSubmission),
+ }));
+ }
+ if (stats.DATA_SCIENCE && stats.DATA_SCIENCE.SRM && stats.DATA_SCIENCE.SRM.rank) {
+ const srmStats = stats.DATA_SCIENCE.SRM;
+ dataScience.push({
+ track: 'DATA_SCIENCE',
+ subTrack: 'SRM',
+ rank: srmStats.rank.rank,
+ rating: srmStats.rank.rating,
+ mostRecentEventDate: new Date(srmStats.rank.mostRecentEventDate),
+ mostRecentSubmissionDate: new Date(srmStats.mostRecentSubmission),
+ });
+ }
+ if (stats.DATA_SCIENCE && stats.DATA_SCIENCE.MARATHON_MATCH &&
+ stats.DATA_SCIENCE.MARATHON_MATCH.rank) {
+ const marathonStats = stats.DATA_SCIENCE.MARATHON_MATCH;
+ dataScience.push({
+ track: 'DATA_SCIENCE',
+ subTrack: 'MARATHON_MATCH',
+ rank: marathonStats.rank.rank,
+ rating: marathonStats.rank.rating,
+ mostRecentEventDate: new Date(marathonStats.rank.mostRecentEventDate),
+ mostRecentSubmission: new Date(marathonStats.mostRecentSubmission),
+ });
+ }
+ if (stats.COPILOT) {
+ copilot = [
+ stats.COPILOT,
+ ];
+ stats.COPILOT.track = 'COPILOT';
+ stats.COPILOT.subTrack = 'COPILOT';
+ }
+
+ sortByDate(dev);
+ sortByDate(design);
+ sortByDate(dataScience);
+
+ function removeRanklessNoSubmissions(arr) {
+ return arr.filter(subTrack => subTrack &&
+ ((subTrack.track === 'DESIGN' && subTrack.challenges) || subTrack.rank ||
+ subTrack.rating || subTrack.wins || subTrack.fulfillment || subTrack.submissions));
+ }
+
+ const compiledStats = {
+ DEVELOP: removeRanklessNoSubmissions(dev),
+ DESIGN: removeRanklessNoSubmissions(design),
+ DATA_SCIENCE: removeRanklessNoSubmissions(dataScience),
+ COPILOT: copilot,
+ };
+
+ return compiledStats;
+}
+
+
+function compileSubtracks(trackRanks) {
+ return _.reduce(trackRanks, (result, subtracks, track) => {
+ if (_.isArray(subtracks) && subtracks.length) {
+ if (track === 'DEVELOP') {
+ const filtered = _.filter(
+ subtracks, subtrackObj => subtrackObj.subTrack !== 'COPILOT_POSTING');
+ return result.concat(filtered);
+ }
+
+ return result.concat(subtracks);
+ }
+ return result;
+ }, []);
+}
+
+function processStatRank(r) {
+ const rank = _.cloneDeep(r);
+ rank.showStats = true;
+ if (rank.track === 'DESIGN') {
+ rank.stat = rank.wins;
+ rank.statType = 'Wins';
+ // for non rated tracks, use submissions to filter out empty values
+ if (!rank.submissions) {
+ rank.showStats = false;
+ }
+ } else if (rank.track === 'COPILOT') {
+ rank.stat = rank.activeContests;
+ rank.statType = 'Challenges';
+ } else if (rank.track === 'DEVELOP') {
+ if (['CODE', 'FIRST_2_FINISH', 'BUG_HUNT'].indexOf(rank.subTrack) !== -1) {
+ rank.stat = rank.wins;
+ rank.statType = 'Wins';
+ // for non rated tracks, use submissions to filter out empty values
+ if (!rank.submissions) {
+ rank.showStats = false;
+ }
+ } else {
+ rank.stat = rank.rating;
+ rank.statType = 'Rating';
+ }
+ } else {
+ rank.stat = rank.rating;
+ rank.statType = 'Rating';
+ }
+ return rank;
+}
+
+function filterStats(ranks) {
+ const filtered = [];
+ _.forEach(ranks, (rank) => {
+ if (rank.showStats) {
+ filtered.push(rank);
+ }
+ });
+ return filtered;
+}
+
+class DashboardService {
+
+ /**
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ */
+ constructor(tokenV3) {
+ this.private = {
+ api: getApiV3(tokenV3),
+ tokenV3,
+ };
+ }
+
+ /**
+ * retrieve user's subtrack stats and process them
+ * @param {string} handle user's handle
+ * @return {Promise} a promise that will resolve processed subtrank ranks
+ */
+ getSubtrackRanks(handle) {
+ return this.private.api.get(`/members/${handle}/stats`)
+ .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+ .then((res) => {
+ if (res.result.status === 200) {
+ const data = res.result.content;
+ if (data && !data.DEVELOP) {
+ data.DEVELOP = { challenges: 0, wins: 0, subTracks: [] };
+ }
+ if (data && !data.DESIGN) {
+ data.DESIGN = { challenges: 0, wins: 0, subTracks: [] };
+ }
+ if (data && !data.DATA_SCIENCE) {
+ data.DATA_SCIENCE = { challenges: 0, wins: 0, SRM: {}, MARATHON_MATCH: {} };
+ }
+ const trackRanks = getRanks(data);
+ let subtrackRanks = compileSubtracks(trackRanks);
+
+ subtrackRanks = _.map(subtrackRanks, rank => processStatRank(rank));
+ // filter stats based on processing done above
+ // filtering is a separate step to allow multiple
+ // pre-processings and filter out in single call
+ subtrackRanks = filterStats(subtrackRanks);
+ return subtrackRanks;
+ }
+ return new Error(res.result.content);
+ });
+ }
+
+ /**
+ * retrieve user financial information
+ * @param {string} handle user's handle
+ * @return {Promise} a promise that will resolve user's financial infomation
+ */
+ getUserFinancials(handle) {
+ return this.private.api.get(`/members/${handle}/financial/`)
+ .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+ .then(res => (
+ res.result.status === 200
+ ? res.result.content
+ : new Error(res.result.content)
+ ));
+ }
+}
+
+/**
+ * Returns a new or existing challenges service.
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ * @return {Challenges} Challenges service object
+ */
+let lastInstance = null;
+export function getService(tokenV3) {
+ if (!lastInstance || (tokenV3 && lastInstance.private.tokenV3 !== tokenV3)) {
+ lastInstance = new DashboardService(tokenV3);
+ }
+ return lastInstance;
+}
+
+/* Using default export would be confusing in this case. */
+export default undefined;
diff --git a/src/shared/services/memberCert.js b/src/shared/services/memberCert.js
new file mode 100644
index 0000000000..017da4cfa8
--- /dev/null
+++ b/src/shared/services/memberCert.js
@@ -0,0 +1,63 @@
+/**
+ * This module provides a service for convenient manipulation with Topcoder
+ * membership via TC API.
+ */
+
+import { getApiV3 } from './api';
+
+class MemberCertService {
+
+ /**
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ */
+ constructor(tokenV3) {
+ this.private = {
+ api: getApiV3(tokenV3),
+ tokenV3,
+ };
+ }
+
+ /**
+ * check user has registered a program or not
+ * @param {string} userId user's id
+ * @param {string} programId program's id
+ * @return {Promise} a promise will resolve user's program info
+ */
+ getMemberRegistration(userId, programId) {
+ return this.private.api.get(`/memberCert/registrations/${userId}/programs/${programId}/`)
+ .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+ .then(res => (
+ res.result.status === 200 ? res.result.content : new Error(res.result.content)
+ ));
+ }
+
+ /**
+ * register a user to a program
+ * @param {string} userId user's id
+ * @param {string} programId program's id
+ * @return {Promise} a promise will resolve the request result
+ */
+ registerMember(userId, programId) {
+ return this.private.api.post(`/memberCert/registrations/${userId}/programs/${programId}/`)
+ .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+ .then(res => (
+ res.result.status === 200 ? res.result.content : new Error(res.result.content)
+ ));
+ }
+}
+
+/**
+ * Returns a new or existing challenges service.
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ * @return {Challenges} Challenges service object
+ */
+let lastInstance = null;
+export function getService(tokenV3) {
+ if (!lastInstance || (tokenV3 && lastInstance.private.tokenV3 !== tokenV3)) {
+ lastInstance = new MemberCertService(tokenV3);
+ }
+ return lastInstance;
+}
+
+/* Using default export would be confusing in this case. */
+export default undefined;
diff --git a/src/shared/services/srm.js b/src/shared/services/srm.js
new file mode 100644
index 0000000000..6a88579c5c
--- /dev/null
+++ b/src/shared/services/srm.js
@@ -0,0 +1,55 @@
+/**
+ * Service for communication with srm part of Topcoder API.
+ */
+import qs from 'qs';
+
+import { getApiV3 } from './api';
+
+class SRMService {
+
+ /**
+ * @param {String} tokenV3 Optional. Auth token for Topcoder API v3.
+ */
+ constructor(tokenV3) {
+ this.private = {
+ api: getApiV3(tokenV3),
+ tokenV3,
+ };
+ }
+
+ getSRMs(params) {
+ return this.private.api.get(`/srms/?${qs.stringify(params)}`)
+ .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+ .then(res => (
+ res.result.status === 200
+ ? res.result.content
+ : new Error(res.result.content)
+ ));
+ }
+
+ getUserSRMs(userHandle, params) {
+ return this.private.api.get(`/members/${userHandle}/srms/?${qs.stringify(params)}`)
+ .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+ .then(res => (
+ res.result.status === 200
+ ? res.result.content
+ : new Error(res.result.content)
+ ));
+ }
+}
+
+/**
+ * Returns a new or existing instance of srm service, which works with
+ * the specified auth token.
+ * @param {String} tokenV3 Optional. Topcoder API v3 auth token.
+ * @return {SRMService} Instance of the service.
+ */
+let lastInstance = null;
+export function getService(tokenV3) {
+ if (!lastInstance || tokenV3 !== lastInstance.private.tokenV3) {
+ lastInstance = new SRMService(tokenV3);
+ }
+ return lastInstance;
+}
+
+export default undefined;
diff --git a/src/shared/services/user-settings.js b/src/shared/services/user-settings.js
new file mode 100644
index 0000000000..b61a086942
--- /dev/null
+++ b/src/shared/services/user-settings.js
@@ -0,0 +1,95 @@
+/**
+ * User Settings service. Corresponding part of the backend is implemented as a
+ * separate Heroku App, which is set up only for prod. Currently, we use it to
+ * save user-defined filters in the challenge search.
+ */
+
+import _ from 'lodash';
+import config from 'utils/config';
+import Api from './api';
+
+export default class UserSettings {
+
+ /**
+ * @param {String} tokenV2
+ */
+ constructor(tokenV2) {
+ this.private = {
+ api: new Api(config.URL.USER_SETTINGS, tokenV2),
+ token: tokenV2,
+ };
+ }
+
+ /**
+ * Removes the filter specified by ID.
+ * @param {String} id
+ * @return {Promise}
+ */
+ deleteFilter(id) {
+ return this.private.api.delete(`/saved-searches/${id}`)
+ .then(res => (res.ok ? null : new Error(res.statusText)));
+ }
+
+ /**
+ * Gets saved filters.
+ * @return {Promise}
+ */
+ getFilters() {
+ return this.private.api.get('/saved-searches')
+ .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+ .then(res => res.map((item) => {
+ /* NOTE: Previous version of the challenge listing saved filter in
+ * different format (like an URL query string). This try/catch block
+ * effectively differentiate between the old (unsupported) and new
+ * format of the filters. */
+ let filter;
+ try {
+ filter = JSON.parse(item.filter);
+ } catch (e) {
+ _.noop();
+ }
+ return { ...item, filter };
+ }))
+ .then(res => res.filter(item => item.filter));
+ }
+
+ /**
+ * Saves filter.
+ * @param {String} name
+ * @param {Object} filter
+ */
+ saveFilter(name, filter) {
+ return this.private.api.postJson('/saved-searches', {
+ filter: JSON.stringify(filter),
+ name,
+ type: 'develop',
+ }).then(res => (res.ok ? res.json() : new Error(res.statusText)));
+ }
+
+ /**
+ * Updates filter.
+ * @param {String} id
+ * @param {Object} filter
+ * @return {Promise}
+ */
+ updateFilter(id, name, filter) {
+ return this.private.api.putJson(`/saved-searches/${id}`, {
+ filter: JSON.stringify(filter.filter),
+ name,
+ type: 'develop',
+ }).then(res => (res.ok ? res.json() : new Error(res.statusText)));
+ }
+}
+
+/**
+ * Returns a new or existing instance of UserSettings service.
+ * @param {String} tokenV2 Topcoder auth token v2.
+ * @return {UserSettings}
+ */
+let lastUserSettings = null;
+export function getUserSettingsService(tokenV2) {
+ if (!lastUserSettings || lastUserSettings.private.token !== tokenV2) {
+ lastUserSettings = new UserSettings(tokenV2);
+ }
+ return lastUserSettings;
+}
diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js
new file mode 100644
index 0000000000..15f037a665
--- /dev/null
+++ b/src/shared/utils/challenge-listing/buckets.js
@@ -0,0 +1,102 @@
+/**
+ * Standard challenge buckets, selectable by the sidebar.
+ */
+
+import { SORTS } from './sort';
+
+export const BUCKETS = {
+ ALL: 'all',
+ MY: 'my',
+ OPEN_FOR_REGISTRATION: 'openForRegistration',
+ ONGOING: 'ongoing',
+ PAST: 'past',
+ SAVED_FILTER: 'saved-filter',
+ UPCOMING: 'upcoming',
+};
+
+/**
+ * Returns configuration of all possible challenge buckets.
+ * @param {String} userHandle Handle of the authenticated
+ * user to filter out My Challenges.
+ */
+export function getBuckets(userHandle) {
+ return {
+ [BUCKETS.ALL]: {
+ filter: { status: ['ACTIVE'] },
+ hideCount: false,
+ name: 'All Challenges',
+ sorts: [],
+ },
+ [BUCKETS.MY]: {
+ filter: {
+ status: ['ACTIVE'],
+ users: [userHandle],
+ },
+ hideCount: false,
+ name: 'My Challenges',
+ sorts: [
+ SORTS.MOST_RECENT,
+ SORTS.TIME_TO_SUBMIT,
+ SORTS.NUM_REGISTRANTS,
+ SORTS.NUM_SUBMISSIONS,
+ SORTS.PRIZE_HIGH_TO_LOW,
+ SORTS.TITLE_A_TO_Z,
+ ],
+ },
+ [BUCKETS.OPEN_FOR_REGISTRATION]: {
+ filter: {
+ registrationOpen: true,
+ status: ['ACTIVE'],
+ },
+ hideCount: false,
+ name: 'Open for registration',
+ sorts: [
+ SORTS.MOST_RECENT,
+ SORTS.TIME_TO_REGISTER,
+ SORTS.PHASE_END_TIME,
+ SORTS.NUM_REGISTRANTS,
+ SORTS.NUM_SUBMISSIONS,
+ SORTS.PRIZE_HIGH_TO_LOW,
+ SORTS.TITLE_A_TO_Z,
+ ],
+ },
+ [BUCKETS.ONGOING]: {
+ filter: {
+ registrationOpen: false,
+ status: ['ACTIVE'],
+ },
+ hideCount: false,
+ name: 'Ongoing challenges',
+ sorts: [
+ SORTS.MOST_RECENT,
+ SORTS.CURRENT_PHASE,
+ SORTS.TITLE_A_TO_Z,
+ SORTS.PRIZE_HIGH_TO_LOW,
+ ],
+ },
+ [BUCKETS.UPCOMING]: {
+ filter: {
+ upcoming: true,
+ },
+ hideCount: true,
+ name: 'Upcoming challenges',
+ sorts: [
+ SORTS.MOST_RECENT,
+ SORTS.PRIZE_HIGH_TO_LOW,
+ SORTS.TITLE_A_TO_Z,
+ ],
+ },
+ [BUCKETS.PAST]: {
+ filter: { status: ['COMPLETED', 'PAST'] },
+ hideCount: true,
+ name: 'Past challenges',
+ sorts: [
+ SORTS.MOST_RECENT,
+ SORTS.PRIZE_HIGH_TO_LOW,
+ SORTS.TITLE_A_TO_Z,
+ ],
+ },
+ };
+}
+
+export default undefined;
diff --git a/src/shared/utils/challenge-listing/filter.js b/src/shared/utils/challenge-listing/filter.js
new file mode 100644
index 0000000000..e55a7c03a0
--- /dev/null
+++ b/src/shared/utils/challenge-listing/filter.js
@@ -0,0 +1,277 @@
+/**
+ * Universal challenge filter. Must be used in all places where we need filter
+ * or fetch challenges. This way we keep all related logic in the same place,
+ * which simplifies maintenance and modifications of the code.
+ *
+ * The state of challenge filter is a plain JS object, containing only plain
+ * data fields. It allows to avoid any problems with its storage inside Redux
+ * store; with its serialization into / deserialization from a string. Each
+ * field of the state describes a single rule for filtering the challenges.
+ * The filter allows only those challenges that match all defined rules.
+ * Undefined, null fields are ignored.
+ *
+ * The following fields are supported:
+ *
+ * endDate {Number|String} - Permits only those challenges with submission
+ * deadline before this date.
+ *
+ * groupIds {Array} - Permits only the challenges belonging to at least one
+ * of the groups which IDs are presented as keys in this object.
+ *
+ * registrationOpen {Boolean} - Permits only the challenges with open or closed
+ * registration.
+ *
+ * startDate {Number|String} - Permits only those challenges started after this
+ * date.
+ *
+ * status {Array} - Permits only the challenges with status matching one of
+ * the keys of this object.
+ *
+ * subtracks {Array} - Permits only the challenges belonging to at least one
+ * of the competition subtracks presented as keys of this object.
+ *
+ * tags {Array} - Permits only the challenges that have at least one of the
+ * tags within their platform and technology tags (keywords).
+ *
+ * text {String} - Free-text string which will be matched against challenge
+ * name, its platform and technology tags. If not found anywhere, the challenge
+ * is filtered out. Case-insensitive.
+ *
+ * tracks {Object} - Permits only the challenges belonging to at least one of
+ * the competition tracks presented as keys of this object.
+ *
+ * upcoming {Boolean} - Permits only upcoming challenges.
+ *
+ * users {Array} - Permits only the challenges where the specified (by handles)
+ * users are participating.
+ */
+
+import _ from 'lodash';
+import moment from 'moment';
+import { COMPETITION_TRACKS } from 'utils/tc';
+
+/**
+ * Here are many similiar filerBy..(challenge, state) functions. Each of them
+ * checks whether the given challenge fulfills the corresponding filtering rule
+ * from the filter state object, and returns true or false depending on it.
+ */
+
+function filterByEndDate(challenge, state) {
+ if (!state.endDate) return true;
+ return moment(state.endDate).isAfter(challenge.createdAt);
+}
+
+function filterByGroupIds(challenge, state) {
+ if (!state.groupIds) return true;
+ return state.groupIds.some(id => challenge.groups[id]);
+}
+
+function filterByRegistrationOpen(challenge, state) {
+ if (_.isUndefined(state.registrationOpen)) return true;
+ const isRegOpen = () => {
+ if (challenge.subTrack === 'MARATHON_MATCH') {
+ return challenge.status !== 'PAST';
+ }
+ const registrationPhase = challenge.allPhases.find(item =>
+ item.phaseType === 'Registration');
+ if (!registrationPhase || registrationPhase.phaseStatus !== 'Open') {
+ return false;
+ }
+ if (challenge.track === 'DESIGN') {
+ const checkpointPhase = challenge.allPhases.find(item =>
+ item.phaseType === 'Checkpoint Submission');
+ return !checkpointPhase || checkpointPhase.phaseStatus !== 'Closed';
+ }
+ return true;
+ };
+ return isRegOpen() === state.registrationOpen;
+}
+
+function filterByStartDate(challenge, state) {
+ if (!state.startDate) return true;
+ return moment(state.startDate).isBefore(challenge.submissionEndDate);
+}
+
+function filterByStatus(challenge, state) {
+ if (!state.status) return true;
+ return state.status.includes(challenge.status);
+}
+
+function filterBySubtracks(challenge, state) {
+ if (!state.subtracks) return true;
+
+ /* TODO: Although this is taken from the current code in prod,
+ * it probably does not work in all cases. It should be double-checked,
+ * why challenge subtracks in challenge objects are different from those
+ * return from the API as the list of possible subtracks. */
+ const filterSubtracks = state.subtracks.map(item =>
+ item.toLowerCase().replace(/ /g, ''));
+ const challengeSubtrack = challenge.subTrack.toLowerCase().replace(/_/g, '');
+ return filterSubtracks.includes(challengeSubtrack);
+}
+
+function filterByTags(challenge, state) {
+ if (!state.tags) return true;
+ const str = `${challenge.name} ${challenge.platforms} ${
+ challenge.technologies}`.toLowerCase();
+ return state.tags.some(tag => str.includes(tag.toLowerCase()));
+}
+
+function filterByText(challenge, state) {
+ if (!state.text) return true;
+ const str =
+ `${challenge.name} ${challenge.platforms} ${challenge.technologies}`
+ .toLowerCase();
+ return str.includes(state.text.toLowerCase());
+}
+
+function filterByTrack(challenge, state) {
+ if (!state.tracks) return true;
+ return _.keys(state.tracks).some(track => challenge.communities.has(track));
+}
+
+function filterByUpcoming(challenge, state) {
+ if (_.isUndefined(state.upcoming)) return true;
+ return moment().isBefore(challenge.registrationStartDate);
+}
+
+function filterByUsers(challenge, state) {
+ if (!state.users) return true;
+ return state.users.find(user => challenge.users[user]);
+}
+
+/**
+ * Returns clone of the state with the specified competition track added.
+ * @param {Object} state
+ * @param {String} track
+ * @return {Object} Resulting state.
+ */
+export function addTrack(state, track) {
+ /* When state has no tracks field all tracks are allowed, thus no need to
+ * touch the object. */
+ if (!state.tracks) return state;
+
+ const res = _.clone(state);
+ res.tracks = _.clone(res.tracks);
+ res.tracks[track] = true;
+
+ /* Selecting all tracks is the same as having no tracks field. To keep the
+ * state more simple at any time, we remove tracks field in such case. */
+ if (!_.values(COMPETITION_TRACKS).some(item => !res.tracks[item])) {
+ delete res.tracks;
+ }
+
+ return res;
+}
+
+/**
+ * Generates filter function for the state.
+ * @param {Object} state
+ * @return {Function}
+ */
+export function getFilterFunction(state) {
+ return challenge => filterByStatus(challenge, state)
+ && filterByTrack(challenge, state)
+ && filterByUpcoming(challenge, state)
+ && filterByGroupIds(challenge, state)
+ && filterByText(challenge, state)
+ && filterByTags(challenge, state)
+ && filterBySubtracks(challenge, state)
+ && filterByUsers(challenge, state)
+ && filterByEndDate(challenge, state)
+ && filterByStartDate(challenge, state)
+ && filterByRegistrationOpen(challenge, state);
+}
+
+/**
+ * Returns clone of the state with the specified competition track removed.
+ * @param {Object} state
+ * @param {String} track
+ * @return {Object} Resulting state.
+ */
+export function removeTrack(state, track) {
+ const res = _.clone(state);
+ if (res.tracks) res.tracks = _.clone(res.tracks);
+ else {
+ res.tracks = {};
+ _.forIn(COMPETITION_TRACKS, (item) => {
+ res.tracks[item] = true;
+ });
+ }
+ delete res.tracks[track];
+ return res;
+}
+
+/**
+ * Clone the state and sets the end date.
+ * @param {Object} state
+ * @param {String} date
+ * @return {Object}
+ */
+export function setEndDate(state, date) {
+ if (date) return { ...state, endDate: date };
+ if (!state.endDate) return state;
+ const res = _.clone(state);
+ delete res.endDate;
+ return res;
+}
+
+/**
+ * Clones the state and sets the start date.
+ * @param {Object} state
+ * @param {String} date ISO date string.
+ * @return {Object}
+ */
+export function setStartDate(state, date) {
+ if (date) return { ...state, startDate: date };
+ if (!state.startDate) return state;
+ const res = _.clone(state);
+ delete res.startDate;
+ return res;
+}
+
+/**
+ * Clones the state and sets the subtracks.
+ * @param {Object} state
+ * @param {Array} subtracks
+ * @return {Object}
+ */
+export function setSubtracks(state, subtracks) {
+ if (subtracks && subtracks.length) return { ...state, subtracks };
+ if (!state.subtracks) return state;
+ const res = _.clone(state);
+ delete res.subtracks;
+ return res;
+}
+
+/**
+ * Clones the state and sets the tags.
+ * @param {Object} state
+ * @param {Array} tags String array.
+ * @return {Object}
+ */
+export function setTags(state, tags) {
+ if (tags && tags.length) return { ...state, tags };
+ if (!state.tags) return state;
+ const res = _.clone(state);
+ delete res.tags;
+ return res;
+}
+
+/**
+ * Clones fitler state and sets the free-text string for the filtering by
+ * challenge name and tags. To clear the string set it to anything evaluating
+ * to falst (empty string, null, undefined).
+ * @param {Object} state
+ * @param {String} text
+ * @return {Object} Resulting string.
+ */
+export function setText(state, text) {
+ if (!text && !state.text) return state;
+ const res = _.clone(state);
+ if (text) res.text = text;
+ else delete res.text;
+ return res;
+}
+
+export default undefined;
diff --git a/src/shared/utils/challenge-listing/sort.js b/src/shared/utils/challenge-listing/sort.js
new file mode 100644
index 0000000000..a82dbc0f53
--- /dev/null
+++ b/src/shared/utils/challenge-listing/sort.js
@@ -0,0 +1,57 @@
+/**
+ * Collection of compare function to sort challenges in different ways.
+ */
+
+import moment from 'moment';
+
+export const SORTS = {
+ CURRENT_PHASE: 'current-phase',
+ MOST_RECENT: 'most-recent',
+ NUM_REGISTRANTS: 'num-registrants',
+ NUM_SUBMISSIONS: 'num-submissions',
+ PHASE_END_TIME: 'phase-end-time',
+ PRIZE_HIGH_TO_LOW: 'prize-high-to-low',
+ TIME_TO_REGISTER: 'time-to-register',
+ TIME_TO_SUBMIT: 'time-to-submit',
+ TITLE_A_TO_Z: 'title-a-to-z',
+};
+
+export default {
+ [SORTS.CURRENT_PHASE]: {
+ func: (a, b) => a.status.localeCompare(b.status),
+ name: 'Current phase',
+ },
+ [SORTS.MOST_RECENT]: {
+ func: (a, b) => moment(b.registrationStartDate).diff(a.registrationStartDate),
+ name: 'Most recent',
+ },
+ [SORTS.NUM_REGISTRANTS]: {
+ func: (a, b) => b.numRegistrants - a.numRegistrants,
+ name: '# of registrants',
+ },
+ [SORTS.NUM_SUBMISSIONS]: {
+ func: (a, b) => b.numSubmissions - a.numSubmissions,
+ name: '# of submissions',
+ },
+ [SORTS.PHASE_END_TIME]: {
+ func: (a, b) => a.currentPhaseRemainingTime - b.currentPhaseRemainingTime,
+ name: 'Time to submit',
+ },
+ [SORTS.PRIZE_HIGH_TO_LOW]: {
+ func: (a, b) => b.totalPrize - a.totalPrize,
+ name: 'Prize high to low',
+ },
+ [SORTS.TIME_TO_REGISTER]: {
+ func: (a, b) => moment(a.registrationEndDate || a.submissionEndDate)
+ .diff(b.registrationEndDate || b.submissionEndDate),
+ name: 'Time to register',
+ },
+ [SORTS.TIME_TO_SUBMIT]: {
+ func: (a, b) => a.submissionEndTimestamp - b.submissionEndTimestamp,
+ name: 'Time to submit',
+ },
+ [SORTS.TITLE_A_TO_Z]: {
+ func: (a, b) => a.name.localeCompare(b.name),
+ name: 'Title A-Z',
+ },
+};
diff --git a/src/shared/utils/tc.js b/src/shared/utils/tc.js
index 47ae7ecf21..86984aeb70 100644
--- a/src/shared/utils/tc.js
+++ b/src/shared/utils/tc.js
@@ -2,10 +2,17 @@
* Collection of small Topcoder-related functions.
*/
+/* global location */
+
+import _ from 'lodash';
+import jstz from 'jstimezonedetect';
+import moment from 'moment-timezone';
+import config from './config';
+
/**
* Codes of the Topcoder communities.
*/
-export const COMMUNITY = {
+export const COMPETITION_TRACKS = {
DATA_SCIENCE: 'datasci',
DESIGN: 'design',
DEVELOP: 'develop',
@@ -75,4 +82,271 @@ export function getCommunitiesMetadata(communityId) {
return null;
}
+/**
+ * Calculate the difference from now to a specified date
+ * adopt from topcoder-app repo
+ * @param {Date} input the date to diff
+ * @param {string} type type to retrieve
+ * @return {number|string|array} diff info depends on the type
+ */
+export function timeDiff(input, type) {
+ const fromNow = moment(input).fromNow(true);
+
+ // Split into components: ['an', 'hour'] || ['2', 'months']
+ const timeAndUnit = fromNow.split(' ');
+
+ if (timeAndUnit[0] === 'a' || timeAndUnit[0] === 'an') {
+ timeAndUnit[0] = '1';
+ }
+ if (type === 'quantity') {
+ return timeAndUnit[0];
+ } else if (type === 'unit') {
+ return timeAndUnit[1];
+ }
+ return timeAndUnit;
+}
+
+/**
+ * convert a date to specified local format
+ * adopt from topcoder-app repo
+ * @param {Date} input date to format
+ * @param {string} format date format
+ * @return {string} formated date string
+ */
+export function localTime(input, format) {
+ const timezone = jstz.determine().name();
+ return moment(input).tz(timezone).format(format || 'MM/DD/YY hh:mm a z');
+}
+
+/**
+ * remove the underscore character of a string
+ * adopt from topcoder-app repo
+ * @param {string} string string to process
+ * @return {string} processed string
+ */
+export function stripUnderscore(string) {
+ const map = {
+ ASSEMBLY_COMPETITION: 'ASSEMBLY',
+ };
+ if (map[string]) {
+ return map[string];
+ }
+ if (!string) {
+ return '';
+ }
+ return string.replace(/_/g, ' ');
+}
+
+/**
+ * process active challenges to populate additional infomation
+ * adopt from topcoder-app repo
+ * @param {array} challenges challenges array to process
+ * @return {array} processed challenges array
+ */
+/* TODO: This function should be mixed into normalization function
+ * of the challenges service. */
+export function processActiveDevDesignChallenges(challenges) {
+ return _.map(challenges, (c) => {
+ const challenge = _.cloneDeep(c);
+ const phases = challenge.currentPhases;
+ let hasCurrentPhase = false;
+ // If currentPhase is null, the challenge is stalled and there is no end time
+ challenge.userCurrentPhase = 'Stalled';
+ challenge.userCurrentPhaseEndTime = null;
+ challenge.userAction = null;
+ challenge.isSubmitter = false;
+
+ if (phases && phases.length) {
+ hasCurrentPhase = true;
+ challenge.userCurrentPhase = phases[0].phaseType;
+ challenge.userCurrentPhaseEndTime = phases[0].scheduledEndTime;
+ }
+
+ if (hasCurrentPhase && phases.length > 1) {
+ _.forEach(challenge.currentPhases, (phase, index, currentPhases) => {
+ if (phase.phaseType === 'Submission') {
+ challenge.userAction = 'Submit';
+
+ if (_.get(challenge, 'userDetails.hasUserSubmittedForReview', false)) {
+ challenge.userCurrentPhase = phase.phaseType;
+ challenge.userCurrentPhaseEndTime = phase.scheduledEndTime;
+ challenge.userAction = 'Submitted';
+
+ if (currentPhases[index + 1]) {
+ challenge.userCurrentPhase = currentPhases[index + 1].phaseType;
+ challenge.userCurrentPhaseEndTime = currentPhases[index + 1].scheduledEndTime;
+ challenge.userAction = null;
+ }
+ }
+
+ // if user has role of observer
+ const roles = _.get(challenge, 'userDetails.roles', []);
+ if (roles && roles.length > 0) {
+ const submitterRole = _.findIndex(roles, (role) => {
+ const lRole = role.toLowerCase();
+ if (lRole === 'submitter') {
+ challenge.isSubmitter = true;
+ }
+ return lRole === 'submitter';
+ });
+ if (submitterRole === -1) {
+ challenge.userAction = null;
+ }
+ }
+ }
+ });
+ }
+ if (challenge.userCurrentPhase === 'Appeals') {
+ challenge.userAction = 'Appeal';
+ }
+
+ if (challenge.userCurrentPhaseEndTime) {
+ const fullTime = challenge.userCurrentPhaseEndTime;
+ let timeAndUnit = moment(fullTime).fromNow(true);
+ // Split into components: ['an', 'hour'] || ['2', 'months']
+ timeAndUnit = timeAndUnit.split(' ');
+
+ if (timeAndUnit[0] === 'a' || timeAndUnit[0] === 'an') {
+ timeAndUnit[0] = '1';
+ }
+
+ // Add actual time ['2', 'months', actual date]
+ timeAndUnit.push(fullTime);
+ challenge.userCurrentPhaseEndTime = timeAndUnit;
+ // If > 0 then the challenge has 'Late Deliverables' or
+ challenge.isLate = moment().diff(fullTime) > 0;
+ }
+ return challenge;
+ });
+}
+
+/**
+ * process srm to populate additional infomation
+ * adopt from topcoder-app repo
+ * @param {Object} s srm to process
+ * @return {Object} processed srm
+ */
+export function processSRM(s) {
+ const srm = _.cloneDeep(s);
+ srm.userStatus = 'registered';
+ if (Array.isArray(srm.rounds) && srm.rounds.length) {
+ if (srm.rounds[0].userSRMDetails && srm.rounds[0].userSRMDetails.rated) {
+ srm.result = srm.rounds[0].userSRMDetails;
+ }
+ if (srm.rounds[0].codingStartAt) {
+ srm.codingStartAt = srm.rounds[0].codingStartAt;
+ }
+ if (srm.rounds[0].codingEndAt) {
+ srm.codingEndAt = srm.rounds[0].codingEndAt;
+ }
+ if (srm.rounds[0].registrationStartAt) {
+ srm.registrationStartAt = srm.rounds[0].registrationStartAt;
+ }
+ if (srm.rounds[0].registrationEndAt) {
+ srm.registrationEndAt = srm.rounds[0].registrationEndAt;
+ }
+ }
+
+ // determines if the current phase is registration
+ let start = moment(srm.registrationStartAt).unix();
+ let end = moment(srm.registrationEndAt).unix();
+ let now = moment().unix();
+ if (start <= now && end >= now) {
+ srm.currentPhase = 'REGISTRATION';
+ }
+ // determines if the current phase is coding
+ start = moment(srm.codingStartAt).unix();
+ end = moment(srm.codingEndAt).unix();
+ now = moment().unix();
+ if (start <= now && end >= now) {
+ srm.currentPhase = 'CODING';
+ }
+ return srm;
+}
+
+/**
+ * calculate challenge related links depends on the type
+ * adopt from topcoder-app repo
+ * @param {Object} challenge specified challenge
+ * @param {string} type type of link
+ * @return {string} calculated link
+ */
+export function challengeLinks(challenge, type) {
+ let data;
+ if (challenge.subTrack === 'MARATHON_MATCH') {
+ data = {
+ domain: config.DOMAIN,
+ roundId: challenge.rounds[0].id,
+ forumId: challenge.rounds[0].forumId,
+ componentId: _.get(challenge, 'componentId', ''),
+ challengeId: challenge.id,
+ problemId: _.get(challenge, 'problemId', ''),
+ };
+ switch (type) {
+ case 'forums':
+ return `https://apps.${data.domain}/forums/?module=ThreadList&forumID=${data.forumId}`;
+ case 'registrants':
+ return `https://community.{data.domain}/longcontest/?module=ViewRegistrants&rd=${data.roundId}`;
+ case 'submit':
+ return `https://community.${data.domain}/longcontest/?module=Submit&compid=${data.componentId}&rd=${data.roundId}&cd=${data.challengeId}`;
+ case 'detail':
+ if (challenge.status === 'PAST') {
+ return `https://community.${data.domain}/longcontest/stats/?module=ViewOverview&rd=${data.roundId}`;
+ } // for all other statues (ACTIVE, UPCOMING), show the problem statement
+ return `https://community.${data.domain}/longcontest/?module=ViewProblemStatement&pm=${data.problemId}&rd=${data.roundId}`;
+ default:
+ return '';
+ }
+ } else if (challenge.subTrack === 'SRM') {
+ data = {
+ domain: config.DOMAIN,
+ roundId: challenge.rounds[0].id,
+ };
+ switch (type) {
+ case 'detail':
+ return `https://community.${data.domain}/stat?c=round_overview&rd=${data.roundId}`;
+ default:
+ return '';
+ }
+ } else {
+ data = {
+ domain: config.DOMAIN,
+ subdomain: location.href.search('//members') >= 0 ? 'members' : 'www',
+ track: challenge.track.toLowerCase(),
+ forumId: challenge.forumId,
+ id: challenge.id,
+ };
+ switch (type) {
+ case 'forums':
+ switch (challenge.track.toLowerCase()) {
+ case 'develop':
+ return `https://apps.${data.domain}/forums/?module=Category&categoryID=${data.forumId}`;
+ case 'data':
+ return `https://apps.${data.domain}/forums/?module=Category&categoryID=${data.forumId}`;
+ case 'design':
+ return `https://apps.${data.domain}/forums/?module=ThreadList&forumID=${data.forumId}`;
+ default:
+ return '';
+ }
+ /* eslint no-fallthrough:0*/
+ case 'submissions':
+ return `https://${data.subdomain}.${data.domain}/challenge-details/${data.id}/?type=${data.track}#submissions`;
+ case 'registrants':
+ return `https://${data.subdomain}.${data.domain}/challenge-details/${data.id}/?type=${data.track}#viewRegistrant`;
+ case 'submit':// TODO use details link for submit, we can replace it with new submission page url
+ return `https://${data.subdomain}.${data.domain}/challenge-details/${data.id}/?type=${data.track}`;
+ case 'detail':
+ return `https://${data.subdomain}.${data.domain}/challenge-details/${data.id}/?type=${data.track}`;
+ case 'viewScorecards':
+ return `https://software.${data.domain}/review/actions/ViewProjectDetails?pid=${data.id}`;
+ case 'completeAppeals':
+ return `https://software.${data.domain}/review/actions/EarlyAppeals?pid=${data.id}`;
+ case 'unRegister':
+ return `https://software.${data.domain}/review/actions/Unregister?pid=${data.id}`;
+ default:
+ return '';
+ }
+ }
+}
+
export default undefined;
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 1d9f0d5000..10a5668c6d 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -180,4 +180,43 @@
border: none;
line-height: $base-unit * 4 + 2;
}
+
+ .tc-btn.tc-btn-wide {
+ padding: 0 30px;
+ }
+
+ .tc-btn.tc-btn-s {
+ height: 30px;
+ padding: 0 10px;
+ line-height: 28px;
+ font-size: 12px;
+ font-weight: 500;
+
+ &:active {
+ line-height: 29px;
+ }
+ }
+
+ .tc-btn.tc-btn-ghost {
+ color: #0096ff;
+ background-color: $tc-white;
+
+ &:hover {
+ color: $tc-white;
+ border-color: #0096ff;
+ background-color: #0096ff;
+ }
+
+ &:active {
+ color: $tc-white;
+ border-color: #097dce;
+ background-color: #097dce;
+ box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
+ }
+
+ &:disabled {
+ border-color: #b7b7b7;
+ color: #b7b7b7;
+ }
+ }
}
diff --git a/src/styles/mixins/_utils.scss b/src/styles/mixins/_utils.scss
index 9881d350cb..1cd61cbc5e 100644
--- a/src/styles/mixins/_utils.scss
+++ b/src/styles/mixins/_utils.scss
@@ -88,3 +88,10 @@
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
+
+@mixin background-image-size($width, $height) {
+ width: $width;
+ height: $height;
+ background-size: $width, $height;
+ background-repeat: no-repeat;
+}
-
-
+
-
- Upcoming SRMs
+ { /* UpcomingSrm */ }
- {/* happening now */}
-
-
-
- {/* upcoming SRMs */}
-
-
- {/* past SRMs */}
- Upcoming SRMs
- { /* UpcomingSrm */ }
-
-
+ {/* past SRMs */}
+ Past SRMs
-
+
+ Past SRMs
+
-
-
-
+
+
+ {/*
+
-
+ );
}
-ChallengeFiltersExample.defaultProps = {
+ChallengeListing.defaultProps = {
challengeGroupId: '',
+ communityFilter: null,
communityName: null,
- config: {
- API_URL_V2: config.API.V2,
- API_URL: config.API.V3,
- MAIN_URL: config.TC_BASE_URL,
- COMMUNITY_URL: config.COMMUNITY_URL,
- },
- myChallenges: [],
- // challengeFilters: undefined,
- isAuth: false,
+ loadMoreDraft: null,
+ loadMorePast: null,
masterFilterFunc: () => true,
auth: null,
};
-ChallengeFiltersExample.propTypes = {
- challenges: PT.arrayOf(PT.shape({
-
- })).isRequired,
- challengeSubtracks: PT.arrayOf(PT.string).isRequired,
- challengeTags: PT.arrayOf(PT.string).isRequired,
+ChallengeListing.propTypes = {
+ activeBucket: PT.string.isRequired,
+ challenges: PT.arrayOf(PT.shape()).isRequired,
+ communityFilter: PT.shape(),
communityName: PT.string,
- filter: PT.string.isRequired,
- getChallenges: PT.func.isRequired,
- getMarathonMatches: PT.func.isRequired,
+ filterState: PT.shape().isRequired,
loadingChallenges: PT.bool.isRequired,
- setFilter: PT.func.isRequired,
-
- /* OLD PROPS BELOW */
- config: PT.shape({
- API_URL_V2: PT.string,
- API_URL: PT.string,
- MAIN_URL: PT.MAIN_URL,
- COMMUNITY_URL: PT.COMMUNITY_URL,
- }),
+ loadingDraftChallenges: PT.bool.isRequired,
+ loadingPastChallenges: PT.bool.isRequired,
+ loadMoreDraft: PT.func,
+ loadMorePast: PT.func,
+ selectBucket: PT.func.isRequired,
+ setFilterState: PT.func.isRequired,
+ setSort: PT.func.isRequired,
+ sorts: PT.shape().isRequired,
challengeGroupId: PT.string,
- myChallenges: PT.arrayOf(PT.shape),
- // challengeFilters: PT.object,
- isAuth: PT.bool,
- masterFilterFunc: PT.func,
auth: PT.shape(),
};
-
-export default ChallengeFiltersExample;
diff --git a/src/shared/components/challenge-listing/placeholders/ChallengeCardPlaceholder/index.jsx b/src/shared/components/challenge-listing/placeholders/ChallengeCard/index.jsx
similarity index 100%
rename from src/shared/components/challenge-listing/placeholders/ChallengeCardPlaceholder/index.jsx
rename to src/shared/components/challenge-listing/placeholders/ChallengeCard/index.jsx
diff --git a/src/shared/components/challenge-listing/placeholders/ChallengeCardPlaceholder/style.scss b/src/shared/components/challenge-listing/placeholders/ChallengeCard/style.scss
similarity index 100%
rename from src/shared/components/challenge-listing/placeholders/ChallengeCardPlaceholder/style.scss
rename to src/shared/components/challenge-listing/placeholders/ChallengeCard/style.scss
diff --git a/src/shared/components/challenge-listing/placeholders/SidebarFilterPlaceholder/index.jsx b/src/shared/components/challenge-listing/placeholders/SidebarFilterPlaceholder/index.jsx
deleted file mode 100644
index 967525debe..0000000000
--- a/src/shared/components/challenge-listing/placeholders/SidebarFilterPlaceholder/index.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * The component displays a Sidebar Placeholder without any data.
- * The empty data is replaced with grey background.
- */
-
-import React from 'react';
-import { MODE } from '../../SideBarFilters/SideBarFilter';
-import './style.scss';
-
-const domain = '';
-
-const SidebarFilterPlaceholder = () => (
-
- {!this.props.loadingChallenges || expanded ? ( this.onFilterByTopFilter(topFilter, true)}
- ref={(node) => {
- this.sidebar = node;
- }}
- isAuth={this.props.isAuth}
- myChallenges={this.props.myChallenges}
- auth={this.props.auth}
- />) :
+
+
- );
- }
+
+
- {challengeCardContainer}
+ {challengeCardContainer}
-
-
- {!this.props.loadingChallenges || expanded ? ( this.onFilterByTopFilter(topFilter, true)}
- ref={(node) => {
- this.sidebar = node;
- }}
- isAuth={this.props.isAuth}
- myChallenges={this.props.myChallenges}
- auth={this.props.auth}
- />) :
-
+
+
+
-
-);
-
-SidebarFilterPlaceholder.defaultProps = {
-};
-
-SidebarFilterPlaceholder.propTypes = {
-
-};
-
-export default SidebarFilterPlaceholder;
diff --git a/src/shared/components/challenge-listing/placeholders/SidebarFilterPlaceholder/style.scss b/src/shared/components/challenge-listing/placeholders/SidebarFilterPlaceholder/style.scss
deleted file mode 100644
index 4a79942e99..0000000000
--- a/src/shared/components/challenge-listing/placeholders/SidebarFilterPlaceholder/style.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-@import '~styles/tc-includes';
-
-:global {
- .SideBarFilters.placeholder {
- .filter-item {
- height: $base-unit * 2;
- margin: $base-unit * 4;
- }
- }
-}
-
-.SideBarFilters {
- font: 400 13px/30px Roboto;
- width: 100%;
-
- .FilterBox {
- background: $tc-white;
- padding: 2 * $base-unit;
- padding-bottom: 2 * $base-unit;
- border-radius: $corner-radius * 2;
-
- hr {
- color: $tc-gray-10;
- background: $tc-gray-10;
- border: 0;
- height: 1px;
- margin: 2 * $base-unit;
- }
-
- .my-filters {
- display: block;
- position: relative;
- padding: 0 3 * $base-unit;
- margin-top: 7 * $base-unit;
-
- @include xs {
- padding: 0;
- }
-
- h1 {
- display: inline-block;
- margin: 0;
- padding: 0;
- font-weight: 500;
- font-size: 12px;
- color: $tc-gray-50;
- letter-spacing: 0;
- line-height: 30px;
- border: none;
- text-transform: uppercase;
-
- @include xs {
- font-size: 15px;
- }
- }
-
- .edit-link {
- float: right;
- font-weight: 400;
- font-size: 11px;
- color: $tc-dark-blue;
- line-height: $base-unit * 4;
- cursor: pointer;
-
- @include xs {
- font-size: 13px;
- }
- }
- }
-
- .get-rss {
- text-align: center;
-
- a {
- color: $tc-gray-50;
- font-size: 13px;
- line-height: 30px;
- }
- }
- }
- // sidebar footer
- .sidebar-footer {
- padding: 10px;
-
- @include xs-to-sm {
- display: none;
- }
-
- ul {
- display: inline-block;
- }
-
- li {
- display: inline-block;
- font-weight: 400;
- font-size: 13px;
- color: $tc-gray-70;
- line-height: 30px;
- }
-
- li a {
- font-weight: 400;
- font-size: 13px;
- color: $tc-gray-70;
- display: inline-block;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- .copyright {
- display: inline-block;
- position: absolute;
- right: 0;
- font-weight: 500;
- font-size: 13px;
- color: $tc-gray-30;
- line-height: 30px;
- }
- }
-}
-
-.FilterItem {
- color: $tc-black;
- border-radius: 2 * $corner-radius;
- cursor: pointer;
- padding: 0 2 * $base-unit 0 3 * $base-unit;
-
- @include xs {
- font-size: 15px;
- padding: 2px 0;
- }
-
- .right {
- color: $tc-gray-50;
- float: right;
- position: static;
- font-weight: 700;
- }
-}
-
-.FilterItem.highlighted {
- background: $tc-gray-10;
- cursor: default;
-
- @include xs {
- background: $tc-white;
- }
-
- .left {
- font-weight: 600;
- }
-}
-
diff --git a/src/shared/components/examples/Content/index.jsx b/src/shared/components/examples/Content/index.jsx
index 15392ea342..b05105a588 100644
--- a/src/shared/components/examples/Content/index.jsx
+++ b/src/shared/components/examples/Content/index.jsx
@@ -105,6 +105,9 @@ export default function Content() {
-
-
-
-
-
- {MODE.ALL_CHALLENGES}
-
-
- {MODE.OPEN_FOR_REGISTRATION}
-
-
- {MODE.ONGOING_CHALLENGES}
-
-
- {MODE.OPEN_FOR_REVIEW}
-
- -
- {MODE.PAST_CHALLENGES}
-
- -
- Get the RSS feed
-
- Misc Examples
-
diff --git a/src/shared/containers/ChallengeListing/index.jsx b/src/shared/containers/ChallengeListing/index.jsx
deleted file mode 100644
index 9569905615..0000000000
--- a/src/shared/containers/ChallengeListing/index.jsx
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * This is a container component for ChallengeFiltersExample.
- * It represents community-challenge-listing page.
- *
- * ChallengeFiltersExample component was brought from another project with different approach
- * and it takes care about everything it needs by itself.
- * So this container components almost doing nothing now.
- * Though this component defines a master filter function
- * which is used to define which challenges should be listed for the certain community.
- */
-
-import _ from 'lodash';
-import actions from 'actions/challenge-listing';
-import headerActions from 'actions/topcoder_header';
-import logger from 'utils/logger';
-import React from 'react';
-import PT from 'prop-types';
-import { connect } from 'react-redux';
-import ChallengeListing from 'components/challenge-listing';
-import Banner from 'components/tc-communities/Banner';
-import NewsletterSignup from 'components/tc-communities/NewsletterSignup';
-import shortid from 'shortid';
-import SideBarFilter, { MODE as SideBarFilterModes } from 'components/challenge-listing/SideBarFilters/SideBarFilter';
-import style from './styles.scss';
-
-// helper function to de-serialize query string to filter object
-const deserialize = (queryString) => {
- const filter = new SideBarFilter({
- filter: queryString,
- isSavedFilter: true, // So that we can reuse constructor for deserializing
- });
- if (!_.values(SideBarFilterModes).includes(filter.name)) {
- filter.isCustomFilter = true;
- }
- return filter;
-};
-
-let mounted = false;
-
-// The container component
-class ChallengeListingPageContainer extends React.Component {
-
- constructor(props) {
- super(props);
- this.masterFilterFunc = this.masterFilterFunc.bind(this);
- }
-
- componentDidMount() {
- const { challengeListing: cl } = this.props;
-
- this.props.markHeaderMenu();
-
- if (mounted) {
- logger.error('Attempt to mount multiple instances of ChallengeListingPageContainer at the same time!');
- } else mounted = true;
- this.loadChallenges();
-
- if (!cl.loadingChallengeSubtracks) this.props.getChallengeSubtracks();
- if (!cl.loadingChallengeTags) this.props.getChallengeTags();
-
- /* Get filter from the URL hash, if necessary. */
- const filter = this.props.location.hash.slice(1);
- if (filter && filter !== this.props.challengeListing.filter) {
- this.props.setFilter(filter);
- } else if (this.props.challengeGroupId) {
- const f = deserialize(this.props.challengeListing.filter);
- f.groupId = this.props.challengeGroupId;
- this.props.setFilter(f.getURLEncoded());
- }
- }
-
- componentDidUpdate(prevProps) {
- const token = this.props.auth.tokenV3;
- if (token && token !== prevProps.auth.tokenV3) {
- setImmediate(() => this.loadChallenges());
- }
- }
-
- componentWillUnmount() {
- if (mounted) mounted = false;
- else {
- logger.error('A mounted instance of ChallengeListingPageContainer is not tracked as mounted!');
- }
- }
-
- loadChallenges() {
- const { tokenV3, user } = this.props.auth;
-
- /* Active challenges. */
- this.props.getChallenges({
- status: 'ACTIVE',
- }, {}, tokenV3, 'active');
- this.props.getMarathonMatches({
- status: 'ACTIVE',
- }, {}, tokenV3, 'activeMM');
-
- /* My active challenges. */
- if (user) {
- this.props.getChallenges({
- status: 'ACTIVE',
- }, {}, tokenV3, 'myActive', user.handle);
- this.props.getMarathonMatches({
- status: 'ACTIVE',
- }, {}, tokenV3, 'myActiveMM', user.handle);
- }
-
- /* Past challenges. */
- this.props.getChallenges({
- status: 'COMPLETED',
- }, {}, tokenV3, 'past');
- this.props.getMarathonMatches({
- status: 'PAST',
- }, {}, tokenV3, 'pastMM');
- }
-
- /**
- * It takes one challenge object and check if it passes master filter
- * which defines which challenges should be displayed for the current community
- *
- * @param {Object} challenge object
- * @return {boolean} whether the item pass filter or not
- */
- masterFilterFunc(item) {
- let keyword;
-
- // if there is tag in props, use it as keyword
- if (this.props.tag) {
- keyword = this.props.tag;
-
- // if there is defined keyword param in the route, use it as keyword
- } else if (this.props.match && this.props.match.params && this.props.match.params.keyword) {
- keyword = this.props.match.params.keyword;
-
- // if keyword is not defined at all, don't filter
- } else {
- return true;
- }
-
- const techs = ` ${item.technologies.toLowerCase()} `;
-
- return !!(techs.indexOf(` ${keyword.toLowerCase()} `) >= 0);
- }
-
- render() {
- const {
- challengeGroupId,
- challengeListing: cl,
- listingOnly,
- } = this.props;
- return (
-
- {/* For demo we hardcode banner properties so we can disable max-len linting */}
- {/* eslint-disable max-len */}
- { !listingOnly ? (
- {
- const f = encodeURI(filter);
- this.props.history.replace(`#${f}`);
- if (f !== this.props.challengeListing.filter) {
- this.props.setFilter(f);
- }
- }}
-
- /* OLD PROPS BELOW */
- challengeGroupId={challengeGroupId}
- filterFromUrl={this.props.location.hash}
- masterFilterFunc={this.masterFilterFunc}
- isAuth={!!this.props.auth.user}
- auth={this.props.auth}
- />
- { !listingOnly ? (
-
- );
- }
-}
-
-ChallengeListingPageContainer.defaultProps = {
- challengeGroupId: '',
- communityName: null,
- listingOnly: false,
- match: null,
- tag: null,
-};
-
-ChallengeListingPageContainer.propTypes = {
- challengeListing: PT.shape({
- challenges: PT.arrayOf(PT.shape({})).isRequired,
- filter: PT.string.isRequired,
- pendingRequests: PT.shape({}).isRequired,
- }).isRequired,
- communityName: PT.string,
- getChallenges: PT.func.isRequired,
- getChallengeSubtracks: PT.func.isRequired,
- getChallengeTags: PT.func.isRequired,
- getMarathonMatches: PT.func.isRequired,
- markHeaderMenu: PT.func.isRequired,
- setFilter: PT.func.isRequired,
-
- /* OLD PROPS BELOW */
- listingOnly: PT.bool,
- match: PT.shape({
- params: PT.shape({
- keyword: PT.string,
- }),
- }),
- challengeGroupId: PT.string,
- tag: PT.string,
- history: PT.shape({
- replace: PT.func.isRequired,
- }).isRequired,
- location: PT.shape({
- hash: PT.string,
- }).isRequired,
- auth: PT.shape({
- tokenV3: PT.string,
- user: PT.shape(),
- }).isRequired,
-};
-
-const mapStateToProps = state => ({
- auth: state.auth,
- challengeListing: {
- ...state.challengeListing,
- filter: decodeURIComponent(state.challengeListing.filter),
- },
-});
-
-/**
- * Callback for loading challenges satisfying to the specified criteria.
- * All arguments starting from second should match corresponding arguments
- * of the getChallenges action.
- * @param {Function} dispatch
- */
-function getChallenges(dispatch, ...rest) {
- const uuid = shortid();
- dispatch(actions.challengeListing.getInit(uuid));
- const action = actions.challengeListing.getChallenges(uuid, ...rest);
- dispatch(action);
- return action.payload;
-}
-
-/**
- * Callback for loading marathon matches satisfying to the specified criteria.
- * All arguments starting from second should match corresponding arguments
- * of the getChallenges action.
- * @param {Function} dispatch
- */
-function getMarathonMatches(dispatch, filters, ...rest) {
- const uuid = shortid();
- dispatch(actions.challengeListing.getInit(uuid));
- const f = _.clone(filters);
- if (f.status === 'COMPLETED') f.status = 'PAST';
- const action = actions.challengeListing.getMarathonMatches(uuid, f, ...rest);
- dispatch(action);
- // TODO: This is hack to make the Redux loading of challenges to work
- // with older code inside the InfiniteList, until it is properly
- // refactored.
- return action.payload;
-}
-
-function mapDispatchToProps(dispatch) {
- const a = actions.challengeListing;
- const ah = headerActions.topcoderHeader;
- return {
- getChallenges: (...rest) => getChallenges(dispatch, ...rest),
- getChallengeSubtracks: () => {
- dispatch(a.getChallengeSubtracksInit());
- dispatch(a.getChallengeSubtracksDone());
- },
- getChallengeTags: () => {
- dispatch(a.getChallengeTagsInit());
- dispatch(a.getChallengeTagsDone());
- },
- getMarathonMatches: (...rest) => getMarathonMatches(dispatch, ...rest),
- reset: () => dispatch(a.reset()),
- setFilter: f => dispatch(a.setFilter(f)),
- markHeaderMenu: () =>
- dispatch(ah.setCurrentNav('Compete', 'All Challenges')),
- };
-}
-
-const ChallengeListingContainer = connect(
- mapStateToProps,
- mapDispatchToProps,
-)(ChallengeListingPageContainer);
-
-export default ChallengeListingContainer;
diff --git a/src/shared/containers/Dashboard/index.jsx b/src/shared/containers/Dashboard/index.jsx
new file mode 100644
index 0000000000..bcfcdaa419
--- /dev/null
+++ b/src/shared/containers/Dashboard/index.jsx
@@ -0,0 +1,233 @@
+/**
+ * Container component for the my-dashboard page
+ *
+ */
+/* global location */
+
+import React from 'react';
+import PT from 'prop-types';
+import { connect } from 'react-redux';
+import shortid from 'shortid';
+import _ from 'lodash';
+
+import actions from 'actions/dashboard';
+import cActions from 'actions/challenge-listing';
+import { processActiveDevDesignChallenges } from 'utils/tc';
+import Header from 'components/Dashboard/Header';
+import SubtrackStats from 'components/Dashboard/SubtrackStats';
+import MyChallenges from 'components/Dashboard/MyChallenges';
+import SRM from 'components/Dashboard/SRM';
+import Program from 'components/Dashboard/Program';
+import CommunityUpdates from 'components/Dashboard/CommunityUpdates';
+import LoadingIndicator from 'components/LoadingIndicator';
+import './styles.scss';
+
+// The container component
+class DashboardPageContainer extends React.Component {
+
+ componentDidMount() {
+ if (!this.props.auth.tokenV2) {
+ /* TODO: dev/prod URLs should be generated based on the config,
+ * now it is hardcoded with dev URL - wrong! */
+ location.href = 'http://accounts.topcoder-dev.com/#!/member?retUrl=http:%2F%2Flocal.topcoder-dev.com:3000%2Fmy-dashboard';
+ return false;
+ }
+ this.props.getAllActiveChallenges(this.props.auth.tokenV3);
+ this.props.getBlogs();
+ return true;
+ }
+
+ componentDidUpdate(prevProps) {
+ const { user, tokenV3 } = this.props.auth;
+ if (tokenV3 && tokenV3 !== prevProps.auth.tokenV3) {
+ setImmediate(() => {
+ this.props.getAllActiveChallenges(tokenV3);
+ this.props.getSubtrackRanks(tokenV3, user.handle);
+ this.props.getSRMs(tokenV3, user.handle);
+ this.props.getIosRegistration(tokenV3, user.userId);
+ this.props.getUserFinancials(tokenV3, user.handle);
+ });
+ }
+ }
+
+ render() {
+ const {
+ auth: { profile, user, tokenV3 },
+ dashboard: {
+ subtrackRanks, srms, iosRegistered, blogs, financials,
+ loadingSubtrackRanks, loadingSRMs, loadingBlogs,
+ },
+ challengeListing: { challenges },
+ registerIos,
+ } = this.props;
+ const myChallenges = processActiveDevDesignChallenges(
+ _.filter(challenges, c => !!c.users[user.handle]),
+ );
+ const iosChallenges = processActiveDevDesignChallenges(
+ _.filter(challenges, c => c.platforms === 'iOS'),
+ );
+
+ const loadingActiveChallenges =
+ Boolean(this.props.challengeListing.loadingActiveChallengesUUID);
+
+ return (
+
+
+ );
+ }
+}
+
+DashboardPageContainer.propTypes = {
+ auth: PT.shape(),
+ dashboard: PT.shape(),
+ challengeListing: PT.shape(),
+ getAllActiveChallenges: PT.func.isRequired,
+ getSubtrackRanks: PT.func.isRequired,
+ getSRMs: PT.func.isRequired,
+ getIosRegistration: PT.func.isRequired,
+ registerIos: PT.func.isRequired,
+ getBlogs: PT.func.isRequired,
+ getUserFinancials: PT.func.isRequired,
+};
+
+DashboardPageContainer.defaultProps = {
+ auth: {},
+ dashboard: {},
+ challengeListing: {},
+};
+
+const mapStateToProps = state => ({
+ auth: state.auth,
+ dashboard: state.dashboard,
+ challengeListing: state.challengeListing,
+});
+
+const mapDispatchToProps = dispatch => ({
+ getSubtrackRanks: (tokenV3, handle) => {
+ dispatch(actions.dashboard.getSubtrackRanksInit());
+ dispatch(actions.dashboard.getSubtrackRanksDone(tokenV3, handle));
+ },
+ getAllActiveChallenges: (tokenV3) => {
+ const uuid = shortid();
+ dispatch(cActions.challengeListing.getAllActiveChallengesInit(uuid));
+ dispatch(cActions.challengeListing.getAllActiveChallengesDone(uuid, tokenV3));
+ },
+ getSRMs: (tokenV3, handle) => {
+ dispatch(actions.dashboard.getSrmsInit());
+ dispatch(actions.dashboard.getSrmsDone(tokenV3, handle, {
+ filter: 'status=future',
+ orderBy: 'registrationStartAt',
+ limit: 3,
+ }));
+ },
+ getIosRegistration: (tokenV3, userId) => {
+ dispatch(actions.dashboard.getIosRegistration(tokenV3, userId));
+ },
+ registerIos: (tokenV3, userId) => {
+ dispatch(actions.dashboard.registerIos(tokenV3, userId));
+ },
+ getBlogs: () => {
+ dispatch(actions.dashboard.getBlogsInit());
+ dispatch(actions.dashboard.getBlogsDone());
+ },
+ getUserFinancials: (tokenV3, handle) => {
+ dispatch(actions.dashboard.getUserFinancials(tokenV3, handle));
+ },
+});
+
+const DashboardContainer = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(DashboardPageContainer);
+
+export default DashboardContainer;
diff --git a/src/shared/containers/Dashboard/styles.scss b/src/shared/containers/Dashboard/styles.scss
new file mode 100644
index 0000000000..e370e9a483
--- /dev/null
+++ b/src/shared/containers/Dashboard/styles.scss
@@ -0,0 +1,341 @@
+@import '~styles/tc-includes';
+
+.dashboard-container {
+ background-color: #f6f6f6;
+}
+
+.page-container {
+ padding: 10px;
+}
+
+@media screen and (min-width: 768px) {
+ .page-container {
+ padding: 30px 10px;
+ }
+}
+
+.my-dashboard-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .subtrack-stats {
+ width: 100%;
+ max-width: 1242px;
+ background-color: $tc-white;
+ }
+
+ .challenges,
+ .srms,
+ .programs,
+ .tco,
+ .ttl,
+ .community-updates {
+ background-color: $tc-white;
+ max-width: 1242px;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-top: 30px;
+ margin-top: 1px;
+ width: 100%;
+
+ @media only screen and (min-width: 900px) {
+ padding-top: 30px;
+ }
+
+ header {
+ .section-title {
+ padding-top: 30px;
+ }
+ }
+ }
+
+ .ttl {
+ .tc-banner-placeholder {
+ background: url(assets/images/dashboard/team-live-bg.png) repeat;
+
+ .image {
+ img {
+ width: auto;
+ }
+ }
+ }
+ }
+
+ .challenges,
+ .srms,
+ .programs,
+ .tco,
+ .ttl,
+ .community-updates {
+ padding-top: 0;
+ }
+
+ .section-title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 29px;
+ color: #3d3d3d;
+ text-align: center;
+ text-transform: uppercase;
+ }
+}
+
+// from topcoder-app/assets/css/directives/tc-banner.scss
+$tco-color: #f47a20;
+$tco-color-dark: #ea690b;
+
+.tco17 {
+ margin-bottom: 10px;
+}
+
+.tc-banner-placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #3d3d3d;
+ padding: 20px 10px;
+
+ @media only screen and (min-width: 768px) {
+ padding: 30px 20px;
+ }
+
+ .image {
+ margin-bottom: 15px;
+
+ img {
+ width: 186px;
+ }
+ }
+
+ .title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 29px;
+ text-align: center;
+ text-transform: uppercase;
+ }
+
+ .content {
+ margin-top: 20px;
+
+ @media only screen and (min-width: 768px) {
+ margin-top: 30px;
+ }
+ }
+
+ .description {
+ max-width: 650px;
+ margin-top: 20px;
+ font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 15px;
+ line-height: 24px;
+ text-align: center;
+
+ @media only screen and (min-width: 768px) {
+ margin-top: 30px;
+ }
+
+ @media only screen and (min-width: 900px) {
+ max-width: 856px;
+ }
+ }
+
+ .ctas {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+
+ @media only screen and (min-width: 768px) {
+ margin-top: 30px;
+ }
+
+ .cta {
+ &:not(:first-child) {
+ margin-top: 30px;
+ }
+ }
+
+ a {
+ text-transform: uppercase;
+ display: block;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 500;
+
+ &.secondary-cta {
+ font-size: 12px;
+ line-height: 12px;
+ color: #a3a3ae;
+ }
+
+ &.tco-cta {
+ border: 1px solid $tco-color;
+ background-color: $tco-color;
+
+ &:focus {
+ border: 1px solid $tco-color;
+ background-color: $tco-color;
+ }
+
+ &:hover {
+ background-color: $tco-color-dark;
+ border-color: $tco-color-dark;
+ }
+
+ &:active {
+ background-color: $tco-color-dark;
+ border-color: $tco-color-dark;
+ }
+ }
+ }
+ }
+}
+
+// themes
+
+// black
+.tc-banner-placeholder.black {
+ margin-bottom: 10px;
+ background-color: #222;
+
+ .title {
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ color: $tc-white;
+ }
+
+ .subtitle {
+ @extend .title;
+
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ }
+
+ .description {
+ color: $tc-white;
+ }
+
+ .ctas {
+ .cta {
+ .learn-more {
+ color: #f6f6f6;
+ }
+ }
+ }
+
+ .tc-btn-white {
+ background-color: white;
+ color: #0096ff;
+ padding: 10px 20px;
+ margin-top: 5px;
+ }
+
+ .tc-btn-radius {
+ border-radius: 26px;
+ }
+}
+
+.tc-banner-placeholder.bg-image {
+ background-image: url(assets/images/dashboard/home-hero.png);
+ background-size: 100%;
+ height: 352px;
+ background-position: center 25%;
+ background-repeat: no-repeat;
+ flex-direction: row;
+ padding-top: 50px;
+
+ .container {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-left: 37px;
+ height: 95%;
+ justify-content: space-between;
+
+ .title {
+ margin-top: 10px;
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ color: $tc-white;
+ }
+
+ .subtitle {
+ margin-top: 20px;
+ width: 450px;
+ font-size: 20px;
+
+ @extend .title;
+
+ font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ text-align: left;
+ }
+
+ .description {
+ margin-top: 20px;
+ margin-bottom: 5px;
+ }
+
+ .cta {
+ margin-top: 20px;
+ }
+ }
+}
+
+.tc-banner-placeholder.cognitive {
+ background-image: url(assets/images/dashboard/cognitive-home-hero.jpg);
+ background-size: cover;
+ height: 352px;
+ background-position: center 100%;
+ background-repeat: no-repeat;
+ background-color: #222;
+ z-index: 1;
+ flex-direction: row;
+
+ .container {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-left: 37px;
+ height: 95%;
+ justify-content: space-between;
+
+ .img {
+ background-image: url(assets/images/dashboard/cognitive-home-hero-title.png);
+ background-size: 100%;
+ background-repeat: no-repeat;
+ background-position: center 100%;
+ height: 57px;
+ width: 75%;
+ }
+
+ .description {
+ color: $tc-white;
+ margin: 0 30px 0 0;
+ font-size: 24px;
+ line-height: 29px;
+ text-align: left;
+ font-weight: 300;
+ }
+
+ .cta {
+ margin-top: 20px;
+ }
+
+ .tc-btn-white {
+ background-color: white;
+ color: #0096ff;
+ padding: 10px 20px;
+ }
+
+ .tc-btn-radius {
+ border-radius: 26px;
+ }
+ }
+}
diff --git a/src/shared/containers/challenge-listing/FilterPanel.jsx b/src/shared/containers/challenge-listing/FilterPanel.jsx
new file mode 100644
index 0000000000..551d85493d
--- /dev/null
+++ b/src/shared/containers/challenge-listing/FilterPanel.jsx
@@ -0,0 +1,121 @@
+/**
+ * Container for the header filters panel.
+ */
+
+import actions from 'actions/challenge-listing/filter-panel';
+import challengeListingActions from 'actions/challenge-listing';
+import FilterPanel from 'components/challenge-listing/Filters/ChallengeFilters';
+import PT from 'prop-types';
+import React from 'react';
+import sidebarActions from 'actions/challenge-listing/sidebar';
+import { BUCKETS } from 'utils/challenge-listing/buckets';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+/* The default name for user-saved challenge filters. An integer
+ * number will be appended to it, when necessary, to keep filter
+ * names unique. */
+const DEFAULT_SAVED_FILTER_NAME = 'My Filter';
+
+class Container extends React.Component {
+
+ componentDidMount() {
+ if (!this.props.loadingSubtracks) this.props.getSubtracks();
+ if (!this.props.loadingKeywords) this.props.getKeywords();
+ }
+
+ render() {
+ return (
+
+
+
+
+
+ {
+ loadingSubtrackRanks &&
+
+
+ {
+ loadingActiveChallenges &&
+
+
+
+
+
+
+
+
+
+ Learn about Cognitive technologies and get hands on
+ experience as a member of the Topcoder Cognitive Community.
+
+ Learn More
+
+
+
+
+
+
+ 2017 Topcoder Open
+ October 21-24, 2017
Buffalo, NY, USA
+ Buffalo, NY, USA
+ The Ultimate Programming and Design Tournament - The Final Stage
+
+ Learn More
+
+
+ {
+ loadingSRMs &&
+
+
+ {
+ loadingActiveChallenges &&
+ registerIos(tokenV3, user.userId)}
+ />
+ }
+
+
+ {
+ loadingBlogs &&
+
+
+ {/* For demo we hardcode banner properties so we can disable max-len linting */}
+ {/* eslint-disable max-len */}
+ { !listingOnly ? (
+ {
+ this.props.setFilter(state);
+ this.props.setSearchText(state.text || '');
+ if (activeBucket === BUCKETS.SAVED_FILTER) {
+ this.props.selectBucket(BUCKETS.ALL);
+ }
+ }}
+ setSort={this.props.setSort}
+ sorts={this.props.sorts}
+
+ /* OLD PROPS BELOW */
+ challengeGroupId={challengeGroupId}
+ filterFromUrl={this.props.location.hash}
+ masterFilterFunc={this.masterFilterFunc}
+ isAuth={!!this.props.auth.user}
+ auth={this.props.auth}
+ />
+ { !listingOnly ? (
+
+ );
+ }
+}
+
+ListingContainer.defaultProps = {
+ challengeGroupId: '',
+ communityId: null,
+ communityName: null,
+ listingOnly: false,
+ match: null,
+ tag: null,
+};
+
+ListingContainer.propTypes = {
+ auth: PT.shape({
+ profile: PT.shape(),
+ tokenV3: PT.string,
+ user: PT.shape(),
+ }).isRequired,
+ allDraftChallengesLoaded: PT.bool.isRequired,
+ allPastChallengesLoaded: PT.bool.isRequired,
+ challenges: PT.arrayOf(PT.shape({})).isRequired,
+ challengeSubtracks: PT.arrayOf(PT.string).isRequired,
+ challengeTags: PT.arrayOf(PT.string).isRequired,
+ communityFilters: PT.arrayOf(PT.shape()).isRequired,
+ dropChallenges: PT.func.isRequired,
+ filter: PT.shape().isRequired,
+ communityId: PT.string,
+ communityName: PT.string,
+ getAllActiveChallenges: PT.func.isRequired,
+ getCommunityFilters: PT.func.isRequired,
+ getDraftChallenges: PT.func.isRequired,
+ getPastChallenges: PT.func.isRequired,
+ lastRequestedPageOfDraftChallenges: PT.number.isRequired,
+ lastRequestedPageOfPastChallenges: PT.number.isRequired,
+ loadingActiveChallengesUUID: PT.string.isRequired,
+ loadingDraftChallengesUUID: PT.string.isRequired,
+ loadingPastChallengesUUID: PT.string.isRequired,
+ markHeaderMenu: PT.func.isRequired,
+ selectBucket: PT.func.isRequired,
+ selectCommunity: PT.func.isRequired,
+ setFilter: PT.func.isRequired,
+ activeBucket: PT.string.isRequired,
+ selectedCommunityId: PT.string.isRequired,
+ sorts: PT.shape().isRequired,
+ setSearchText: PT.func.isRequired,
+ setSort: PT.func.isRequired,
+
+ /* OLD PROPS BELOW */
+ listingOnly: PT.bool,
+ match: PT.shape({
+ params: PT.shape({
+ keyword: PT.string,
+ }),
+ }),
+ challengeGroupId: PT.string,
+ tag: PT.string,
+ location: PT.shape({
+ hash: PT.string,
+ }).isRequired,
+};
+
+const mapStateToProps = (state) => {
+ const cl = state.challengeListing;
+ return {
+ auth: state.auth,
+ allDraftChallengesLoaded: cl.allDraftChallengesLoaded,
+ allPastChallengesLoaded: cl.allPastChallengesLoaded,
+ filter: cl.filter,
+ challenges: cl.challenges,
+ challengeSubtracks: cl.challengeSubtracks,
+ challengeTags: cl.challengeTags,
+ communityFilters: cl.communityFilters,
+ lastRequestedPageOfDraftChallenges: cl.lastRequestedPageOfDraftChallenges,
+ lastRequestedPageOfPastChallenges: cl.lastRequestedPageOfPastChallenges,
+ loadingActiveChallengesUUID: cl.loadingActiveChallengesUUID,
+ loadingDraftChallengesUUID: cl.loadingDraftChallengesUUID,
+ loadingPastChallengesUUID: cl.loadingPastChallengesUUID,
+ loadingChallengeSubtracks: cl.loadingChallengeSubtracks,
+ loadingChallengeTags: cl.loadingChallengeTags,
+ selectedCommunityId: cl.selectedCommunityId,
+ sorts: cl.sorts,
+ activeBucket: cl.sidebar.activeBucket,
+ };
+};
+
+function mapDispatchToProps(dispatch) {
+ const a = actions.challengeListing;
+ const ah = headerActions.topcoderHeader;
+ const fpa = filterPanelActions.challengeListing.filterPanel;
+ const sa = sidebarActions.challengeListing.sidebar;
+ return {
+ dropChallenges: () => dispatch(a.dropChallenges()),
+ getAllActiveChallenges: (token) => {
+ const uuid = shortid();
+ dispatch(a.getAllActiveChallengesInit(uuid));
+ dispatch(a.getAllActiveChallengesDone(uuid, token));
+ },
+ getCommunityFilters: auth => dispatch(a.getCommunityFilters(auth)),
+ getDraftChallenges: (page, token) => {
+ const uuid = shortid();
+ dispatch(a.getDraftChallengesInit(uuid, page));
+ dispatch(a.getDraftChallengesDone(uuid, page, token));
+ },
+ getPastChallenges: (page, token) => {
+ const uuid = shortid();
+ dispatch(a.getPastChallengesInit(uuid, page));
+ dispatch(a.getPastChallengesDone(uuid, page, token));
+ },
+ selectBucket: bucket => dispatch(sa.selectBucket(bucket)),
+ selectCommunity: id => dispatch(a.selectCommunity(id)),
+ setFilter: state => dispatch(a.setFilter(state)),
+ setSearchText: text => dispatch(fpa.setSearchText(text)),
+ setSort: (bucket, sort) => dispatch(a.setSort(bucket, sort)),
+ markHeaderMenu: () =>
+ dispatch(ah.setCurrentNav('Compete', 'All Challenges')),
+ };
+}
+
+const ChallengeListingContainer = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(ListingContainer);
+
+export default ChallengeListingContainer;
diff --git a/src/shared/containers/ChallengeListing/styles.scss b/src/shared/containers/challenge-listing/Listing/styles.scss
similarity index 100%
rename from src/shared/containers/ChallengeListing/styles.scss
rename to src/shared/containers/challenge-listing/Listing/styles.scss
diff --git a/src/shared/containers/challenge-listing/Sidebar.jsx b/src/shared/containers/challenge-listing/Sidebar.jsx
new file mode 100644
index 0000000000..28285b1d01
--- /dev/null
+++ b/src/shared/containers/challenge-listing/Sidebar.jsx
@@ -0,0 +1,104 @@
+/**
+ * Container for the Sidebar.
+ */
+
+import _ from 'lodash';
+import actions from 'actions/challenge-listing/sidebar';
+import challengeListingActions from 'actions/challenge-listing';
+import filterPanelActions from 'actions/challenge-listing/filter-panel';
+import PT from 'prop-types';
+import React from 'react';
+import Sidebar from 'components/challenge-listing/Sidebar';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { BUCKETS, getBuckets } from 'utils/challenge-listing/buckets';
+
+class SidebarContainer extends React.Component {
+
+ componentDidMount() {
+ const token = this.props.tokenV2;
+ if (token) this.props.getSavedFilters(token);
+ }
+
+ render() {
+ const buckets = getBuckets(this.props.user && this.props.user.handle);
+ const tokenV2 = this.props.tokenV2;
+
+ let communityFilter = this.props.communityFilters.find(item =>
+ item.id === this.props.selectedCommunityId);
+ if (communityFilter) communityFilter = communityFilter.filter;
+
+ return (
+