feat: shortlist/reject candidates

ref issue #25

Author: maxceem

package-lock.json

@@ -59,6 +59,7 @@
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "express": "^4.17.1",
+    "immutability-helper": "^3.1.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
@@ -67,7 +68,13 @@
     "react-dom": "^16.12.0",
     "react-outside-click-handler": "^1.3.0",
     "react-popper": "^2.2.3",
-    "react-use": "^15.3.4"
+    "react-redux": "^7.2.2",
+    "react-redux-toastr": "^7.6.5",
+    "react-use": "^15.3.4",
+    "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
+    "redux-promise-middleware": "^6.1.2",
+    "redux-thunk": "^2.3.0"
   },
   "browserslist": [
     "last 1 version",

package.json

@@ -121,3 +121,20 @@ export const CANDIDATES_SORT_OPTIONS = [
   { label: "Skill Matched", value: CANDIDATES_SORT_BY.SKILL_MATCHED },
   { label: "Handle", value: CANDIDATES_SORT_BY.HANDLE },
 ];
+
+/**
+ * All action types
+ */
+export const ACTION_TYPE = {
+  LOAD_POSITION: "LOAD_POSITION",
+  LOAD_POSITION_PENDING: "LOAD_POSITION_PENDING",
+  LOAD_POSITION_SUCCESS: "LOAD_POSITION_SUCCESS",
+  LOAD_POSITION_ERROR: "LOAD_POSITION_ERROR",
+
+  RESET_POSITION_STATE: "RESET_POSITION_STATE",
+
+  UPDATE_CANDIDATE: "UPDATE_CANDIDATE",
+  UPDATE_CANDIDATE_PENDING: "UPDATE_CANDIDATE_PENDING",
+  UPDATE_CANDIDATE_SUCCESS: "UPDATE_CANDIDATE_SUCCESS",
+  UPDATE_CANDIDATE_ERROR: "UPDATE_CANDIDATE_ERROR",
+};

src/constants/index.js

@@ -0,0 +1,13 @@
+/**
+ * Root Redux Reducer
+ */
+import { combineReducers } from "redux";
+import { reducer as toastrReducer } from "react-redux-toastr";
+import positionDetailsReducer from "../routes/PositionDetails/reducers";
+
+const rootReducer = combineReducers({
+  toastr: toastrReducer,
+  positionDetails: positionDetailsReducer,
+});
+
+export default rootReducer;

src/reducers/index.js

@@ -1,18 +1,32 @@
 import React from "react";
+import { Provider } from "react-redux";
 import { Router } from "@reach/router";
 import MyTeamsList from "./routes/MyTeamsList";
 import MyTeamsDetails from "./routes/MyTeamsDetails";
 import PositionDetails from "./routes/PositionDetails";
-import "./styles/main.module.scss";
+import ReduxToastr from 'react-redux-toastr'
+import store from "./store";
+import "./styles/main.vendor.scss";
+import styles from "./styles/main.module.scss";
 
 export default function Root() {
   return (
-    <div styleName="topcoder-micro-frontends-teams-app">
-      <Router>
-        <MyTeamsList path="/taas/myteams" />
-        <MyTeamsDetails path="/taas/myteams/:teamId" />
-        <PositionDetails path="/taas/myteams/:teamId/positions/:positionId" />
-      </Router>
+    <div className={styles['topcoder-micro-frontends-teams-app']}>
+      <Provider store={store}>
+        <Router>
+          <MyTeamsList path="/taas/myteams" />
+          <MyTeamsDetails path="/taas/myteams/:teamId" />
+          <PositionDetails path="/taas/myteams/:teamId/positions/:positionId" />
+        </Router>
+
+        {/* Global config for Toastr popups */}
+        <ReduxToastr
+          timeOut={4000}
+          position="bottom-left"
+          transitionIn="fadeIn"
+          transitionOut="fadeOut"
+        />
+      </Provider>
     </div>
   );
 }

src/root.component.jsx

@@ -0,0 +1,64 @@
+/**
+ * Position Details page actions
+ */
+import { getPositionDetails, patchPositionCandidate } from "services/teams";
+import { getAuthUserTokens } from "@topcoder/micro-frontends-navbar-app";
+import { ACTION_TYPE } from "constants";
+
+/**
+ * Load Team Position details (team job)
+ *
+ * @param {string} teamId team id
+ * @param {string} positionId position id
+ *
+ * @returns {Promise<any>} loaded data or error
+ */
+export const loadPosition = (teamId, positionId) => ({
+  type: ACTION_TYPE.LOAD_POSITION,
+  payload: async () => {
+    const tokens = await getAuthUserTokens();
+    const response = await getPositionDetails(
+      tokens.tokenV3,
+      teamId,
+      positionId
+    );
+
+    return response.data;
+  },
+  meta: {
+    teamId,
+    positionId,
+  },
+});
+
+/**
+ * Update candidate on the server and in Redux store
+ *
+ * @param {string} candidateId position candidate id
+ * @param {object} partialCandidateData partial candidate data
+ *
+ * @returns {Promise} updated candidate data or error
+ */
+export const updateCandidate = (candidateId, partialCandidateData) => ({
+  type: ACTION_TYPE.UPDATE_CANDIDATE,
+  payload: async () => {
+    const tokens = await getAuthUserTokens();
+    const response = await patchPositionCandidate(
+      tokens.tokenV3,
+      candidateId,
+      partialCandidateData
+    );
+
+    return response.data;
+  },
+  meta: {
+    candidateId,
+  },
+});
+
+/**
+ * Reset position state
+ */
+export const resetPositionState = () => ({
+  type: ACTION_TYPE.RESET_POSITION_STATE,
+})

src/routes/PositionDetails/actions/index.js

@@ -20,8 +20,8 @@ import User from "components/User";
 import SkillsSummary from "components/SkillsSummary";
 import Button from "components/Button";
 import Pagination from "components/Pagination";
-import IconResume from "../../../assets/images/icon-resume.svg";
-import { skillShape } from "components/SkillsList";
+import IconResume from "../../../../assets/images/icon-resume.svg";
+import { toastr } from "react-redux-toastr";
 
 /**
  * Generates a function to sort candidates
@@ -45,6 +45,7 @@ const createSortCandidatesMethod = (sortBy) => (candidate1, candidate2) => {
 const PositionCandidates = ({
   candidates,
   candidateStatus,
+  updateCandidate,
 }) => {
   const [sortBy, setSortBy] = useState(CANDIDATES_SORT_BY.SKILL_MATCHED);
   const filteredCandidates = useMemo(
@@ -86,6 +87,42 @@ const PositionCandidates = ({
     [setPage]
   );
 
+  const markCandidateShortlisted = useCallback(
+    (candidateId) => {
+      updateCandidate(candidateId, {
+        status: CANDIDATE_STATUS.SHORTLIST,
+      })
+        .then(() => {
+          toastr.success("Candidate is marked as interested.");
+        })
+        .catch((error) => {
+          toastr.error(
+            "Failed to mark candidate as interested",
+            error.toString()
+          );
+        });
+    },
+    [updateCandidate]
+  );
+
+  const markCandidateRejected = useCallback(
+    (candidateId) => {
+      updateCandidate(candidateId, {
+        status: CANDIDATE_STATUS.REJECTED,
+      })
+        .then(() => {
+          toastr.success("Candidate is marked as not interested.");
+        })
+        .catch((error) => {
+          toastr.error(
+            "Failed to mark candidate as not interested",
+            error.toString()
+          );
+        });
+    },
+    [updateCandidate]
+  );
+
   return (
     <div styleName="position-candidates">
       <CardHeader
@@ -125,24 +162,31 @@ const PositionCandidates = ({
                   limit={7}
                 />
                 {candidate.resumeLink && (
-                  <a
-                    href={`${candidate.resumeLink}`}
-                    styleName="resume-link"
-                  >
+                  <a href={`${candidate.resumeLink}`} styleName="resume-link">
                     <IconResume />
                     Download Resume
                   </a>
                 )}
               </div>
               <div styleName="table-cell cell-action">
-                {candidateStatus === CANDIDATE_STATUS.SHORTLIST ? (
-                  <Button type="primary">Schedule Interview</Button>
-                ) : (
+                {candidateStatus === CANDIDATE_STATUS.OPEN && (
                   <>
                     Interested in this candidate?
                     <div styleName="actions">
-                      <Button type="secondary">No</Button>
-                      <Button type="primary">Yes</Button>
+                      <Button
+                        type="secondary"
+                        onClick={() => markCandidateRejected(candidate.id)}
+                        disabled={candidate.updating}
+                      >
+                        No
+                      </Button>
+                      <Button
+                        type="primary"
+                        onClick={() => markCandidateShortlisted(candidate.id)}
+                        disabled={candidate.updating}
+                      >
+                        Yes
+                      </Button>
                     </div>
                   </>
                 )}