cleanup and documentation

Author: mbaghel

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

@@ -1,3 +1,8 @@
+/**
+ * Landing Box
+ * An option for the Create New Team
+ * landing page
+ */
 import React from "react";
 import PT from "prop-types";
 import "./styles.module.scss";

src/routes/CreateNewTeam/index.jsx

@@ -1,14 +1,20 @@
+/**
+ * Create New Team
+ * Landing page for creating new teams
+ * by selecting a role, inputting skills,
+ * or inputting a job description
+ */
 import React from "react";
 import { navigate } from "@reach/router";
 import _ from "lodash";
+import { toastr } from "react-redux-toastr";
 import Page from "components/Page";
 import PageHeader from "components/PageHeader";
 import LandingBox from "./components/LandingBox";
 import IconMultipleActionsCheck from "../../assets/images/icon-multiple-actions-check-2.svg";
 import IconListQuill from "../../assets/images/icon-list-quill.svg";
 import IconOfficeFileText from "../../assets/images/icon-office-file-text.svg";
 import { postProject } from "services/teams";
-import { toastr } from "react-redux-toastr";
 
 function CreateNewTeam() {
   const createProject = async () => {

src/routes/InputSkills/components/AddAnotherModal/index.jsx

@@ -1,3 +1,9 @@
+/**
+ * Add Another Modal
+ * Popup that appears after submitting job.
+ * Shows loading spinner while job submits and
+ * allows navigation to "Add another role".
+ */
 import React from "react";
 import PT from "prop-types";
 import Modal from "react-responsive-modal";

src/routes/InputSkills/components/CompleteProgress/index.jsx

@@ -1,3 +1,8 @@
+/**
+ * Complete Progress Tracker
+ * Graphical representation of
+ * completeness percentage for skill input.
+ */
 import React from "react";
 import PT from "prop-types";
 import "./styles.module.scss";

src/routes/InputSkills/components/Completeness/index.jsx

@@ -1,6 +1,13 @@
+/**
+ * Completeness Sidebar
+ * Shows level of completeness through skill
+ * input process and contains a button for
+ * searching for users or submitting the job.
+ */
 import Button from "components/Button";
 import React from "react";
 import cn from "classnames";
+import PT from "prop-types";
 import CompleteProgress from "../CompleteProgress";
 import "./styles.module.scss";
 import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
@@ -47,4 +54,11 @@ function Completeness({ isDisabled, onClick, buttonLabel, stage }) {
   );
 }
 
+Completeness.propTypes = {
+  isDisabled: PT.bool,
+  onClick: PT.func,
+  buttonLabel: PT.string,
+  stage: PT.number,
+};
+
 export default Completeness;

src/routes/InputSkills/components/ResultCard/index.jsx

@@ -1,3 +1,9 @@
+/**
+ * Result Card
+ * Card that appears after searching for
+ * users matching given skills. Gives information
+ * about costs and number of matching candidates.
+ */
 import React, { useState } from "react";
 import "./styles.module.scss";
 import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";

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

@@ -1,3 +1,8 @@
+/**
+ * Search Card
+ * A card that simulates searching for users
+ * that match the given skills.
+ */
 import React, { useEffect, useState } from "react";
 import "./styles.module.scss";
 import IconEarthSearch from "../../../../assets/images/icon-earth-search.svg";

src/routes/InputSkills/components/SkillItem/index.jsx

@@ -1,3 +1,8 @@
+/**
+ * Skill Item
+ * An item for the Skill List component.
+ * Shows an image and the name of the skill.
+ */
 import React from "react";
 import PT from "prop-types";
 import IconQuestionCircle from "../../../../assets/images/icon-question-circle.svg";

src/routes/InputSkills/components/SkillsList/index.jsx

@@ -1,5 +1,12 @@
+/**
+ * Skills List
+ * Lists all skills available to apply to a job
+ * and search for. Allows selecting skills and filtering
+ * by name.
+ */
 import React, { useEffect, useState } from "react";
 import { useDebounce } from "react-use";
+import PT from "prop-types";
 import Input from "components/Input";
 import PageHeader from "components/PageHeader";
 import "./styles.module.scss";
@@ -65,4 +72,10 @@ function SkillsList({ skills, selectedSkills, toggleSkill }) {
   );
 }
 
+SkillsList.propTypes = {
+  skills: PT.array,
+  selectedSkills: PT.array,
+  toggleSkill: PT.func,
+};
+
 export default SkillsList;

src/routes/InputSkills/index.jsx

@@ -1,7 +1,17 @@
+/**
+ * Input Skills page
+ * Page that user reaches after choosing to input job skills.
+ *
+ * Gets a project id from the router.
+ *
+ * Allows selecting a number of skills, searching for users
+ * with those skills, and submitting a job requiring the skills.
+ */
 import React, { useCallback, useEffect, useState } from "react";
 import { useData } from "hooks/useData";
 import { navigate } from "@reach/router";
 import { toastr } from "react-redux-toastr";
+import PT from "prop-types";
 import SkillsList from "./components/SkillsList";
 import Completeness from "./components/Completeness";
 import "./styles.module.scss";
@@ -60,6 +70,7 @@ function InputSkills({ projectId }) {
     [selectedSkills]
   );
 
+  // mocked search for users with given skills
   const search = () => {
     setSearchState("searching");
     searchTimer = setTimeout(() => {
@@ -108,4 +119,8 @@ function InputSkills({ projectId }) {
   );
 }
 
+InputSkills.propTypes = {
+  projectId: PT.string,
+};
+
 export default InputSkills;

src/routes/SelectRole/index.jsx

@@ -1,3 +1,8 @@
+/**
+ * Select Role
+ * Page for selecting a role to add to your team
+ */
+
 import React from "react";
 
 function SelectRole() {