Dry Release v0.2

README.md

@@ -15,6 +15,8 @@ This is a [single-spa](https://single-spa.js.org/) example React microapp.
 - Router via [Reach Router](https://reach.tech/router/)
 - CSS Modules with SCSS via [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules)
 - [React Inline SVG](https://github.com/airbnb/babel-plugin-inline-react-svg)
+- We use **Redux Store** for storing page data if we need to edit it. Otherwise we can use local state.
+- [react-redux-toastr](https://www.npmjs.com/package/react-redux-toastr) for success/error popups in the bottom left corner.
 
 ## Config
 

config/development.js

@@ -8,6 +8,12 @@ module.exports = {
    * Email to report issues to
    */
   EMAIL_REPORT_ISSUE: "[email protected]",
+
+  /**
+   * Email to request extension
+   */
+  EMAIL_REQUEST_EXTENSION: "[email protected]",
+
   API: {
     V5: "https://api.topcoder-dev.com/v5",
   },

config/production.js

@@ -8,6 +8,12 @@ module.exports = {
    * Email to report issues to
    */
   EMAIL_REPORT_ISSUE: "[email protected]",
+
+  /**
+   * Email to request extension
+   */
+  EMAIL_REQUEST_EXTENSION: "[email protected]",
+
   API: {
     V5: "https://api.topcoder.com/v5",
   },

package.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",

src/components/LoadingIndicator/index.jsx

@@ -4,17 +4,22 @@
  * Optionally shows error.
  */
 import React from "react";
+import _ from "lodash";
 import PT from "prop-types";
 import "./styles.module.scss";
 
 const LoadingIndicator = ({ error }) => {
   return (
-    <div styleName="loading-indicator">{!error ? "Loading..." : error}</div>
+    <div styleName="loading-indicator">
+      {!error
+        ? "Loading..."
+        : _.get(error, "response.data.message", error.toString())}
+    </div>
   );
 };
 
 LoadingIndicator.propTypes = {
-  error: PT.string,
+  error: PT.object,
 };
 
 export default LoadingIndicator;

src/components/SkillsList/index.jsx

@@ -2,9 +2,8 @@
  * SkillsList
  *
  * Shows list of skills with "N more" link which is showing tooltip with a full list of skills.
- * If `showMatches = true` it marks matched and not matched required skills.
  */
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useMemo } from "react";
 import PT from "prop-types";
 import _ from "lodash";
 import "./styles.module.scss";
@@ -13,17 +12,19 @@ import IconCross from "../../assets/images/icon-cross.svg";
 import { usePopper } from "react-popper";
 import OutsideClickHandler from "react-outside-click-handler";
 
-const SkillsList = ({
-  skills,
-  limit = 3,
-  showMatches = false,
-}) => {
+const SkillsList = ({ requiredSkills, skills, limit = 3 }) => {
   const skillsToShow = skills.slice(0, limit);
   const skillsToHide = skills.slice(limit);
 
+  // if has requiredSkills, show two columns, eles show only one column
+  const showMatches = !!requiredSkills;
   const [isOpen, setIsOpen] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
+
+  const otherSkills = useMemo(() => {
+    return _.differenceBy(skills, requiredSkills, "id");
+  }, [requiredSkills, skills]);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom",
     modifiers: [
@@ -96,11 +97,30 @@ const SkillsList = ({
                 {...attributes.popper}
               >
                 <div styleName="popover-content">
-                  {skills && (
+                  {requiredSkills && (
+                    <div styleName="skills-section">
+                      <div styleName="skills-title">Required Job Skills</div>
+                      <ul styleName="skills-list">
+                        {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">Skills</div>
+                      <div styleName="skills-title">
+                        {showMatches ? "Other User Skills" : "Required Skills"}
+                      </div>
                       <ul styleName="skills-list">
-                        {skills.map((skill) => (
+                        {otherSkills.map((skill) => (
                           <li key={skill.id}>{skill.name}</li>
                         ))}
                       </ul>
@@ -123,8 +143,8 @@ export const skillShape = PT.shape({
 
 SkillsList.propTypes = {
   skills: PT.arrayOf(skillShape),
+  requiredSkills: PT.arrayOf(skillShape),
   limit: PT.number,
-  showMatches: PT.bool,
 };
 
 export default SkillsList;

src/components/SkillsSummary/index.jsx

@@ -10,17 +10,23 @@ import PercentageBar from "components/PercentageBar";
 import SkillsList from "components/SkillsList";
 import "./styles.module.scss";
 
-const SkillsSummary = ({ skills, skillMatched, limit }) => {
+const SkillsSummary = ({ skills, requiredSkills = [], limit }) => {
+  const skillsMatched = _.intersectionBy(skills, requiredSkills, "id");
+  const skillsMatchedRatio =
+    requiredSkills.length > 0
+      ? skillsMatched.length / requiredSkills.length
+      : 1;
+
   return (
     <div>
       <div styleName="percentage">
-        <PercentageBar ratio={skillMatched / 100} styleName="percentage-bar" />
-        {Math.round(skillMatched)}% skill matched
+        <PercentageBar ratio={skillsMatchedRatio} styleName="percentage-bar" />
+        {Math.round(skillsMatchedRatio * 100)}% skill matched
       </div>
       <SkillsList
         skills={skills}
+        requiredSkills={requiredSkills}
         limit={limit}
-        showMatches
       />
     </div>
   );
@@ -33,8 +39,8 @@ const skillShape = PT.shape({
 
 SkillsSummary.propTypes = {
   skills: PT.arrayOf(skillShape),
+  requiredSkills: PT.arrayOf(skillShape),
   limit: PT.number,
-  skillMatched: PT.number,
 };
 
 export default SkillsSummary;

src/constants/index.js

@@ -12,11 +12,21 @@ export const DAY_FORMAT = "MM/DD/YYYY";
  */
 export const TEAM_MEMBERS_PER_PAGE = 5;
 
+/**
+ * How many teams  show per page by default
+ */
+export const TEAMS_PER_PAGE = 20;
+
 /**
  * How many position candidates show per page by default
  */
 export const POSITION_CANDIDATES_PER_PAGE = 5;
 
+/**
+ * Input debounce delay (ms)
+ */
+export const INPUT_DEBOUNCE_DELAY = 200;
+
 /**
  * Position statuses
  */
@@ -110,7 +120,7 @@ export const CANDIDATE_STATUS_FILTERS = [
  * Candidates "sort by" values
  */
 export const CANDIDATES_SORT_BY = {
-  SKILL_MATCHED: "skillMatched",
+  SKILL_MATCHED: "skillsMatched",
   HANDLE: "handle",
 };
 
@@ -121,3 +131,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",
+};