fix getting list of groups where user is admin

src/App.tsx

@@ -117,7 +117,7 @@ import { MainAvatar } from "./components/MainAvatar";
 import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage";
 import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings";
 import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil";
-import { canSaveSettingToQdnAtom, fullScreenAtom, groupsPropertiesAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, lastPaymentSeenTimestampAtom, mailsAtom, oldPinnedAppsAtom, qMailLastEnteredTimestampAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
+import { canSaveSettingToQdnAtom, fullScreenAtom, groupsPropertiesAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, lastPaymentSeenTimestampAtom, mailsAtom, myGroupsWhereIAmAdminAtom, oldPinnedAppsAtom, qMailLastEnteredTimestampAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
 import { useAppFullScreen } from "./useAppFullscreen";
 import { NotAuthenticated } from "./ExtStates/NotAuthenticated";
 import { useFetchResources } from "./common/useFetchResources";
@@ -445,6 +445,9 @@ function App() {
   const resetAtomMailsAtom = useResetRecoilState(mailsAtom)
   const resetGroupPropertiesAtom = useResetRecoilState(groupsPropertiesAtom)
   const resetLastPaymentSeenTimestampAtom = useResetRecoilState(lastPaymentSeenTimestampAtom)
+    const resetMyGroupsWhereIAmAdminAtom = useResetRecoilState(
+    myGroupsWhereIAmAdminAtom
+  );
   const resetAllRecoil = () => {
     resetAtomSortablePinnedAppsAtom();
     resetAtomCanSaveSettingToQdnAtom();
@@ -456,6 +459,7 @@ function App() {
     resetAtomMailsAtom()
     resetGroupPropertiesAtom()
     resetLastPaymentSeenTimestampAtom()
+    resetMyGroupsWhereIAmAdminAtom()
   };
   useEffect(() => {
     if (!isMobile) return;

src/components/Apps/AppsPrivate.tsx

@@ -231,8 +231,10 @@ export const AppsPrivate = ({myName, myAddress}) => {
     }
   }, [myAddress]);
   useEffect(() => {
+    if (isOpenPrivateModal) {
       getNames();
-  }, [getNames]);
+    }
+  }, [getNames, isOpenPrivateModal]);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValueTabPrivateApp(newValue);

src/components/Group/Group.tsx

@@ -95,7 +95,7 @@ import { formatEmailDate } from "./QMailMessages";
 import LockIcon from '@mui/icons-material/Lock';
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
 import { useRecoilState, useSetRecoilState } from "recoil";
-import { addressInfoControllerAtom, groupsPropertiesAtom, isOpenBlockedModalAtom, selectedGroupIdAtom } from "../../atoms/global";
+import { addressInfoControllerAtom, groupsPropertiesAtom, isOpenBlockedModalAtom, myGroupsWhereIAmAdminAtom, selectedGroupIdAtom } from "../../atoms/global";
 import { sortArrayByTimestampAndGroupName } from "../../utils/time";
 import { AdminSpace } from "../Chat/AdminSpace";
 import { HubsIcon } from "../../assets/Icons/HubsIcon";
@@ -466,6 +466,9 @@ export const Group = ({
   const { setMemberGroups, memberGroups, rootHeight, isRunningPublicNode } = useContext(MyContext);
   const lastGroupNotification = useRef<null | number>(null);
   const [timestampEnterData, setTimestampEnterData] = useState({});
+    const groupsPropertiesRef = useRef({});
+  const setMyGroupsWhereIAmAdmin = useSetRecoilState(myGroupsWhereIAmAdminAtom);
+
   const [chatMode, setChatMode] = useState("groups");
   const [newChat, setNewChat] = useState(false);
   const [openSnack, setOpenSnack] = React.useState(false);
@@ -532,6 +535,10 @@ export const Group = ({
     timestampEnterDataRef.current = timestampEnterData
   }, [timestampEnterData])
 
+   useEffect(() => {
+    groupsPropertiesRef.current = groupsProperties;
+  }, [groupsProperties]);
+
   useEffect(() => {
     isFocusedRef.current = isFocused;
   }, [isFocused]);
@@ -939,13 +946,50 @@ export const Group = ({
   }, [])
 
 
-  useEffect(()=> {
+  const getGroupsWhereIAmAMember = useCallback(async (groups) => {
-    if(!myAddress) return
+    try {
-    if(areKeysEqual(groups?.map((grp)=> grp?.groupId), Object.keys(groupsProperties))){
+      let groupsAsAdmin = [];
-    } else {
+      const getAllGroupsAsAdmin = groups
-      getGroupsProperties(myAddress)
+        .filter((item) => item.groupId !== '0')
+        .map(async (group) => {
+          const isAdminResponse = await requestQueueGroupJoinRequests.enqueue(
+            () => {
+              return fetch(
+                `${getBaseApiReact()}/groups/members/${group.groupId}?limit=0&onlyAdmins=true`
+              );
             }
-  }, [groups, myAddress])
+          );
+          const isAdminData = await isAdminResponse.json();
+
+          const findMyself = isAdminData?.members?.find(
+            (member) => member.member === myAddress
+          );
+
+          if (findMyself) {
+            groupsAsAdmin.push(group);
+          }
+          return true;
+        });
+
+      await Promise.all(getAllGroupsAsAdmin);
+      setMyGroupsWhereIAmAdmin(groupsAsAdmin);
+    } catch (error) {
+      console.error();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!myAddress) return;
+    if (
+      !areKeysEqual(
+        groups?.map((grp) => grp?.groupId),
+        Object.keys(groupsPropertiesRef.current)
+      )
+    ) {
+      getGroupsProperties(myAddress);
+      getGroupsWhereIAmAMember(groups);
+    }
+  }, [groups, myAddress]);
 
  
 

src/components/Group/GroupJoinRequests.tsx

@@ -17,7 +17,7 @@ import { CustomLoader } from "../../common/CustomLoader";
 import { getBaseApi } from "../../background";
 import { MyContext, getBaseApiReact, isMobile } from "../../App";
 import { myGroupsWhereIAmAdminAtom } from "../../atoms/global";
-import { useSetRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
@@ -28,67 +28,44 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
   const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
   const [loading, setLoading] = React.useState(true)
   const {txList, setTxList} = React.useContext(MyContext)
-  const setMyGroupsWhereIAmAdmin = useSetRecoilState(
+   const [myGroupsWhereIAmAdmin] = useRecoilState(myGroupsWhereIAmAdminAtom);
-    myGroupsWhereIAmAdminAtom
+
-  );
 
 
  const getJoinRequests = async () => {
     try {
-      setLoading(true)
+      setLoading(true);
-   
+      const res = await Promise.all(
-      let groupsAsAdmin = []
+        myGroupsWhereIAmAdmin.map(async (group) => {
-      const getAllGroupsAsAdmin = groups.filter((item)=> item.groupId !== '0').map(async (group)=> {
+          const joinRequestResponse =
-   
+            await requestQueueGroupJoinRequests.enqueue(() => {
-        const isAdminResponse = await requestQueueGroupJoinRequests.enqueue(()=> {
-          return fetch(
-            `${getBaseApiReact()}/groups/members/${group.groupId}?limit=0&onlyAdmins=true`
-          );
-        }) 
-        const isAdminData = await isAdminResponse.json()
-   
-
-        const findMyself = isAdminData?.members?.find((member)=> member.member === myAddress)
-      
-        if(findMyself){
-          groupsAsAdmin.push(group)
-        }
-        return true
-      })
-
-     
-      await Promise.all(getAllGroupsAsAdmin)
-      setMyGroupsWhereIAmAdmin(groupsAsAdmin)
-     const res = await Promise.all(groupsAsAdmin.map(async (group)=> {
-
-      const joinRequestResponse = await requestQueueGroupJoinRequests.enqueue(()=> {
               return fetch(
                 `${getBaseApiReact()}/groups/joinrequests/${group.groupId}`
               );
-      }) 
+            });
 
-      const joinRequestData = await joinRequestResponse.json()
+          const joinRequestData = await joinRequestResponse.json();
           return {
             group,
-        data: joinRequestData
+            data: joinRequestData,
-      }
+          };
-    }))
+        })
-     setGroupsWithJoinRequests(res)
+      );
+      setGroupsWithJoinRequests(res);
     } catch (error) {
-      
+      console.log(error);
     } finally {
-      setLoading(false)
+      setLoading(false);
-    }
     }
+  };
 
   React.useEffect(() => {
-    if (myAddress && groups.length > 0) {
+    if (myAddress && myGroupsWhereIAmAdmin.length > 0) {
-      getJoinRequests()
+      getJoinRequests();
     } else {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [myAddress, groups]);
+  }, [myAddress, myGroupsWhereIAmAdmin]);
-
   const filteredJoinRequests = React.useMemo(()=> {
     return groupsWithJoinRequests.map((group)=> {
       const filteredGroupRequests = group?.data?.filter((gd)=> {