Merge branch 'dev' into issue-35

Author: maxceem

src/components/SkillsList/index.jsx

@@ -71,69 +71,69 @@ const SkillsList = ({ requiredSkills, skills, limit = 3 }) => {
   }, [isOpen, setIsOpen]);
 
   return (
-    <div styleName="skills-list">
-      {_.map(skillsToShow, "name").join(", ")}
-      {skillsToHide.length > 0 && (
+    <OutsideClickHandler onOutsideClick={close} display="inline">
+      <div
+        styleName="skills-list"
+        onClick={toggle}
+        onMouseEnter={open}
+        onMouseLeave={close}
+        role="button"
+        tabIndex={0}
+        ref={setReferenceElement}
+      >
+        {_.map(skillsToShow, "name").join(", ")}
+
+        {skillsToHide.length > 0 && (
+          <>
+            {" and "}
+            <span styleName="more">{skillsToHide.length > 0} more</span>
+          </>
+        )}
         <>
-          {" and "}
-          <OutsideClickHandler onOutsideClick={close} display="inline">
-            <span
-              styleName="more"
-              onClick={toggle}
-              onMouseEnter={open}
-              onMouseLeave={close}
-              role="button"
-              tabIndex={0}
-              ref={setReferenceElement}
+          {isOpen && (
+            <div
+              styleName="popover"
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
             >
-              {skillsToHide.length > 0} more
-            </span>
-
-            {isOpen && (
-              <div
-                styleName="popover"
-                ref={setPopperElement}
-                style={styles.popper}
-                {...attributes.popper}
-              >
-                <div styleName="popover-content">
-                  {requiredSkills && (
-                    <div styleName="skills-section">
-                      <div styleName="skills-title">Required Job Skills</div>
-                      <ul styleName="skills-list">
-                        {!requiredSkills.length && <li>None</li>}
-                        {requiredSkills.map((skill) => (
-                          <li key={skill.id}>
-                            {_.find(skills, { id: skill.id }) ? (
-                              <IconCheck />
-                            ) : (
-                              <IconCross />
-                            )}{" "}
-                            {skill.name}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  )}
-                  {otherSkills && (
-                    <div styleName="skills-section">
-                      <div styleName="skills-title">
-                        {showMatches ? "Other User Skills" : "Required Skills"}
-                      </div>
-                      <ul styleName="skills-list">
-                        {otherSkills.map((skill) => (
-                          <li key={skill.id}>{skill.name}</li>
-                        ))}
-                      </ul>
+              <div styleName="popover-content">
+                {requiredSkills && (
+                  <div styleName="skills-section">
+                    <div styleName="skills-title">Required Job Skills</div>
+                    <ul styleName="skills-list">
+                      {!requiredSkills.length && <li>None</li>}
+                      {requiredSkills.map((skill) => (
+                        <li key={skill.id}>
+                          {_.find(skills, { id: skill.id }) ? (
+                            <IconCheck />
+                          ) : (
+                            <IconCross />
+                          )}{" "}
+                          {skill.name}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {otherSkills && (
+                  <div styleName="skills-section">
+                    <div styleName="skills-title">
+                      {showMatches ? "Other User Skills" : "Required Skills"}
                     </div>
-                  )}
-                </div>
+                    <ul styleName="skills-list">
+                      {otherSkills.map((skill) => (
+                        <li key={skill.id}>{skill.name}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
               </div>
-            )}
-          </OutsideClickHandler>
+            </div>
+          )}
         </>
-      )}
-    </div>
+      </div>
+    </OutsideClickHandler>
   );
 };
 

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

@@ -10,7 +10,7 @@ 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, formatOpenPositions } from "utils/format";
+import { formatJobDate, formatOpenPositions } from "utils/format";
 import { Link } from "@reach/router";
 
 const TeamPositions = ({ teamId, positions, resources }) => {
@@ -45,7 +45,7 @@ const TeamPositions = ({ teamId, positions, resources }) => {
                 </div>
                 <div styleName="table-group-first-inner">
                   <div styleName="table-cell cell-date">
-                    {formatDateRange(position.startDate, position.endDate)}
+                    {formatJobDate(position.startDate, position.duration)}
                   </div>
                   <div styleName="table-cell cell-money">
                     {/* Hide rate as we don't have data for it */}

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

@@ -3,7 +3,7 @@
  *
  * Show a list of position candidates with sort select and pagination.
  */
-import React, { useMemo, useState, useCallback } from "react";
+import React, { useMemo, useState, useCallback, useEffect } from "react";
 import PT from "prop-types";
 import _ from "lodash";
 import CardHeader from "components/CardHeader";
@@ -58,6 +58,11 @@ const populateSkillsMatched = (position, candidate) => ({
 const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
   const { candidates } = position;
   const [sortBy, setSortBy] = useState(CANDIDATES_SORT_BY.SKILL_MATCHED);
+
+  useEffect(() => {
+    setPage(1);
+  }, [candidateStatus])
+
   const filteredCandidates = useMemo(
     () =>
       _.chain(candidates)

src/utils/format.js

@@ -220,3 +220,25 @@ export const formatOpenPositions = (job, resources) => {
     )}`;
   }
 };
+
+/**
+ * Format job date
+ *
+ * @param {string} startDate job startDate
+ * @param {number} duration  job duration
+ *
+ * @returns {string} formatted string
+ */
+export const formatJobDate = (startDate, duration) => {
+  const dateStr = startDate ? moment(startDate).format(DAY_FORMAT) : "";
+
+  if (startDate && duration) {
+    return `Requested starting ${dateStr} for ${formatPlural(duration, "week")}`;
+  } else if (startDate) {
+    return `Requested starting ${dateStr}`;
+  } else if (duration) {
+    return formatPlural(duration, "week");
+  }
+
+  return "TBD";
+};