Merge pull request #417 from mbaghel/dev

Reflect selected tab in URL for Position Details page when navigating…

Author: nikolay83

src/constants/index.js

@@ -397,3 +397,9 @@ export const MIN_DURATION = 4;
  * Maximum allowed numbers of selecter skills for search.
  */
 export const MAX_SELECTED_SKILLS = 3;
+
+/**
+ * Milliseconds for each stage of role search
+ * There are 3 stages, so total search takes 3x this number
+ */
+export const SEARCH_STAGE_TIME = 1500;

src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx

@@ -2,6 +2,7 @@ import { Router, navigate } from "@reach/router";
 import _ from "lodash";
 import React, { useCallback, useState, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { SEARCH_STAGE_TIME } from "constants/";
 import { useData } from "hooks/useData";
 import { getSkills } from "services/skills";
 import { searchRoles } from "services/teams";
@@ -16,7 +17,7 @@ import InputContainer from "../InputContainer";
 import SearchContainer from "../SearchContainer";
 import SubmitContainer from "../SubmitContainer";
 
-const SEARCHINGTIME = 1600;
+const SEARCHINGTIME = SEARCH_STAGE_TIME * 3 + 100;
 
 function SearchAndSubmit(props) {
   const { stages, setStages, searchObject, onClick, page } = props;
@@ -109,7 +110,9 @@ function SearchAndSubmit(props) {
             setCurrentStage(2, stages, setStages);
             setSearchState("done");
           },
-          Date.now() - searchingBegin > SEARCHINGTIME ? 0 : 1500
+          Date.now() - searchingBegin > SEARCHINGTIME
+            ? 0
+            : SEARCH_STAGE_TIME * 3
         );
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/routes/CreateNewTeam/components/SearchCard/index.jsx

@@ -9,6 +9,7 @@ import IconEarthSearch from "../../../../assets/images/icon-earth-search.svg";
 import WorldMapDotted from "../../../../assets/images/world-map-dotted.svg";
 import WorldMapSearch1 from "../../../../assets/images/world-map-search1.svg";
 import WorldMapSearch2 from "../../../../assets/images/world-map-search2.svg";
+import { SEARCH_STAGE_TIME } from "constants/";
 
 function SearchCard() {
   const [searchState, setSearchState] = useState(null);
@@ -19,8 +20,8 @@ function SearchCard() {
       setSearchState("state1");
       timer2 = setTimeout(() => {
         setSearchState("state2");
-      }, 500);
-    }, 500);
+      }, SEARCH_STAGE_TIME);
+    }, SEARCH_STAGE_TIME);
 
     return () => {
       clearTimeout(timer1);

src/routes/PositionDetails/index.jsx

@@ -6,6 +6,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import PT from "prop-types";
 import { navigate } from "@reach/router";
+import _ from "lodash";
 import Page from "components/Page";
 import LoadingIndicator from "components/LoadingIndicator";
 import PageHeader from "components/PageHeader";
@@ -26,7 +27,7 @@ const inReviewStatusFilter = _.find(CANDIDATE_STATUS_FILTERS, {
 const getKeyFromParam = (urlParam) => {
   const filter = _.find(CANDIDATE_STATUS_FILTERS, { urlParam });
   return filter?.key || undefined;
-}
+};
 
 const PositionDetails = ({ teamId, positionId, candidateStatus }) => {
   // by default show "interested" tab
@@ -40,25 +41,31 @@ const PositionDetails = ({ teamId, positionId, candidateStatus }) => {
 
   const onCandidateStatusChange = useCallback(
     (statusFilter) => {
-      navigate(`/taas/myteams/${teamId}/positions/${positionId}/candidates/${statusFilter.urlParam}`);
+      navigate(
+        `/taas/myteams/${teamId}/positions/${positionId}/candidates/${statusFilter.urlParam}`,
+        { replace: true }
+      );
     },
     [teamId, positionId]
   );
 
   // if there are some candidates to review, then show "To Review" tab by default
   useEffect(() => {
+    const key = getKeyFromParam(candidateStatus);
     if (position) {
-      const key = getKeyFromParam(candidateStatus);
       if (key) {
         setCandidateStatusFilterKey(key);
-      } else if (_.filter(position.candidates, (candidate) =>
-        inReviewStatusFilter.statuses.includes(candidate.status)
+      } else if (
+        _.filter(position.candidates, (candidate) =>
+          inReviewStatusFilter.statuses.includes(candidate.status)
         ).length > 0
       ) {
-        setCandidateStatusFilterKey(CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW);
+        onCandidateStatusChange({ urlParam: "to-review" });
+      } else {
+        onCandidateStatusChange({ urlParam: "interviews" });
       }
     }
-  }, [position, candidateStatus]);
+  }, [position, candidateStatus, onCandidateStatusChange]);
 
   return (
     <Page title="Job Details">