From 5ca61ece5e33fd0159d0e6f0a754bbd063eada32 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 3 Jul 2021 22:07:29 -0400
Subject: [PATCH 1/6] Add subscription to purse

---
 src/views/purse/PurseMessageHandler.tsx   | 20 +++++++++++++++++++-
 src/views/purse/reducers/PurseReducer.tsx | 16 +++++++++++++---
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/views/purse/PurseMessageHandler.tsx b/src/views/purse/PurseMessageHandler.tsx
index 17c5ba4f..23d474e2 100644
--- a/src/views/purse/PurseMessageHandler.tsx
+++ b/src/views/purse/PurseMessageHandler.tsx
@@ -1,4 +1,4 @@
-import { UserCreditsEvent, UserCurrencyEvent, UserCurrencyUpdateEvent } from 'nitro-renderer';
+import { UserCreditsEvent, UserCurrencyEvent, UserCurrencyUpdateEvent, UserSubscriptionEvent } from 'nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { Currency } from './common/Currency';
@@ -48,9 +48,27 @@ export const PurseMessageHandler: FC<PurseMessageHandlerProps> = props =>
         });
     }, [ dispatchPurseState ]);
 
+    const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
+    {
+        const parser = event.getParser();
+
+        switch(parser.name)
+        {
+            case 'habbo_club':
+                dispatchPurseState({
+                    type: PurseActions.SET_CLUB_SUBSCRIPTION,
+                    payload: {
+                        clubSubscription: parser
+                    }
+                });
+                return;
+        }
+    }, [ dispatchPurseState ]);
+
     CreateMessageHook(UserCreditsEvent, onUserCreditsEvent);
     CreateMessageHook(UserCurrencyEvent, onUserCurrencyEvent);
     CreateMessageHook(UserCurrencyUpdateEvent, onUserCurrencyUpdateEvent);
+    CreateMessageHook(UserSubscriptionEvent, onUserSubscriptionEvent);
 
     return null;
 }
diff --git a/src/views/purse/reducers/PurseReducer.tsx b/src/views/purse/reducers/PurseReducer.tsx
index 1a84005f..3e9d5f5b 100644
--- a/src/views/purse/reducers/PurseReducer.tsx
+++ b/src/views/purse/reducers/PurseReducer.tsx
@@ -1,9 +1,11 @@
+import { UserSubscriptionParser } from 'nitro-renderer';
 import { Reducer } from 'react';
 import { Currency } from '../common/Currency';
 
 export interface IPurseState
 {
     currencies: Currency[];
+    clubSubscription: UserSubscriptionParser;
 }
 
 export interface IPurseAction
@@ -12,6 +14,7 @@ export interface IPurseAction
     payload: {
         currency?: Currency;
         currencies?: Currency[];
+        clubSubscription?: UserSubscriptionParser;
     }
 }
 
@@ -19,10 +22,12 @@ export class PurseActions
 {
     public static SET_CURRENCY: string = 'PA_SET_CURRENCY';
     public static SET_CURRENCIES: string = 'PA_SET_CURRENCIES';
+    public static SET_CLUB_SUBSCRIPTION: string = 'PA_SET_CLUB_SUBSCRIPTION';
 }
 
 export const initialPurse: IPurseState = {
-    currencies: []
+    currencies: [],
+    clubSubscription: null
 }
 
 export const PurseReducer: Reducer<IPurseState, IPurseAction> = (state, action) =>
@@ -34,7 +39,7 @@ export const PurseReducer: Reducer<IPurseState, IPurseAction> = (state, action)
 
             let didSet = false;
 
