Merge branch 'master' into dev

# Conflicts:
#	src/routes/PositionDetails/components/CandidatesStatusFilter/index.jsx
#	src/routes/PositionDetails/components/PositionCandidates/index.jsx
#	src/routes/PositionDetails/index.jsx

Author: maxceem

src/components/Babge/index.jsx

@@ -0,0 +1,22 @@
+/**
+ * Badge
+ *
+ * - type - see BADGE_TYPE values
+ *
+ */
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import { BADGE_TYPE } from "constants";
+import "./styles.module.scss";
+
+const Badge = ({ children, type = BADGE_TYPE.PRIMARY }) => {
+  return <span styleName={cn("badge", `type-${type}`)}>{children}</span>;
+};
+
+Badge.propTypes = {
+  children: PT.node,
+  type: PT.oneOf(Object.values(BADGE_TYPE)),
+};
+
+export default Badge;

src/components/Badge/index.jsx

@@ -1,6 +1,6 @@
 @import "styles/include";
 
-.babge {
+.badge {
   @include font-roboto;
   padding: 0 8px;
   line-height: 20px;

src/components/Babge/styles.module.scss renamed to src/components/Badge/styles.module.scss

@@ -74,9 +74,9 @@ export const BUTTON_TYPE = {
 };
 
 /**
- * Supported Babge Types
+ * Supported Badge Types
  */
-export const BABGE_TYPE = {
+export const BADGE_TYPE = {
   PRIMARY: "primary",
   DANGER: "danger",
 };
@@ -99,34 +99,40 @@ export const CANDIDATE_STATUS = {
   SELECTED: "selected",
   SHORTLIST: "shortlist",
   REJECTED: "rejected",
+  INTERVIEW: "interview",
 };
 
 /**
- * Mapping between candidate status "server value" and human readable value
+ * Candidate status filters keys
  */
-export const CANDIDATE_STATUS_TO_TEXT = {
-  [CANDIDATE_STATUS.OPEN]: "To Review",
-  [CANDIDATE_STATUS.SELECTED]: "Selected",
-  [CANDIDATE_STATUS.SHORTLIST]: "Interested",
-  [CANDIDATE_STATUS.REJECTED]: "Not Interested",
+export const CANDIDATE_STATUS_FILTER_KEY = {
+  TO_REVIEW: "TO_REVIEW",
+  INTERESTED: "INTERESTED",
+  NOT_INTERESTED: "NOT_INTERESTED",
 };
 
 /**
- * Mapping between candidate status "server value" and list title text
- */
-export const CANDIDATE_STATUS_TO_TITLE_TEXT = {
-  [CANDIDATE_STATUS.OPEN]: "Candidates to Review",
-  [CANDIDATE_STATUS.SHORTLIST]: "Interested Candidates",
-  [CANDIDATE_STATUS.REJECTED]: "Not Interested Candidates",
-};
-
-/**
- * Which candidate status filters to show on the open position details page
+ * Candidate status filters
  */
 export const CANDIDATE_STATUS_FILTERS = [
-  CANDIDATE_STATUS.OPEN,
-  CANDIDATE_STATUS.SHORTLIST,
-  CANDIDATE_STATUS.REJECTED,
+  {
+    key: CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW,
+    buttonText: "To Review",
+    title: "Candidates to Review",
+    statuses: [CANDIDATE_STATUS.OPEN],
+  },
+  {
+    key: CANDIDATE_STATUS_FILTER_KEY.INTERESTED,
+    buttonText: "Interested",
+    title: "Interested Candidates",
+    statuses: [CANDIDATE_STATUS.SHORTLIST, CANDIDATE_STATUS.INTERVIEW],
+  },
+  {
+    key: CANDIDATE_STATUS_FILTER_KEY.NOT_INTERESTED,
+    buttonText: "Not Interested",
+    title: "Not Interested Candidates",
+    statuses: [CANDIDATE_STATUS.REJECTED],
+  },
 ];
 
 /**

src/constants/index.js

@@ -6,35 +6,39 @@ import PT from "prop-types";
 import "./styles.module.scss";
 import _ from "lodash";
 import Button from "components/Button";
-import Babge from "components/Babge";
+import Badge from "components/Badge";
 import {
   CANDIDATE_STATUS,
   CANDIDATE_STATUS_FILTERS,
-  CANDIDATE_STATUS_TO_TEXT,
+  CANDIDATE_STATUS_FILTER_KEY,
 } from "constants";
 
-const CandidatesStatusFilter = ({ currentStatus, onChange, candidates }) => {
+const CandidatesStatusFilter = ({ statusFilterKey, onChange, candidates }) => {
   return (
     <div styleName="candidates-status-filter">
-      {CANDIDATE_STATUS_FILTERS.map((status, index) => (
-        <Button
-          key={status}
-          type={currentStatus === status ? "segment-selected" : "segment"}
-          onClick={() => onChange(status)}
-        >
-          {CANDIDATE_STATUS_TO_TEXT[status]} (
-          {_.filter(candidates, { status }).length})
-          {index === 0 && _.filter(candidates, { status }).length ? (
-            <Babge type="danger">Pending</Babge>
-          ) : null}
-        </Button>
-      ))}
+      {CANDIDATE_STATUS_FILTERS.map((statusFilter) => {
+        const count = _.filter(candidates, (candidate) => statusFilter.statuses.includes(candidate.status)).length;
+
+        return (
+          <Button
+            key={statusFilter.key}
+            type={statusFilterKey === statusFilter.key ? "segment-selected" : "segment"}
+            onClick={() => onChange(statusFilter)}
+          >
+            {statusFilter.buttonText} (
+            {count})
+            {statusFilter.key === CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW && count > 0 && (
+              <Badge type="danger">Pending</Badge>
+            )}
+          </Button>
+        )
+    })}
     </div>
   );
 };
 
 CandidatesStatusFilter.propTypes = {
-  currentStatus: PT.oneOf(Object.values(CANDIDATE_STATUS)),
+  statusFilterKey: PT.oneOf(Object.values(CANDIDATE_STATUS_FILTER_KEY)),
   onChange: PT.func,
   candidates: PT.arrayOf(
     PT.shape({

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

@@ -10,7 +10,8 @@ import CardHeader from "components/CardHeader";
 import "./styles.module.scss";
 import Select from "components/Select";
 import {
-  CANDIDATE_STATUS_TO_TITLE_TEXT,
+  CANDIDATE_STATUS_FILTERS,
+  CANDIDATE_STATUS_FILTER_KEY,
   CANDIDATES_SORT_OPTIONS,
   CANDIDATES_SORT_BY,
   CANDIDATE_STATUS,
@@ -57,24 +58,21 @@ const populateSkillsMatched = (position, candidate) => ({
   skillsMatched: _.intersectionBy(position.skills, candidate.skills, "id"),
 });
 
-const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
+const PositionCandidates = ({ position, statusFilterKey, updateCandidate }) => {
   const { candidates } = position;
   const [sortBy, setSortBy] = useState(CANDIDATES_SORT_BY.SKILL_MATCHED);
-
-  useEffect(() => {
-    setPage(1);
-  }, [candidateStatus]);
+  const statusFilter = useMemo(() =>
+    _.find(CANDIDATE_STATUS_FILTERS, { key: statusFilterKey })
+  , [statusFilterKey]);
 
   const filteredCandidates = useMemo(
     () =>
       _.chain(candidates)
         .map((candidate) => populateSkillsMatched(position, candidate))
-        .filter({
-          status: candidateStatus,
-        })
+        .filter((candidate) => statusFilter.statuses.includes(candidate.status))
         .value()
         .sort(createSortCandidatesMethod(sortBy)),
-    [candidates, candidateStatus, sortBy, position]
+    [candidates, statusFilter, sortBy, position]
   );
 
   const onSortByChange = useCallback(
@@ -94,6 +92,10 @@ const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
     setPage(newPage);
   }, [perPage, setPerPage, page, setPage]);
 
+  useEffect(() => {
+    setPage(1);
+  }, [statusFilterKey]);
+
   const pagesTotal = Math.ceil(filteredCandidates.length / perPage);
 
   const pageCandidates = useMemo(
@@ -147,7 +149,7 @@ const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
   return (
     <div styleName="position-candidates">
       <CardHeader
-        title={`${CANDIDATE_STATUS_TO_TITLE_TEXT[candidateStatus]} (${filteredCandidates.length})`}
+        title={`${statusFilter.title} (${filteredCandidates.length})`}
         aside={
           <Select
             options={CANDIDATES_SORT_OPTIONS}
@@ -160,7 +162,7 @@ const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
 
       {filteredCandidates.length === 0 && (
         <div styleName="no-candidates">
-          No {CANDIDATE_STATUS_TO_TITLE_TEXT[candidateStatus]}
+          No {statusFilter.title}
         </div>
       )}
       {filteredCandidates.length > 0 && (
@@ -194,7 +196,7 @@ const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
                 )}
               </div>
               <div styleName="table-cell cell-action">
-                {candidateStatus === CANDIDATE_STATUS.OPEN && hasPermission(PERMISSIONS.UPDATE_JOB_CANDIDATE) && (
+                {statusFilterKey === CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW && hasPermission(PERMISSIONS.UPDATE_JOB_CANDIDATE) && (
                   <>
                     Interested in this candidate?
                     <div styleName="actions">
@@ -247,7 +249,7 @@ const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
 
 PositionCandidates.propType = {
   position: PT.object,
-  candidateStatus: PT.oneOf(Object.values(CANDIDATE_STATUS)),
+  statusFilterKey: PT.oneOf(Object.values(CANDIDATE_STATUS_FILTER_KEY)),
 };
 
 export default PositionCandidates;

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

@@ -8,38 +8,46 @@ import PT from "prop-types";
 import Page from "components/Page";
 import LoadingIndicator from "components/LoadingIndicator";
 import PageHeader from "components/PageHeader";
-import { CANDIDATE_STATUS } from "constants";
+import {
+  CANDIDATE_STATUS_FILTER_KEY,
+  CANDIDATE_STATUS_FILTERS,
+} from "constants";
 import withAuthentication from "../../hoc/withAuthentication";
 import PositionCandidates from "./components/PositionCandidates";
 import CandidatesStatusFilter from "./components/CandidatesStatusFilter";
 import { useTeamPositionsState } from "./hooks/useTeamPositionsState";
 import "./styles.module.scss";
 
+const inReviewStatusFilter = _.find(CANDIDATE_STATUS_FILTERS, {
+  key: CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW,
+});
+
 const PositionDetails = ({ teamId, positionId }) => {
-  // be dafault show "Interested" tab
-  const [candidateStatus, setCandidateStatus] = useState(
-    CANDIDATE_STATUS.SHORTLIST
+  // by default show "interested" tab
+  const [candidateStatusFilterKey, setCandidateStatusFilterKey] = useState(
+    CANDIDATE_STATUS_FILTER_KEY.INTERESTED
   );
   const {
     state: { position, error },
     updateCandidate,
   } = useTeamPositionsState(teamId, positionId);
 
   const onCandidateStatusChange = useCallback(
-    (status) => {
-      setCandidateStatus(status);
+    (statusFilter) => {
+      setCandidateStatusFilterKey(statusFilter.key);
     },
-    [setCandidateStatus]
+    [setCandidateStatusFilterKey]
   );
 
   // if there are some candidates to review, then show "To Review" tab by default
   useEffect(() => {
     if (
       position &&
-      _.filter(position.candidates, { status: CANDIDATE_STATUS.OPEN }).length >
-        0
+      _.filter(position.candidates, (candidate) =>
+        inReviewStatusFilter.statuses.includes(candidate.status)
+      ).length > 0
     ) {
-      setCandidateStatus(CANDIDATE_STATUS.OPEN);
+      setCandidateStatusFilterKey(CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW);
     }
   }, [position]);
 
@@ -55,14 +63,14 @@ const PositionDetails = ({ teamId, positionId }) => {
             aside={
               <CandidatesStatusFilter
                 onChange={onCandidateStatusChange}
-                currentStatus={candidateStatus}
+                statusFilterKey={candidateStatusFilterKey}
                 candidates={position.candidates}
               />
             }
           />
           <PositionCandidates
             position={position}
-            candidateStatus={candidateStatus}
+            statusFilterKey={candidateStatusFilterKey}
             updateCandidate={updateCandidate}
           />
         </>