TP-51166 | update details api call pushed to useteams api

src/Pages/TeamRevamp/partials/SlackDetails/index.tsx

@@ -1,11 +1,4 @@
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  useEffect,
-  useState,
-  useRef,
-  MutableRefObject,
-  useReducer,
-} from 'react';
+import { useEffect, useRef, MutableRefObject, useReducer } from 'react';
 import {
   BorderedInput,
   Button,
@@ -13,17 +6,13 @@ import {
   Typography,
 } from '@navi/web-ui/lib/primitives';
 import { SelectPicker } from '@navi/web-ui/lib/components';
-import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import { AlertOutlineIcon } from '@navi/web-ui/lib/icons';
-import { fetchTeamDetails } from '@src/slices/team1Slice';
-import { AppDispatch } from '@src/store';
 import useOutsideClick from '@src/services/hooks/useOustideClick';
 import { useAuthData } from '@src/services/hooks/useAuth';
-import { ApiService } from '@src/services/api';
+import useTeamApis from '../../useTeamApis';
 
 import {
   TeamsDetail,
-  UPDATE_TEAM_DATA,
   actionTypes,
   initialState,
   reducer,
@@ -33,11 +22,10 @@ import useGetTeamDetailsConstants from '../../util';
 import styles from './Slack.module.scss';
 
 const TeamDetails: React.FC = () => {
-  const dispatch = useDispatch<AppDispatch>();
   const [state, dispatchData] = useReducer(reducer, initialState);
   const Role = useAuthData();
+  const { updateDetails } = useTeamApis();
   const {
-    teamId,
     userEmail,
     managerEmail,
     teamDetails,
@@ -74,7 +62,7 @@ const TeamDetails: React.FC = () => {
       type: actionTypes.SET_ONCALL,
       payload: {
         label: event.label,
-        value: event.value.toString(),
+        value: event.value,
       },
     });
     dispatchData({
@@ -91,7 +79,7 @@ const TeamDetails: React.FC = () => {
       type: actionTypes.SET_PSEC_ONCALL,
       payload: {
         label: event.label,
-        value: event.value.toString(),
+        value: event.value,
       },
     });
     dispatchData({
@@ -151,35 +139,6 @@ const TeamDetails: React.FC = () => {
       payload: e.target.value,
     });
   };
-  const updateDetails = (): void => {
-    const endPoint = UPDATE_TEAM_DATA();
-    ApiService.post(endPoint, {
-      id: teamId,
-      webhook_slack_channel: state.slackChannelId,
-      on_call_handle: state.oncall.value,
-      pse_on_call_id: state.psecOncall.value,
-    })
-      .then(response => {
-        toast.success(response?.data?.data);
-        dispatch(fetchTeamDetails(teamId?.toString() || ''));
-        dispatchData({
-          type: actionTypes.SET_OPEN_ONCALL,
-          payload: false,
-        });
-        dispatchData({
-          type: actionTypes.SET_PSEC_OPEN_ONCALL,
-          payload: false,
-        });
-      })
-      .catch(error => {
-        const toastMessage = `${
-          error?.response?.data?.error?.message
-            ? `${error?.response?.data?.error?.message}`
-            : 'Something went wrong,Pls try again later'
-        }`;
-        toast.error(toastMessage);
-      });
-  };
 
   const isUserParticipant = (teamDetails: TeamsDetail): boolean | undefined => {
     const participantEmails = teamDetails?.participants?.map(
@@ -293,7 +252,13 @@ const TeamDetails: React.FC = () => {
             >
               <Button
                 variant="text"
-                onClick={updateDetails}
+                onClick={() => {
+                  updateDetails(
+                    state.slackChannelId,
+                    state.oncall.value,
+                    state.psecOncall.value,
+                  );
+                }}
                 disabled={
                   !state.slackChannelId && !state.psecInput && !state.input
                 }

src/Pages/TeamRevamp/partials/TeamMemberDetails/TeamMemberDetails.module.scss

@@ -98,6 +98,3 @@
   margin-top: 12px;
   margin-left: 5px;
 }
-.fallback-component {
-  height: 200px;
-}

src/Pages/TeamRevamp/useTeamApis.tsx

@@ -1,3 +1,4 @@
+import { useReducer } from 'react';
 import { useDispatch } from 'react-redux';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import AlertIcon from '@src/assets/AlertIcon';
@@ -8,13 +9,16 @@ import {
   MAKE_MANAGER,
   REMOVE_TEAM_MEMBER,
   UPDATE_TEAM_DATA,
+  actionTypes,
+  initialState,
+  reducer,
 } from './constants';
 import { useGetTeamDetailsConstants } from './util';
 
 const useTeamApis = () => {
   const dispatch = useDispatch<AppDispatch>();
   const { teamId } = useGetTeamDetailsConstants();
-
+  const [state, dispatchData] = useReducer(reducer, initialState);
   const addMemberHandler = (emailIds: string): void => {
     const endPoint = UPDATE_TEAM_DATA();
     const finalSlackData = emailIds.includes(',')
@@ -75,11 +79,44 @@ const useTeamApis = () => {
         toast.error(`Error in making manager of team: ${error.message}`);
       });
   };
-
+  const updateDetails = (
+    slackChannelId: string,
+    oncall: string,
+    psecOncall: string,
+  ): void => {
+    const endPoint = UPDATE_TEAM_DATA();
+    ApiService.post(endPoint, {
+      id: teamId,
+      webhook_slack_channel: slackChannelId,
+      on_call_handle: oncall,
+      pse_on_call_id: psecOncall,
+    })
+      .then(response => {
+        toast.success(response?.data?.data);
+        dispatch(fetchTeamDetails(teamId?.toString() || ''));
+        dispatchData({
+          type: actionTypes.SET_OPEN_ONCALL,
+          payload: false,
+        });
+        dispatchData({
+          type: actionTypes.SET_PSEC_OPEN_ONCALL,
+          payload: false,
+        });
+      })
+      .catch(error => {
+        const toastMessage = `${
+          error?.response?.data?.error?.message
+            ? `${error?.response?.data?.error?.message}`
+            : 'Something went wrong,Pls try again later'
+        }`;
+        toast.error(toastMessage);
+      });
+  };
   return {
     addMemberHandler,
     removeTeamMember,
     makeManager,
+    updateDetails,
   };
 };