members update accordian fixed

src/components/MembersDetails/Members.module.scss

@@ -4,39 +4,23 @@
   align-items: center;
 
   margin-top: 5%;
-  //cursor: pointer;
-
-  //background-color: orange;
 }
 
 .participant-detail {
   display: flex;
-  //justify-content:;
-  //flex-direction: row;
-  //justify-content: flex-end;
-  //align-items: center;
-  //justify-content: space-between;
-  //margin-left: auto;
-  //gap: 4px;
-  //margin-left: 15px;
-  //background-color: red;
+
   cursor: pointer;
 }
 
 .participant-detail-nest {
   display: flex;
-  //cursor: pointer;
-  //background-color: aqua;
 }
 .participant-detail-nest:hover .mark-as-manager {
   display: block;
-  //visibility: visible; /* Show the text when hovering over the participant-detail */
 }
 
 .mark-as-manager {
   display: none;
-  //visibility: hidden; /* Hide the text by default */
-  //transition: visibility 0.3s;
 }
 
 .remove-logo {

src/components/MembersDetails/index.tsx

@@ -9,18 +9,14 @@ import remove_logo from '@src/assets/close.svg';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import { ApiService } from '@src/services/api';
 import {
-  FETCH_SINGLE_TEAM_DATA,
-  TeamFormProps,
-  UPDATE_TEAM_DATA,
-  slackUserOptions,
-  userInputPlaceholders,
   REMOVE_TEAM_MEMBER,
   MAKE_MANAGER,
+  FETCH_SINGLE_TEAM_DATA,
 } from '@src/Pages/Team/constants';
 
 const MembersDetails = (props: any) => {
-  //const { data } = props;
-  const { data, fetchTeamById } = props;
+  const { fetchTeamById } = props; // Remove data prop here
+  const [data, setData] = useState(props.data);
   const totalMembers = data?.participants?.length;
   const [showTotalMembers, setShowTotalMembers] = useState(10);
   const [showRemoveButton, setShowRemoveButton] = useState(false);
@@ -30,12 +26,31 @@ const MembersDetails = (props: any) => {
 
     ApiService.delete(endpoint)
       .then(response => {
-        // Handle successful removal here, if needed
-        toast.success(`${slackUserId} has been removed from team ${teamId}.`);
-        fetchTeamById(true);
+        if (response.status === 200) {
+          toast.success(response.data.data);
+          ///
+          const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId);
+          ApiService.get(fetchTeamDataEndpoint)
+            .then(response => {
+              const updatedData = response?.data?.data;
+              setData(updatedData);
+              //fetchTeamById(true, updatedData); // Pass the updated data to the parent component
+            })
+            .catch(error => {
+              const toastMessage = `${
+                error?.response?.data?.error?.message
+                  ? `${error?.response?.data?.error?.message},`
+                  : ''
+              }`;
+              toast.error(toastMessage);
+            });
+        } else {
+          toast.error(response.data.error.message);
+        }
+
+        //fetchTeamById(true);
       })
       .catch(error => {
-        // Handle error if the removal request fails
         toast.error(
           `Error removing ${slackUserId} from team ${teamId}: ${error.message}`,
         );
@@ -43,27 +58,42 @@ const MembersDetails = (props: any) => {
   };
 
   const handleMakeManager = (teamId, slackUserId) => {
-    const endpoint = MAKE_MANAGER(teamId, slackUserId); // Use the endpoint constant for making a manager
+    const endpoint = MAKE_MANAGER(teamId, slackUserId);
 
-    ApiService.patch(endpoint, {}) // Assuming a PUT request is used to make a manager, you can adjust this based on your API
+    ApiService.patch(endpoint, {})
       .then(response => {
-        // Handle successful manager assignment here, if needed
-        toast.success(`${slackUserId} is now a manager in team ${teamId}.`);
-        //const url=FETCH_SINGLE_TEAM_DATA(teamId);
-        fetchTeamById(true);
+        if (response.status === 200) {
+          toast.success(response.data.data);
+          const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId);
+          ApiService.get(fetchTeamDataEndpoint)
+            .then(response => {
+              const updatedData = response?.data?.data;
+              setData(updatedData);
+              //fetchTeamById(true, updatedData); // Pass the updated data to the parent component
+            })
+            .catch(error => {
+              const toastMessage = `${
+                error?.response?.data?.error?.message
+                  ? `${error?.response?.data?.error?.message},`
+                  : ''
+              }`;
+              toast.error(toastMessage);
+            });
+        } else {
+          toast.error(response.data.error.message);
+        }
+
+        //fetchTeamById(true);
       })
       .catch(error => {
-        // Handle error if the manager assignment request fails
         toast.error(
           `Error making ${slackUserId} a manager in team ${teamId}: ${error.message}`,
         );
       });
   };
 
-  // Retrieve the user's role data from local storage
   const userData = JSON.parse(localStorage.getItem('user-data') || '{}');
   const userRoles = userData.roles || [];
-  console.log('userRoles', userRoles);
 
   const managerEmail = data?.participants?.find(
     participant => participant.id === data.managerId,
@@ -72,13 +102,9 @@ const MembersDetails = (props: any) => {
   const isAdmin = userRoles.includes('Admin');
 
   useEffect(() => {
-    // Check if the manager's email matches the one stored in local storage
-
     if (managerEmail === storedEmail || isAdmin) {
-      // Display the remove button
       setShowRemoveButton(true);
     } else {
-      // Hide the remove button
       setShowRemoveButton(false);
     }
   }, [data, userRoles]);
@@ -192,44 +218,3 @@ const MembersDetails = (props: any) => {
 };
 
 export default MembersDetails;
-
-/**
- * <div className={styles[`mark-as-manager`]}>
-                        <Tag
-                          color="blue"
-                          label="Mark as manager"
-                          variant="transparent"
-                        />
-                      </div>
- */
-
-/*
-
-                <div className={styles['participant-detail']}>
-                  {totalMembers > 10 && index === showTotalMembers - 1 ? (
-                    totalMembers !== showTotalMembers ? (
-                      <div onClick={() => setShowTotalMembers(totalMembers)}>
-                        <Typography variant="h5">
-                          +{totalMembers - showTotalMembers} More
-                        </Typography>
-                      </div>
-                    ) : (
-                      <div onClick={() => setShowTotalMembers(10)}>
-                        <Typography variant="h5">View less</Typography>
-                      </div>
-                    )
-                  ) : (
-                    ''
-                  )}
-                </div>
-
-
-  const sortedParticipants = data?.participants?.sort((a, b) => {
-    // If "a" is a manager and "b" is not, "a" comes first
-    if (a.manager && !b.manager) return -1;
-    // If "b" is a manager and "a" is not, "b" comes first
-    if (b.manager && !a.manager) return 1;
-    // Otherwise, maintain the existing order
-    return 0;
-  });
-*/