Documentation and cleanup

Author: mbaghel

config/dev.js

@@ -16,6 +16,6 @@ module.exports = {
 
   API: {
     V5: "https://api.topcoder-dev.com/v5",
-    V3: "https://api.topcoder-dev.com/v3"
+    V3: "https://api.topcoder-dev.com/v3",
   },
 };

config/prod.js

@@ -16,6 +16,6 @@ module.exports = {
 
   API: {
     V5: "https://api.topcoder.com/v5",
-    V3: "https://api.topcoder.com/v3"
+    V3: "https://api.topcoder.com/v3",
   },
 };

src/components/Babge/styles.module.scss

@@ -6,7 +6,7 @@
   line-height: 20px;
   border-radius: 5px;
   height: 20px;
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 12px;
   letter-spacing: 0.5px;
   text-align: left;

src/components/CenteredSpinner/index.jsx

@@ -1,23 +1,32 @@
-import React from 'react'
-import PT from 'prop-types'
-import Loader from 'react-loader-spinner';
+/**
+ * A centered spinner used to indicate loading in modals
+ */
+
+import React from "react";
+import PT from "prop-types";
+import Loader from "react-loader-spinner";
 import "./styles.module.scss";
 
 function CenteredSpinner(props) {
-  const {type = "TailSpin", color = "#00BFFF", height = 80, width = 80} = props;
+  const {
+    type = "TailSpin",
+    color = "#00BFFF",
+    height = 80,
+    width = 80,
+  } = props;
 
   return (
     <div styleName="loader-container">
       <Loader type={type} color={color} height={height} width={width} />
     </div>
-  )
+  );
 }
 
 CenteredSpinner.propTypes = {
   type: PT.string,
   color: PT.string,
   height: PT.number,
-  width: PT.number
-}
+  width: PT.number,
+};
 
-export default CenteredSpinner
+export default CenteredSpinner;

src/components/CenteredSpinner/styles.module.scss

@@ -2,4 +2,4 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-}
+}

src/components/ReactSelect/index.jsx

@@ -63,7 +63,7 @@ const ReactSelect = (props) => {
       borderRadius: "5px",
     }),
     dropdownIndicator: () => ({
-      display: "none"
+      display: "none",
     }),
   };
 

src/components/ReportPopup/actions/index.js

@@ -1,13 +1,26 @@
+/**
+ * Report popup actions
+ */
+
 export const ACTION_TYPE = {
   OPEN_REPORT: "OPEN_REPORT",
   CLOSE_REPORT: "CLOSE_REPORT",
-}
+};
 
+/**
+ * Action to populate the report info and open a report popup
+ * @param {string} teamName Team name
+ * @param {string|number} teamId Tead ID
+ * @param {string} memberHandle Member handle
+ */
 export const openReport = (teamName, teamId, memberHandle) => ({
   type: ACTION_TYPE.OPEN_REPORT,
-  payload: { teamName, teamId, memberHandle }
-})
+  payload: { teamName, teamId, memberHandle },
+});
 
+/**
+ * Action to close a report popup
+ */
 export const closeReport = () => ({
-  type: ACTION_TYPE.CLOSE_REPORT
-})
+  type: ACTION_TYPE.CLOSE_REPORT,
+});

src/components/ReportPopup/hooks/useReportPopup.js

@@ -1,10 +1,20 @@
+/**
+ * Use report popup hook
+ */
+
 import { useDispatch } from "react-redux";
 import { openReport } from "../actions";
 
+/**
+ * Hook to allow report popup to be opened by any other component
+ * (as long as it is mounted somewhere in the tree)
+ *
+ * @returns func A wrapper around the open report dispatch
+ */
 export const useReportPopup = () => {
   const dispatch = useDispatch();
 
   return (teamName, teamId, memberHandle) => {
     dispatch(openReport(teamName, teamId, memberHandle));
-  }
-}
+  };
+};

src/components/ReportPopup/index.jsx

