PM-839 - disable "launch new" challenge button when project is not active

Author: vas3a

src/components/ChallengesComponent/ProjectStatus/index.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
-import { PROJECT_STATUS } from '../../../config/constants'
+import { PROJECT_STATUSES } from '../../../config/constants'
 import styles from './ProjectStatus.module.scss'
 
 const ProjectStatus = ({ status }) => {
   return (
     <div className={cn(styles.container, styles[status])}>
-      <div>{PROJECT_STATUS.find(item => item.value === status).label}</div>
+      <div>{PROJECT_STATUSES.find(item => item.value === status).label}</div>
     </div>
   )
 }

src/components/ChallengesComponent/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
 import ProjectStatus from './ProjectStatus'
-import { PROJECT_ROLES, TYPEFORM_URL } from '../../config/constants'
+import { PROJECT_ROLES, TYPEFORM_URL, PROJECT_STATUS } from '../../config/constants'
 import { PrimaryButton, OutlineButton } from '../Buttons'
 import ChallengeList from './ChallengeList'
 import styles from './ChallengesComponent.module.scss'
@@ -101,11 +101,15 @@ const ChallengesComponent = ({
                 target={'_blank'}
               />
             )}
-            <Link
-              to={`/projects/${activeProject.id}/challenges/new`}
-            >
-              <PrimaryButton text={'Launch New'} type={'info'} />
-            </Link>
+            {activeProject.status === PROJECT_STATUS.ACTIVE ? (
+              <Link
+                to={`/projects/${activeProject.id}/challenges/new`}
+              >
+                <PrimaryButton text={'Launch New'} type={'info'} />
+              </Link>
+            ) : (
+              <PrimaryButton text={'Launch New'} type={'info'} disabled />
+            )}
           </div>
         ) : (
           <span />

src/components/ProjectCard/index.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import cn from 'classnames'
 import { find } from 'lodash'
 
-import { PROJECT_STATUS } from '../../config/constants'
+import { PROJECT_STATUSES } from '../../config/constants'
 
 import styles from './ProjectCard.module.scss'
 
@@ -18,7 +18,7 @@ const ProjectCard = ({ projectName, projectStatus, projectId, selected, setActiv
       >
         <div className={styles.name}>
           <span>{projectName}</span>
-          <span className={styles.status}>{find(PROJECT_STATUS, { value: projectStatus }).label}</span>
+          <span className={styles.status}>{find(PROJECT_STATUSES, { value: projectStatus }).label}</span>
         </div>
       </Link>
     </div>

src/components/ProjectForm/index.js

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import styles from './ProjectForm.module.scss'
 import { PrimaryButton } from '../Buttons'
 import Select from '../Select'
-import { PROJECT_STATUS, DEFAULT_NDA_UUID } from '../../config/constants'
+import { PROJECT_STATUSES, DEFAULT_NDA_UUID } from '../../config/constants'
 import GroupsFormField from './GroupsFormField'
 
 const ProjectForm = ({
@@ -30,7 +30,7 @@ const ProjectForm = ({
       projectName: isEdit ? projectDetail.name : '',
       description: isEdit ? projectDetail.description : '',
       status: isEdit
-        ? PROJECT_STATUS.find((item) => item.value === projectDetail.status) ||
+        ? PROJECT_STATUSES.find((item) => item.value === projectDetail.status) ||
           null
         : null,
       projectType: isEdit
@@ -127,7 +127,7 @@ const ProjectForm = ({
                   rules={{ required: 'Please select a status' }}
                   render={({ field }) => (
                     <Select
-                      options={PROJECT_STATUS}
+                      options={PROJECT_STATUSES}
                       id='status'
                       {...field}
                       placeholder='Select Project Status'

src/config/constants.js

@@ -408,7 +408,7 @@ export const SPECIAL_CHALLENGE_TAGS = [
 /**
  * Possible statuses of projects
  */
-export const PROJECT_STATUS = [
+export const PROJECT_STATUSES = [
   { label: 'Active', value: 'active' },
   { label: 'In Review', value: 'in_review' },
   { label: 'Reviewed', value: 'reviewed' },
@@ -417,6 +417,15 @@ export const PROJECT_STATUS = [
   { label: 'Paused', value: 'paused' }
 ]
 
+export const PROJECT_STATUS = {
+  ACTIVE: 'active',
+  IN_REVIEW: 'in_review',
+  REVIEWED: 'reviewed',
+  COMPLETED: 'completed',
+  CANCELLED: 'cancelled',
+  PAUSED: 'paused'
+}
+
 export const JOB_ROLE_OPTIONS = [
   { value: null, label: 'Select Role' },
   { value: 'designer', label: 'Designer' },