Search..
+Search...
Matching the criteria with 1.5 million members around the world..
diff --git a/src/routes/InputSkills/components/SearchCard/styles.module.scss b/src/routes/CreateNewTeam/components/SearchCard/styles.module.scss
similarity index 100%
rename from src/routes/InputSkills/components/SearchCard/styles.module.scss
rename to src/routes/CreateNewTeam/components/SearchCard/styles.module.scss
diff --git a/src/routes/CreateNewTeam/index.jsx b/src/routes/CreateNewTeam/index.jsx
index 08701d91..2ff109dc 100644
--- a/src/routes/CreateNewTeam/index.jsx
+++ b/src/routes/CreateNewTeam/index.jsx
@@ -18,11 +18,11 @@ import { postProject } from "services/teams";
import withAuthentication from "../../hoc/withAuthentication";
function CreateNewTeam() {
- const createProject = async () => {
+ const createProjectAndNavigate = async (navigateTo) => {
postProject()
.then((res) => {
const id = _.get(res, "data.id");
- navigate(`/taas/myteams/createnewteam/${id}/skills`);
+ navigate(`/taas/myteams/createnewteam/${id}/${navigateTo}`);
})
.catch((err) => {
toastr.warning("Error", "Failed to create a new team.");
@@ -41,14 +41,14 @@ function CreateNewTeam() {
description="You know you want a front end developer, or a full stack developer, mobile one or others."
icon={ {
- navigate(`/taas/myteams/createnewteam/${projectId}/role`);
+ navigate(`/taas/myteams/createnewteam/${projectId}/roles`);
}, [projectId]);
const toggleSkill = useCallback(
@@ -74,8 +80,10 @@ function InputSkills({ projectId }) {
// mocked search for users with given skills
const search = () => {
setSearchState("searching");
+ setCurrentStage(1, stages, setStages);
searchTimer = setTimeout(() => {
setSearchState("done");
+ setCurrentStage(2, stages, setStages);
}, 3000);
};
@@ -92,22 +100,32 @@ function InputSkills({ projectId }) {
/>
) : searchState === "searching" ? (
+ {addedRoles.map(({ name }) => (
+
+ )}
+ {name}
+ ))}
+ onClick(id)}
+ >
+ {imageUrl && !error ? (
+ 
+ ) : (
+
+ );
+}
+
+RoleItem.propTypes = {
+ id: PT.string,
+ name: PT.string,
+ onClick: PT.func,
+ onDescriptionClick: PT.func,
+ isSelected: PT.bool,
+};
+
+export default RoleItem;
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RoleItem/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/components/RoleItem/styles.module.scss
new file mode 100644
index 00000000..3f5b7652
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/SelectRole/components/RoleItem/styles.module.scss
@@ -0,0 +1,48 @@
+@import "styles/include";
+
+.item-card {
+ border: 1px solid #d4d4d4;
+ border-radius: 5px;
+ padding: 12px 16px;
+ width: 213px;
+ height: 136px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ margin: 0 0 24px 24px;
+ cursor: pointer;
+
+ &.selected {
+ border-color: #0ab88a;
+ background-color: #e0faf3;
+ }
+}
+
+.role-icon {
+ width: 42px;
+ height: 42px;
+ margin-left: 8px;
+}
+
+.item-text {
+ @include font-barlow;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 20px;
+ text-transform: uppercase;
+}
+
+.button {
+ font-size: 14px;
+ line-height: 22px;
+ padding: 0;
+ outline: none;
+ background: none;
+ color: #0D61BF;
+ border: none;
+ text-align: left;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx
new file mode 100644
index 00000000..88bd66f7
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx
@@ -0,0 +1,94 @@
+/**
+ * Roles List
+ * Lists all roles available to apply to a job
+ * and search for. Allows selecting roles and filtering
+ * by name.
+ */
+import React, { useEffect, useState } from "react";
+import { useDebounce } from "react-use";
+import PT from "prop-types";
+import Input from "components/Input";
+import PageHeader from "components/PageHeader";
+import "./styles.module.scss";
+import RoleItem from "../RoleItem";
+import { INPUT_DEBOUNCE_DELAY } from "constants/";
+
+function RolesList({ roles, selectedRoleId, onDescriptionClick, toggleRole }) {
+ const [filteredRoles, setFilteredRoles] = useState(roles);
+ const [filter, setFilter] = useState("");
+ const [debouncedFilter, setDebouncedFilter] = useState("");
+
+ const onFilterChange = (e) => {
+ setFilter(e.target.value);
+ };
+
+ useDebounce(
+ () => {
+ setDebouncedFilter(filter);
+ },
+ INPUT_DEBOUNCE_DELAY,
+ [filter]
+ );
+
+ useEffect(() => {
+ if (debouncedFilter.length > 0) {
+ const filterText = debouncedFilter.toLowerCase();
+ setFilteredRoles(
+ roles.filter((role) => role.name.toLowerCase().includes(filterText))
+ );
+ } else {
+ setFilteredRoles(roles);
+ }
+ }, [debouncedFilter, roles]);
+
+ return (
+ {name}
+ +
+
+
+ {filter && (
+ setFilter("")}
+ >
+ X
+
+ )}
+
+ }
+ />
+
+ );
+}
+
+RolesList.propTypes = {
+ roles: PT.array,
+ selectedRoleId: PT.string,
+ toggleRole: PT.func,
+};
+
+export default RolesList;
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss
new file mode 100644
index 00000000..bc9e544e
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss
@@ -0,0 +1,67 @@
+@import "styles/include";
+
+.roles-list {
+ @include rounded-card;
+ max-width: 746px;
+ margin-right: 20px;
+ position: relative;
+
+ > header {
+ padding: 16px 24px;
+ }
+}
+
+.role-count {
+ position: absolute;
+ font-size: 12px;
+ top: 72px;
+ left: 73px;
+}
+
+// adding "input:not([type="checkbox"])" to make sure that we override reset styles
+input:not([type="checkbox"]).filter-input {
+ display: inline-block;
+ position: relative;
+ width: 300px;
+ background-color: #ffffff;
+ border: 1px solid #aaaaaa;
+ border-radius: 6px;
+ box-sizing: border-box;
+ color: #2a2a2a;
+ font-size: 14px;
+ height: 40px;
+ line-height: 38px;
+ outline: none;
+ padding: 0 15px;
+
+ &:not(:focus) {
+ background-image: url("../../../../../../assets/images/icon-search.svg");
+ background-repeat: no-repeat;
+ background-position: 10px center;
+ text-indent: 20px;
+ }
+
+ &::placeholder {
+ color: #aaaaaa;
+ }
+}
+
+.clear-input-button {
+ position: absolute;
+ right: 35px;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 38px;
+ cursor: pointer;
+ &:hover {
+ color: rgb(216, 24, 24);
+ }
+}
+
+.role-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ margin-right: 24px;
+}
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
new file mode 100644
index 00000000..a8137e94
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
@@ -0,0 +1,191 @@
+/**
+ * Select Role Page
+ *
+ * Gets project id 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 PT from "prop-types";
+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";
+
+function SelectRole({ projectId }) {
+ 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 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);
+ };
+
+ useEffect(() => clearTimeout(searchTimer));
+
+ if (!roles) {
+ return
+ {filteredRoles.map(({ id, name, imageUrl }) => (
+
+
+
+ );
+ }
+
+ if (searchState === "searching") {
+ return (
+
+ {addedRoles.length > 0 && (
+ setRoleDetailsModalOpen(false)}
+ />
+
+
+
+ );
+ }
+
+ if (searchState === "done") {
+ return (
+
+ {matchingProfiles ? setAddAnotherModalOpen(false)}
+ submitDone={submitDone}
+ onContinueClick={submitJob}
+ addAnother={addAnother}
+ />
+ )}
+
+ );
+ }
+}
+
+SelectRole.propTypes = {
+ projectId: PT.string,
+};
+
+export default withAuthentication(SelectRole);
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/styles.module.scss
new file mode 100644
index 00000000..7bacc294
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/SelectRole/styles.module.scss
@@ -0,0 +1,14 @@
+.page {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-start;
+ margin: 42px 35px;
+ .right-side {
+ display: flex;
+ flex-direction: column;
+ & > div:not(:first-child) {
+ margin-top: 16px;
+ }
+ }
+}
diff --git a/src/routes/InputSkills/components/Completeness/index.jsx b/src/routes/InputSkills/components/Completeness/index.jsx
deleted file mode 100644
index 4bc91ac9..00000000
--- a/src/routes/InputSkills/components/Completeness/index.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Completeness Sidebar
- * Shows level of completeness through skill
- * input process and contains a button for
- * searching for users or submitting the job.
- */
-import Button from "components/Button";
-import React from "react";
-import cn from "classnames";
-import PT from "prop-types";
-import CompleteProgress from "../CompleteProgress";
-import "./styles.module.scss";
-import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
-
-function Completeness({ isDisabled, onClick, buttonLabel, stage }) {
- return (
-
+ {matchingProfiles && setAddAnotherModalOpen(true)}
+ />
+
+ {matchingProfiles && (
+
-
- );
-}
-
-Completeness.propTypes = {
- isDisabled: PT.bool,
- onClick: PT.func,
- buttonLabel: PT.string,
- stage: PT.number,
-};
-
-export default Completeness;
diff --git a/src/routes/InputSkills/components/ResultCard/index.jsx b/src/routes/InputSkills/components/ResultCard/index.jsx
deleted file mode 100644
index 01a98935..00000000
--- a/src/routes/InputSkills/components/ResultCard/index.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Result Card
- * Card that appears after searching for
- * users matching given skills. Gives information
- * about costs and number of matching candidates.
- */
-import React, { useState } from "react";
-import "./styles.module.scss";
-import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
-import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg";
-import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
-import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-chat.svg";
-import Curve from "../../../../assets/images/curve.svg";
-import Button from "components/Button";
-
-function ResultCard() {
- const [showRates, setShowRates] = useState(false);
-
- return (
- -
-
- 1 } - )} - > - Input Skills - -
- - Search Member - -
- - Overview of the Results - -
-
- );
-}
-
-export default ResultCard;
diff --git a/src/routes/SelectRole/index.jsx b/src/routes/SelectRole/index.jsx
deleted file mode 100644
index 5f6fa502..00000000
--- a/src/routes/SelectRole/index.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Select Role
- * Page for selecting a role to add to your team
- */
-
-import React from "react";
-
-function SelectRole() {
- return
-
- We have matching profiles
-- We have qualified candidates who match 80% or more of your job - requirements. -
-
-
-
-
- {showRates ? (
-
-
- ) : (
- <>
-
-
-
-
-
-
-
- Full-Time
-(40h / week)
-
-
- $1,800
-/Week
-
-
-
-
- Part-Time
-(30h / week)
-
-
- $1,250
-/Week
-
-
-
-
- Part-Time
-(20h / week)
-
-
- $800
-/Week
-
-
-
-
-
-
- Qualified candidates within
-24h
-
-
-
-
- Interviews can start within
-48h
-
-
-
-
-
- 80%
-Matching rate
-
-
- 300+
-Members matched
-
-
-
- )}
- - 60% of members are available 20 hours / week (part - time) -
-- 20% of members are available 30 hours / week (part - time) -
-- 10% of members are available 40 hours / week (full - time) -
-