[challenge] Add Projects management functionality - veshu submission

Author: vas3a

package-lock.json

@@ -13,6 +13,7 @@
     "axios": "^0.19.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
+    "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
     "babel-plugin-named-asset-import": "^0.3.0",
     "babel-preset-react-app": "^7.0.0",
@@ -25,6 +26,18 @@
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
     "easymde": "^2.18.0",
+    "eslint": "5.6.0",
+    "eslint-config-react-app": "^3.0.6",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-config-standard-react": "^7.0.2",
+    "eslint-loader": "2.1.1",
+    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-react": "7.11.1",
+    "eslint-plugin-standard": "^4.0.0",
     "express": "^4.16.4",
     "fflate": "^0.7.4",
     "file-loader": "2.0.0",
@@ -33,6 +46,9 @@
     "fs-extra": "7.0.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
+    "jest": "23.6.0",
+    "jest-pnp-resolver": "1.0.1",
+    "jest-resolve": "23.6.0",
     "jquery": "^3.4.1",
     "jstimezonedetect": "^1.0.6",
     "jwt-decode": "^2.2.0",
@@ -63,6 +79,7 @@
     "react-dom": "^16.7.0",
     "react-google-charts": "^3.0.13",
     "react-helmet": "^5.2.0",
+    "react-hook-form": "^7.54.2",
     "react-hot-loader": "^4.13.1",
     "react-idle-timer": "^4.6.4",
     "react-js-pagination": "^3.0.3",
@@ -89,6 +106,7 @@
     "remark-parse": "^10.0.1",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
+    "standard": "^12.0.1",
     "style-loader": "0.23.0",
     "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
     "terser": "^3.16.1",
@@ -99,24 +117,7 @@
     "webpack": "^4.43.0",
     "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "2.0.4",
