Refactor groups

src/components/groups/GroupsContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, Dispatch, FC, ProviderProps, useContext } from 'react';
+import { IGroupsAction, IGroupsState } from './reducers/GroupsReducer';
+
+interface IGroupsContext
+{
+    groupsState: IGroupsState;
+    dispatchGroupsState: Dispatch<IGroupsAction>;
+}
+
+const GroupsContext = createContext<IGroupsContext>({
+    groupsState: null,
+    dispatchGroupsState: null
+});
+
+export const GroupsContextProvider: FC<ProviderProps<IGroupsContext>> = props =>
+{
+    return <GroupsContext.Provider value={ props.value }>{ props.children }</GroupsContext.Provider>
+}
+
+export const useGroupsContext = () => useContext(GroupsContext);

src/components/groups/GroupsMessageHandler.tsx

@@ -2,8 +2,8 @@ import { GroupBadgePartsEvent, GroupBuyDataEvent, GroupSettingsEvent, RoomCreate
 import { FC, useCallback } from 'react';
 import { CreateMessageHook } from '../../hooks';
 import { GroupBadgePart } from './common/GroupBadgePart';
-import { useGroupsContext } from './context/GroupsContext';
+import { useGroupsContext } from './GroupsContext';
-import { GroupsActions } from './context/GroupsContext.types';
+import { GroupsActions } from './reducers/GroupsReducer';
 
 function compareId(a, b)
 {

src/components/groups/GroupsView.tsx

@@ -1,10 +1,10 @@
 import { GroupBadgePartsComposer, GroupPurchasedEvent, GroupSettingsComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { AddEventLinkTracker, RemoveLinkEventTracker, TryVisitRoom } from '../../api';
-import { CreateMessageHook, SendMessageHook } from '../../hooks';
+import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../hooks';
-import { GroupsContextProvider } from './context/GroupsContext';
+import { GroupsContextProvider } from './GroupsContext';
-import { GroupsReducer, initialGroups } from './context/GroupsContext.types';
 import { GroupsMessageHandler } from './GroupsMessageHandler';
+import { GroupsReducer, initialGroups } from './reducers/GroupsReducer';
 import { GroupCreatorView } from './views/creator/GroupCreatorView';
 import { GroupInformationStandaloneView } from './views/information-standalone/GroupInformationStandaloneView';
 import { GroupManagerView } from './views/manager/GroupManagerView';
@@ -12,17 +12,30 @@ import { GroupMembersView } from './views/members/GroupMembersView';
 
 export const GroupsView: FC<{}> = props =>
 {
-    const [ groupsState, dispatchGroupsState ] = useReducer(GroupsReducer, initialGroups);
-
     const [ isCreatorVisible, setIsCreatorVisible ] = useState<boolean>(false);
     const [ groupMembersId, setGroupMembersId ] = useState<number>(null);
     const [ groupMembersLevel, setGroupMembersLevel ] = useState<number>(null);
+    const [ groupsState, dispatchGroupsState ] = useReducer(GroupsReducer, initialGroups);
 
-    useEffect(() =>
+    const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) =>
     {
-        SendMessageHook(new GroupBadgePartsComposer());
+        const parser = event.getParser();
+
+        setIsCreatorVisible(false);
+        TryVisitRoom(parser.roomId);
     }, []);
 
+    CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent);
+
+    const closeMembers = () =>
+    {
+        BatchUpdates(() =>
+        {
+            setGroupMembersId(null);
+            setGroupMembersLevel(null);
+        });
+    }
+
     const linkReceived = useCallback((url: string) =>
     {
         const parts = url.split('/');
@@ -42,9 +55,12 @@ export const GroupsView: FC<{}> = props =>
             case 'members':
                 if(!parts[2]) return;
 
-                setGroupMembersId(Number(parts[2]));
+                BatchUpdates(() =>
+                {
+                    setGroupMembersId(Number(parts[2]));
 
-                if(parts[3]) setGroupMembersLevel(Number(parts[3]));
+                    if(parts[3]) setGroupMembersLevel(Number(parts[3]));
+                });
                 return;
         }
     }, []);
@@ -61,20 +77,9 @@ export const GroupsView: FC<{}> = props =>
         return () => RemoveLinkEventTracker(linkTracker);
     }, [ linkReceived ]);
 
