Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit cef5b5a

Browse files
mbaghelmbaghel
committed
- Style fixes for ResultCard, SearchCard
- Style fixes for SkillsList and RolesList, moved common elements to new ItemList component
1 parent fad0d28 commit cef5b5a

File tree

9 files changed

+173
-266
lines changed

9 files changed

+173
-266
lines changed

‎src/routes/CreateNewTeam/components/ItemList/index.jsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { useEffect, useState } from "react";
2+
import PropTypes from "prop-types";
3+
import { useDebounce } from "react-use";
4+
import { INPUT_DEBOUNCE_DELAY } from "constants/";
5+
import PageHeader from "components/PageHeader";
6+
import "./styles.module.scss";
7+
import Input from "components/Input";
8+
9+
function ItemList({
10+
filterItems,
11+
title,
12+
filterPlaceholder,
13+
subtitle,
14+
children,
15+
}) {
16+
const [filter, setFilter] = useState("");
17+
const [debouncedFilter, setDebouncedFilter] = useState("");
18+
19+
const onFilterChange = (e) => {
20+
setFilter(e.target.value);
21+
};
22+
23+
useDebounce(
24+
() => {
25+
setDebouncedFilter(filter);
26+
},
27+
INPUT_DEBOUNCE_DELAY,
28+
[filter]
29+
);
30+
31+
useEffect(() => {
32+
const filterText = debouncedFilter.toLowerCase();
33+
filterItems(filterText);
34+
}, [debouncedFilter, filterItems]);
35+
36+
return (
37+
<div styleName="item-list">
38+
<PageHeader
39+
title={title}
40+
backTo="/taas/myteams/createnewteam"
41+
aside={
42+
<>
43+
<Input
44+
styleName="filter-input"
45+
placeholder={filterPlaceholder}
46+
value={filter}
47+
onChange={onFilterChange}
48+
/>
49+
{filter && (
50+
<span
51+
role="button"
52+
tabIndex="0"
53+
title="Clear"
54+
styleName="clear-input-button"
55+
onClick={() => setFilter("")}
56+
>
57+
X
58+
</span>
59+
)}
60+
</>
61+
}
62+
/>
63+
{subtitle && <p styleName="subtitle">{subtitle}</p>}
64+
<div styleName="list-container">{children}</div>
65+
</div>
66+
);
67+
}
68+
69+
ItemList.propTypes = {};
70+
71+
export default ItemList;

‎src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss‎ renamed to ‎src/routes/CreateNewTeam/components/ItemList/styles.module.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@import "styles/include";
22

3-
.roles-list {
3+
.item-list {
44
@include rounded-card;
55
max-width: 746px;
6+
width: 100%;
67
margin-right: 20px;
78
position: relative;
89
height: 80vh;
@@ -13,7 +14,7 @@
1314
}
1415
}
1516

