fix: #36

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}
               >
                 <div styleName="popover-content">
-                  {skills && (
+                  {requiredSkills && (
+                    <div styleName="skills-section">
+                      <div styleName="skills-title">Required Job Skills</div>
+                      <ul styleName="skills-list">
+                        {requiredSkills.map((skill) => (
+                          <li key={skill.id}>
+                            {showMatches &&
+                              (_.find(skills, { id: skill.id }) ? (
+                                <IconCheck />
+                              ) : (
+                                <IconCross />
+                              ))}{" "}
+                            {skill.name}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                  {otherSkills && (
                     <div styleName="skills-section">
-                      <div styleName="skills-title">Skills</div>
+                      <div styleName="skills-title">{showMatches ? 'Other User Skills': 'Required Skills'}</div>
                       <ul styleName="skills-list">
-                        {skills.map((skill) => (
+                        {otherSkills.map((skill) => (
                           <li key={skill.id}>{skill.name}</li>
                         ))}
                       </ul>
@@ -118,6 +145,7 @@ export const skillShape = PT.shape({
 
 SkillsList.propTypes = {
   skills: PT.arrayOf(skillShape),
+  requiredSkills: PT.arrayOf(skillShape),
   limit: PT.number,
 };
 

src/components/SkillsSummary/index.jsx

@@ -23,7 +23,7 @@ const SkillsSummary = ({ skills, requiredSkills = [], limit }) => {
         <PercentageBar ratio={skillsMatchedRatio} styleName="percentage-bar" />
         {Math.round(skillsMatchedRatio * 100)}% skill matched
       </div>
-      <SkillsList skills={skills} limit={limit} />
+      <SkillsList skills={skills}  requiredSkills={requiredSkills} limit={limit} />
     </div>
   );
 };

src/routes/PositionDetails/actions/index.js

@@ -61,4 +61,4 @@ export const updateCandidate = (candidateId, partialCandidateData) => ({
  */
 export const resetPositionState = () => ({
   type: ACTION_TYPE.RESET_POSITION_STATE,
-})
+});

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

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;
   }
 };
 

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
+  )}`;
 };