Add email to registrants view and clean up submission download functionality for Download challenges

#1537
#1535

Author: jmgasper

src/actions/challenges.js

@@ -22,6 +22,7 @@ import {
   createResource as createResourceAPI,
   deleteResource as deleteResourceAPI
 } from '../services/challenges'
+import { searchProfilesByUserIds } from '../services/user'
 import {
   LOAD_CHALLENGE_DETAILS,
   LOAD_CHALLENGE_METADATA_SUCCESS,
@@ -46,8 +47,10 @@ import {
   DELETE_CHALLENGE_PENDING,
   DELETE_CHALLENGE_SUCCESS,
   DELETE_CHALLENGE_FAILURE,
-  LOAD_CHALLENGE_RESOURCES,
-  CHALLENGE_STATUS
+  CHALLENGE_STATUS,
+  LOAD_CHALLENGE_RESOURCES_SUCCESS,
+  LOAD_CHALLENGE_RESOURCES_PENDING,
+  LOAD_CHALLENGE_RESOURCES_FAILURE
 } from '../config/constants'
 import { loadProject } from './projects'
 import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '../services/projects'
@@ -595,12 +598,29 @@ export function loadChallengeTerms () {
 }
 
 export function loadResources (challengeId) {
-  return (dispatch, getState) => {
+  return async (dispatch, getState) => {
     if (challengeId) {
-      return dispatch({
-        type: LOAD_CHALLENGE_RESOURCES,
-        payload: fetchResources(challengeId)
-      })
+      let challengeResources = []
+      try {
+        dispatch({
+          type: LOAD_CHALLENGE_RESOURCES_PENDING
+        })
+        challengeResources = await fetchResources(challengeId)
+        const memberIds = challengeResources.map(resource => resource.memberId)
+        const memberInfos = await searchProfilesByUserIds(memberIds)
+        _.forEach(challengeResources, (cr) => {
+          const memerInfo = _.find(memberInfos, { userId: parseInt(cr.memberId) })
+          cr.email = memerInfo ? memerInfo.email : ''
+        })
+        dispatch({
+          type: LOAD_CHALLENGE_RESOURCES_SUCCESS,
+          payload: challengeResources
+        })
+      } catch (error) {
+        dispatch({
+          type: LOAD_CHALLENGE_RESOURCES_FAILURE
+        })
+      }
     }
   }
 }

src/components/ChallengeEditor/Registrants/Registrants.module.scss

@@ -36,6 +36,7 @@ $member-red:  #ea1900;
   color: $tc-gray-50;
   display: flex;
   border-bottom: 1px solid $tc-gray-10;
+  gap: 20px;
 
   @include xs-to-sm {
     display: none;
@@ -52,6 +53,7 @@ $member-red:  #ea1900;
 
 .row {
   display: flex;
+  gap: 20px;
   line-height: 50px;
   color: $tc-gray-70;
   font-size: 15px;
@@ -85,7 +87,8 @@ $member-red:  #ea1900;
 .col-3,
 .col-4,
 .col-5,
-.col-6 {
+.col-6,
+.col-7 {
   display: flex;
   align-items: center;
   border: none;
@@ -155,7 +158,8 @@ $member-red:  #ea1900;
 }
 
 .col-2 {
-  width: 150px;
+  width: 100px;
+  flex-shrink: 0;
   margin-left: 20px;
 
   @include xs-to-sm {
@@ -167,7 +171,8 @@ $member-red:  #ea1900;
 }
 
 .col-3 {
-  width: 298px;
+  width: 100px;
+  flex-shrink: 0;
 
   @include xs-to-sm {
     font-size: 15px;
@@ -185,8 +190,28 @@ $member-red:  #ea1900;
   }
 }
 
+.col-7 {
+  width: 200px;
+  margin-left: 20px;
+  flex-shrink: 0;
+
+  span {
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  @include xs-to-sm {
+    padding-left: 0;
+    margin-bottom: 10px;
+    line-height: 20px;
+    width: auto;
+  }
+}
+
 .col-4 {
-  width: 317px;
+  width: 200px;
+  flex-shrink: 0;
 
   @include xs-to-sm {
     margin-bottom: 15px;
@@ -211,7 +236,8 @@ $member-red:  #ea1900;
 .col-6 {
   display: flex;
   align-items: center;
-  width: 351px;
+  width: 200px;
+  flex-shrink: 0;
 
   @include xs-to-sm {
     line-height: 20px;

src/components/ChallengeEditor/Registrants/index.js

@@ -229,6 +229,12 @@ export default class Registrants extends React.Component {
           valueIsString = true
           break
         }
+        case 'Email': {
+          valueA = `${a.email}`.toLowerCase()
+          valueB = `${b.email}`.toLowerCase()
+          valueIsString = true
+          break
+        }
         case 'Registration Date': {
           valueA = new Date(a.created)
           valueB = new Date(b.created)
@@ -339,6 +345,27 @@ export default class Registrants extends React.Component {
               <ReactSVG path={assets(`${ArrowDown}`)} />
             </div>
           </button>
+          <button
+            onClick={() => {
+              this.onSortChange({
+                field: 'Email',
+                sort: field === 'Email' ? revertSort : 'desc'
+              })
+            }}
+            type='button'
+            className={cn(styles['col-7'], styles['table-header'])}
+          >
+            <span role='columnheader'>Email</span>
+            <div
+              className={cn(styles['col-arrow'], {
+                [styles['col-arrow-sort-asc']]:
+                  field === 'Email' && sort === 'asc',
+                [styles['col-arrow-is-sorting']]: field === 'Email'
+              })}
+            >
+              <ReactSVG path={assets(`${ArrowDown}`)} />
+            </div>
+          </button>
           <button
             className={cn(styles['col-4'], styles['table-header'])}
             onClick={() => {
@@ -453,6 +480,12 @@ export default class Registrants extends React.Component {
                     </a>
                   </span>
                 </div>
+                <div className={styles['col-7']}>
+                  <div className={cn(styles['sm-only'], styles['title'])}>
+                    Email
+                  </div>
+                  <span role='cell'>{r.email}</span>
+                </div>
                 <div className={styles['col-4']}>
                   <div className={cn(styles['sm-only'], styles['title'])}>
                     Registration Date

src/components/ChallengeEditor/Submissions/Submissions.module.scss

@@ -332,6 +332,12 @@ $base-unit: 5px;
       flex-shrink: 0;
     }
 
+    .col-9 {
+      display: flex;
+      width: 200px;
+      flex-shrink: 0;
+    }
+
     .col-4 {
       display: flex;
       width: 150px;
@@ -378,7 +384,7 @@ $base-unit: 5px;
 .submissionsContainer {
   display: flex;
   flex-direction: column;
-  max-width: 1100px;
+  max-width: 1300px;
   width: 100%;
   overflow: auto;
 }