setCollapsed(!collapsed)}>
@@ -51,39 +36,19 @@ const ActivityCard = ({
!collapsed
&& (
- {showModal && curSubtrack === 'COPILOT' && (
-
toggleModal(false)} theme={style}>
-
-
-
[COPILOT CATEGORY]
-
toggleModal(false)}>
-
-
-
-
- {
- subTrackSummary.map(({ label, value }) => (
-
-
- {value || '-'}
-
-
- {label}
-
-
- ))
- }
-
-
- )}
{
subTracks.map((subtrack, index) => (
- {_.upperFirst(subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ').toLowerCase())}
+ {(_.upperFirst(subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ').toLowerCase()))
+ .replace('First2finish', 'First2Finish')
+ .replace('Design first2finish', 'Design First2Finish')
+ .replace('Srm', 'SRM')
+ .replace('Ria build competition', 'RIA Build Competition')
+ .replace('Ria component competition', 'RIA Component Competition')
+ .replace('Design first2finish', 'Design First2Finish')
+ .replace('Ui prototype competition', 'UI Prototype Competition')
+ }
@@ -135,24 +100,16 @@ const ActivityCard = ({
)
}
- {subtrack.name.replace(' ', '_')
- !== 'COPILOT'
- ? (
-
-
-
- ) : (
-
onShowModal(subtrack.name.replace(' ', '_'))}
- >
-
-
- )}
+
onClick({
+ track: trackName === 'QA' ? 'DEVELOP' : trackName,
+ subTrack: subtrack.name.replaceAll(' ', '_'),
+ })}
+ >
+
+
@@ -167,15 +124,13 @@ const ActivityCard = ({
ActivityCard.defaultProps = {
subTracks: [],
- stats: [],
};
ActivityCard.propTypes = {
- stats: PT.arrayOf(PT.shape()),
trackName: PT.string.isRequired,
subTracks: PT.arrayOf(PT.shape()),
- handle: PT.string.isRequired,
hasMM: PT.bool.isRequired,
+ onClick: PT.func.isRequired,
};
export default ActivityCard;
diff --git a/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss b/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss
index 8627eb9a38..e4cecf0d4f 100644
--- a/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss
+++ b/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss
@@ -1,15 +1,5 @@
@import "~styles/mixins";
-:global {
- @include xs-to-sm {
- body.scrolling-disabled-by-modal {
- > div {
- overflow: hidden;
- }
- }
- }
-}
-
.activity-card {
padding: 32px;
background-color: $tc-white;
@@ -95,6 +85,10 @@
justify-content: center;
margin-top: -2px;
+ &a.selected:hover {
+ cursor: default;
+ }
+
svg {
margin-top: 8px;
}
@@ -129,165 +123,3 @@
margin-left: 5px;
}
}
-
-.stats {
- padding-bottom: 10px;
- border-radius: 8px;
- margin: 25px 32px 32px;
-
- .stat-body {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: flex-start;
- padding: 24px;
- background: #f4f4f4;
- border-radius: 4px;
-
- @include xs-to-sm {
- flex-direction: column;
- border-radius: 8px;
- }
-
- .stat-item {
- display: flex;
- align-items: flex-end;
-
- @include xs-to-sm {
- margin-bottom: 18px;
- }
-
- .value {
- @include barlow-condensed;
-
- font-style: normal;
- font-weight: 500;
- font-size: 44px;
- line-height: 44px;
- color: #1e94a3;
- }
-
- .label {
- @include roboto-regular;
-
- margin-left: 4px;
- color: #2a2a2a;
- font-weight: 400;
- font-size: 15px;
- line-height: 24px;
- text-transform: capitalize;
- }
- }
- }
-
- .table-body {
- max-height: 49vh;
- overflow-y: auto;
-
- @media screen and (max-width: $screen-sm) {
- max-height: 65vh;
- }
- }
-
- @include xs-to-sm {
- margin: 0 0;
- }
-}
-
-.stats-head {
- display: flex;
- margin-top: 24px;
- width: 100%;
- padding-bottom: 16px;
- border-bottom: 1px solid #e9e9e9;
-
- @include xs-to-sm {
- display: none;
- }
-}
-
-.tooltip {
- font-size: 14px;
- margin: 10px 10px 0 10px;
- padding-top: 5px;
-}
-
-.level-1 {
- color: $member-gray !important;
-}
-
-.level-2 {
- color: $member-green !important;
-}
-
-.level-3 {
- color: $member-blue !important;
-}
-
-.level-4 {
- color: $member-yellow !important;
-}
-
-.level-5 {
- color: $member-red !important;
-}
-
-.header {
- display: flex;
- justify-content: space-between;
- margin-bottom: 25px;
-
- .title {
- @include barlow-medium;
-
- font-weight: 600;
- color: #2a2a2a;
- font-size: 18px;
- line-height: 22px;
- text-transform: uppercase;
- }
-
- .icon {
- cursor: pointer;
- margin-top: 5px;
- }
-}
-
-hr {
- opacity: 0.5;
-}
-
-.container {
- width: 90vw !important;
- border-radius: 8px;
-
- @include xs-to-sm {
- width: 100vw !important;
- height: 100vh !important;
- margin: 0;
- max-width: 100vw;
- max-height: 100vh;
- padding: 24px 16px;
- z-index: 999999;
- transform: initial;
- left: 0;
- top: 0;
- }
-}
-
-.mobile-header {
- display: none;
-
- @include xs-to-sm {
- display: block;
- margin-top: 16px;
- font-size: 11px;
- line-height: 14px;
-
- @include barlow-bold;
-
- font-weight: 600;
- color: #767676;
- text-align: left;
- }
-}
diff --git a/src/shared/components/ProfilePage/Activity/index.jsx b/src/shared/components/ProfilePage/Activity/index.jsx
index 31e250390e..4b9605ac08 100644
--- a/src/shared/components/ProfilePage/Activity/index.jsx
+++ b/src/shared/components/ProfilePage/Activity/index.jsx
@@ -20,7 +20,7 @@ const isHidden = (subtrack) => {
return false;
};
-const Activity = ({ memberStats, hasMM, handle }) => {
+const Activity = ({ memberStats, hasMM, onClick }) => {
/**
* Inspects a subtrack and determines if the member is active
* based on submissions and/or ranks.
@@ -113,16 +113,16 @@ const Activity = ({ memberStats, hasMM, handle }) => {
return (
- TOPCODER ACTIVITY
+ TC ACTIVITY
- {activeTracks.map(activeTrack => (
+ {activeTracks.map((activeTrack, index) => (
))}
@@ -136,7 +136,7 @@ Activity.defaultProps = {
Activity.propTypes = {
memberStats: PT.arrayOf(PT.shape()),
hasMM: PT.bool.isRequired,
- handle: PT.string.isRequired,
+ onClick: PT.func.isRequired,
};
export default Activity;
diff --git a/src/shared/components/ProfilePage/Activity/styles.scss b/src/shared/components/ProfilePage/Activity/styles.scss
index b1e6c9e9ec..f33acfb092 100644
--- a/src/shared/components/ProfilePage/Activity/styles.scss
+++ b/src/shared/components/ProfilePage/Activity/styles.scss
@@ -6,11 +6,18 @@
margin: 68px 0 16px 0;
padding-bottom: 32px;
+ @include xs-to-sm {
+ border-radius: 0;
+ margin-top: 24px;
+ margin-bottom: 0;
+ padding-bottom: 16px;
+ }
+
.header {
padding: 32px 0 40px 32px;
@include xs-to-sm {
- padding: 16px 0 16px 16px;
+ padding: 32px 0 16px 16px;
}
span {
diff --git a/src/shared/components/ProfilePage/MemberTracks/index.jsx b/src/shared/components/ProfilePage/MemberTracks/index.jsx
index 9b9d6436f1..d9202fb388 100644
--- a/src/shared/components/ProfilePage/MemberTracks/index.jsx
+++ b/src/shared/components/ProfilePage/MemberTracks/index.jsx
@@ -25,8 +25,8 @@ const MemberTracks = ({
&& (
{
- [...info.tracks, ...(indexOf(info.tracks, 'DATA_SCIENCE') === -1 && hasMM ? ['DATA_SCIENCE'] : []), ...(copilot ? ['COPILOT'] : [])].map(track => (
-
+ [...info.tracks, ...(indexOf(info.tracks, 'DATA_SCIENCE') === -1 && hasMM ? ['DATA_SCIENCE'] : []), ...(copilot ? ['COPILOT'] : [])].map((track, index) => (
+ /* eslint-disable-line react/no-array-index-key */
))
}
diff --git a/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx b/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
index 2ed4752257..704d77eb98 100644
--- a/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
@@ -5,7 +5,8 @@ import { toPairs } from 'lodash';
import PT from 'prop-types';
import { getRatingColor } from 'utils/tc';
import ChartTooltip from '../ChartTooltip';
-import styles from './index.scss';
+// import styles from './index.scss';
+import './index.scss';
const getRanges = distribution => (
toPairs(distribution)
@@ -71,47 +72,45 @@ export default class DistributionGraph extends React.Component {
}
static getMobileWidthGrapthMeasurements() {
- if (window.innerWidth < 400) {
- return 250;
- }
- return 320;
+ return window.innerWidth - 32;
}
draw() {
const $scope = this;
- const { distribution: wrapper, rating } = this.props;
+ const { distribution: wrapper, rating, subTrack } = this.props;
if (!wrapper) {
return;
}
const { distribution } = wrapper;
const desktopMeasurements = {
- w: 855,
- h: 400,
+ w: subTrack === 'SRM' ? 534 : 390,
+ h: 344,
padding: {
- top: 20,
- right: 5,
- bottom: 100,
- left: 40,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
},
};
const mobileMeasurements = {
w: 0,
- h: 200,
+ h: 240,
padding: {
- top: 50,
- left: 40,
- bottom: 80,
- right: 50,
+ top: 0,
+ left: 0,
+ bottom: 24,
+ right: 0,
},
};
d3.select($scope.graphRef.current).select('svg').remove();
- let { w } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
- const { h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+ let { w, h } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+ const { padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
if (!$scope.desktop) {
w = DistributionGraph.getMobileWidthGrapthMeasurements();
+ h = w * 240 / 288.0;
this.mobileWidth = w;
}
const totalW = w + padding.left + padding.right;
@@ -129,6 +128,7 @@ export default class DistributionGraph extends React.Component {
.domain([ranges[0].start,
d3.max(ranges, range => range.end)])
.range([padding.left, totalW - padding.right]);
+ /*
const xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
@@ -137,6 +137,7 @@ export default class DistributionGraph extends React.Component {
.scale(yScale)
.orient('left')
.ticks(ticks);
+ */
const svg = d3.select($scope.graphRef.current)
.append('svg')
.attr('width', totalW)
@@ -147,17 +148,21 @@ export default class DistributionGraph extends React.Component {
.attr('y', padding.top)
.attr('width', w)
.attr('height', h)
- .attr('fill', '#f6f6f6');
+ .attr('fill', '#ffffff');
+ /*
svg.append('g')
.attr('class', styles.grid)
.attr('transform', `translate(${padding.left},0)`)
.call(yAxis(5).tickSize(-totalW, 0, 0).tickFormat(''));
+ */
+ /*
svg.append('g')
.attr('class', styles.axis)
.attr('transform', `translate(${padding.left},0)`)
.call(yAxis(5));
+ */
svg.append('line')
.attr('x1', xScale2(rating))
@@ -231,6 +236,7 @@ export default class DistributionGraph extends React.Component {
.attr('y2', h + padding.top + 0.5)
.attr('stroke', d => getRatingColor(d.start));
+ /*
svg.append('g')
.attr('class', styles.axis)
.attr('transform', `translate(0,${(h + padding.top)})`)
@@ -242,6 +248,7 @@ export default class DistributionGraph extends React.Component {
.attr('transform', 'rotate(90)')
.style('text-anchor', 'start')
.text((d, i) => `${ranges[i].start} - ${ranges[i].end}`);
+ */
}
render() {
@@ -260,4 +267,5 @@ DistributionGraph.defaultProps = {
DistributionGraph.propTypes = {
distribution: PT.shape(),
rating: PT.number.isRequired,
+ subTrack: PT.string.isRequired,
};
diff --git a/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx b/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx
index aa274eb69f..9094e27bf2 100644
--- a/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx
@@ -5,7 +5,8 @@ import _ from 'lodash';
import React from 'react';
import PT from 'prop-types';
import { config } from 'topcoder-react-utils';
-import { getRatingColor, RATING_COLORS } from 'utils/tc';
+import { getRatingColor } from 'utils/tc';
+// import { RATING_COLORS } from 'utils/tc';
import ChartTooltip from '../ChartTooltip';
import styles from './index.scss';
@@ -52,10 +53,7 @@ export default class HistoryGraph extends React.Component {
}
static getMobileWidthGrapthMeasurements() {
- if (window.innerWidth < 400) {
- return 200;
- }
- return 300;
+ return window.innerWidth - 32;
}
draw() {
@@ -83,35 +81,36 @@ export default class HistoryGraph extends React.Component {
const parseDate = d3.time.format.utc('%Y-%m-%dT%H:%M:%S.%LZ').parse;
const desktopMeasurements = {
- w: 835,
- h: 400,
+ w: subTrack === 'SRM' ? 534 : 390,
+ h: 344,
padding: {
- top: 20,
- right: 5,
- bottom: 100,
- left: 60,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
},
};
const mobileMeasurements = {
w: 0,
- h: 200,
+ h: 240,
padding: {
- top: 10,
- right: 30,
- bottom: 50,
- left: 60,
+ top: 0,
+ right: 0,
+ bottom: 24,
+ left: 0,
},
};
d3.select($scope.graphRef.current).select('svg').remove();
- let { w } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
- const { h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+ let { w, h } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+ const { padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
if (!$scope.desktop) {
w = HistoryGraph.getMobileWidthGrapthMeasurements();
+ h = w * 240 / 288.0;
this.mobileWidth = w;
}
- const totalH = h + padding.top + padding.bottom;
+ // const totalH = h + padding.top + padding.bottom;
const x = d3.time.scale()
.range([padding.left + 5, (w + padding.left) - 5])
@@ -160,6 +159,7 @@ export default class HistoryGraph extends React.Component {
.attr('height', h);
+ /*
svg.append('g')
.attr('class', `${styles.x} ${styles.axis}`)
.attr('transform', `translate(0,${h + padding.top})`)
@@ -169,6 +169,7 @@ export default class HistoryGraph extends React.Component {
? m.format('YYYY')
: m.format('MMM').toUpperCase();
}));
+ */
svg.selectAll(`g.${styles.x}.${styles.axis} .tick text`)
.attr('font-weight', d => (moment(d).format('MM') === '01' ? 'bold' : 'normal'))
@@ -176,10 +177,12 @@ export default class HistoryGraph extends React.Component {
.attr('font-size', () => 11);
+ /*
svg.append('g')
.attr('class', `${styles.y} ${styles.axis}`)
.attr('transform', `translate(${padding.left - 25})`)
.call(yAxis().tickFormat(d => `${parseInt(d, 10)}`));
+ */
svg.append('g')
.attr('class', `${styles.x} ${styles.grid}`)
@@ -197,6 +200,7 @@ export default class HistoryGraph extends React.Component {
.attr('class', styles.line)
.attr('d', line);
+ /*
function processRatingStripePoint(_y) {
if (_y < padding.top || Number.isNaN(_y)) {
return padding.top;
@@ -205,6 +209,7 @@ export default class HistoryGraph extends React.Component {
}
return _y;
}
+ */
function getChallengeLink(challengeId) {
if (track === 'DEVELOP') {
@@ -221,6 +226,7 @@ export default class HistoryGraph extends React.Component {
return null;
}
+ /*
svg.append('g')
.selectAll('line')
.data(RATING_COLORS)
@@ -232,6 +238,7 @@ export default class HistoryGraph extends React.Component {
.attr('y2', d => processRatingStripePoint(y(d.limit - 1)))
.attr('stroke', d => d.color)
.attr('stroke-width', 3);
+ */
svg.selectAll('circle')
.data(history)
diff --git a/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx b/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx
index 69026008bf..9d7fece086 100644
--- a/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx
@@ -1,197 +1,192 @@
/* eslint-env browser */
import React from 'react';
import PT from 'prop-types';
-import styles from './styles.scss';
+import './styles.scss';
const percentageFunc = n => `${(n * 100).toFixed(0)}%`;
const SRMStats = ({ subTrackDetails }) => {
const { challenges } = subTrackDetails;
return (
-
+
{
[subTrackDetails.division1, subTrackDetails.division2]
.map((division, i) => ({ division, i }))
.filter(({ division: { levels } }) => levels && levels.length)
.map(({ division, i }) => (
-
-
-
- -
-
- -
-
- {`division ${i + 1}`}
-
-
+
+
+
+
+
+
+ {`Division ${i + 1}`}
+
+ |
+
+
+ SUCCESS
+
+ |
+
+
+ CREATED
+
+ |
+
+
+ FAILED CHALLENGES
+
+ |
+
+
+ FAILED SYS TEST
+
+ |
+
+
+
+
+
+
TOTAL
-
-
- -
-
+
+ |
+
+
{percentageFunc(division.total.percentSuccessful)}
-
-
- SUCCESS
-
-
- -
-
+
+ |
+
+
{division.total.problemsSubmitted}
-
-
- SUBMITTED
-
-
- -
-
+
+ |
+
+
{division.total.problemsFailed}
-
-
- FAILED CHALLENGES
-
-
- -
-
+
+ |
+
+
{division.total.problemsSysByTest}
-
-
- FAILED SYS. TEST
-
-
-
-
- {
- division.levels.map(level => (
- -
-
- -
-
- {level.levelName}
-
-
- -
-
- {percentageFunc(level.percentSuccessful)}
-
-
- SUCCESS
-
-
- -
-
- {level.problemsSubmitted}
-
-
- SUBMITTED
-
-
- -
-
- {level.problemsFailed}
-
-
- FAILED CHALLENGES
-
-
- -
-
- {level.problemsSysByTest}
-
-
- FAILED SYS. TEST
-
-
-
-
- ))
- }
-
-
+
+ |
+
+ { division.levels.map(level => (
+
+
+
+ {level.levelName}
+
+ |
+
+
+ {percentageFunc(level.percentSuccessful)}
+
+ |
+
+
+ {level.problemsSubmitted}
+
+ |
+
+
+ {level.problemsFailed}
+
+ |
+
+
+ {level.problemsSysByTest}
+
+ |
+
+ ))}
+
+
+
+
))
}
{
challenges.levels && challenges.levels.length
&& (
- -
-
- -
-
- -
-
- CHALLENGES
-
-
- TOTAL
-
-
- -
-
- {percentageFunc(challenges.total.percentSuccessful)}
-
-
- SUCCESS
-
-
- -
-
- {challenges.total.problemsSubmitted}
-
-
- CREATED
-
-
- -
-
- {challenges.total.problemsFailed}
-
-
- FAILED
-
-
-
-
- {
- challenges.levels.map(level => (
- -
-
- -
-
- {level.levelName}
-
-
- -
-
- {percentageFunc(level.percentSuccessful)}
-
-
- SUCCESS
-
-
- -
-
- {level.problemsSubmitted}
-
-
- CREATED
-
-
- -
-
- {level.problemsFailed}
-
-
- FAILED
-
-
-
-
- ))
- }
-
-
- )
- }
-
+
+
+
+
+
+ Challenges
+
+ |
+
+
+ SUCCESS
+
+ |
+
+
+ CREATED
+
+ |
+
+
+ FAILED
+
+ |
+
+
+
+
+
+
+ TOTAL
+
+ |
+
+
+ {percentageFunc(challenges.total.percentSuccessful)}
+
+ |
+
+
+ {challenges.total.problemsSubmitted}
+
+ |
+
+
+ {challenges.total.problemsFailed}
+
+ |
+
+ { challenges.levels.map(level => (
+
+
+
+ {level.levelName}
+
+ |
+
+
+ {percentageFunc(level.percentSuccessful)}
+
+ |
+
+
+ {level.problemsSubmitted}
+
+ |
+
+
+ {level.problemsFailed}
+
+ |
+
+ ))}
+
+
+ )}
+
-
-
-
-
-
-
- {info.handle}
-
-
-
-
-
-
-
-
-
+ {' '}
+
+ { text }
+ {' '}
+
+ );
+ };
+
+ const Placement = ({ track, placement, pointTotal }) => {
+ const text = isDataScience(track) ? 'Placement' : 'Winner';
+ const place = isDataScience(track) ? `${pointTotal || 0} Point`
+ : `${placement}${getPlacementPostfix(placement)} Place`;
+ return (
+
+ {' '}
+
+ { text }
+ { place }
+ {' '}
+
+ );
+ };
+
+ const getSafeName = (name) => {
+ if (window.innerWidth < 900) return name;
+ return name.length < 70 ? name : _.concat(name.substring(0, 67), '...');
+ };
+
+ const getSubmissionEndDate = phases => phases.find(phase => phase.name === 'Submission')
+ .actualEndDate;
+
+ const getSafeEndDate = endDate => endDate || '2000-01-01T00:00:00.000Z';
+
+ const formatDateSafe = endDate => formatDate(getSafeEndDate(endDate));
+
+ return (
+
+
+ { challenges.map((challenge, index) => {
+ const {
+ isPrivate,
+ id,
+ name,
+ submissionEndDate,
+ userDetails,
+ track,
+ subTrack,
+ winners,
+ rounds,
+ phases,
+ pointTotal,
+ } = challenge;
+
+ // NOTE: cannot fetch winners of SRM challenge
+ const winner = winners && winners.find(winer => winer.handle === handle);
+
+ return (
+ // eslint-disable-next-line react/no-array-index-key
+
+ |
+ {/* eslint-disable-next-line no-nested-ternary */}
+ { !isPrivate
+ ? (subTrack === 'SRM' ? (
+
+
+ { getSafeName(name) }
+
+
+ )
+ : (
+
+
+ { getSafeName(name) }
+
+
+ )
+ )
+ : (
+
+ { getSafeName(name) }
+
+ )}
+
+ { submissionEndDate && formatDate(submissionEndDate) }
+ { !submissionEndDate && rounds && formatDateSafe(rounds[0].codingEndAt) }
+ { !submissionEndDate && !rounds && phases
+ && formatDateSafe(getSubmissionEndDate(phases)) }
+
+ |
+
+ { track !== 'DESIGN' && userDetails
+ && (userDetails.submissionReviewScore || userDetails.submissionReviewScore === 0)
+ && (
+
+ { 'Review Score: ' }
+
+ { percentage(userDetails.submissionReviewScore / 100) }
+
+
+ )}
+ {!winner && }
+ {!!winner && (
+
+ )}
+ |
+
+ );
+ })}
+
+
+ );
+};
+
+ChallengeTable.defaultProps = {
+ challenges: [],
+};
+
+ChallengeTable.propTypes = {
+ challenges: PT.arrayOf(PT.shape()),
+};
+
+export default ChallengeTable;
diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss
new file mode 100644
index 0000000000..f08d79d273
--- /dev/null
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss
@@ -0,0 +1,137 @@
+@import '~styles/mixins';
+
+table.challenges {
+ width: 100%;
+ padding: 32px, 0;
+
+ tbody {
+ width: 100%;
+ display: block;
+ max-height: 365px;
+ overflow-y: auto;
+
+ @include roboto-regular;
+
+ font-size: 16px;
+ line-height: 24px;
+
+ tr {
+ display: flex;
+ justify-content: space-between;
+ border-radius: 8px;
+ width: 100%;
+ padding: 24px;
+
+ &.even {
+ background: #f4f4f4;
+ }
+
+ &.odd {
+ background: #fff;
+ }
+
+ td {
+ display: flex;
+
+ &.challenge-info {
+ justify-content: flex-start;
+ align-items: baseline;
+ gap: 16px;
+
+ .challenge-name {
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 26px;
+ }
+ }
+
+ &.challenge-result {
+ justify-content: flex-end;
+ align-items: center;
+ gap: 16px;
+
+ /*
+ .score {
+ .bold {
+ font-weight: 500;
+ }
+ }
+ */
+ }
+
+ &.hidden {
+ visibility: hidden;
+ }
+ }
+ }
+
+ @include xs-to-sm {
+ max-height: 360px;
+
+ tr {
+ flex-direction: column;
+ padding: 16px;
+ gap: 8px;
+
+ td {
+ &.challenge-info {
+ flex-direction: column;
+ gap: 0;
+
+ .challenge-name,
+ .challenge-date {
+ font-size: 14px;
+ line-height: 20px;
+ }
+ }
+
+ &.challenge-result {
+ justify-content: flex-start;
+
+ .score {
+ display: none;
+ }
+ }
+
+ &.hidden {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}
+
+.bar {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ border-radius: 4px;
+ color: #fff;
+
+ @include roboto-bold;
+
+ font-size: 14px;
+ line-height: 30px;
+
+ .text {
+ color: #fff;
+ }
+
+ @include xs-to-sm {
+ font-size: 12px;
+ line-height: 26px;
+ }
+}
+
+.participant {
+ background: #767676;
+}
+
+.placement {
+ background: #227681;
+
+ .place {
+ font-weight: 400;
+ }
+}
diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
index 6bd154dc37..aa7b038322 100644
--- a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
@@ -7,128 +7,15 @@ import _ from 'lodash';
import React from 'react';
import { connect } from 'react-redux';
import PT from 'prop-types';
-import InfiniteScroll from 'react-infinite-scroller';
import shortId from 'shortid';
-import ChallengeTile from 'components/ChallengeTile';
-import SRMTile from 'components/SRMTile';
import { actions } from 'topcoder-react-lib';
-import { OLD_COMPETITION_TRACKS, COMPETITION_TRACKS } from 'utils/tc';
import LoadingIndicator from 'components/LoadingIndicator';
-import GalleryModal from './GalleryModal';
+import ChallengeTable from './ChallengeTable';
import './style.scss';
// how many challenges to query per batch
-const CHALLENGE_PER_PAGE = 36;
-
-/**
- * @static
- * @desc pre-process subtrach challenge array to prepare for rendering
- * @param {String} one raw challenge just retrieved from API
- */
-const processPastChallenge = (challenge) => {
- const cloned = _.cloneDeep(challenge);
- if (cloned.userDetails) {
- // process placement for challenges having winningPlacements array in response
- if (Array.isArray(cloned.userDetails.winningPlacements)) {
- cloned.highestPlacement = _.min(cloned.userDetails.winningPlacements, 'placed').placed;
- }
- // process placement for design challenges
- if (cloned.track === 'DESIGN'
- && cloned.userDetails.submissions
- && cloned.userDetails.submissions.length > 0) {
- cloned.thumbnailId = cloned.userDetails.submissions[0].id;
- }
- // determines the user status for passing the review for one of the submissions
- if (cloned.userDetails.submissions && cloned.userDetails.submissions.length > 0) {
- cloned.passedReview = cloned.userDetails.submissions.filter(submission => submission.type === 'Contest Submission'
- && (submission.status === 'Active'
- || submission.status === 'Completed Without Win')).length > 0;
- }
- if (cloned.highestPlacement === 0) {
- cloned.highestPlacement = null;
- }
- cloned.wonFirst = cloned.highestPlacement === 1;
-
- cloned.userHasSubmitterRole = false;
-
- // determines if user has submitter role or not
- const { roles } = cloned.userDetails;
- if (roles.length > 0) {
- const submitterRole = _.findIndex(roles, (role) => {
- const lRole = role.toLowerCase();
- return lRole === 'submitter';
- });
- if (submitterRole >= 0) {
- cloned.userHasSubmitterRole = true;
- }
- }
-
- if (!cloned.userStatus) {
- if (cloned.userDetails.hasUserSubmittedForReview) {
- if (!cloned.passedReview) {
- cloned.userStatus = 'PASSED_SCREENING';
- } else {
- cloned.userStatus = 'PASSED_REVIEW';
- }
- } else {
- cloned.userStatus = 'NOT_FINISHED';
- }
-
- // if user does not has submitter role, just show Completed
- if (!cloned.userHasSubmitterRole) {
- cloned.userStatus = 'COMPLETED';
- }
- }
-
- // adjust submissions
- if (cloned.userDetails
- && cloned.userDetails.submissions
- && cloned.userDetails.submissions.length > 0) {
- cloned.userDetails.submissions = cloned.userDetails.submissions
- .filter(submission => submission && submission.submissionImage);
- cloned.userDetails.submissions = _.sortBy(
- cloned.userDetails.submissions,
- submission => submission.placement,
- );
- }
-
- if (!cloned.isPrivate
- && cloned.userDetails
- && cloned.userDetails.submissions
- && cloned.userDetails.submissions.length > 0) {
- // add attr imageURL
- cloned.imageURL = cloned.userDetails.submissions[0].submissionImage
- && cloned.userDetails.submissions[0].submissionImage.full;
- // add numImages
- cloned.numImages = cloned.userDetails.submissions.length;
- } else {
- cloned.numImages = 0;
- }
-
- if (!cloned.type) {
- cloned.type = cloned.subTrack;
- }
-
- switch (cloned.track) {
- case OLD_COMPETITION_TRACKS.DATA_SCIENCE:
- cloned.track = COMPETITION_TRACKS.DS;
- break;
- case OLD_COMPETITION_TRACKS.DESIGN:
- cloned.track = COMPETITION_TRACKS.DES;
- break;
- case OLD_COMPETITION_TRACKS.DEVELOP:
- cloned.track = COMPETITION_TRACKS.DEV;
- break;
- case OLD_COMPETITION_TRACKS.QA:
- cloned.track = COMPETITION_TRACKS.QA;
- break;
- default:
- break;
- }
- }
- return cloned;
-};
+const CHALLENGE_PER_PAGE = 10;
class SubTrackChallengeView extends React.Component {
constructor(props, context) {
@@ -137,12 +24,7 @@ class SubTrackChallengeView extends React.Component {
// this is current page number. starts with 1.
// everytime we scroll at the bottom, we query from offset = pageNum * CHALLENGE_PER_PAGE
pageNum: 1,
- // which challenge's modal should be poped. null means no modal
- challengeIndexToPopModal: null,
};
- this.onPageChange = this.onPageChange.bind(this);
- this.onPopModal = this.onPopModal.bind(this);
- this.onCloseModal = this.onCloseModal.bind(this);
}
componentDidMount() {
@@ -151,108 +33,123 @@ class SubTrackChallengeView extends React.Component {
auth,
track,
subTrack,
- loadingSubTrackChallengesUUID,
loadSubtrackChallenges,
loadingSRMUUID,
loadSRM,
loadingMarathonUUID,
loadMarathon,
userId,
+ isAlreadyLoadChallenge,
} = this.props;
const {
pageNum,
} = this.state;
- if (track === 'DEVELOP' || track === 'DESIGN') {
- if (!loadingSubTrackChallengesUUID) {
- loadSubtrackChallenges(
- handle,
- auth.tokenV3,
- track, subTrack,
- pageNum,
- CHALLENGE_PER_PAGE,
- true,
- userId,
- );
- }
- } else if (track === 'DATA_SCIENCE') {
+ if (!isAlreadyLoadChallenge.current && (track === 'DEVELOP' || track === 'DESIGN')) {
+ loadSubtrackChallenges(
+ handle,
+ auth.tokenV3,
+ track, subTrack,
+ pageNum,
+ CHALLENGE_PER_PAGE,
+ true,
+ userId,
+ );
+ isAlreadyLoadChallenge.current = true;
+ } else if (!isAlreadyLoadChallenge.current && track === 'DATA_SCIENCE') {
if (subTrack === 'SRM') {
if (!loadingSRMUUID) {
// pageNum - 1 to match with v4 offset
loadSRM(handle, auth.tokenV3, pageNum - 1, CHALLENGE_PER_PAGE, true);
+ isAlreadyLoadChallenge.current = true;
}
} else if (subTrack === 'MARATHON_MATCH') {
if (!loadingMarathonUUID) {
loadMarathon(handle, userId, auth.tokenV3, pageNum, CHALLENGE_PER_PAGE, true);
+ isAlreadyLoadChallenge.current = true;
}
}
}
}
- onPageChange() {
+ componentDidUpdate(prevProps) {
+ const {
+ pageNum,
+ } = this.state;
+
const {
handle,
auth,
- track,
- subTrack,
- loadingSubTrackChallengesUUID,
loadSubtrackChallenges,
- loadingSRMUUID,
loadSRM,
- loadingMarathonUUID,
loadMarathon,
userId,
+
+ track,
+ subTrack,
+ challenges,
+ challengesHasMore,
+ loadingSRMUUID,
+ userSrms,
+ userSrmHasMore,
+ loadingMarathonUUID,
+ userMarathons,
+ userMarathonHasMore,
} = this.props;
- const {
- pageNum,
- } = this.state;
+ const isEqLen = (prevArr, arr) => (prevArr && prevArr.length) === (arr && arr.length);
- if ((track === 'DEVELOP' || track === 'DESIGN')) {
- if (!loadingSubTrackChallengesUUID) {
- loadSubtrackChallenges(
- handle,
- auth.tokenV3,
- track,
- subTrack,
- pageNum + 1,
- CHALLENGE_PER_PAGE,
- false,
- userId,
- );
- this.setState({ pageNum: pageNum + 1 });
- }
- // if loadingSubTrackChallengesUUID is set in redux-store,
- // it means there is already an ongoing query
- // same to SRM and Marathon
- } else if (track === 'DATA_SCIENCE') {
- if (subTrack === 'SRM') {
- if (!loadingSRMUUID) {
- loadSRM(handle, auth.tokenV3, pageNum, CHALLENGE_PER_PAGE, false);
- this.setState({ pageNum: pageNum + 1 });
- }
- } else if (subTrack === 'MARATHON_MATCH') {
- if (!loadingMarathonUUID) {
- loadMarathon(handle, userId, auth.tokenV3, pageNum + 1, CHALLENGE_PER_PAGE, false);
+ if (track === 'DEVELOP' || track === 'DESIGN') {
+ if (!isEqLen(prevProps.challenges, challenges)) {
+ // NOTE: Loaded successful, nothing todo
+ if (challengesHasMore) {
+ loadSubtrackChallenges(
+ handle,
+ auth.tokenV3,
+ track,
+ subTrack,
+ pageNum + 1,
+ CHALLENGE_PER_PAGE,
+ false,
+ userId,
+ );
+ // eslint-disable-next-line react/no-did-update-set-state
this.setState({ pageNum: pageNum + 1 });
}
}
}
- }
- onPopModal(index) {
- this.setState({ challengeIndexToPopModal: index });
- }
+ if (track === 'DATA_SCIENCE' && subTrack === 'SRM') {
+ if (!loadingSRMUUID) {
+ if (!isEqLen(prevProps.userSrms, userSrms)) {
+ // NOTE: Loaded successful, nothing todo
+ if (userSrmHasMore) {
+ loadSRM(handle, auth.tokenV3, pageNum, CHALLENGE_PER_PAGE, false);
+ // eslint-disable-next-line react/no-did-update-set-state
+ this.setState({ pageNum: pageNum + 1 });
+ }
+ }
+ }
+ }
- onCloseModal() {
- this.setState({ challengeIndexToPopModal: null });
+ if (track === 'DATA_SCIENCE' && subTrack === 'MARATHON_MATCH') {
+ if (!loadingMarathonUUID) {
+ if (!isEqLen(prevProps.userMarathons, userMarathons)) {
+ // NOTE: Loaded successful, nothing todo
+ if (userMarathonHasMore) {
+ loadMarathon(handle, userId, auth.tokenV3, pageNum + 1, CHALLENGE_PER_PAGE, false);
+ // eslint-disable-next-line react/no-did-update-set-state
+ this.setState({ pageNum: pageNum + 1 });
+ }
+ }
+ }
+ }
}
render() {
const {
pageNum,
- challengeIndexToPopModal,
} = this.state;
const {
@@ -262,12 +159,9 @@ class SubTrackChallengeView extends React.Component {
loadingSRMUUID,
loadingMarathonUUID,
challenges,
- challengesHasMore,
userSrms,
- userSrmHasMore,
userMarathons,
- userMarathonHasMore,
- userId,
+ handle,
} = this.props;
if (pageNum === 1
@@ -295,44 +189,13 @@ class SubTrackChallengeView extends React.Component {
}
if (track === 'DEVELOP' || track === 'DESIGN') {
- const challengeToRender = _.map(challenges, processPastChallenge);
+ // const challengeToRender = _.map(challenges, processPastChallenge);
return (
-
- {challengeIndexToPopModal != null
- && (
-
-
-
- )
- }
-
}
- threshold={500}
- >
-
-
-
- {challengeToRender.map((item, index) => (
-
- ))}
-
-
-
-
- {loadingSubTrackChallengesUUID &&
}
-
-
}
- threshold={500}
- >
-
-
-
- {userSrms && userSrms.map(item => )
- }
-
-
-
-
- {loadingSRMUUID &&
}
-
-
}
- threshold={500}
- >
-
-
-
- {marathonToRender.map(item => )
- }
-
-
-
-
- {loadingMarathonUUID &&
}
-
-
-
-
-
-
-
-
-
- {subTrack.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')}
-
-
- |
-
-
-
-
- {activeChallengesCount}
+
+ { subTrackSummary.map(({ label, value, link }) => (
+ -
+ { link ? (
+
+ {value || '-'}
+
+ ) : (
+
+ {value || '-'}
-
- Active Challenges
-
-
- {
- this.checkSRMHonor()
- && (
-
- )
- }
-
-
-
-
- {
- tabs.map(tab => (
- -
-
- {tab}
-
-
- ))
- }
-
-
+ {/* { */}
+ {/* (rewards || []).length ? ( */}
+ {/*
*/}
+ {/* ) : null */}
+ {/* } */}
{
+ this.isAlreadyLoadChallenge.current = false;
+ this.setState({
+ track, subTrack, showDetails: true, tab: '',
+ });
+ }}
/>
+ { showDetails && (
+
+
+
+
+ {
+ subTrack === 'SRM' ? 'Single round match'
+ : subTrack.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')
+ }
+
+
+
+
+
);
}
@@ -212,6 +287,7 @@ ProfilePage.defaultProps = {
challenges: null,
skills: null,
stats: null,
+ // rewards: [],
};
ProfilePage.propTypes = {
@@ -223,6 +299,28 @@ ProfilePage.propTypes = {
skills: PT.shape(),
stats: PT.arrayOf(PT.shape()),
lookupData: PT.shape().isRequired,
+ handleParam: PT.string.isRequired,
+ meta: PT.shape().isRequired,
+ // rewards: PT.arrayOf(PT.shape()),
+ clearSubtrackChallenges: PT.func.isRequired,
};
-export default ProfilePage;
+function mapDispatchToProps(dispatch) {
+ const action = actions.members;
+
+ return {
+ clearSubtrackChallenges: (
+ handle,
+ ) => {
+ const uuid = shortId();
+ dispatch(action.getSubtrackChallengesInit(handle, uuid, 1));
+ },
+ };
+}
+
+const Container = connect(
+ () => ({}),
+ mapDispatchToProps,
+)(ProfilePage);
+
+export default Container;
diff --git a/src/shared/components/ProfilePage/styles.scss b/src/shared/components/ProfilePage/styles.scss
index 869f3efe00..27226ce130 100644
--- a/src/shared/components/ProfilePage/styles.scss
+++ b/src/shared/components/ProfilePage/styles.scss
@@ -7,13 +7,13 @@
}
.content {
- margin: 0 32px 32px 32px;
+ padding: 0 32px 32px 32px;
display: flex;
width: 100%;
@include xs-to-md {
flex-direction: column;
- margin: 180px 16px 16px 16px;
+ padding: 180px 16px 16px 16px;
}
}
@@ -29,15 +29,16 @@
line-height: 24px;
color: $tco-black;
margin-top: 24px;
+ }
- @include xs-to-sm {
- padding-bottom: 32px;
- border-bottom: 2px solid $listing-gray;
- }
+ @include xs-to-sm {
+ padding-bottom: 32px;
+ border-bottom: 2px solid $listing-gray;
}
@include xs-to-md {
- padding-right: 16px;
+ padding-left: 10px;
+ padding-right: 10px;
width: 100%;
}
}
@@ -50,7 +51,54 @@
@include xs-to-sm {
border-left: 0;
margin-top: 0;
- padding-left: 0;
+ padding-left: 10px;
+ padding-right: 10px;
padding-top: 32px;
}
}
+
+.modal-overlay {
+ background: #000;
+}
+
+.modal-container-copilot,
+.modal-container {
+ width: 1232px;
+ min-height: 700px;
+ max-width: 1232px;
+ border-radius: 8px;
+ padding: 32px 32px 0 32px;
+ gap: 24px;
+
+ &.modal-container-copilot {
+ height: auto;
+ }
+
+ @include xs-to-sm {
+ width: 100%;
+ max-width: 100%;
+ height: 100% !important;
+ max-height: 100% !important;
+ padding: 24px 16px 48px 16px;
+ }
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 24px;
+
+ .title {
+ @include barlow-medium;
+
+ font-weight: 600;
+ font-size: 22px;
+ line-height: 26px;
+ text-transform: uppercase;
+ }
+
+ .icon {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/shared/components/TrackIcon/index.jsx b/src/shared/components/TrackIcon/index.jsx
index 411c71bf60..3553d8cf55 100644
--- a/src/shared/components/TrackIcon/index.jsx
+++ b/src/shared/components/TrackIcon/index.jsx
@@ -14,6 +14,10 @@ export default function TrackIcon({
}) {
const TCO_URL = `${MAIN_URL}/tco`;
const trackStyle = track.replace(' ', '-').toLowerCase();
+ let abbreviationStyle = type.abbreviation;
+ if (['CH', 'F2F', 'TSK'].indexOf(abbreviationStyle) < 0) {
+ abbreviationStyle = '';
+ }
return (
{challengesUrl ? (
@@ -26,13 +30,13 @@ export default function TrackIcon({
) : (
{type.abbreviation}
)}
-
+
TCO
diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss
index 62ef3d0b69..e8eb09ffab 100644
--- a/src/shared/components/TrackIcon/style.scss
+++ b/src/shared/components/TrackIcon/style.scss
@@ -5,9 +5,6 @@ $track-space-10: $base-unit * 2;
$track-space-15: $base-unit * 3;
$track-space-20: $base-unit * 4;
$track-radius-4: $corner-radius * 2;
-$track-code-green: #35ac35;
-$track-code-blue: #2984bd;
-$track-code-turquose: #0ab88a;
.trackIcon {
display: flex;
@@ -34,25 +31,16 @@ $track-code-turquose: #0ab88a;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
- &.design,
- &.generic {
- background: $track-code-blue;
- }
-
- &.develop,
- &.development {
+ &.CH {
background: $track-code-green;
}
- &.qa,
- &.quality-assurance {
- background: $track-code-turquose;
+ &.F2F {
+ background: $track-code-blue;
}
- &.data_science,
- &.data-science,
- &.data {
- background: $tc-orange-110;
+ &.TSK {
+ background: $track-code-turquose;
}
}
@@ -69,29 +57,19 @@ $track-code-turquose: #0ab88a;
border-top-left-radius: 0;
border-top-right-radius: 0;
- &.design,
- &.generic {
- color: $tc-light-blue-110;
- background: $tc-light-blue-10;
- }
-
- &.develop,
- &.development {
- color: $tc-green-110;
- background: $tc-green-10;
+ &.CH {
+ color: $track-code-green;
+ background: $track-code-green-light;
}
- &.qa,
- &.quality-assurance {
- color: #0ab88a;
- background: #c1f5e7;
+ &.F2F {
+ color: $track-code-blue;
+ background: $track-code-blue-light;
}
- &.data_science,
- &.data-science,
- &.data {
- color: $tc-orange-110;
- background: $tc-orange-10;
+ &.TSK {
+ color: $track-code-turquose;
+ background: $track-code-turquose-light;
}
}
diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
index e9150ce43f..4c211c9c8e 100644
--- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
+++ b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
@@ -13,21 +13,14 @@ import { config } from 'topcoder-react-utils';
import {
Tag,
- DataScienceTrackTag,
- DataScienceTrackEventTag,
- DesignTrackTag,
- DesignTrackEventTag,
DevelopmentTrackTag,
- DevelopmentTrackEventTag,
- QATrackTag,
- QATrackEventTag,
} from 'topcoder-react-ui-kit';
import { COMPETITION_TRACKS } from 'utils/tc';
import VerifiedTag from 'components/challenge-listing/VerifiedTag';
import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore';
import { calculateScore } from '../../../utils/challenge-listing/helper';
-import style from './style.scss';
+import './style.scss';
export default function ChallengeTags(props) {
const {
@@ -42,66 +35,59 @@ export default function ChallengeTags(props) {
openForRegistrationChallenges,
} = props;
- let EventTag;
- let TrackTag;
- switch (track) {
- case COMPETITION_TRACKS.DS:
- EventTag = DataScienceTrackEventTag;
- TrackTag = DataScienceTrackTag;
- break;
- case COMPETITION_TRACKS.DES:
- EventTag = DesignTrackEventTag;
- TrackTag = DesignTrackTag;
- break;
- case COMPETITION_TRACKS.DEV:
- EventTag = DevelopmentTrackEventTag;
- TrackTag = DevelopmentTrackTag;
- break;
- case COMPETITION_TRACKS.QA:
- EventTag = QATrackEventTag;
- TrackTag = QATrackTag;
- break;
- default:
- throw new Error('Wrong competition track value');
- }
-
-
const filteredChallenge = _.find(openForRegistrationChallenges, { id: challengeId });
const matchSkills = filteredChallenge ? filteredChallenge.match_skills || [] : [];
const matchScore = filteredChallenge ? filteredChallenge.jaccard_index || [] : 0;
const tags = technPlatforms.filter(tag => !matchSkills.includes(tag));
+ const abbreviationName = challengeType ? challengeType.name : null;
+ let abbreviation;
+ switch (abbreviationName) {
+ case 'First2Finish':
+ abbreviation = 'F2F';
+ break;
+ case 'Challenge':
+ abbreviation = 'CH';
+ break;
+ case 'Task':
+ abbreviation = 'TSK';
+ break;
+ default:
+ abbreviation = null;
+ }
return (
{
- challengeType
- && (
-
-
+ (
setImmediate(() => setChallengeListingFilter(
- { types: [challengeType.abbreviation] },
+ { types: [abbreviation] },
))
)
}
- to={`${challengesUrl}?types[]=${encodeURIComponent(challengeType.abbreviation)}`}
+ to={`${challengesUrl}?types[]=${encodeURIComponent(abbreviation)}`}
>
- {challengeType.name}
-
+ {abbreviationName}
+
)
}
{
- events.map(event => (
-
(
+
- {event}
-
- ))
+
+ {event}
+
+
+ )) : null
}
{
matchScore > 0 && config.ENABLE_RECOMMENDER && (
diff --git a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
index 4b23fda667..b01cb53702 100644
--- a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
+++ b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
@@ -39,6 +39,7 @@ export default function ChallengeViewSelector(props) {
hasRegistered,
mySubmissions,
onSort,
+ viewAsTable,
} = props;
const { type, tags } = challenge;
@@ -85,8 +86,8 @@ export default function ChallengeViewSelector(props) {
{ field: 'Final Score', sort: 'asc', name: 'Final Score: Low to High' },
{ field: 'Provisional Score', sort: 'desc', name: 'Provisional Score: High to Low' },
{ field: 'Provisional Score', sort: 'asc', name: 'Provisional Score: Low to High' },
- { field: 'Submission Date', sort: 'desc', name: 'Submission Date: New to Old' },
- { field: 'Submission Date', sort: 'asc', name: 'Submission Date: Old to New' },
+ { field: 'Time', sort: 'desc', name: 'Submission Date: New to Old' },
+ { field: 'Time', sort: 'asc', name: 'Submission Date: Old to New' },
];
const MySubmissionsSortOptions = [
@@ -376,7 +377,7 @@ export default function ChallengeViewSelector(props) {
}
{
- isSubmissionTabSelected && (
+ isSubmissionTabSelected && !viewAsTable && (
@@ -544,4 +546,5 @@ ChallengeHeader.propTypes = {
mySubmissions: PT.arrayOf(PT.shape()).isRequired,
openForRegistrationChallenges: PT.shape().isRequired,
onSort: PT.func.isRequired,
+ viewAsTable: PT.bool.isRequired,
};
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 341a5372e7..16115573b9 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
@import '~styles/mixins';
.challengeAction {
@@ -159,6 +160,98 @@
.type-tag {
display: inline-block;
+
+ a {
+ color: $tc-white;
+
+ &:active,
+ &:focus,
+ &:hover {
+ color: $tc-white;
+ }
+ }
+
+ &.CH {
+ a {
+ background: $track-code-green;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-green;
+ }
+ }
+ }
+
+ &.F2F {
+ a {
+ background: $track-code-blue;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-blue;
+ }
+ }
+ }
+
+ &.TSK {
+ a {
+ background: $track-code-turquose;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-turquose;
+ }
+ }
+ }
+}
+
+.event-tag {
+ display: inline-block;
+
+ &.CH {
+ a {
+ background-color: $track-code-green-light;
+ color: $track-code-green;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-green-light;
+ color: $track-code-green;
+ }
+ }
+ }
+
+ &.F2F {
+ a {
+ background-color: $track-code-blue-light;
+ color: $track-code-blue;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-blue-light;
+ color: $track-code-blue;
+ }
+ }
+ }
+
+ &.TSK {
+ a {
+ background-color: $track-code-turquose-light;
+ color: $track-code-turquose;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $track-code-turquose-light;
+ color: $track-code-turquose;
+ }
+ }
+ }
}
.qa {
diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx
index d9de9b9717..b7e550869f 100644
--- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx
+++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx
@@ -20,7 +20,7 @@ import style from './style.scss';
export default function SubmissionRow({
isMM, openHistory, member, submissions, score, toggleHistory,
- isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating,
+ isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating, viewAsTable,
}) {
const {
submissionTime, provisionalScore, status, submissionId,
@@ -59,19 +59,19 @@ export default function SubmissionRow({
};
return (
-
+
{
isMM ? (
-
-
FINAL RANK
+
+
FINAL RANK
{
isReviewPhaseComplete ? finalRank || 'N/A' : 'N/A'
}
-
PROVISIONAL RANK
-
+
PROVISIONAL RANK
+
{ provisionalRank || 'N/A' }
@@ -79,14 +79,14 @@ export default function SubmissionRow({
) : null
}
-
-
RATING
+
-
-
USERNAME
+
-
-
FINAL SCORE
+
+
FINAL SCORE
{getFinalReviewResult()}
-
-
PROVISIONAL SCORE
+
+
PROVISIONAL SCORE
{getInitialReviewResult() ? getInitialReviewResult() : 'N/A'}
-
-
SUBMISSION DATE
+
+
SUBMISSION DATE
{moment(submissionTime).format('DD MMM YYYY')} {moment(submissionTime).format('HH:mm:ss')}
-
-
ACTIONS
+
+
ACTIONS
{
+ isMM ? (
+
+ View as
+ {
+ viewAsTable ? (
+
+ setViewAsTable(false)} />
+ setViewAsTable(true)} />
+
+ ) : (
+
+ setViewAsTable(false)} />
+ setViewAsTable(true)} />
+
+ )
+ }
+
+ ) : null
+ }
+
+ {
!isMM && (
{
@@ -564,9 +591,9 @@ class SubmissionsComponent extends React.Component {
)
}
- {
+ {
isMM && (
-
+