-            const currencies = state.currencies.map((existing, index) =>
+            const currencies = state.currencies.map(existing =>
             {
                 if(existing.type !== updated.type) return existing;
 
@@ -50,7 +55,7 @@ export const PurseReducer: Reducer<IPurseState, IPurseAction> = (state, action)
         case PurseActions.SET_CURRENCIES: {
             const updated = action.payload.currencies;
 
-            const currencies = state.currencies.filter((existing, index) =>
+            const currencies = state.currencies.filter(existing =>
             {
                 if(existing.type !== -1) return null;
 
@@ -61,6 +66,11 @@ export const PurseReducer: Reducer<IPurseState, IPurseAction> = (state, action)
 
             return { ...state, currencies };
         }
+        case PurseActions.SET_CLUB_SUBSCRIPTION: {
+            const clubSubscription = action.payload.clubSubscription;
+
+            return { ...state, clubSubscription };
+        }
         default:
             return state;
     }

From 28060820b594b65baea3d83ee783248acbb16846 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 3 Jul 2021 22:14:49 -0400
Subject: [PATCH 2/6] Update some maps

---
 src/views/catalog/CatalogView.tsx                             | 4 ++--
 .../catalog/views/navigation/set/CatalogNavigationSetView.tsx | 4 ++--
 .../badge/active-results/InventoryActiveBadgeResultsView.tsx  | 4 ++--
 .../views/badge/results/InventoryBadgeResultsView.tsx         | 4 ++--
 .../inventory/views/bot/results/InventoryBotResultsView.tsx   | 4 ++--
 .../inventory/views/pet/results/InventoryPetResultsView.tsx   | 4 ++--
 .../room/widgets/furniture/stickie/FurnitureStickieView.tsx   | 4 ++--
 .../widgets/infostand/views/bot/InfoStandWidgetBotView.tsx    | 4 ++--
 .../views/rentable-bot/InfoStandWidgetRentableBotView.tsx     | 4 ++--
 .../actor-has-hand-item/WiredConditionActorHasHandItem.tsx    | 4 ++--
 .../WiredConditionActorIsTeamMemberView.tsx                   | 4 ++--
 11 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
index 4ee80c6a..cbe8faab 100644
--- a/src/views/catalog/CatalogView.tsx
+++ b/src/views/catalog/CatalogView.tsx
@@ -93,10 +93,10 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                 <NitroCardView className="nitro-catalog">
                     <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
-                        { root && root.children.length && root.children.map((page, index) =>
+                        { root && root.children.length && root.children.map(page =>
                             {
                                 return (
-                                    <NitroCardTabsItemView key={ index } isActive={ (currentTab === page) } onClick={ event => setCurrentTab(page) }>
+                                    <NitroCardTabsItemView key={ page.pageId } isActive={ (currentTab === page) } onClick={ event => setCurrentTab(page) }>
                                         { page.localization }
                                     </NitroCardTabsItemView>
                                 );
diff --git a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
index 32a8ec30..32d5e54d 100644
--- a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
+++ b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
@@ -35,11 +35,11 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
     
     return (
         <div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
-            { page && (page.children.length > 0) && page.children.map((page, index) =>
+            { page && (page.children.length > 0) && page.children.map(page =>
                 {
                     if(!page.visible) return null;
                     
-                    return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } setActiveChild={ setActiveChild } />
+                    return <CatalogNavigationItemView key={ page.pageId } page={ page } isActive={ (activeChild === page) } setActiveChild={ setActiveChild } />
                 }) }
         </div>
     );
diff --git a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx b/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
index d8f970af..75f3785d 100644
--- a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
+++ b/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
@@ -8,9 +8,9 @@ export const InventoryActiveBadgeResultsView: FC<InventoryActiveBadgeResultsView
     
     return (
         <div className="row row-cols-3 align-content-start g-0">
-            { badges && (badges.length > 0) && badges.map((code, index) =>
+            { badges && (badges.length > 0) && badges.map(code =>
                 {
-                    return <InventoryBadgeItemView key={ index } badge={ code } />
+                    return <InventoryBadgeItemView key={ code } badge={ code } />
                 }) }
         </div>
     );
diff --git a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
index d563979b..66215373 100644
--- a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
+++ b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
@@ -9,11 +9,11 @@ export const InventoryBadgeResultsView: FC<InventoryBadgeResultsViewProps> = pro
     return (
         <div className="h-100 overflow-hidden">
             <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-            { badges && (badges.length > 0) && badges.map((code, index) =>
+            { badges && (badges.length > 0) && badges.map(code =>
                     {
                         if(activeBadges.indexOf(code) >= 0) return null;
                         
-                        return <InventoryBadgeItemView key={ index } badge={ code } />
+                        return <InventoryBadgeItemView key={ code } badge={ code } />
                     }) }
             </div>
         </div>
diff --git a/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx b/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
index 05e044fb..477c7bb4 100644
--- a/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
+++ b/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
@@ -9,9 +9,9 @@ export const InventoryBotResultsView: FC<InventoryBotResultsViewProps> = props =
     return (
         <div className="h-100 overflow-hidden">
             <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-            { botItems && (botItems.length > 0) && botItems.map((item, index) =>
+            { botItems && (botItems.length > 0) && botItems.map(item =>
                     {
-                        return <InventoryBotItemView key={ index } botItem={ item } />
+                        return <InventoryBotItemView key={ item.id } botItem={ item } />
                     }) }
             </div>
         </div>
diff --git a/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx b/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
index 03fc893e..21e99114 100644
--- a/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
+++ b/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
@@ -9,9 +9,9 @@ export const InventoryPetResultsView: FC<InventoryPetResultsViewProps> = props =
     return (
         <div className="h-100 overflow-hidden">
             <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-            { petItems && (petItems.length > 0) && petItems.map((item, index) =>
+            { petItems && (petItems.length > 0) && petItems.map(item =>
                     {
-                        return <InventoryPetItemView key={ index } petItem={ item } />
+                        return <InventoryPetItemView key={ item.id } petItem={ item } />
                     }) }
             </div>
         </div>
diff --git a/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx b/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx
index 2c1a7a97..3a34020b 100644
--- a/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx
+++ b/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx
@@ -122,9 +122,9 @@ export const FurnitureStickieView: FC<FurnitureStickieViewProps> = props =>
                         { stickieData.canModify && 
                         <>
                             <div className="nitro-stickie-image stickie-trash header-trash" onClick={ event => processAction('trash') }></div>
-                            { STICKIE_COLORS.map((color, index) =>
+                            { STICKIE_COLORS.map(color =>
                                 {
-                                    return <div className="stickie-color ms-1" key={ index } onClick={ event => processAction('changeColor', color) } style={ {backgroundColor: ColorUtils.makeColorHex(color) } } />
+                                    return <div key={ color } className="stickie-color ms-1" onClick={ event => processAction('changeColor', color) } style={ {backgroundColor: ColorUtils.makeColorHex(color) } } />
                                 })}
                         </> }
                     </div>
diff --git a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx
index 45c2eb20..dedf8822 100644
--- a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx
+++ b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx
@@ -24,9 +24,9 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
                     <AvatarImageView figure={ botData.figure } direction={ 4 } />
                 </div>
                 <div className="w-100 d-flex justify-content-center align-items-center">
-                    { (botData.badges.length > 0) && botData.badges.map((result, index) =>
+                    { (botData.badges.length > 0) && botData.badges.map(result =>
                         {
-                            return <BadgeImageView key={ index } badgeCode={ result } />;
+                            return <BadgeImageView key={ result } badgeCode={ result } />;
                         }) }
                 </div>
             </div>
diff --git a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx
index 258840ef..a25fc8d3 100644
--- a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx
+++ b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx
@@ -36,9 +36,9 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
                         <AvatarImageView figure={ rentableBotData.figure } direction={ 4 } />
                     </div>
                     <div className="w-100 d-flex justify-content-center align-items-center">
-                        { (rentableBotData.badges.length > 0) && rentableBotData.badges.map((result, index) =>
+                        { (rentableBotData.badges.length > 0) && rentableBotData.badges.map(result =>
                             {
-                                return <BadgeImageView key={ index } badgeCode={ result } />;
+                                return <BadgeImageView key={ result } badgeCode={ result } />;
                             }) }
                     </div>
                 </div>
diff --git a/src/views/wired/views/conditions/actor-has-hand-item/WiredConditionActorHasHandItem.tsx b/src/views/wired/views/conditions/actor-has-hand-item/WiredConditionActorHasHandItem.tsx
index fe4aefe3..368b3114 100644
--- a/src/views/wired/views/conditions/actor-has-hand-item/WiredConditionActorHasHandItem.tsx
+++ b/src/views/wired/views/conditions/actor-has-hand-item/WiredConditionActorHasHandItem.tsx
@@ -26,9 +26,9 @@ export const WiredConditionActorHasHandItemView: FC<{}> = props =>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.handitem') }</label>
                 <select className="form-select form-select-sm" value={ handItemId } onChange={ event => setHandItemId(parseInt(event.target.value)) }>
-                    { allowedHanditemIds.map((value, index) =>
+                    { allowedHanditemIds.map(value =>
                         {
-                            return <option key={ index } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>
+                            return <option key={ value } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>
                         }) }
                 </select>
             </div>
diff --git a/src/views/wired/views/conditions/actor-is-team-member/WiredConditionActorIsTeamMemberView.tsx b/src/views/wired/views/conditions/actor-is-team-member/WiredConditionActorIsTeamMemberView.tsx
index 851088a3..b616db4b 100644
--- a/src/views/wired/views/conditions/actor-is-team-member/WiredConditionActorIsTeamMemberView.tsx
+++ b/src/views/wired/views/conditions/actor-is-team-member/WiredConditionActorIsTeamMemberView.tsx
@@ -25,10 +25,10 @@ export const WiredConditionActorIsTeamMemberView: FC<{}> = props =>
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.team') }</label>
-                { teamIds.map((value, index) =>
+                { teamIds.map(value =>
                     {
                         return (
-                            <div key={ index } className="form-check">
+                            <div key={ value } className="form-check">
                                 <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ value }` } checked={ (selectedTeam === value) } onChange={ event => setSelectedTeam(value) } />
                                 <label className="form-check-label" htmlFor={ `selectedTeam${ value }` }>
                                     { LocalizeText(`wiredfurni.params.team.${ value }`) }

From deb5461d6a05a866606d9f5c58747485639a19ef Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 3 Jul 2021 22:23:55 -0400
Subject: [PATCH 3/6] Fix stuff i busted

---
 src/views/catalog/CatalogView.tsx                             | 4 ++--
 .../catalog/views/navigation/set/CatalogNavigationSetView.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
index cbe8faab..4ee80c6a 100644
--- a/src/views/catalog/CatalogView.tsx
+++ b/src/views/catalog/CatalogView.tsx
@@ -93,10 +93,10 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                 <NitroCardView className="nitro-catalog">
                     <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
-                        { root && root.children.length && root.children.map(page =>
+                        { root && root.children.length && root.children.map((page, index) =>
                             {
                                 return (
-                                    <NitroCardTabsItemView key={ page.pageId } isActive={ (currentTab === page) } onClick={ event => setCurrentTab(page) }>
+                                    <NitroCardTabsItemView key={ index } isActive={ (currentTab === page) } onClick={ event => setCurrentTab(page) }>
                                         { page.localization }
                                     </NitroCardTabsItemView>
                                 );
diff --git a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
index 32d5e54d..32a8ec30 100644
--- a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
+++ b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
@@ -35,11 +35,11 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
     
     return (
         <div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
-            { page && (page.children.length > 0) && page.children.map(page =>
+            { page && (page.children.length > 0) && page.children.map((page, index) =>
                 {
                     if(!page.visible) return null;
                     
-                    return <CatalogNavigationItemView key={ page.pageId } page={ page } isActive={ (activeChild === page) } setActiveChild={ setActiveChild } />
+                    return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } setActiveChild={ setActiveChild } />
                 }) }
         </div>
     );

From 2d2e04764fc7e5e0763f618668b6c5eea154be85 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 3 Jul 2021 22:44:48 -0400
Subject: [PATCH 4/6] Fixed busted friend bar

---
 .../reducers/FriendListReducer.tsx            |  2 +-
 .../friend-bar-item/FriendBarItemView.tsx     | 61 +++++++++----------
 .../views/friend-bar/FriendBarView.tsx        | 21 ++++---
 3 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/src/views/friend-list/reducers/FriendListReducer.tsx b/src/views/friend-list/reducers/FriendListReducer.tsx
index 33a8a41c..8052b06c 100644
--- a/src/views/friend-list/reducers/FriendListReducer.tsx
+++ b/src/views/friend-list/reducers/FriendListReducer.tsx
@@ -103,7 +103,7 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
 
                 for(const friend of update.addedFriends) processUpdate(friend);
 
-                for(const friend of update.addedFriends) processUpdate(friend);
+                for(const friend of update.updatedFriends) processUpdate(friend);
 
                 for(const removedFriendId of update.removedFriendIds)
                 {
diff --git a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx
index 8cc36663..0cd1049c 100644
--- a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx
+++ b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx
@@ -1,5 +1,6 @@
-import { FollowFriendComposer, MouseEventType, Nitro } from 'nitro-renderer';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FollowFriendComposer, MouseEventType } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { GetConnection } from '../../../../api';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { FriendBarItemViewProps } from './FriendBarItemView.types';
@@ -7,38 +8,33 @@ import { FriendBarItemViewProps } from './FriendBarItemView.types';
 export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
 {
     const { friend = null } = props;
-    const [isVisible, setVisible] = useState(false);
-
-    const toggleVisible = () => setVisible(prevCheck => !prevCheck);
-
+    const [ isVisible, setVisible ] = useState(false);
     const elementRef = useRef<HTMLDivElement>();
 
+    const followFriend = useCallback(() =>
+    {
+        GetConnection().send(new FollowFriendComposer(friend.id));
+    }, [ friend ]);
+
+    const onClick = useCallback((event: MouseEvent) =>
+    {
+        const element = elementRef.current;
+
+        if((event.target !== element) && !element.contains((event.target as Node)))
+        {
+            setVisible(false);
+        }
+    }, []);
+
     useEffect(() =>
     {
-        function onClick(event: MouseEvent): void
-        {
-            const element = elementRef.current;
-
-            if((event.target !== element) && !element.contains((event.target as Node)))
-            {
-                setVisible(false);
-            }
-        }
-
         document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
 
         return () =>
         {
             document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
         }
-    }, [ elementRef, setVisible ]);
-    
-
-    const followFriend = () =>
-    {
-
-        Nitro.instance.communication.connection.send(new FollowFriendComposer(friend.id));
-    }
+    }, [ onClick ]);
 
     if(!friend)
     {
@@ -51,16 +47,17 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
     }
 
     return (
-        <div ref={ elementRef } className={"btn btn-success friend-bar-item " + (isVisible ? "friend-bar-item-active" : "")} onClick={ event => toggleVisible()}>
+        <div ref={ elementRef } className={"btn btn-success friend-bar-item " + (isVisible ? "friend-bar-item-active" : "")} onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className="friend-bar-item-head position-absolute">
-                <AvatarImageView headOnly={true} figure={friend.figure} direction={2} />
+                <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } />
             </div>
-            <div className="text-truncate">{friend.name}</div>
-            {isVisible && <div className="d-flex justify-content-between">
-                <i className="icon icon-fb-chat cursor-pointer" />
-                {friend.followingAllowed && <i onClick={ event => followFriend() } className="icon icon-fb-visit cursor-pointer" />}
-                <i className="icon icon-fb-profile cursor-pointer" />
-            </div>}
+            <div className="text-truncate">{ friend.name }</div>
+            { isVisible &&
+                <div className="d-flex justify-content-between">
+                    <i className="icon icon-fb-chat cursor-pointer" />
+                    { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-fb-visit cursor-pointer" /> }
+                    <i className="icon icon-fb-profile cursor-pointer" />
+                </div> }
         </div>
     );
 }
diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.tsx b/src/views/friend-list/views/friend-bar/FriendBarView.tsx
index 59748b94..941d485c 100644
--- a/src/views/friend-list/views/friend-bar/FriendBarView.tsx
+++ b/src/views/friend-list/views/friend-bar/FriendBarView.tsx
@@ -3,12 +3,19 @@ import { useFriendListContext } from '../../context/FriendListContext';
 import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
 
+const MAX_DISPLAY_COUNT: number = 3;
+
 export const FriendBarView: FC<FriendBarViewProps> = props =>
 {
     const { friendListState = null } = useFriendListContext();
     const { friends = null } = friendListState;
     const [ indexOffset, setIndexOffset ] = useState(0);
 
+    const onlineFriends = useMemo(() =>
+    {
+        return friends.filter(friend => friend.online);
+    }, [ friends ]);
+
     const canDecreaseIndex = useMemo(() =>
     {
         if(indexOffset === 0) return false;
@@ -18,20 +25,20 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
 
     const canIncreaseIndex = useMemo(() =>
     {
-        if(indexOffset === (friends.length - 1)) return false;
+        if((onlineFriends.length <= MAX_DISPLAY_COUNT) || (indexOffset === (onlineFriends.length - 1))) return false;
 
         return true;
-    }, [ indexOffset, friends ]);
+    }, [ indexOffset, onlineFriends ]);
 
     return (
         <div className="d-flex friend-bar align-items-center">
-            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={!canDecreaseIndex} onClick={event => setIndexOffset(indexOffset - 1)}>
+            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
                 <i className="fas fa-chevron-left" />
             </button>
-            <FriendBarItemView friend={ (friends[ indexOffset ] || null) } />
-            <FriendBarItemView friend={ (friends[ indexOffset + 1 ] || null) } />
-            <FriendBarItemView friend={ (friends[ indexOffset + 2 ] || null) } />
-            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={!canIncreaseIndex} onClick={event => setIndexOffset(indexOffset + 1)}>
+            <FriendBarItemView friend={ (onlineFriends[ indexOffset ] || null) } />
+            <FriendBarItemView friend={ (onlineFriends[ indexOffset + 1 ] || null) } />
+            <FriendBarItemView friend={ (onlineFriends[ indexOffset + 2 ] || null) } />
+            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
                 <i className="fas fa-chevron-right" />
             </button>
         </div>

From 2e93a72c5672d3c9f8e0adad6b969cbac46abed8 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 3 Jul 2021 22:50:03 -0400
Subject: [PATCH 5/6] Add max display count

---
 .../friend-list/views/friend-bar/FriendBarView.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.tsx b/src/views/friend-list/views/friend-bar/FriendBarView.tsx
index 941d485c..b1836e64 100644
--- a/src/views/friend-list/views/friend-bar/FriendBarView.tsx
+++ b/src/views/friend-list/views/friend-bar/FriendBarView.tsx
@@ -3,13 +3,12 @@ import { useFriendListContext } from '../../context/FriendListContext';
 import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
 
-const MAX_DISPLAY_COUNT: number = 3;
-
 export const FriendBarView: FC<FriendBarViewProps> = props =>
 {
     const { friendListState = null } = useFriendListContext();
     const { friends = null } = friendListState;
     const [ indexOffset, setIndexOffset ] = useState(0);
+    const [ maxDisplayCount, setMaxDisplayCount ] = useState(3);
 
     const onlineFriends = useMemo(() =>
     {
@@ -25,19 +24,20 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
 
     const canIncreaseIndex = useMemo(() =>
     {
-        if((onlineFriends.length <= MAX_DISPLAY_COUNT) || (indexOffset === (onlineFriends.length - 1))) return false;
+        if((onlineFriends.length <= maxDisplayCount) || (indexOffset === (onlineFriends.length - 1))) return false;
 
         return true;
-    }, [ indexOffset, onlineFriends ]);
+    }, [ maxDisplayCount, indexOffset, onlineFriends ]);
 
     return (
         <div className="d-flex friend-bar align-items-center">
             <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
                 <i className="fas fa-chevron-left" />
             </button>
-            <FriendBarItemView friend={ (onlineFriends[ indexOffset ] || null) } />
-            <FriendBarItemView friend={ (onlineFriends[ indexOffset + 1 ] || null) } />
-            <FriendBarItemView friend={ (onlineFriends[ indexOffset + 2 ] || null) } />
+            { Array.from(Array(maxDisplayCount), (e, i) =>
+                {
+                    return <FriendBarItemView friend={ (onlineFriends[ indexOffset + i ] || null) } />;
+                }) }
             <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
                 <i className="fas fa-chevron-right" />
             </button>

From 08821203a97c0df759992cb91bb34771616b4e5f Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 4 Jul 2021 01:33:05 -0300
Subject: [PATCH 6/6] New config var

---
 public/configuration.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/configuration.json b/public/configuration.json
index 30aa77ae..b7972877 100644
--- a/public/configuration.json
+++ b/public/configuration.json
@@ -2,6 +2,7 @@
     "socket.url": "wss://ws.nitrots.co:2096",
     "asset.url": "https://nitro.nitrots.co",
     "image.library.url": "https://swf.nitrots.co/c_images/",
+    "internal.samples.url": "",
     "external.samples.url": "https://swf.nitrots.co/dcr/hof_furni/mp3/sound_machine_sample_%sample%.mp3",
     "image.library.notifications.url": "${image.library.url}notifications/%image%.png",
     "achievements.images.url": "${image.library.url}Quests/%image%.png",