-    const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) =>
+    useEffect(() =>
     {
-        const parser = event.getParser();
+        SendMessageHook(new GroupBadgePartsComposer());
-
-        setIsCreatorVisible(false);
-        TryVisitRoom(parser.roomId);
-    }, []);
-
-    CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent);
-
-    const closeMembers = useCallback(() =>
-    {
-        setGroupMembersId(null);
-        setGroupMembersLevel(null);
     }, []);
     
     return (

src/components/groups/context/GroupsContext.tsx

@@ -1,14 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { GroupsContextProps, IGroupsContext } from './GroupsContext.types';
-
-const GroupsContext = createContext<IGroupsContext>({
-    groupsState: null,
-    dispatchGroupsState: null
-});
-
-export const GroupsContextProvider: FC<GroupsContextProps> = props =>
-{
-    return <GroupsContext.Provider value={ props.value }>{ props.children }</GroupsContext.Provider>
-}
-
-export const useGroupsContext = () => useContext(GroupsContext);

src/components/groups/reducers/GroupsReducer.ts

@@ -1,17 +1,6 @@
-import { Dispatch, ProviderProps, Reducer } from 'react';
+import { Reducer } from 'react';
 import { GroupBadgePart } from '../common/GroupBadgePart';
 
-export interface IGroupsContext
-{
-    groupsState: IGroupsState;
-    dispatchGroupsState: Dispatch<IGroupsAction>;
-}
-
-export interface GroupsContextProps extends ProviderProps<IGroupsContext>
-{
-
-}
-
 export interface IGroupsState
 {
     availableRooms: { id: number, name: string }[];

src/components/groups/views/creator/GroupCreatorTabConfirmationView.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../api';
+import { LocalizeText } from '../../../../api';
-import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
+import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
-import { useGroupsContext } from '../../../context/GroupsContext';
+import { useGroupsContext } from '../../GroupsContext';
 
 export const GroupCreatorTabConfirmationView: FC<{}> = props =>
 {

src/components/groups/views/creator/GroupCreatorView.tsx

@@ -5,16 +5,21 @@ import { Button } from 'react-bootstrap';
 import { HasHabboClub, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { useGroupsContext } from '../../context/GroupsContext';
+import { useGroupsContext } from '../../GroupsContext';
-import { GroupsActions } from '../../context/GroupsContext.types';
+import { GroupsActions } from '../../reducers/GroupsReducer';
-import { GroupSharedTabBadgeView } from '../shared-tabs/tab-badge/GroupSharedTabBadgeView';
+import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
-import { GroupSharedTabColorsView } from '../shared-tabs/tab-colors/GroupSharedTabColorsView';
+import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
-import { GroupSharedTabIdentityView } from '../shared-tabs/tab-identity/GroupSharedTabIdentityView';
+import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
-import { GroupCreatorViewProps } from './GroupCreatorView.types';
+import { GroupCreatorTabConfirmationView } from './GroupCreatorTabConfirmationView';
-import { GroupCreatorTabConfirmationView } from './tab-confirmation/GroupCreatorTabConfirmationView';
 
 const TABS: number[] = [1, 2, 3, 4];
 
+interface GroupCreatorViewProps
+{
+    isVisible: boolean;
+    onClose: () => void;
+}
+
 export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
 {
     const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();

src/components/groups/views/creator/GroupCreatorView.types.ts

@@ -1,5 +0,0 @@
-export interface GroupCreatorViewProps
-{
-    isVisible: boolean;
-    onClose: () => void;
-}

src/components/groups/views/information/GroupInformationView.tsx

@@ -1,4 +1,4 @@
-import { GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
+import { GroupInformationParser, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CreateLinkEvent, GetSessionDataManager, LocalizeText, TryVisitRoom } from '../../../../api';
 import { GetGroupManager } from '../../../../api/groups/GetGroupManager';
@@ -9,7 +9,13 @@ import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageV
 import { CatalogPageName } from '../../../catalog/common/CatalogPageName';
 import { GroupMembershipType } from '../../common/GroupMembershipType';
 import { GroupType } from '../../common/GroupType';
-import { GroupInformationViewProps } from './GroupInformationView.types';
+
+interface GroupInformationViewProps
+{
+    groupInformation: GroupInformationParser;
+    onJoin?: () => void;
+    onClose?: () => void;
+}
 
 export const GroupInformationView: FC<GroupInformationViewProps> = props =>
 {

src/components/groups/views/information/GroupInformationView.types.ts

@@ -1,8 +0,0 @@
-import { GroupInformationParser } from '@nitrots/nitro-renderer';
-
-export interface GroupInformationViewProps
-{
-    groupInformation: GroupInformationParser;
-    onJoin?: () => void;
-    onClose?: () => void;
-}

src/components/groups/views/manager/GroupManagerView.tsx

@@ -3,11 +3,11 @@ import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
-import { useGroupsContext } from '../../context/GroupsContext';
+import { useGroupsContext } from '../../GroupsContext';
-import { GroupsActions } from '../../context/GroupsContext.types';
+import { GroupsActions } from '../../reducers/GroupsReducer';
-import { GroupSharedTabBadgeView } from '../shared-tabs/tab-badge/GroupSharedTabBadgeView';
+import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
-import { GroupSharedTabColorsView } from '../shared-tabs/tab-colors/GroupSharedTabColorsView';
+import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
-import { GroupSharedTabIdentityView } from '../shared-tabs/tab-identity/GroupSharedTabIdentityView';
+import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
 import { GroupManagerTabSettingsView } from './tab-settings/GroupManagerTabSettingsView';
 
 const TABS: number[] = [1, 2, 3, 5];

src/components/groups/views/manager/tab-settings/GroupManagerTabSettingsView.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../../../api/utils/LocalizeText';
-import { useGroupsContext } from '../../../context/GroupsContext';
+import { useGroupsContext } from '../../../GroupsContext';
-import { GroupsActions } from '../../../context/GroupsContext.types';
+import { GroupsActions } from '../../../reducers/GroupsReducer';
 
 const STATES: string[] = ['regular', 'exclusive', 'private'];
 

src/components/groups/views/members/GroupMembersView.tsx

@@ -6,7 +6,14 @@ import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
-import { GroupMembersViewProps } from './GroupMembersView.types';
+
+interface GroupMembersViewProps
+{
+    groupId: number;
+    levelId: number;
+    onClose: () => void;
+}
+
 
 export const GroupMembersView: FC<GroupMembersViewProps> = props =>
 {

src/components/groups/views/members/GroupMembersView.types.ts

@@ -1,6 +0,0 @@
-export interface GroupMembersViewProps
-{
-    groupId: number;
-    levelId: number;
-    onClose: () => void;
-}

src/components/groups/views/shared-tabs/GroupSharedTabBadgeView.tsx

@@ -1,13 +1,17 @@
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
+import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
-import { GroupBadgePart } from '../../../common/GroupBadgePart';
+import { GroupBadgePart } from '../../common/GroupBadgePart';
-import { useGroupsContext } from '../../../context/GroupsContext';
+import { useGroupsContext } from '../../GroupsContext';
-import { GroupsActions } from '../../../context/GroupsContext.types';
+import { GroupsActions } from '../../reducers/GroupsReducer';
-import { GroupSharedTabBadgeViewProps } from './GroupSharedTabBadgeView.types';
 
 const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 
+interface GroupSharedTabBadgeViewProps
+{
+    skipDefault?: boolean;
+}
+
 export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =>
 {
     const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();

src/components/groups/views/shared-tabs/GroupSharedTabColorsView.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { LocalizeText } from '../../../../../api';
+import { LocalizeText } from '../../../../api';
-import { useGroupsContext } from '../../../context/GroupsContext';
+import { useGroupsContext } from '../../GroupsContext';
-import { GroupsActions } from '../../../context/GroupsContext.types';
+import { GroupsActions } from '../../reducers/GroupsReducer';
 
 export const GroupSharedTabColorsView: FC<{}> = props =>
 {

src/components/groups/views/shared-tabs/GroupSharedTabIdentityView.tsx

@@ -1,8 +1,12 @@
 import { FC, useCallback } from 'react';
-import { CreateLinkEvent, LocalizeText } from '../../../../../api';
+import { CreateLinkEvent, LocalizeText } from '../../../../api';
-import { useGroupsContext } from '../../../context/GroupsContext';
+import { useGroupsContext } from '../../GroupsContext';
-import { GroupsActions } from '../../../context/GroupsContext.types';
+import { GroupsActions } from '../../reducers/GroupsReducer';
-import { GroupSharedTabIdentityViewProps } from './GroupSharedTabIdentityView.types';
+
+interface GroupSharedTabIdentityViewProps
+{
+    isCreator?: boolean;
+}
 
 export const GroupSharedTabIdentityView: FC<GroupSharedTabIdentityViewProps> = props =>
 {

src/components/groups/views/shared-tabs/GroupSharedTabs.scss

@@ -26,5 +26,54 @@
     }
 }
 
-@import './tab-badge/GroupSharedTabBadgeView';
+.shared-tab-badge {
-@import './tab-colors/GroupSharedTabColorsView';
+    .position-swatch {
+        position: relative;
+        border-radius: $border-radius;
+        width: 16px;
+        height: 16px;
+        background: $white;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
+
+        &.active {
+            background: $primary;
+            box-shadow: none;
+        }
+    }
+
+    .color-swatch {
+        position: relative;
+        border-radius: $border-radius;
+        width: 16px;
+        height: 16px;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
+
+        &.active {
+            box-shadow: none;
+        }
+    }
+
+    .selection-list {
+        height: 160px;
+        min-height: 160px;
+        max-height: 160px;
+    }
+}
+
+.shared-tab-colors {
+
+    .color-swatch {
+        position: relative;
+        border-radius: $border-radius;
+        width: 15px;
+        height: 15px;
+        border: 2px solid $white;
+        box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
+
+        &.active {
+            box-shadow: none;
+        }
+    }
+}

src/components/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss

@@ -1,35 +0,0 @@
-.shared-tab-badge {
-    .position-swatch {
-        position: relative;
-        border-radius: $border-radius;
-        width: 16px;
-        height: 16px;
-        background: $white;
-        border: 2px solid $white;
-        box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
-
-        &.active {
-            background: $primary;
-            box-shadow: none;
-        }
-    }
-
-    .color-swatch {
-        position: relative;
-        border-radius: $border-radius;
-        width: 16px;
-        height: 16px;
-        border: 2px solid $white;
-        box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
-
-        &.active {
-            box-shadow: none;
-        }
-    }
-
-    .selection-list {
-        height: 160px;
-        min-height: 160px;
-        max-height: 160px;
-    }
-}

src/components/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.types.ts

@@ -1,4 +0,0 @@
-export interface GroupSharedTabBadgeViewProps
-{
-    skipDefault?: boolean;
-}

src/components/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.scss

@@ -1,15 +0,0 @@
-.shared-tab-colors {
-
-    .color-swatch {
-        position: relative;
-        border-radius: $border-radius;
-        width: 15px;
-        height: 15px;
-        border: 2px solid $white;
-        box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
-
-        &.active {
-            box-shadow: none;
-        }
-    }
-}

src/components/groups/views/shared-tabs/tab-identity/GroupSharedTabIdentityView.types.ts

@@ -1,4 +0,0 @@
-export interface GroupSharedTabIdentityViewProps
-{
-    isCreator?: boolean;
-}