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] 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>