Extracted loading spinner from delete modal to its own component. Finished implementing report popup and connected to API

Author: mbaghel

src/components/CenteredSpinner/index.jsx

@@ -0,0 +1,23 @@
+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/ReportPopup/actions/index.js

@@ -1,7 +1,6 @@
 export const ACTION_TYPE = {
   OPEN_REPORT: "OPEN_REPORT",
   CLOSE_REPORT: "CLOSE_REPORT",
-  SUBMIT_REPORT: "SUMBIT_REPORT"
 }
 
 export const openReport = (teamName, teamId, memberHandle) => ({
@@ -12,7 +11,3 @@ export const openReport = (teamName, teamId, memberHandle) => ({
 export const closeReport = () => ({
   type: ACTION_TYPE.CLOSE_REPORT
 })
-
-export const submitReport = () => ({
-  type: ACTION_TYPE.SUBMIT_REPORT
-})

src/components/ReportPopup/hooks/useReportPopup.js

@@ -4,7 +4,7 @@ import { openReport } from "../actions";
 export const useReportPopup = () => {
   const dispatch = useDispatch();
 
-  return (teamName, memberHandle) => {
-    dispatch(openReport(teamName, memberHandle));
+  return (teamName, teamId, memberHandle) => {
+    dispatch(openReport(teamName, teamId, memberHandle));
   }
 }

src/components/ReportPopup/index.jsx

@@ -1,27 +1,49 @@
 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 Button from "../Button";
 import { postReport } from "services/teams";
+import CenteredSpinner from "components/CenteredSpinner";
 
 
 
 function ReportPopup() {
 
-  const {isOpen, teamName, memberHandle } = useSelector(state => state.reportPopup);
+  const {isOpen, teamName, teamId, memberHandle } = useSelector(state => state.reportPopup);
 
   const dispatch = useDispatch();
   const [textVal, setTextVal] = useState("");
-  const [isDisabled, setIsDisabled] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
   const submitReport = () => {
-
+    setIsLoading(true);
+
+    postReport(teamName, teamId, textVal, memberHandle)
+      .then((res) => {
+        console.log(res);
+        setIsLoading(false);
+        closeModal();
+        toastr.success("Report submitted successfully")
+      })
+      .catch(err => {
+        setIsLoading(false);
+        toastr.error("Report failed", err.message);
+      })
   }
 
-  const button = <Button onClick={() => closeModal()} size="medium" isSubmit>Submit</Button>
+  const button = (
+  <Button 
+    onClick={() => submitReport()} 
+    size="medium" 
+    isSubmit
+    disabled={textVal.trim().length < 1 || isLoading}
+  >
+      Submit
+  </Button>
+  )
 
   const closeModal = useCallback(() => {
     dispatch(closeReport());
@@ -31,8 +53,8 @@ function ReportPopup() {
     <BaseModal 
       open={isOpen} 
       onClose={closeModal} 
-      title={`Issue Report - ${teamName}${memberHandle ? " - " + memberHandle : ""}`} button={button} disabled={isDisabled}>
-      <TextArea value={textVal} onChange={setTextVal}placeholder="Describe your issue" />
+      title={`Issue Report - ${teamName}${memberHandle ? " - " + memberHandle : ""}`} button={button} disabled={isLoading}>
+      {isLoading ? <CenteredSpinner /> : <TextArea value={textVal} onChange={setTextVal}placeholder="Describe your issue" /> }
     </BaseModal> 
   )
 }

src/routes/TeamAccess/components/DeleteModal/index.jsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
 import { toastr } from "react-redux-toastr";
-import Loader from "react-loader-spinner";
 import BaseModal from "components/BaseModal";
 import Button from "components/Button";
 import { removeTeamMember, removeInvite } from "../../actions";
 import "./styles.module.scss";
+import CenteredSpinner from "components/CenteredSpinner";
 
 const MEMBER_TITLE = "You're about to delete a member from the team";
 const INVITE_TITLE = "You're about to remove an invitation";
@@ -101,9 +101,7 @@ function DeleteModal({ selected, open, onClose, teamId, isInvite }) {
       disabled={loading}
     >
       {loading ? (
-        <div styleName="loader-container">
-          <Loader type="TailSpin" color="#00BFFF" height={80} width={80} />
-        </div>
+        <CenteredSpinner />
       ) : (
         <p>{displayText()}</p>
       )}

src/services/teams.js

@@ -178,7 +178,7 @@ export const postReport = (teamName, teamId, reportText, memberHandle) => {
     template: "team-issue-report",
     data: {
       projectName: teamName,
-      projectId: teamId,
+      projected: teamId,
       reportText
     }
   }