16-
.role-count {
17+
.subtitle {
1718
position: absolute;
1819
font-size: 12px;
1920
top: 72px;
@@ -37,7 +38,7 @@ input:not([type="checkbox"]).filter-input {
3738
padding: 0 15px;
3839

3940
&:not(:focus) {
40-
background-image: url("../../../../../../assets/images/icon-search.svg");
41+
background-image: url("../../../../assets/images/icon-search.svg");
4142
background-repeat: no-repeat;
4243
background-position: 10px center;
4344
text-indent: 20px;
@@ -60,10 +61,10 @@ input:not([type="checkbox"]).filter-input {
6061
}
6162
}
6263

63-
.role-container {
64+
.list-container {
6465
display: flex;
6566
flex-direction: row;
6667
justify-content: flex-start;
6768
flex-wrap: wrap;
6869
margin-right: 24px;
69-
}
70+
}

‎src/routes/CreateNewTeam/components/ResultCard/index.jsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ function ResultCard({ role }) {
2929
isExternalMember,
3030
rates: [rates],
3131
} = role;
32-
const [userHandle, setUserHandle] = useState("handle");
32+
const [userHandle, setUserHandle] = useState(null);
3333
const [showRates, setShowRates] = useState(false);
3434

3535
useEffect(() => {
3636
getAuthUserProfile().then((res) => {
37-
setUserHandle(res.handle || "handle");
37+
setUserHandle(res.handle || null);
3838
});
3939
}, []);
4040

@@ -68,30 +68,32 @@ function ResultCard({ role }) {
6868
</div>
6969
{showRates && !isExternalMember && (
7070
<div styleName="xeno-rates">
71-
<p styleName="greeting-txt">
72-
Hi {userHandle}, we have special rates for you as a Xeno User!
73-
</p>
71+
{userHandle && (
72+
<p styleName="greeting-txt">
73+
Hi {userHandle}, we have special rates for you as a Xeno User!
74+
</p>
75+
)}
7476
<div styleName="rates">
7577
<div styleName="rate-info">
7678
<div styleName="rate-heading">
7779
<h4>Full-Time</h4>
7880
<p>(40h / week)</p>
7981
</div>
80-
<div styleName="senior">
82+
<div styleName="global">
8183
<h4>Global Rate</h4>
8284
<div styleName="cost">
8385
<h4>{formatRate(rates.global)}</h4>
8486
<p>/Week</p>
8587
</div>
8688
</div>
87-
<div styleName="standard">
89+
<div styleName="in-country">
8890
<h4>In-Country Rate</h4>
8991
<div styleName="cost">
9092
<h4>{formatRate(rates.inCountry)}</h4>
9193
<p>/Week</p>
9294
</div>
9395
</div>
94-
<div styleName="junior">
96+
<div styleName="offshore">
9597
<h4>Offshore Rate</h4>
9698
<div styleName="cost">
9799
<h4>{formatRate(rates.offShore)}</h4>
@@ -104,21 +106,21 @@ function ResultCard({ role }) {
104106
<h4>Part-Time</h4>
105107
<p>(30h / week)</p>
106108
</div>
107-
<div styleName="senior">
109+
<div styleName="global">
108110
<h4>Global Rate</h4>
109111
<div styleName="cost">
110112
<h4>{formatRate(rates.rate30Global)}</h4>
111113
<p>/Week</p>
112114
</div>
113115
</div>
114-
<div styleName="standard">
116+
<div styleName="in-country">
115117
<h4>In-Country Rate</h4>
116118
<div styleName="cost">
117119
<h4>{formatRate(rates.rate30InCountry)}</h4>
118120
<p>/Week</p>
119121
</div>
120122
</div>
121-
<div styleName="junior">
123+
<div styleName="offshore">
122124
<h4>Offshore Rate</h4>
123125
<div styleName="cost">
124126
<h4>{formatRate(rates.rate30OffShore)}</h4>
@@ -131,21 +133,21 @@ function ResultCard({ role }) {
131133
<h4>Part-Time</h4>
132134
<p>(20h / week)</p>
133135
</div>
134-
<div styleName="senior">
136+
<div styleName="global">
135137
<h4>Global Rate</h4>
136138
<div styleName="cost">
137139
<h4>{formatRate(rates.rate20Global)}</h4>
138140
<p>/Week</p>
139141
</div>
140142
</div>
141-
<div styleName="standard">
143+
<div styleName="in-country">
142144
<h4>In-Country Rate</h4>
143145
<div styleName="cost">
144146
<h4>{formatRate(rates.rate20InCountry)}</h4>
145147
<p>/Week</p>
146148
</div>
147149
</div>
148-
<div styleName="junior">
150+
<div styleName="offshore">
149151
<h4>Offshore Rate</h4>
150152
<div styleName="cost">
151153
<h4>{formatRate(rates.rate20OffShore)}</h4>

‎src/routes/CreateNewTeam/components/ResultCard/styles.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,9 @@
167167
margin-left: 3px;
168168
}
169169
}
170-
.senior,
171-
.standard,
172-
.junior {
170+
.global,
171+
.in-country,
172+
.offshore {
173173
display: flex;
174174
flex-direction: column;
175175
position: relative;
@@ -210,13 +210,13 @@
210210
}
211211
}
212212
}
213-
.senior::before {
213+
.global::before {
214214
background-color: #c99014;
215215
}
216-
.standard::before {
216+
.in-country::before {
217217
background-color: #716d67;
218218
}
219-
.junior::before {
219+
.offshore::before {
220220
background-color: #854e29;
221221
}
222222
}

‎src/routes/CreateNewTeam/components/SearchCard/styles.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
max-width: 746px;
66
width: 50vw;
77
margin-right: 30px;
8-
height: 80vh;
8+
padding-bottom: 96px;
99
}
1010

1111
.heading {

‎src/routes/CreateNewTeam/components/SearchContainer/index.jsx‎

Lines changed: 8 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,24 @@
77
*/
88
import React, { useCallback, useState } from "react";
99
import PT from "prop-types";
10-
import { toastr } from "react-redux-toastr";
1110
import _ from "lodash";
1211
import { useDispatch, useSelector } from "react-redux";
1312
import AddedRolesAccordion from "../AddedRolesAccordion";
1413
import Completeness from "../Completeness";
1514
import SearchCard from "../SearchCard";
1615
import ResultCard from "../ResultCard";
1716
import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
18-
import { createJob } from "services/jobs";
19-
import { postProject, searchRoles } from "services/teams";
17+
import { searchRoles } from "services/teams";
2018
import { setCurrentStage } from "utils/helpers";
21-
import AddAnotherModal from "../AddAnotherModal";
22-
import "./styles.module.scss";
23-
import TeamDetailsModal from "../TeamDetailsModal";
24-
import ConfirmationModal from "../ConfirmationModal";
2519
import { addRoleSearchId, addSearchedRole } from "../../actions";
20+
import "./styles.module.scss";
2621

22+
/**
23+
* Converts an array of role search objects to two data
24+
* lists which can be set as sessionStorage items
25+
*
26+
* @param {object[]} arrayOfObjects array of role objects
27+
*/
2728
const storeStrings = (arrayOfObjects) => {
2829
const objectOfArrays = arrayOfObjects.reduce(
2930
(acc, curr) => ({
@@ -63,49 +64,6 @@ function SearchContainer({
6364
navigate("result", { state: { matchingRole } });
6465
}, [addedRoles, navigate, matchingRole]);
6566

66-
const submitJob = () => {
67-
setSubmitDone(false);
68-
postProject()
69-
.then((res) => {
70-
const projectId = _.get(res, "data.id");
71-
72-
createJob({
73-
projectId,
74-
title: `job-${Date()}`,
75-
skills: [],
76-
roleIds: addedRoles.map((r) => r.id),
77-
numPositions: 1,
78-
})
79-
.then(() => {
80-
toastr.success("Job Submitted");
81-
})
82-
.catch((err) => {
83-
console.error(err);
84-
toastr.warning("Error Submitting Job");
85-
});
86-
})
87-
.catch((err) => {
88-
console.error(err);
89-
toastr.warning("Error Creating Project");
90-
})
91-
.finally(() => {
92-
setSubmitDone(true);
93-
navigate("/taas/myteams");
94-
});
95-
};
96-
97-
const addAnother = () => {
98-
if (!reloadRolesPage) {
99-
navigate("/taas/myteams/createnewteam/role");
100-
return;
101-
}
102-
setCurrentStage(0, stages, setStages);
103-
setSearchState(null);
104-
setMatchingRole(null);
105-
setAddAnotherModalOpen(false);
106-
reloadRolesPage();
107-
};
108-
10967
const search = () => {
11068
setCurrentStage(1, stages, setStages);
11169
setSearchState("searching");
@@ -166,16 +124,6 @@ function SearchContainer({
166124
percentage={getPercentage()}
167125
/>
168126
</div>
169-
{searchState === "done" && matchingRole && (
170-
<AddAnotherModal
171-
open={addAnotherModalOpen}
172-
onClose={() => setAddAnotherModalOpen(false)}
173-
submitDone={submitDone}
174-
onContinueClick={submitJob}
175-
addAnother={addAnother}
176-
/>
177-
)}
178-
<ConfirmationModal />
179127
</div>
180128
);
181129
}

0 commit comments

Comments
 (0)