diff --git a/src/components/SkillsList/index.jsx b/src/components/SkillsList/index.jsx
index da11f1a7..6f326aca 100644
--- a/src/components/SkillsList/index.jsx
+++ b/src/components/SkillsList/index.jsx
@@ -3,7 +3,7 @@
*
* Shows list of skills with "N more" link which is showing tooltip with a full list of skills.
*/
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useMemo } from "react";
import PT from "prop-types";
import _ from "lodash";
import "./styles.module.scss";
@@ -12,13 +12,22 @@ import IconCross from "../../assets/images/icon-cross.svg";
import { usePopper } from "react-popper";
import OutsideClickHandler from "react-outside-click-handler";
-const SkillsList = ({ skills, limit = 3 }) => {
+const SkillsList = ({requiredSkills, skills, limit = 3 }) => {
const skillsToShow = skills.slice(0, limit);
const skillsToHide = skills.slice(limit);
+ // if has requiredSkills, show two columns, eles show only one column
+ const showMatches = !!requiredSkills
const [isOpen, setIsOpen] = useState(false);
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
+
+ const otherSkills = useMemo(
+ () => {
+ return _.differenceBy(skills, requiredSkills, 'id' )
+ },
+ [requiredSkills, skills]
+ );
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom",
modifiers: [
@@ -91,11 +100,29 @@ const SkillsList = ({ skills, limit = 3 }) => {
{...attributes.popper}
>
- {skills && (
+ {requiredSkills && (
+
+
Required Job Skills
+
+ {requiredSkills.map((skill) => (
+ -
+ {showMatches &&
+ (_.find(skills, { id: skill.id }) ? (
+
+ ) : (
+
+ ))}{" "}
+ {skill.name}
+
+ ))}
+
+
+ )}
+ {otherSkills && (
-
Skills
+
{showMatches ? 'Other User Skills': 'Required Skills'}
- {skills.map((skill) => (
+ {otherSkills.map((skill) => (
- {skill.name}
))}
@@ -118,6 +145,7 @@ export const skillShape = PT.shape({
SkillsList.propTypes = {
skills: PT.arrayOf(skillShape),
+ requiredSkills: PT.arrayOf(skillShape),
limit: PT.number,
};
diff --git a/src/components/SkillsSummary/index.jsx b/src/components/SkillsSummary/index.jsx
index 33faaaf3..c20af3b9 100644
--- a/src/components/SkillsSummary/index.jsx
+++ b/src/components/SkillsSummary/index.jsx
@@ -23,7 +23,7 @@ const SkillsSummary = ({ skills, requiredSkills = [], limit }) => {
{Math.round(skillsMatchedRatio * 100)}% skill matched
-
+
);
};
diff --git a/src/routes/PositionDetails/actions/index.js b/src/routes/PositionDetails/actions/index.js
index c5278a01..0cd73876 100644
--- a/src/routes/PositionDetails/actions/index.js
+++ b/src/routes/PositionDetails/actions/index.js
@@ -61,4 +61,4 @@ export const updateCandidate = (candidateId, partialCandidateData) => ({
*/
export const resetPositionState = () => ({
type: ACTION_TYPE.RESET_POSITION_STATE,
-})
+});
diff --git a/src/routes/PositionDetails/hooks/useTeamPositionsState.js b/src/routes/PositionDetails/hooks/useTeamPositionsState.js
index 6095d3f6..2f196abb 100644
--- a/src/routes/PositionDetails/hooks/useTeamPositionsState.js
+++ b/src/routes/PositionDetails/hooks/useTeamPositionsState.js
@@ -24,7 +24,7 @@ export const useTeamPositionsState = (teamId, positionId) => {
// clear state when we leave the page
return () => {
dispatch(resetPositionState());
- }
+ };
}, [dispatch, teamId, positionId]);
// bind actions to dispatch method
diff --git a/src/routes/PositionDetails/reducers/index.js b/src/routes/PositionDetails/reducers/index.js
index f522c503..4b01961c 100644
--- a/src/routes/PositionDetails/reducers/index.js
+++ b/src/routes/PositionDetails/reducers/index.js
@@ -76,14 +76,10 @@ const reducer = (state = initialState, action) => {
});
case ACTION_TYPE.UPDATE_CANDIDATE_SUCCESS:
- return patchCandidateInState(
- state,
- action.meta.candidateId,
- {
- updating: false,
- ...action.payload,
- }
- );
+ return patchCandidateInState(state, action.meta.candidateId, {
+ updating: false,
+ ...action.payload,
+ });
case ACTION_TYPE.UPDATE_CANDIDATE_ERROR:
return patchCandidateInState(state, action.meta.candidateId, {
@@ -92,7 +88,7 @@ const reducer = (state = initialState, action) => {
});
default:
- return state
+ return state;
}
};
diff --git a/src/utils/format.js b/src/utils/format.js
index fef9e488..c6786d00 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -129,5 +129,7 @@ export const formatReportIssueUrl = (subject) => {
* @returns {string} request an extension URL
*/
export const formatRequestExtensionUrl = (subject) => {
- return `mailto:${EMAIL_REQUEST_EXTENSION}?subject=${encodeURIComponent(subject)}`;
+ return `mailto:${EMAIL_REQUEST_EXTENSION}?subject=${encodeURIComponent(
+ subject
+ )}`;
};