@@ -1,18 +1,21 @@
-import React, { useCallback, useState } from 'react'
-import { useSelector, useDispatch } from 'react-redux';
+/**
+ * A report popup used to report issues with teams or team members
+ */
+
+import React, { useCallback, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { toastr } from "react-redux-toastr";
-import { closeReport, submitReport } from "./actions";
-import BaseModal from "components/BaseModal"
-import TextArea from "components/TextArea"
+import { closeReport } from "./actions";
+import BaseModal from "components/BaseModal";
+import TextArea from "components/TextArea";
 import Button from "../Button";
 import { postReport } from "services/teams";
 import CenteredSpinner from "components/CenteredSpinner";
 
-
-
 function ReportPopup() {
-
-  const {isOpen, teamName, teamId, memberHandle } = useSelector(state => state.reportPopup);
+  const { isOpen, teamName, teamId, memberHandle } = useSelector(
+    (state) => state.reportPopup
+  );
 
   const dispatch = useDispatch();
   const [textVal, setTextVal] = useState("");
@@ -26,37 +29,50 @@ function ReportPopup() {
         console.log(res);
         setIsLoading(false);
         closeModal();
-        toastr.success("Report submitted successfully")
+        toastr.success("Report submitted successfully");
       })
-      .catch(err => {
+      .catch((err) => {
         setIsLoading(false);
         toastr.error("Report failed", err.message);
-      })
-  }
+      });
+  };
 
   const button = (
-  <Button 
-    onClick={() => submitReport()} 
-    size="medium" 
-    isSubmit
-    disabled={textVal.trim().length < 1 || isLoading}
-  >
+    <Button
+      onClick={() => submitReport()}
+      size="medium"
+      isSubmit
+      disabled={textVal.trim().length < 1 || isLoading}
+    >
       Submit
-  </Button>
-  )
+    </Button>
+  );
 
   const closeModal = useCallback(() => {
     dispatch(closeReport());
-  }, [dispatch])
+  }, [dispatch]);
 
   return (
-    <BaseModal 
-      open={isOpen} 
-      onClose={closeModal} 
-      title={`Issue Report - ${teamName}${memberHandle ? " - " + memberHandle : ""}`} button={button} disabled={isLoading}>
-      {isLoading ? <CenteredSpinner /> : <TextArea value={textVal} onChange={setTextVal}placeholder="Describe your issue" /> }
-    </BaseModal> 
-  )
+    <BaseModal
+      open={isOpen}
+      onClose={closeModal}
+      title={`Issue Report - ${teamName}${
+        memberHandle ? " - " + memberHandle : ""
+      }`}
+      button={button}
+      disabled={isLoading}
+    >
+      {isLoading ? (
+        <CenteredSpinner />
+      ) : (
+        <TextArea
+          value={textVal}
+          onChange={setTextVal}
+          placeholder="Describe your issue"
+        />
+      )}
+    </BaseModal>
+  );
 }
 
-export default ReportPopup;
+export default ReportPopup;

src/components/ReportPopup/reducers/index.js

@@ -1,31 +1,34 @@
-import { ACTION_TYPE } from '../actions';
+/**
+ * Reducer for Report popup
+ */
+
+import { ACTION_TYPE } from "../actions";
 
 const initialState = {
   teamName: undefined,
   teamId: undefined,
   memberHandle: undefined,
   isOpen: false,
-}
+};
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
-
     case ACTION_TYPE.OPEN_REPORT:
       return {
         ...state,
         ...action.payload,
         isOpen: true,
-      }
+      };
 
     case ACTION_TYPE.CLOSE_REPORT:
       return {
         ...state,
         isOpen: false,
-      }
+      };
 
     default:
       return state;
   }
-}
+};
 
 export default reducer;

src/reducers/index.js

@@ -11,7 +11,7 @@ const rootReducer = combineReducers({
   toastr: toastrReducer,
   positionDetails: positionDetailsReducer,
   teamMembers: teamMembersReducer,
-  reportPopup: reportPopupReducer
+  reportPopup: reportPopupReducer,
 });
 
 export default rootReducer;

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

@@ -162,7 +162,9 @@ const TeamMembers = ({ team }) => {
                         },
                         {
                           label: "Report an Issue",
-                          action: () => {showReportPopup(team.name, team.id, member.handle)},
+                          action: () => {
+                            showReportPopup(team.name, team.id, member.handle);
+                          },
                         },
                         {
                           label: "Request an Extension",

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

@@ -20,7 +20,6 @@ import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
 import "./styles.module.scss";
 
 const TeamSummary = ({ team }) => {
-
   const showReportPopup = useReportPopup();
 
   return (

src/routes/MyTeamsList/components/TeamCard/index.jsx

@@ -22,7 +22,6 @@ import ThreeDotsMenu from "components/ThreeDotsMenu";
 import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
 
 const TeamCard = ({ team }) => {
-
   const showReportPopup = useReportPopup();
 
   return (
@@ -33,7 +32,7 @@ const TeamCard = ({ team }) => {
             {
               label: "Open in Connect",
               action: () => {
-                console.log("Issue reported!")
+                console.log("Issue reported!");
               },
             },
             {

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

@@ -61,7 +61,7 @@ const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
 
   useEffect(() => {
     setPage(1);
-  }, [candidateStatus])
+  }, [candidateStatus]);
 
   const filteredCandidates = useMemo(
     () =>