Loading...
- +
+ 
setImgError(true)}
- alt={role.name}
- styleName="role-icon"
- />
- ) : (
-
-
+
+
+
+ {showSkills ? (
+ -
+ {skills.map((skill, i) => (
+
- + {skill} + + ))} +
-
-
-
- {role?.name}
-{role?.description}
- +
+
)}
-
-
-
+
);
}
diff --git a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss
index 81daa623..e7470ce5 100644
--- a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss
+++ b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss
@@ -1,55 +1,49 @@
@import "styles/include";
.button-group {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: flex-end;
- :first-child {
- margin-right: 8px;
- }
-}
-
-.tab-button-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
- margin-bottom: 42px;
+ margin-bottom: 30px;
}
-.modal-body {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- text-align: center;
- margin-bottom: 80px;
-
- .role-icon {
- width: 42px;
- height: 42px;
- }
-
- h5 {
- @include font-barlow-condensed;
- font-size: 34px;
- color: #1e94a3;
- text-transform: uppercase;
- font-weight: 500;
- margin-bottom: 10px;
- }
+.body {
+ @include font-roboto;
+ color: #2a2a2a;
+}
- p {
+.markdown-container {
+ // not adds specificity to override style
+ p:not(table) {
@include font-roboto;
+ color: #2a2a2a;
font-size: 16px;
- color: #555555;
line-height: 26px;
}
}
-.cross {
- g {
- stroke: #000;
- }
+.description-item {
+ font-size: 16px;
+ line-height: 26px;
+ margin-bottom: 10px;
+ list-style-type: disc;
+}
+
+.skill-list {
+ margin: 0 30px;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+}
+
+.skill-item {
+ background-color: #e9e9e9;
+ border-radius: 5px;
+ padding: 6px 9px;
+ margin-right: 6px;
+ margin-bottom: 10px;
+ font-size: 12px;
}
diff --git a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx
new file mode 100644
index 00000000..7e8c2bb4
--- /dev/null
+++ b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx
@@ -0,0 +1,176 @@
+/**
+ * SearchContainer
+ *
+ * A container component for the different
+ * search pages. Contains logic and supporting
+ * components for searching for roles.
+ */
+import React, { useCallback, useState } from "react";
+import PT from "prop-types";
+import { toastr } from "react-redux-toastr";
+import { navigate } from "@reach/router";
+import _ from "lodash";
+import AddedRolesAccordion from "../AddedRolesAccordion";
+import Completeness from "../Completeness";
+import SearchCard from "../SearchCard";
+import ResultCard from "../ResultCard";
+import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
+import { createJob } from "services/jobs";
+import { postProject, searchRoles } from "services/teams";
+import { setCurrentStage } from "utils/helpers";
+import AddAnotherModal from "../AddAnotherModal";
+import "./styles.module.scss";
+
+function SearchContainer({
+ stages,
+ setStages,
+ isCompletenessDisabled,
+ children,
+ searchObject,
+ completenessStyle,
+ locationState,
+ reloadRolesPage,
+}) {
+ const [addedRoles, setAddedRoles] = useState(
+ locationState?.addedRoles ? locationState.addedRoles : []
+ );
+ const [searchState, setSearchState] = useState(null);
+ const [matchingRole, setMatchingRole] = useState(null);
+ const [addAnotherModalOpen, setAddAnotherModalOpen] = useState(false);
+ const [submitDone, setSubmitDone] = useState(true);
+ const [prevSearchId, setPrevSearchId] = useState(locationState?.prevSearchId);
+
+ const submitJob = () => {
+ setSubmitDone(false);
+ 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 Creating Project");
+ })
+ .finally(() => {
+ setSubmitDone(true);
+ navigate("/taas/myteams");
+ });
+ };
+
+ const addAnother = () => {
+ if (!reloadRolesPage) {
+ navigate("/taas/myteams/createnewteam/role", {
+ state: { addedRoles, prevSearchId },
+ });
+ return;
+ }
+ setCurrentStage(0, stages, setStages);
+ setSearchState(null);
+ setMatchingRole(null);
+ setAddAnotherModalOpen(false);
+ reloadRolesPage();
+ };
+
+ const search = () => {
+ setCurrentStage(1, stages, setStages);
+ setSearchState("searching");
+ setMatchingRole(null);
+ const searchObjectCopy = { ...searchObject };
+ if (prevSearchId) {
+ searchObjectCopy.previousRoleSearchRequestId = prevSearchId;
+ }
+ searchRoles(searchObjectCopy)
+ .then((res) => {
+ const id = _.get(res, "data.id");
+ const name = _.get(res, "data.name");
+ setPrevSearchId(_.get(res, "data.roleSearchRequestId"));
+ if (name && !name.toLowerCase().includes("niche")) {
+ setMatchingRole(res.data);
+ setAddedRoles((addedRoles) => [...addedRoles, { id, name }]);
+ }
+ })
+ .catch((err) => {
+ console.error(err);
+ })
+ .finally(() => {
+ setCurrentStage(2, stages, setStages);
+ setSearchState("done");
+ });
+ };
+
+ const renderLeftSide = () => {
+ if (!searchState) return children;
+ if (searchState === "searching") return
+ {renderLeftSide()}
+ setAddAnotherModalOpen(false)}
+ submitDone={submitDone}
+ onContinueClick={submitJob}
+ addAnother={addAnother}
+ />
+ )}
+
+ );
+}
+
+SearchContainer.propTypes = {
+ stages: PT.array,
+ setStages: PT.func,
+ isCompletenessDisabled: PT.bool,
+ searchObject: PT.object,
+ children: PT.node,
+ completenessStyle: PT.string,
+ locationState: PT.object,
+ reloadRolesPage: PT.func,
+};
+
+export default SearchContainer;
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/styles.module.scss b/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss
similarity index 99%
rename from src/routes/CreateNewTeam/pages/SelectRole/styles.module.scss
rename to src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss
index 7bacc294..99cec905 100644
--- a/src/routes/CreateNewTeam/pages/SelectRole/styles.module.scss
+++ b/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss
@@ -11,4 +11,4 @@
margin-top: 16px;
}
}
-}
+}
\ No newline at end of file
diff --git a/src/routes/CreateNewTeam/index.jsx b/src/routes/CreateNewTeam/index.jsx
index 62fd1826..34eab93e 100644
--- a/src/routes/CreateNewTeam/index.jsx
+++ b/src/routes/CreateNewTeam/index.jsx
@@ -1,5 +1,9 @@
/**
* Create New Team
+ *
+ * Gets location state from router to pass
+ * along to search pages
+ *
* Landing page for creating new teams
* by selecting a role, inputting skills,
* or inputting a job description
@@ -7,31 +11,20 @@
import React from "react";
import { navigate } from "@reach/router";
import _ from "lodash";
-import { toastr } from "react-redux-toastr";
+import PT from "prop-types";
import Page from "components/Page";
import PageHeader from "components/PageHeader";
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) => {
- postProject()
- .then((res) => {
- const id = _.get(res, "data.id");
- navigate(`/taas/myteams/createnewteam/${id}/${navigateTo}`);
- })
- .catch((err) => {
- toastr.warning("Error", "Failed to create a new team.");
- console.error(err);
- });
- };
+function CreateNewTeam({ location: { state: locationState } }) {
+ const prevSearchId = locationState?.prevSearchId;
+ const addedRoles = locationState?.addedRoles;
- const goToJobDescription = () => {
- navigate(`/taas/myteams/createnewteam/jd`);
+ const goToRoute = (path) => {
+ navigate(path, { state: { prevSearchId, addedRoles } });
};
return (
@@ -45,24 +38,28 @@ function CreateNewTeam() {
description="You know you want a front end developer, or a full stack developer, mobile one or others."
icon={
+ setAddAnotherModalOpen(true) : search}
+ extraStyleName={completenessStyle}
+ buttonLabel={searchState ? "Submit Request" : "Search"}
+ stages={stages}
+ percentage={getPercentage()}
+ />
+
+ {searchState === "done" && matchingRole && (
+
- {!searchState ? (
-
+
- setSkillModalOpen(false)}
- isLoading={isLoadingSkills}
- onContinueClick={onConfirationClick}
- />
-
- ) : searchState === "searching" ? (
-
-
-
-
- ) : (
-
- setModalOpen(false)}
- submitDone={submitDone}
- addAnother={addAnother}
- />
-
- )}
-
+
+ Failed to load skills
; + } - return !skills ? ( -
+ return (
+
- ) : searchState === "searching" ? (
-
-
- ) : (
-
- setModalOpen(false)}
- submitDone={submitDone}
- addAnother={addAnother}
- />
-
+
);
}
InputSkills.propTypes = {
- projectId: PT.string,
+ locationState: PT.object,
};
-export default withAuthentication(InputSkills);
+export default InputSkills;
diff --git a/src/routes/CreateNewTeam/pages/InputSkills/styles.module.scss b/src/routes/CreateNewTeam/pages/InputSkills/styles.module.scss
deleted file mode 100644
index b47da072..00000000
--- a/src/routes/CreateNewTeam/pages/InputSkills/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.page {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: flex-start;
- margin: 42px 35px;
-}
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RoleItem/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/components/RoleItem/styles.module.scss
index 3f5b7652..361d40e8 100644
--- a/src/routes/CreateNewTeam/pages/SelectRole/components/RoleItem/styles.module.scss
+++ b/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;
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss
index bc9e544e..5cd71f66 100644
--- a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss
+++ b/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;
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
index a8137e94..d2dda3fe 100644
--- a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
+++ b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
@@ -1,191 +1,78 @@
/**
* Select Role Page
*
- * Gets project id from the router.
+ * Gets locationState from the router.
*
* Allows selecting a role, searching for users
* with that role, and submitting a job requiring the roles.
*/
-import React, { useCallback, useEffect, useState } from "react";
-import { useData } from "hooks/useData";
-import { navigate } from "@reach/router";
-import { toastr } from "react-redux-toastr";
+import React, { useCallback, useState } from "react";
import PT from "prop-types";
+import { useData } from "hooks/useData";
import RolesList from "./components/RolesList";
-import Completeness from "../../components/Completeness";
-import "./styles.module.scss";
import { getRoles } from "services/roles";
-import { setCurrentStage } from "utils/helpers";
import LoadingIndicator from "components/LoadingIndicator";
-import SearchCard from "../../components/SearchCard";
-import ResultCard from "../../components/ResultCard";
-import NoMatchingProfilesResultCard from "../../components/NoMatchingProfilesResultCard";
-import { createJob } from "services/jobs";
-import AddAnotherModal from "../../components/AddAnotherModal";
import RoleDetailsModal from "../../components/RoleDetailsModal";
-import withAuthentication from "../../../../hoc/withAuthentication";
-import AddedRolesAccordion from "./components/AddedRolesAccordion";
+import SearchContainer from "../../components/SearchContainer";
-function SelectRole({ projectId }) {
+function SelectRole({ location: { state: locationState } }) {
const [stages, setStages] = useState([
{ name: "Select a Role", isCurrent: true },
{ name: "Search Member" },
{ name: "Overview of the Results" },
]);
- const [addedRoles, setAddedRoles] = useState([]);
const [selectedRoleId, setSelectedRoleId] = useState(null);
- const [searchState, setSearchState] = useState(null);
- const [matchingProfiles, setMatchingProfiles] = useState(null);
- const [addAnotherModalOpen, setAddAnotherModalOpen] = useState(false);
const [roleDetailsModalOpen, setRoleDetailsModalOpen] = useState(false);
const [roleDetailsModalId, setRoleDetailsModalId] = useState(null);
- const [submitDone, setSubmitDone] = useState(true);
const [roles, loadingError] = useData(getRoles);
- let searchTimer;
-
- const submitJob = () => {
- setSubmitDone(false);
- 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");
- })
- .finally(() => {
- setSubmitDone(true);
- navigate("/taas/myteams");
- });
- };
-
- const addAnother = useCallback(() => {
- setSelectedRoleId(null);
- setCurrentStage(0, stages, setStages);
- setAddAnotherModalOpen(false);
- setSearchState(null);
- }, [stages]);
-
- const toggleRole = useCallback(
- (id) => {
- setSelectedRoleId((selectedRoleId) =>
- id === selectedRoleId ? null : id
- );
- },
- [setSelectedRoleId]
- );
+ const toggleRole = useCallback((id) => {
+ setSelectedRoleId((selectedRoleId) => (id === selectedRoleId ? null : id));
+ }, []);
const onDescriptionClick = useCallback((roleId) => {
setRoleDetailsModalId(roleId);
setRoleDetailsModalOpen(true);
}, []);
- // mocked search for users with given roles
- const search = () => {
- setCurrentStage(1, stages, setStages);
- setSearchState("searching");
- searchTimer = setTimeout(() => {
- setCurrentStage(2, stages, setStages);
- setMatchingProfiles(null); // display no matching profiles screen for a while
- setSearchState("done");
- setTimeout(() => setMatchingProfiles(true), 2000);
- // add selected role
- const { id, name } = roles.find((r) => r.id === selectedRoleId);
- setAddedRoles((addedRoles) => [...addedRoles, { id, name }]);
- }, 3000);
+ const resetState = () => {
+ setSelectedRoleId(null);
+ setRoleDetailsModalId(false);
+ setRoleDetailsModalId(null);
};
- useEffect(() => clearTimeout(searchTimer));
-
if (!roles) {
return
-
- );
- }
-
- if (searchState === "searching") {
- return (
-
- {addedRoles.length > 0 && (
- setRoleDetailsModalOpen(false)}
- />
-
-
-
- );
- }
-
- if (searchState === "done") {
- return (
-
- {matchingProfiles ? setAddAnotherModalOpen(false)}
- submitDone={submitDone}
- onContinueClick={submitJob}
- addAnother={addAnother}
- />
- )}
-
- );
- }
+ return (
+
- {matchingProfiles && setAddAnotherModalOpen(true)}
- />
-
- {matchingProfiles && (
-