- Updated CreateNewTeam page so selecting role does not create a team

Bug fixes:
 - topcoder-archive#293
 - topcoder-archive#292

Author: mbaghel

src/root.component.jsx

@@ -36,7 +36,7 @@ export default function Root() {
           <TeamAccess path="/taas/myteams/:teamId/access" />
           <InputJobDescription path="/taas/myteams/createnewteam/jd" />
           <InputSkills path="/taas/myteams/createnewteam/:projectId/skills" />
-          <SelectRole path="/taas/myteams/createnewteam/:projectId/role" />
+          <SelectRole path="/taas/myteams/createnewteam/role" />
         </Router>
 
         {/* Global config for Toastr popups */}

src/routes/CreateNewTeam/index.jsx

@@ -14,8 +14,6 @@ import LandingBox from "./components/LandingBox";
 import IconMultipleActionsCheck from "../../assets/images/icon-multiple-actions-check-2.svg";
 import IconListQuill from "../../assets/images/icon-list-quill.svg";
 import IconOfficeFileText from "../../assets/images/icon-office-file-text.svg";
-import { postProject } from "services/teams";
-import withAuthentication from "../../hoc/withAuthentication";
 
 function CreateNewTeam() {
   const createProjectAndNavigate = async (navigateTo) => {
@@ -30,6 +28,10 @@ function CreateNewTeam() {
       });
   };
 
+  const goToSelectRole = () => {
+    navigate("/taas/myteams/createnewteam/role");
+  };
+
   const goToJobDescription = () => {
     navigate(`/taas/myteams/createnewteam/jd`);
   };
@@ -45,7 +47,7 @@ function CreateNewTeam() {
         description="You know you want a front end developer, or a full stack developer, mobile one or others."
         icon={<IconMultipleActionsCheck />}
         backgroundImage="linear-gradient(101.95deg, #8B41B0 0%, #EF476F 100%)"
-        onClick={() => createProjectAndNavigate("role")}
+        onClick={goToSelectRole}
       />
       <LandingBox
         title="Input Skills"
@@ -65,4 +67,4 @@ function CreateNewTeam() {
   );
 }
 
-export default withAuthentication(CreateNewTeam);
+export default CreateNewTeam;

src/routes/CreateNewTeam/pages/SelectRole/components/RoleItem/styles.module.scss

@@ -4,12 +4,13 @@
   border: 1px solid #d4d4d4;
   border-radius: 5px;
   padding: 12px 16px;
-  width: 213px;
+  width: 212px;
   height: 136px;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
-  margin: 0 0 24px 24px;
+  align-items: flex-start;
+  margin: 0 0 23px 23px;
   cursor: pointer;
 
   &.selected {
@@ -22,6 +23,7 @@
   width: 42px;
   height: 42px;
   margin-left: 8px;
+  object-fit: cover;
 }
 
 .item-text {
@@ -38,7 +40,7 @@
   padding: 0;
   outline: none;
   background: none;
-  color: #0D61BF;
+  color: #0d61bf;
   border: none;
   text-align: left;
 

src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss

@@ -5,6 +5,8 @@
   max-width: 746px;
   margin-right: 20px;
   position: relative;
+  height: 80vh;
+  overflow-y: scroll;
 
   > header {
     padding: 16px 24px;

src/routes/CreateNewTeam/pages/SelectRole/index.jsx

@@ -10,7 +10,6 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useData } from "hooks/useData";
 import { navigate } from "@reach/router";
 import { toastr } from "react-redux-toastr";
-import PT from "prop-types";
 import RolesList from "./components/RolesList";
 import Completeness from "../../components/Completeness";
 import "./styles.module.scss";
@@ -25,8 +24,10 @@ import AddAnotherModal from "../../components/AddAnotherModal";
 import RoleDetailsModal from "../../components/RoleDetailsModal";
 import withAuthentication from "../../../../hoc/withAuthentication";
 import AddedRolesAccordion from "./components/AddedRolesAccordion";
+import { postProject } from "services/teams";
+import _ from "lodash";
 
-function SelectRole({ projectId }) {
+function SelectRole() {
   const [stages, setStages] = useState([
     { name: "Select a Role", isCurrent: true },
     { name: "Search Member" },
@@ -47,19 +48,28 @@ function SelectRole({ projectId }) {
 
   const submitJob = () => {
     setSubmitDone(false);
-    createJob({
-      projectId,
-      title: `job-${Date()}`,
-      skills: [],
-      roleIds: addedRoles.map((r) => r.id),
-      numPositions: 1,
-    })
-      .then(() => {
-        toastr.success("Job Submitted");
+    postProject()
+      .then((res) => {
+        const projectId = _.get(res, "data.id");
+
+        createJob({
+          projectId,
+          title: `job-${Date()}`,
+          skills: [],
+          roleIds: addedRoles.map((r) => r.id),
+          numPositions: 1,
+        })
+          .then(() => {
+            toastr.success("Job Submitted");
+          })
+          .catch((err) => {
+            console.error(err);
+            toastr.warning("Error Submitting Job");
+          });
       })
       .catch((err) => {
         console.error(err);
-        toastr.warning("Error Submitting Job");
+        toastr.warning("Error Creating Project");
       })
       .finally(() => {
         setSubmitDone(true);
@@ -184,8 +194,4 @@ function SelectRole({ projectId }) {
   }
 }
 
-SelectRole.propTypes = {
-  projectId: PT.string,
-};
-
-export default withAuthentication(SelectRole);
+export default SelectRole;