fix: skillMatched

don't use skillMatched from the server and calculate it client-side correctly

Author: maxceem

src/components/SkillsList/index.jsx

@@ -2,7 +2,6 @@
  * SkillsList
  *
  * Shows list of skills with "N more" link which is showing tooltip with a full list of skills.
- * If `showMatches = true` it marks matched and not matched required skills.
  */
 import React, { useCallback, useState } from "react";
 import PT from "prop-types";
@@ -13,11 +12,7 @@ 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,
-  showMatches = false,
-}) => {
+const SkillsList = ({ skills, limit = 3 }) => {
   const skillsToShow = skills.slice(0, limit);
   const skillsToHide = skills.slice(limit);
 
@@ -124,7 +119,6 @@ export const skillShape = PT.shape({
 SkillsList.propTypes = {
   skills: PT.arrayOf(skillShape),
   limit: PT.number,
-  showMatches: PT.bool,
 };
 
 export default SkillsList;

src/components/SkillsSummary/index.jsx

@@ -10,18 +10,20 @@ import PercentageBar from "components/PercentageBar";
 import SkillsList from "components/SkillsList";
 import "./styles.module.scss";
 
-const SkillsSummary = ({ skills, skillMatched, limit }) => {
+const SkillsSummary = ({ skills, requiredSkills = [], limit }) => {
+  const skillsMatched = _.intersectionBy(skills, requiredSkills, "id");
+  const skillsMatchedRatio =
+    requiredSkills.length > 0
+      ? skillsMatched.length / requiredSkills.length
+      : 1;
+
   return (
     <div>
       <div styleName="percentage">
-        <PercentageBar ratio={skillMatched / 100} styleName="percentage-bar" />
-        {Math.round(skillMatched)}% skill matched
+        <PercentageBar ratio={skillsMatchedRatio} styleName="percentage-bar" />
+        {Math.round(skillsMatchedRatio * 100)}% skill matched
       </div>
-      <SkillsList
-        skills={skills}
-        limit={limit}
-        showMatches
-      />
+      <SkillsList skills={skills} limit={limit} />
     </div>
   );
 };
@@ -33,8 +35,8 @@ const skillShape = PT.shape({
 
 SkillsSummary.propTypes = {
   skills: PT.arrayOf(skillShape),
+  requiredSkills: PT.arrayOf(skillShape),
   limit: PT.number,
-  skillMatched: PT.number,
 };
 
 export default SkillsSummary;

src/constants/index.js

@@ -110,7 +110,7 @@ export const CANDIDATE_STATUS_FILTERS = [
  * Candidates "sort by" values
  */
 export const CANDIDATES_SORT_BY = {
-  SKILL_MATCHED: "skillMatched",
+  SKILL_MATCHED: "skillsMatched",
   HANDLE: "handle",
 };
 

src/routes/MyTeamsDetails/components/TeamMembers/index.jsx

@@ -16,7 +16,11 @@ import ActionsMenu from "components/ActionsMenu";
 import Button from "components/Button";
 import Pagination from "components/Pagination";
 import { DAY_FORMAT, TEAM_MEMBERS_PER_PAGE } from "constants";
-import { formatMoney, formatReportIssueUrl, formatRequestExtensionUrl } from "utils/format";
+import {
+  formatMoney,
+  formatReportIssueUrl,
+  formatRequestExtensionUrl,
+} from "utils/format";
 import Input from "components/Input";
 import { skillShape } from "components/SkillsList";
 
@@ -132,7 +136,7 @@ const TeamMembers = ({ team }) => {
                 <div styleName="table-cell cell-skills">
                   <SkillsSummary
                     skills={member.skills}
-                    skillMatched={member.skillMatched}
+                    requiredSkills={member.job.skills}
                   />
                 </div>
                 <div styleName="table-group-second-inner">
@@ -206,7 +210,7 @@ TeamMembers.propTypes = {
         firstName: PT.string,
         lastName: PT.string,
         skills: PT.arrayOf(skillShape),
-        skillMatched: PT.number,
+        skillsMatched: PT.number,
       })
     ),
   }),

src/routes/PositionDetails/components/PositionCandidates/index.jsx

@@ -33,7 +33,7 @@ import { toastr } from "react-redux-toastr";
 const createSortCandidatesMethod = (sortBy) => (candidate1, candidate2) => {
   switch (sortBy) {
     case CANDIDATES_SORT_BY.SKILL_MATCHED:
-      return candidate2.skillMatched - candidate1.skillMatched;
+      return candidate2.skillsMatched - candidate1.skillsMatched;
     case CANDIDATES_SORT_BY.HANDLE:
       return new Intl.Collator().compare(
         candidate1.handle.toLowerCase(),
@@ -42,18 +42,31 @@ const createSortCandidatesMethod = (sortBy) => (candidate1, candidate2) => {
   }
 };
 
-const PositionCandidates = ({
-  candidates,
-  candidateStatus,
-  updateCandidate,
-}) => {
+/**
+ * Populates candidate objects with `skillsMatched` property
+ * which define the number of candidate skills that match position skills
+ *
+ * @param {object} position position
+ * @param {object} candidate candidate for position
+ */
+const populateSkillsMatched = (position, candidate) => ({
+  ...candidate,
+  skillsMatched: _.intersectionBy(position.skills, candidate.skills, "id"),
+});
+
+const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
+  const { candidates } = position;
   const [sortBy, setSortBy] = useState(CANDIDATES_SORT_BY.SKILL_MATCHED);
   const filteredCandidates = useMemo(
     () =>
-      _.filter(candidates, { status: candidateStatus }).sort(
-        createSortCandidatesMethod(sortBy)
-      ),
-    [candidates, candidateStatus, sortBy]
+      _.chain(candidates)
+        .map((candidate) => populateSkillsMatched(position, candidate))
+        .filter({
+          status: candidateStatus,
+        })
+        .value()
+        .sort(createSortCandidatesMethod(sortBy)),
+    [candidates, candidateStatus, sortBy, position]
   );
 
   const onSortByChange = useCallback(
@@ -158,7 +171,7 @@ const PositionCandidates = ({
               <div styleName="table-cell cell-skills">
                 <SkillsSummary
                   skills={candidate.skills}
-                  skillMatched={candidate.skillMatched}
+                  requiredSkills={position.skills}
                   limit={7}
                 />
                 {candidate.resumeLink && (
@@ -221,7 +234,7 @@ const PositionCandidates = ({
 };
 
 PositionCandidates.propType = {
-  candidates: PT.array,
+  position: PT.object,
   candidateStatus: PT.oneOf(Object.values(CANDIDATE_STATUS)),
 };
 

src/routes/PositionDetails/index.jsx

@@ -46,7 +46,7 @@ const PositionDetails = ({ teamId, positionId }) => {
             }
           />
           <PositionCandidates
-            candidates={position.candidates}
+            position={position}
             candidateStatus={candidateStatus}
             updateCandidate={updateCandidate}
           />