fix: make improvements

Author: yoution

src/routes/MyTeamsDetails/components/TeamPositions/index.jsx

@@ -10,10 +10,10 @@ import SkillsList, { skillShape } from "components/SkillsList";
 import Button from "components/Button";
 import { POSITION_STATUS, POSITION_STATUS_TO_TEXT, RATE_TYPE } from "constants";
 import "./styles.module.scss";
-import { formatDateRange } from "utils/format";
+import { formatDateRange, formatOpenPositions } from "utils/format";
 import { Link } from "@reach/router";
 
-const TeamPositions = ({ teamId, positions, getOpenPositionsLabel }) => {
+const TeamPositions = ({ teamId, positions, resources }) => {
   return (
     <div styleName="team-positions">
       <div styleName="team-position-header">
@@ -41,7 +41,7 @@ const TeamPositions = ({ teamId, positions, getOpenPositionsLabel }) => {
                     <strong>{position.title}</strong>
                   </Link>
                   <SkillsList skills={position.skills} limit={5} />
-                  <div>{getOpenPositionsLabel(position)}</div>
+                  <div>{formatOpenPositions(position, resources)}</div>
                 </div>
                 <div styleName="table-group-first-inner">
                   <div styleName="table-cell cell-date">
@@ -79,7 +79,6 @@ const TeamPositions = ({ teamId, positions, getOpenPositionsLabel }) => {
 
 TeamPositions.propTypes = {
   teamId: PT.string,
-  getOpenPositionsLabel: PT.func,
   positions: PT.arrayOf(
     PT.shape({
       title: PT.string,
@@ -91,6 +90,16 @@ TeamPositions.propTypes = {
       status: PT.oneOf(Object.values(POSITION_STATUS)),
     })
   ),
+  resources: PT.arrayOf(
+    PT.shape({
+      id: PT.string,
+      handle: PT.string,
+      firstName: PT.string,
+      lastName: PT.string,
+      skills: PT.arrayOf(skillShape),
+      skillsMatched: PT.number,
+    })
+  ),
 };
 
 export default TeamPositions;

src/routes/MyTeamsDetails/index.jsx

@@ -11,7 +11,6 @@ import PageHeader from "components/PageHeader";
 import { useData } from "hooks/useData";
 import { getTeamById } from "services/teams";
 import LoadingIndicator from "components/LoadingIndicator";
-import { formatOpenPositions } from "utils/format";
 import TeamSummary from "./components/TeamSummary";
 import TeamMembers from "./components/TeamMembers";
 import TeamPositions from "./components/TeamPositions";
@@ -20,10 +19,6 @@ import withAuthentication from "../../hoc/withAuthentication";
 const MyTeamsDetails = ({ teamId }) => {
   const [team, loadingError] = useData(getTeamById, teamId);
 
-  const getOpenPositionsLabel = (job) => {
-    return formatOpenPositions(job, team.resources);
-  };
-
   return (
     <Page title="Team Details">
       {!team ? (
@@ -36,7 +31,7 @@ const MyTeamsDetails = ({ teamId }) => {
           <TeamPositions
             positions={team.jobs || []}
             teamId={teamId}
-            getOpenPositionsLabel={getOpenPositionsLabel}
+            resources={team.resources}
           />
         </>
       )}

src/utils/format.js

@@ -210,17 +210,13 @@ export const formatPageTitle = (pageTitle) => {
  * @returns {string} open positions string
  */
 export const formatOpenPositions = (job, resources) => {
-  const jobs = _.filter(resources, (r) => {
-    return r.jobId === job.id;
-  });
-  if (jobs.length === 0) {
-    if (job.numPositions <= 1) {
-      return `${job.numPositions} open position`;
-    }
-    return `${job.numPositions} open positions`;
-  } else if (job.numPositions === 1) {
-    return `${jobs.length} / ${job.numPositions}  open position`;
+  const jobResources = _.filter(resources, { jobId: job.id });
+  if (jobResources.length === 0) {
+    return `${formatPlural(job.numPositions, "open position")}`;
   } else {
-    return `${jobs.length} / ${job.numPositions}  open positions`;
+    return `${jobResources.length} / ${formatPlural(
+      job.numPositions,
+      "open position"
+    )}`;
   }
 };