join requests hide when accepted

src/components/Group/GroupJoinRequests.tsx

@@ -15,12 +15,13 @@ import { Box, Typography } from "@mui/material";
 import { Spacer } from "../../common/Spacer";
 import { CustomLoader } from "../../common/CustomLoader";
 import { getBaseApi } from "../../background";
-import { getBaseApiReact, isMobile } from "../../App";
+import { MyContext, getBaseApiReact, isMobile } from "../../App";
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
 
 export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
   const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
   const [loading, setLoading] = React.useState(true)
+  const {txList, setTxList} = React.useContext(MyContext)
 
 
 
@@ -92,6 +93,22 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
     }
   }, [myAddress, groups]);
 
+  const filteredJoinRequests = React.useMemo(()=> {
+    return groupsWithJoinRequests.map((group)=> {
+      const filteredGroupRequests = group?.data?.filter((gd)=> {
+        const findJoinRequsetInTxList = txList?.find((tx)=> tx?.groupId === group?.group?.groupId && tx?.qortalAddress === gd?.joiner && tx?.type === 'join-request-accept')
+
+        if(findJoinRequsetInTxList) return false
+        return true
+      })
+      return {
+        ...group,
+        data: filteredGroupRequests
+      }
+    })
+  }, [groupsWithJoinRequests, txList])
+
+  console.log('filteredJoinRequests', filteredJoinRequests)
 
   return (
     <Box sx={{
@@ -132,7 +149,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
           borderRadius: '19px'
         }}
       >
-    {loading && groupsWithJoinRequests.length === 0 && (
+    {loading && filteredJoinRequests.length === 0 && (
        <Box sx={{
         width: '100%',
         display: 'flex',
@@ -141,7 +158,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
       <CustomLoader />
       </Box>
     )}
-    {!loading && (groupsWithJoinRequests.length === 0 || groupsWithJoinRequests?.filter((group)=> group?.data?.length > 0).length === 0) && (
+    {!loading && (filteredJoinRequests.length === 0 || filteredJoinRequests?.filter((group)=> group?.data?.length > 0).length === 0) && (
     <Box
     sx={{
       width: "100%",
@@ -164,7 +181,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
   </Box>
     )}
     <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
-      {groupsWithJoinRequests?.map((group)=> {
+      {filteredJoinRequests?.map((group)=> {
         if(group?.data?.length === 0) return null
         return (
           <ListItem

src/components/Group/ListOfJoinRequests.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Avatar, Box, Button, ListItem, ListItemAvatar, ListItemButton, ListItemText, Popover } from '@mui/material';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import { getNameInfo } from './Group';
 import { getBaseApi, getFee } from '../../background';
 import { LoadingButton } from '@mui/lab';
-import { getBaseApiReact } from '../../App';
+import { MyContext, getBaseApiReact } from '../../App';
 
 export const getMemberInvites = async (groupNumber) => {
   const response = await fetch(`${getBaseApiReact()}/groups/joinrequests/${groupNumber}?limit=0`);
@@ -34,6 +34,8 @@ const cache = new CellMeasurerCache({
 
 export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
   const [invites, setInvites] = useState([]);
+  const {txList, setTxList} = useContext(MyContext)
+
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
   const listRef = useRef();
@@ -89,6 +91,16 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
               setOpenSnack(true);
               handlePopoverClose();
               res(response)
+              setTxList((prev)=> [{
+                ...response,
+                type: 'join-request-accept',
+                label: `Accepted join request: awaiting confirmation`,
+                labelDone: `User successfully joined!`,
+                done: false,
+                groupId,
+                qortalAddress: address
+             
+              }, ...prev])
               return
             }
             setInfoSnack({
@@ -108,7 +120,8 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
 
   const rowRenderer = ({ index, key, parent, style }) => {
     const member = invites[index];
-    
+    const findJoinRequsetInTxList = txList?.find((tx)=> tx?.groupId === groupId && tx?.qortalAddress === member?.joiner && tx?.type === 'join-request-accept')
+    if(findJoinRequsetInTxList) return null
     return (
       <CellMeasurer
         key={key}