Merge pull request topcoder-archive#398 from mbaghel/dev

feat: Support direct links to the Job Candidates tabs and 
issue: topcoder-archive#355 (the Logo Ribbon and the page height)

Author: nikolay83

src/components/CustomerScroll/styles.module.scss

@@ -17,6 +17,7 @@
 
 .scrolling-logos {
   background-image: url("../../assets/images/customer-logos.svg");
+  background-size: cover;
   height: 60px;
   width: 100%;
   animation: scroll 300s linear infinite;
@@ -42,4 +43,14 @@
     width: 60px;
     z-index: 2;
   }
-}
+}
+
+@media only screen and (max-height: 859px) {
+  .scrolling-logos {
+    height: 30px;
+  }
+  .title {
+    font-size: 16px;
+    margin-bottom: 15px;
+  }
+}

src/constants/index.js

@@ -134,20 +134,23 @@ export const CANDIDATE_STATUS_FILTERS = [
     title: "Candidates to Review",
     noCandidateMessage: "No Candidates To Review",
     statuses: [CANDIDATE_STATUS.OPEN],
+    urlParam: "to-review",
   },
   {
     key: CANDIDATE_STATUS_FILTER_KEY.INTERESTED,
     buttonText: "Interviews",
     title: "Interviews",
     noCandidateMessage: "No Interviews",
     statuses: [CANDIDATE_STATUS.INTERVIEW],
+    urlParam: "interviews",
   },
   {
     key: CANDIDATE_STATUS_FILTER_KEY.SELECTED,
     buttonText: "Selected",
     title: "Selected",
     noCandidateMessage: "No Selected Candidates",
     statuses: [CANDIDATE_STATUS.SELECTED, CANDIDATE_STATUS.OFFERED],
+    urlParam: "selected",
   },
   {
     key: CANDIDATE_STATUS_FILTER_KEY.NOT_INTERESTED,
@@ -162,6 +165,7 @@ export const CANDIDATE_STATUS_FILTERS = [
       CANDIDATE_STATUS.JOB_CLOSED,
       CANDIDATE_STATUS.WITHDRAWN,
     ],
+    urlParam: "declined",
   },
 ];
 

src/root.component.jsx

@@ -32,7 +32,7 @@ export default function Root() {
           <JobForm path="/taas/myteams/:teamId/positions/new" />
           <ResourceBookingDetails path="/taas/myteams/:teamId/rb/:resourceBookingId" />
           <ResourceBookingForm path="/taas/myteams/:teamId/rb/:resourceBookingId/edit" />
-          <PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
+          <PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates/*candidateStatus" />
           <TeamAccess path="/taas/myteams/:teamId/access" />
           <CreateNewTeam path="/taas/createnewteam">
             <CreateTeamLanding path="/" />

src/routes/CreateNewTeam/styles.module.scss

@@ -11,8 +11,15 @@
   }
 }
 
-@media only screen and (max-height: 820px) {
+@media only screen and (max-height: 859px) {
   .logos {
-    display: none;
+    position: relative;
+    width: 100vw;
+  }
+}
+
+@media only screen and (max-height: 859px) and (min-width: 1024px) {
+  .logos {
+    left: -270px;
   }
 }

src/routes/PositionDetails/index.jsx

@@ -22,7 +22,12 @@ const inReviewStatusFilter = _.find(CANDIDATE_STATUS_FILTERS, {
   key: CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW,
 });
 
-const PositionDetails = ({ teamId, positionId }) => {
+const getKeyFromParam = (urlParam) => {
+  const filter = _.find(CANDIDATE_STATUS_FILTERS, { urlParam });
+  return filter?.key || undefined;
+}
+
+const PositionDetails = ({ teamId, positionId, candidateStatus }) => {
   // by default show "interested" tab
   const [candidateStatusFilterKey, setCandidateStatusFilterKey] = useState(
     CANDIDATE_STATUS_FILTER_KEY.INTERESTED
@@ -41,15 +46,18 @@ const PositionDetails = ({ teamId, positionId }) => {
 
   // if there are some candidates to review, then show "To Review" tab by default
   useEffect(() => {
-    if (
-      position &&
-      _.filter(position.candidates, (candidate) =>
+    if (position) {
+      const key = getKeyFromParam(candidateStatus);
+      if (key) {
+        setCandidateStatusFilterKey(key);
+      } else if (_.filter(position.candidates, (candidate) =>
         inReviewStatusFilter.statuses.includes(candidate.status)
-      ).length > 0
-    ) {
-      setCandidateStatusFilterKey(CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW);
+        ).length > 0
+      ) {
+        setCandidateStatusFilterKey(CANDIDATE_STATUS_FILTER_KEY.TO_REVIEW);
+      }
     }
-  }, [position]);
+  }, [position, candidateStatus]);
 
   return (
     <Page title="Job Details">