-    "xss": "^1.0.6",
-    "standard": "^12.0.1",
-    "eslint": "5.6.0",
-    "eslint-config-react-app": "^3.0.6",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-config-standard-react": "^7.0.2",
-    "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-react": "7.11.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "jest": "23.6.0",
-    "jest-pnp-resolver": "1.0.1",
-    "jest-resolve": "23.6.0",
-    "babel-jest": "23.6.0"
+    "xss": "^1.0.6"
   },
   "scripts": {
     "start": "node server.js",
@@ -188,7 +189,7 @@
     ]
   },
   "devDependencies": {
-    "standard": "^12.0.1",
+    "babel-jest": "23.6.0",
     "eslint": "5.6.0",
     "eslint-config-react-app": "^3.0.6",
     "eslint-config-standard": "^12.0.0",
@@ -204,7 +205,7 @@
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.1",
     "jest-resolve": "23.6.0",
-    "babel-jest": "23.6.0"
+    "standard": "^12.0.1"
   },
   "volta": {
     "node": "12.17.0"

package.json

@@ -3,12 +3,18 @@ import {
   LOAD_CHALLENGE_MEMBERS_SUCCESS,
   LOAD_PROJECT_DETAILS,
   LOAD_PROJECT_PHASES,
-  LOAD_CHALLENGE_MEMBERS
+  LOAD_CHALLENGE_MEMBERS,
+  LOAD_PROJECT_TYPES,
+  CREATE_PROJECT,
+  UPDATE_PROJECT
 } from '../config/constants'
 import {
   fetchProjectById,
   fetchBillingAccount,
-  fetchProjectPhases
+  fetchProjectPhases,
+  getProjectTypes,
+  createProjectApi,
+  updateProjectApi
 } from '../services/projects'
 
 /**
@@ -45,6 +51,42 @@ export function loadProject (projectId, filterMembers = true) {
   }
 }
 
+/**
+ * Loads project types
+ */
+export function loadProjectTypes () {
+  return (dispatch) => {
+    return dispatch({
+      type: LOAD_PROJECT_TYPES,
+      payload: getProjectTypes()
+    })
+  }
+}
+
+/**
+ * Creates a project
+ */
+export function createProject (project) {
+  return (dispatch) => {
+    return dispatch({
+      type: CREATE_PROJECT,
+      payload: createProjectApi(project)
+    })
+  }
+}
+
+/**
+ * Updates a project
+ */
+export function updateProject (projectId, project) {
+  return (dispatch) => {
+    return dispatch({
+      type: UPDATE_PROJECT,
+      payload: updateProjectApi(projectId, project)
+    })
+  }
+}
+
 export function reloadProjectMembers (projectId) {
   return (dispatch) => {
     return dispatch({

src/actions/projects.js

@@ -15,6 +15,19 @@
   line-height: 29px;
   color: $challenges-title;
   text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.status {
+  margin-left: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+  background-color: #f0f0f0;
+  padding: 4px 8px;
+  border-radius: 25px;
+  color: $challenges-title;
 }
 
 .titleContainer {

src/components/ChallengesComponent/ChallengesComponent.module.scss

@@ -0,0 +1,48 @@
+
+@import "../../../styles/includes";
+.container {
+    min-height: 22px;
+    width: 86px;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-left: 4px;
+  
+    div {
+      @include roboto;
+  
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 17px;
+      color: $white;
+      text-transform: capitalize;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 4px 8px;
+
+    }
+  
+    &.in_review,
+    &.reviewed {
+      background-color: $status-gray;
+    }
+  
+    &.active {
+      background-color: $status-green;
+    }
+  
+    &.completed {
+      background-color: $status-blue;
+    }
+  
+    &.cancelled {
+      background-color: $tc-black;
+    }
+  
+    &.paused {
+      background-color: $tc-red;
+    }
+  }

src/components/ChallengesComponent/ProjectStatus/ProjectStatus.module.scss

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import { PROJECT_STATUS } 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>
+  )
+}
+
+ProjectStatus.propTypes = {
+  status: PropTypes.string
+}
+
+export default ProjectStatus

src/components/ChallengesComponent/ProjectStatus/index.js

@@ -6,12 +6,12 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
-import { CONNECT_APP_URL, PROJECT_ROLES } from '../../config/constants'
+import { PROJECT_ROLES } from '../../config/constants'
 import { PrimaryButton } from '../Buttons'
 import ChallengeList from './ChallengeList'
 import styles from './ChallengesComponent.module.scss'
-import { checkReadOnlyRoles } from '../../util/tc'
-
+import { checkReadOnlyRoles, checkAdminOrCopilot } from '../../util/tc'
+import ProjectStatus from './ProjectStatus'
 const ChallengesComponent = ({
   challenges,
   projects,
@@ -62,17 +62,16 @@ const ChallengesComponent = ({
         <div className={styles.titleLinks}>
           <div className={styles.title}>
             {activeProject ? activeProject.name : ''}
+            {activeProject && activeProject.status && <ProjectStatus className={styles.status} status={activeProject.status} />}
           </div>
-          {activeProject && activeProject.id && (
+          {activeProject && activeProject.id && checkAdminOrCopilot(auth.token) && (
             <span>
               (
-              <a
-                href={`${CONNECT_APP_URL}/projects/${activeProject.id}`}
-                target='_blank'
-                rel='noopener noreferrer'
+              <Link
+                to={`/projects/${activeProject.id}/edit`}
               >
-                View Project
-              </a>
+                Edit Project
+              </Link>
               )
             </span>
           )}

src/components/ChallengesComponent/index.js

@@ -0,0 +1,83 @@
+@import "../../styles/includes";
+form {
+  width: 100%;
+
+  .group {
+    @include form-container-default();
+    @include form-container-common();
+    background-color: $white;
+    width: 100%;
+    border-radius: 6px;
+    box-sizing: border-box;
+
+    .row {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      margin: 30px 30px 0 30px;
+      align-content: space-between;
+      justify-content: flex-start;
+      &:last-of-type {
+        margin-bottom: 30px;
+      }
+    }
+    .formLabel {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      margin-bottom: auto;
+      padding-top: 10px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      span {
+        color: $tc-red;
+      }
+    }
+    .formField {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      max-width: 600px;
+      min-width: 600px;
+      textarea {
+        width: 100%;
+        height: 100px;
+        box-sizing: border-box;
+        border: 1px solid $tc-gray-40;
+        @include roboto;
+        border-radius: 2px;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 19px;
+        color: $tc-gray-80;
+        padding: 10px 20px;
+      }
+    }
+
+    .error {
+      padding-right: 40px;
+      padding-bottom: 5px;
+      color: $tc-red;
+
+      .errorMessage {
+        font-size: 25px;
+      }
+    }
+  }
+  .actionButtons {
+    top: 20px;
+    display: flex;
+    justify-content: center;
+    button {
+      height: 40px;
+      max-width: 100px;
+    }
+  }
+}