🐟 Fix catalog index and start on Groupbadges

src/components/catalog/CatalogView.tsx

@@ -72,12 +72,12 @@ export const CatalogView: FC<{}> = props =>
                 <NitroCardView className="w-[630px] h-[400px]" style={ GetConfigurationValue('catalog.headers') ? { width: 710 } : {} } uniqueKey="catalog">
                     <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
-                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map(child =>
+                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map((child, index) =>
                         {
                             if(!child.isVisible) return null;
 
                             return (
-                                <NitroCardTabsItemView key={ child.pageId } isActive={ child.isActive } onClick={ event =>
+                                <NitroCardTabsItemView key={ `${ child.pageId }-${ child.pageName }-${ index }` } isActive={ child.isActive } onClick={ event =>
                                 {
                                     if(searchResult) setSearchResult(null);
 

src/components/groups/views/GroupRoomInformationView.tsx

@@ -1,5 +1,5 @@
 import { DesktopViewEvent, GetGuestRoomResultEvent, GetSessionDataManager, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, GroupRemoveMemberComposer, HabboGroupDeactivatedMessageEvent, RoomEntryInfoMessageEvent } from '@nitrots/nitro-renderer';
-import { FC, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import { GetGroupInformation, GetGroupManager, GroupMembershipType, GroupType, LocalizeText, SendMessageComposer, TryJoinGroup } from '../../../api';
 import { Button, Flex, LayoutBadgeImageView, Text } from '../../../common';
@@ -7,21 +7,72 @@ import { useMessageEvent, useNotification } from '../../../hooks';
 
 export const GroupRoomInformationView: FC<{}> = props =>
 {
-    const [ expectedGroupId, setExpectedGroupId ] = useState<number>(0);
+    const expectedGroupIdRef = useRef<number>(0);
+    const requestRetryCountRef = useRef<number>(0);
+    const requestRetryTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
     const [ groupInformation, setGroupInformation ] = useState<GroupInformationParser>(null);
     const [ isOpen, setIsOpen ] = useState<boolean>(true);
     const { showConfirm = null } = useNotification();
 
+    const clearRequestRetryTimeout = () =>
+    {
+        if(!requestRetryTimeoutRef.current) return;
+
+        clearTimeout(requestRetryTimeoutRef.current);
+        requestRetryTimeoutRef.current = null;
+    };
+
+    const scheduleGroupInfoRetry = (groupId: number) =>
+    {
+        if(requestRetryCountRef.current >= 2) return;
+
+        clearRequestRetryTimeout();
+
+        requestRetryTimeoutRef.current = setTimeout(() =>
+        {
+            requestRetryTimeoutRef.current = null;
+
+            if(expectedGroupIdRef.current !== groupId) return;
+            if(groupInformation && (groupInformation.id === groupId)) return;
+
+            requestRetryCountRef.current++;
+            SendMessageComposer(new GroupInformationComposer(groupId, false));
+            scheduleGroupInfoRetry(groupId);
+        }, 700);
+    };
+
+    const requestGroupInformation = (groupId: number) =>
+    {
+        if(groupId <= 0) return;
+
+        requestRetryCountRef.current = 0;
+        clearRequestRetryTimeout();
+
+        SendMessageComposer(new GroupInformationComposer(groupId, false));
+        scheduleGroupInfoRetry(groupId);
+    };
+
+    const resetGroupState = () =>
+    {
+        expectedGroupIdRef.current = 0;
+        requestRetryCountRef.current = 0;
+        clearRequestRetryTimeout();
+        setGroupInformation(null);
+    };
+
+    const setRequestedGroupId = (groupId: number) =>
+    {
+        expectedGroupIdRef.current = groupId;
+    };
+
     useMessageEvent<DesktopViewEvent>(DesktopViewEvent, event =>
     {
-        setExpectedGroupId(0);
+        resetGroupState();
-        setGroupInformation(null);
     });
 
     useMessageEvent<RoomEntryInfoMessageEvent>(RoomEntryInfoMessageEvent, event =>
     {
-        setExpectedGroupId(0);
+        resetGroupState();
-        setGroupInformation(null);
     });
 
     useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event =>
@@ -32,13 +83,12 @@ export const GroupRoomInformationView: FC<{}> = props =>
 
         if(parser.data.habboGroupId > 0)
         {
-            setExpectedGroupId(parser.data.habboGroupId);
+            setRequestedGroupId(parser.data.habboGroupId);
-            SendMessageComposer(new GroupInformationComposer(parser.data.habboGroupId, false));
+            requestGroupInformation(parser.data.habboGroupId);
         }
         else
         {
-            setExpectedGroupId(0);
+            resetGroupState();
-            setGroupInformation(null);
         }
     });
 
@@ -46,21 +96,23 @@ export const GroupRoomInformationView: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        if(!groupInformation || ((parser.groupId !== groupInformation.id) && (parser.groupId !== expectedGroupId))) return;
+        if(!groupInformation || ((parser.groupId !== groupInformation.id) && (parser.groupId !== expectedGroupIdRef.current))) return;
 
-        setExpectedGroupId(0);
+        resetGroupState();
-        setGroupInformation(null);
     });
 
     useMessageEvent<GroupInformationEvent>(GroupInformationEvent, event =>
     {
         const parser = event.getParser();
 
-        if(parser.id !== expectedGroupId) return;
+        if(parser.id !== expectedGroupIdRef.current) return;
 
+        clearRequestRetryTimeout();
         setGroupInformation(parser);
     });
 
+    useEffect(() => () => clearRequestRetryTimeout(), []);
+
     const leaveGroup = () =>
     {
         showConfirm(LocalizeText('group.leaveconfirm.desc'), () =>