fix: issue #1169

Author: yoution

config/constants/development.js

@@ -18,8 +18,10 @@ module.exports = {
   TERMS_API_URL: `${DEV_API_HOSTNAME}/v5/terms`,
   RESOURCES_API_URL: `${DEV_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${DEV_API_HOSTNAME}/v5/resource-roles`,
+  SUBMISSIONS_API_URL: `${DEV_API_HOSTNAME}/v5/submissions`,
   PLATFORMS_V4_API_URL: `${DEV_API_HOSTNAME}/v4/platforms`,
   TECHNOLOGIES_V4_API_URL: `${DEV_API_HOSTNAME}/v4/technologies`,
+  STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,
   DIRECT_PROJECT_URL: `https://www.${DOMAIN}/direct`,
   ONLINE_REVIEW_URL: `https://software.${DOMAIN}`,

config/constants/production.js

@@ -18,8 +18,10 @@ module.exports = {
   TERMS_API_URL: `${PROD_API_HOSTNAME}/v5/terms`,
   RESOURCES_API_URL: `${PROD_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${PROD_API_HOSTNAME}/v5/resource-roles`,
+  SUBMISSIONS_API_URL: `${PROD_API_HOSTNAME}/v5/submissions`,
   PLATFORMS_V4_API_URL: `${PROD_API_HOSTNAME}/v4/platforms`,
   TECHNOLOGIES_V4_API_URL: `${PROD_API_HOSTNAME}/v4/technologies`,
+  STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,
   DIRECT_PROJECT_URL: `https://www.${DOMAIN}/direct`,
   ONLINE_REVIEW_URL: `https://software.${DOMAIN}`,

src/actions/challengeSubmissions.js

@@ -0,0 +1,14 @@
+import { fetchSubmissions } from '../services/challenges'
+
+import { LOAD_CHALLENGE_SUBMISSIONS } from '../config/constants'
+
+export function loadSubmissions (challengeId) {
+  return dispatch => {
+    if (challengeId) {
+      dispatch({
+        type: LOAD_CHALLENGE_SUBMISSIONS,
+        payload: fetchSubmissions(challengeId)
+      })
+    }
+  }
+}

src/assets/images/lock.svg

@@ -1,5 +1,44 @@
 @import '../../../styles/includes';
 
+$tc-dark-blue: #0681ff;
+$tc-white: #FFFFFF;
+
+
+.challenge-view-selector {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  position: relative;
+  border-bottom: 1px solid silver;
+
+  @include xs-to-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: auto;
+  }
+
+  .challenge-selector-common {
+    font-family: roboto, sans-serif;
+    font-size: 13px;
+    line-height: 30px;
+    margin: 10px 20px 0;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .challenge-selected-view {
+    font-weight: 700;
+    color: $tc-dark-blue;
+    border-bottom: 3px solid $tc-dark-blue;
+  }
+
+  .challenge-unselected-view {
+    font-weight: 400;
+    color: $tc-gray-70;
+    border-bottom: 3px hidden $tc-white;
+  }
+}
+
 .list {
   width: 100%;
   display: flex;

src/components/ChallengeEditor/ChallengeViewTabs/ChallengeViewTabs.module.scss

@@ -3,21 +3,31 @@
  */
 import React, { useState, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+import cn from 'classnames'
+import _ from 'lodash'
 
 import ChallengeViewComponent from '../ChallengeView'
 import Registrants from '../Registrants'
+import Submissions from '../Submissions'
 import { getResourceRoleByName } from '../../../util/tc'
 import 'react-tabs/style/react-tabs.css'
 import styles from './ChallengeViewTabs.module.scss'
 
+function getSelectorStyle (selectedView, currentView) {
+  return cn(styles['challenge-selector-common'], {
+    [styles['challenge-selected-view']]: selectedView === currentView,
+    [styles['challenge-unselected-view']]: selectedView !== currentView
+  })
+}
+
 const ChallengeViewTabs = ({
   projectDetail,
   challenge,
   attachments,
   isBillingAccountExpired,
   metadata,
   challengeResources,
+  challengeSubmissions,
   token,
   isLoading,
   challengeId,
@@ -38,23 +48,64 @@ const ChallengeViewTabs = ({
     }
   }, [metadata, challengeResources])
 
+  const submissions = useMemo(() => {
+    return _.map(challengeSubmissions, s => {
+      s.registrant = _.find(registrants, r => {
+        return +r.memberId === s.memberId
+      })
+      return s
+    })
+  }, [challengeSubmissions, registrants])
   return (
     <div className={styles.list}>
-      <Tabs
-        selectedIndex={selectedTab}
-        className={styles.tabsContainer}
-        onSelect={index => {
-          setSelectedTab(index)
-        }}
-      >
-        <TabList>
-          <Tab>DETAILS</Tab>
-          <Tab>REGISTRANTS({registrants.length})</Tab>
-        </TabList>
-        <TabPanel />
-        <TabPanel />
-        <TabPanel />
-      </Tabs>
+      <div className={styles['challenge-view-selector']}>
+        <a
+          tabIndex='0'
+          role='tab'
+          aria-selected={selectedTab === 0}
+          onClick={e => {
+            setSelectedTab(0)
+          }}
+          onKeyPress={e => {
+            setSelectedTab(0)
+          }}
+          className={getSelectorStyle(selectedTab, 0)}
+        >
+          DETAILS
+        </a>
+        {registrants.length ? (
+          <a
+            tabIndex='1'
+            role='tab'
+            aria-selected={selectedTab === 1}
+            onClick={e => {
+              setSelectedTab(1)
+            }}
+            onKeyPress={e => {
+              setSelectedTab(1)
+            }}
+            className={getSelectorStyle(selectedTab, 1)}
+          >
+            REGISTRANTS ({registrants.length})
+          </a>
+        ) : null}
+        {challengeSubmissions.length ? (
+          <a
+            tabIndex='2'
+            role='tab'
+            aria-selected={selectedTab === 2}
+            onClick={e => {
+              setSelectedTab(2)
+            }}
+            onKeyPress={e => {
+              setSelectedTab(2)
+            }}
+            className={getSelectorStyle(selectedTab, 2)}
+          >
+            SUBMISSIONS ({submissions.length})
+          </a>
+        ) : null}
+      </div>
       {selectedTab === 0 && (
         <ChallengeViewComponent
           isLoading={isLoading}
@@ -73,10 +124,10 @@ const ChallengeViewTabs = ({
         />
       )}
       {selectedTab === 1 && (
-        <Registrants
-          challenge={challenge}
-          registrants={registrants}
-        />
+        <Registrants challenge={challenge} registrants={registrants} />
+      )}
+      {selectedTab === 2 && (
+        <Submissions challenge={challenge} submissions={submissions} />
       )}
     </div>
   )
@@ -100,6 +151,7 @@ ChallengeViewTabs.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   challengeId: PropTypes.string.isRequired,
   challengeResources: PropTypes.arrayOf(PropTypes.object),
+  challengeSubmissions: PropTypes.arrayOf(PropTypes.object),
   assignedMemberDetails: PropTypes.shape(),
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -8,6 +8,7 @@ import PT from 'prop-types'
 import moment from 'moment'
 import _ from 'lodash'
 import cn from 'classnames'
+import { getTCMemberURL } from '../../../config/constants'
 import ReactSVG from 'react-svg'
 import { getRatingLevel, sortList } from '../../../util/tc'
 import styles from './Registrants.module.scss'
@@ -440,7 +441,7 @@ export default class Registrants extends React.Component {
                 <div className={styles['col-3']}>
                   <span role='cell'>
                     <a
-                      href={`${window.origin}/members/${r.memberHandle}`}
+                      href={getTCMemberURL(r.memberHandle)}
 
                       className={cn({
                         [styles[`level-${getRatingLevel(_.get(r, 'rating', 0))}`]]: !isDesign