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
+ +
+ )} + {otherSkills && (
-
Skills
+
{showMatches ? 'Other User Skills': 'Required Skills'}
@@ -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 + )}`; };