INFRA-2836 | Saurabh | Integrated delete API

src/Pages/Severity/SeverityForm.tsx

@@ -10,6 +10,7 @@ import { ApiService } from '@src/services/api';
 import MembersDetails from '@src/components/SevMemberDetails';
 import {
   FETCH_SINGLE_SEVERITY_DATA,
+  REMOVE_SEV_MEMBER,
   SeverityFormProps,
   UPDATE_SEVERITY_DATA,
 } from './constants';
@@ -56,6 +57,24 @@ const SeverityForm = (props: SeverityFormProps) => {
     }
   }, [severityId, isExpanded]);
 
+  const handleRemoveSevMember = (severityID: string, emailID: string) => {
+    const endpoint = REMOVE_SEV_MEMBER(severityID, emailID);
+    ApiService.delete(endpoint)
+      .then(response => {
+        if (response.status === 200) {
+          toast.success(response.data.data);
+          setIsLoading(true);
+          setSeverities({});
+          fetchSeverityById(true);
+        } else {
+          toast.error(response.data.error.message);
+        }
+      })
+      .catch(error => {
+        toast.error(`Error removing member from team : ${error.message}`);
+      });
+  };
+
   const submitHandler = () => {
     const endPoint = UPDATE_SEVERITY_DATA;
     const updatedSlackUsers = slackUsers?.includes(',')
@@ -112,7 +131,7 @@ const SeverityForm = (props: SeverityFormProps) => {
           <Typography variant="h4" color="#585757">
             Members
           </Typography>
-          <MembersDetails />
+          <MembersDetails handleRemoveSevMember={handleRemoveSevMember} />
         </div>
       </div>
       <hr className={styles['vertical-line']} />

src/Pages/Severity/constants.ts

@@ -15,3 +15,10 @@ export interface SeverityFormProps {
 export const FETCH_SINGLE_SEVERITY_DATA = (payload: string): string => {
   return `${URL_PREFIX}/severities/${payload}`;
 };
+
+export const REMOVE_SEV_MEMBER = (
+  severityID: string,
+  emailID: string,
+): string => {
+  return `${URL_PREFIX}/severity/${severityID}/member/${emailID}`;
+};

src/components/SevMemberDetails/index.tsx

@@ -10,13 +10,12 @@ import { CloseIcon } from '@navi/web-ui/lib/icons';
 import { useAuthData } from '@src/Pages/Team/Hook';
 import styles from './Members.module.scss';
 
-const MembersDetails = (props: any) => {
+const MembersDetails = ({ handleRemoveSevMember }) => {
   const data = useSelector((state: any) => state.severity.memberData);
   const Role = useAuthData();
   const totalMembers = data?.participants?.length;
   const [showTotalMembers, setShowTotalMembers] = useState(10);
   const [openedParticipantId, setOpenedParticipantId] = useState(null);
-
   return (
     <div>
       {totalMembers ? (
@@ -67,6 +66,7 @@ const MembersDetails = (props: any) => {
                           <Button
                             onClick={e => {
                               e.preventDefault();
+                              handleRemoveSevMember(data.id, participant.email);
                               setOpenedParticipantId(null);
                             }}
                             style={{ backgroundColor: '#E92C2C' }}