Group fixes

src/components/groups/GroupsView.tsx

@@ -1,7 +1,7 @@
 import { GroupPurchasedEvent, GroupSettingsComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { AddEventLinkTracker, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
-import { useMessageEvent } from '../../hooks';
+import { useGroup, useMessageEvent } from '../../hooks';
 import { GroupCreatorView } from './views/GroupCreatorView';
 import { GroupInformationStandaloneView } from './views/GroupInformationStandaloneView';
 import { GroupManagerView } from './views/GroupManagerView';
@@ -10,6 +10,7 @@ import { GroupMembersView } from './views/GroupMembersView';
 export const GroupsView: FC<{}> = props =>
 {
     const [ isCreatorVisible, setCreatorVisible ] = useState<boolean>(false);
+    const {} = useGroup();
 
     useMessageEvent<GroupPurchasedEvent>(GroupPurchasedEvent, event =>
     {

src/components/groups/views/GroupCreatorView.tsx

@@ -143,7 +143,7 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
                     </Flex>
                     <Column overflow="hidden">
                         { (currentTab === 1) &&
-                            <GroupTabIdentityView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } close={ null } isCreator={ true } availableRooms={ availableRooms } /> }
+                            <GroupTabIdentityView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } onClose={ null } isCreator={ true } availableRooms={ availableRooms } /> }
                         { (currentTab === 2) &&
                             <GroupTabBadgeView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } /> }
                         { (currentTab === 3) &&

src/components/groups/views/GroupManagerView.tsx

@@ -1,5 +1,5 @@
 import { GroupBadgePart, GroupInformationEvent, GroupSettingsEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { FC, useState } from 'react';
 import { IGroupData, LocalizeText } from '../../../api';
 import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
@@ -16,7 +16,7 @@ export const GroupManagerView: FC<{}> = props =>
     const [ closeAction, setCloseAction ] = useState<{ action: () => boolean }>(null);
     const [ groupData, setGroupData ] = useState<IGroupData>(null);
 
-    const close = () =>
+    const onClose = () =>
     {
         setCloseAction(prevValue =>
         {
@@ -35,7 +35,7 @@ export const GroupManagerView: FC<{}> = props =>
         setCurrentTab(tab);
     }
 
-    const onGroupInformationEvent = useCallback((event: GroupInformationEvent) =>
+    useMessageEvent<GroupInformationEvent>(GroupInformationEvent, event =>
     {
         const parser = event.getParser();
 
@@ -52,11 +52,9 @@ export const GroupManagerView: FC<{}> = props =>
 
             return newValue;
         });
-    }, [ groupData ]);
+    });
 
-    useMessageEvent(GroupInformationEvent, onGroupInformationEvent);
+    useMessageEvent<GroupSettingsEvent>(GroupSettingsEvent, event =>
-
-    const onGroupSettingsEvent = useCallback((event: GroupSettingsEvent) =>
     {
         const parser = event.getParser();
 
@@ -82,9 +80,7 @@ export const GroupManagerView: FC<{}> = props =>
             groupColors: [ parser.colorA, parser.colorB ],
             groupBadgeParts
         });
-    }, [ setGroupData ]);
+    });
-
-    useMessageEvent(GroupSettingsEvent, onGroupSettingsEvent);
 
     if(!groupData || (groupData.groupId <= 0)) return null;
     
@@ -108,13 +104,13 @@ export const GroupManagerView: FC<{}> = props =>
                     </Column>
                 </Flex>
                 <Column grow overflow="hidden">
-                    { currentTab === 1 &&
+                    { (currentTab === 1) &&
-                        <GroupTabIdentityView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } close={ close } /> }
+                        <GroupTabIdentityView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } onClose={ onClose } /> }
-                    { currentTab === 2 &&
+                    { (currentTab === 2) &&
                         <GroupTabBadgeView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } skipDefault={ true } /> }
-                    { currentTab === 3 &&
+                    { (currentTab === 3) &&
                         <GroupTabColorsView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } /> }
-                    { currentTab === 5 &&
+                    { (currentTab === 5) &&
                         <GroupTabSettingsView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } /> }
                 </Column>
             </NitroCardContentView>

src/components/groups/views/tabs/GroupTabIdentityView.tsx

@@ -9,14 +9,14 @@ interface GroupTabIdentityViewProps
     groupData: IGroupData;
     setGroupData: Dispatch<SetStateAction<IGroupData>>;
     setCloseAction: Dispatch<SetStateAction<{ action: () => boolean }>>;
-    close: () => void;
+    onClose: () => void;
     isCreator?: boolean;
     availableRooms?: { id: number, name: string }[];
 }
 
 export const GroupTabIdentityView: FC<GroupTabIdentityViewProps> = props =>
 {
-    const { groupData = null, setGroupData = null, setCloseAction = null, close = null, isCreator = false, availableRooms = [] } = props;
+    const { groupData = null, setGroupData = null, setCloseAction = null, onClose = null, isCreator = false, availableRooms = [] } = props;
     const [ groupName, setGroupName ] = useState<string>('');
     const [ groupDescription, setGroupDescription ] = useState<string>('');
     const [ groupHomeroomId, setGroupHomeroomId ] = useState<number>(-1);
@@ -30,7 +30,7 @@ export const GroupTabIdentityView: FC<GroupTabIdentityViewProps> = props =>
         {
             SendMessageComposer(new GroupDeleteComposer(groupData.groupId));
                 
-            if(close) close();
+            if(onClose) onClose();
         }, null, null, null, LocalizeText('group.deleteconfirm.title'));
     }
 

src/hooks/groups/useGroup.ts

@@ -4,15 +4,6 @@ import { useBetween } from 'use-between';
 import { IGroupCustomize, SendMessageComposer } from '../../api';
 import { useMessageEvent } from '../events';
 
-const CompareId = (a, b) =>
-{
-    if(a.id < b.id) return -1;
-
-    if(a.id > b.id) return 1;
-
-    return 0;
-}
-
 const useGroupState = () =>
 {
     const [ groupCustomize, setGroupCustomize ] = useState<IGroupCustomize>(null);
@@ -35,6 +26,15 @@ const useGroupState = () =>
         parser.colorsA.forEach((color, id) => customize.groupColorsA.push({ id, color }));
         parser.colorsB.forEach((color, id) => customize.groupColorsB.push({ id, color }));
 
+        const CompareId = (a: { id: number }, b: { id: number }) =>
+        {
+            if(a.id < b.id) return -1;
+
+            if(a.id > b.id) return 1;
+
+            return 0;
+        }
+
         customize.badgeBases.sort(CompareId);
         customize.badgeSymbols.sort(CompareId);
         customize.badgePartColors.sort(CompareId);