Merge pull request #104 from mbaghel/feature/member-management

fix: issue #19

Author: maxceem

config/dev.js

@@ -9,18 +9,13 @@ module.exports = {
    */
   CONNECT_WEBSITE_URL: "https://connect.topcoder-dev.com",
 
-  /**
-   * 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",
-    V3: "https://api.topcoder-dev.com/v3"
+    V3: "https://api.topcoder-dev.com/v3",
   },
 };

config/prod.js

@@ -9,18 +9,13 @@ module.exports = {
    */
   CONNECT_WEBSITE_URL: "https://connect.topcoder.com",
 
-  /**
-   * 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",
-    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

@@ -0,0 +1,32 @@
+/**
+ * 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;
+
+  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,
+};
+
+export default CenteredSpinner;

src/components/CenteredSpinner/styles.module.scss

@@ -0,0 +1,5 @@
+.loader-container {
+  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

@@ -0,0 +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 },
+});
+
+/**
+ * Action to close a report popup
+ */
+export const closeReport = () => ({
+  type: ACTION_TYPE.CLOSE_REPORT,
+});

src/components/ReportPopup/hooks/useReportPopup.js

@@ -0,0 +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

@@ -0,0 +1,85 @@
+/**
+ * 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 } 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 dispatch = useDispatch();
+  const [textVal, setTextVal] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const submitReport = () => {
+    setIsLoading(true);
+
+    postReport(teamName, teamId, textVal, memberHandle)
+      .then(() => {
+        setIsLoading(false);
+        closeModal();
+        toastr.success("Report submitted successfully");
+      })
+      .catch((err) => {
+        setIsLoading(false);
+
+        // Response interceptor passes only error body
+        // use this to identify server-side errors
+        if (err instanceof Error) {
+          toastr.error("Report failed");
+        } else {
+          toastr.error("Report failed", err.message);
+        }
+      });
+  };
+
+  const button = (
+    <Button
+      onClick={() => submitReport()}
+      size="medium"
+      isSubmit
+      disabled={textVal.trim().length < 1 || isLoading}
+    >
+      Submit
+    </Button>
+  );
+
+  const closeModal = useCallback(() => {
+    dispatch(closeReport());
+    setTextVal("");
+  }, [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>
+  );
+}
+
+export default ReportPopup;

src/components/ReportPopup/reducers/index.js

@@ -0,0 +1,34 @@
+/**
+ * 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

@@ -5,11 +5,13 @@ import { combineReducers } from "redux";
 import { reducer as toastrReducer } from "react-redux-toastr";
 import positionDetailsReducer from "../routes/PositionDetails/reducers";
 import teamMembersReducer from "../routes/TeamAccess/reducers";
+import reportPopupReducer from "../components/ReportPopup/reducers";
 
 const rootReducer = combineReducers({
   toastr: toastrReducer,
   positionDetails: positionDetailsReducer,
   teamMembers: teamMembersReducer,
+  reportPopup: reportPopupReducer,
 });
 
 export default rootReducer;

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

@@ -19,16 +19,18 @@ import { TEAM_MEMBERS_PER_PAGE } from "constants";
 import {
   formatDateRange,
   formatMoney,
-  formatReportIssueUrl,
   formatRequestExtensionUrl,
 } from "utils/format";
 import Input from "components/Input";
 import { skillShape } from "components/SkillsList";
+import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
 
 const TeamMembers = ({ team }) => {
   const { resources, jobs } = team;
   const [filter, setFilter] = useState("");
 
+  const showReportPopup = useReportPopup();
+
   const filteredMembers = useMemo(
     () =>
       resources
@@ -161,11 +163,7 @@ const TeamMembers = ({ team }) => {
                         {
                           label: "Report an Issue",
                           action: () => {
-                            window.open(
-                              formatReportIssueUrl(
-                                `Issue with ${member.handle} on ${team.name}`
-                              )
-                            );
+                            showReportPopup(team.name, team.id, member.handle);
                           },
                         },
                         {

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

@@ -10,16 +10,18 @@ import {
   formatConnectProjectUrl,
   formatMoney,
   formatRemainingTimeForTeam,
-  formatReportIssueUrl,
 } from "utils/format";
 import IconClock from "../../../../assets/images/icon-clock.svg";
 import IconMoney from "../../../../assets/images/icon-money.svg";
 // import IconRating from "../../../../assets/images/icon-rating.svg";
 import Button from "components/Button";
+import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
 // import Rating from "components/Rating";
 import "./styles.module.scss";
 
 const TeamSummary = ({ team }) => {
+  const showReportPopup = useReportPopup();
+
   return (
     <div styleName="team-summary">
       <div styleName="data-items">
@@ -58,7 +60,9 @@ const TeamSummary = ({ team }) => {
         <Button
           type="warning"
           size="medium"
-          href={formatReportIssueUrl(`TaaS Issue: ${team.name}`)}
+          onClick={() => {
+            showReportPopup(team.name, team.id);
+          }}
           target="_blank"
         >
           REPORT AN ISSUE

src/routes/MyTeamsDetails/index.jsx

@@ -15,6 +15,7 @@ import TeamSummary from "./components/TeamSummary";
 import TeamMembers from "./components/TeamMembers";
 import TeamPositions from "./components/TeamPositions";
 import withAuthentication from "../../hoc/withAuthentication";
+import ReportPopup from "components/ReportPopup";
 
 const MyTeamsDetails = ({ teamId }) => {
   const [team, loadingError] = useData(getTeamById, teamId);
@@ -35,6 +36,7 @@ const MyTeamsDetails = ({ teamId }) => {
           />
         </>
       )}
+      <ReportPopup />
     </Page>
   );
 };

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

@@ -15,13 +15,15 @@ import {
   formatDateRange,
   formatMoney,
   formatRemainingTimeForTeam,
-  formatReportIssueUrl,
   formatConnectProjectUrl,
 } from "utils/format";
 import AvatarGroup from "components/AvatarGroup";
 import ThreeDotsMenu from "components/ThreeDotsMenu";
+import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
 
 const TeamCard = ({ team }) => {
+  const showReportPopup = useReportPopup();
+
   return (
     <div styleName="team-card">
       <div styleName="three-dots-menu">
@@ -30,7 +32,7 @@ const TeamCard = ({ team }) => {
             {
               label: "Open in Connect",
               action: () => {
-                window.open(formatConnectProjectUrl(team.id));
+                console.log("Issue reported!");
               },
             },
             {
@@ -48,7 +50,7 @@ const TeamCard = ({ team }) => {
             {
               label: "Report an Issue",
               action: () => {
-                window.open(formatReportIssueUrl(`TaaS Issue: ${team.name}`));
+                showReportPopup(team.name, team.id);
               },
             },
           ]}