From 8fd850d8bee916169eb691ea599fbfb7288dc12a Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 2 Apr 2022 21:31:44 -0400
Subject: [PATCH] Fix friend bar offsets

---
 .../friends/views/friends-bar/FriendsBarView.tsx     | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx
index 8ca8eb57..75bfd505 100644
--- a/src/components/friends/views/friends-bar/FriendsBarView.tsx
+++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 import { MessengerFriend } from '../../../../api';
 import { Button, Flex } from '../../../../common';
 import { FriendBarItemView } from './FriendBarItemView';
@@ -10,17 +10,15 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
 {
     const { onlineFriends = null } = props;
     const [ indexOffset, setIndexOffset ] = useState(0);
-
-    const canDecreaseIndex = () => (indexOffset === 0) ? false : true;
-    const canIncreaseIndex = () => ((onlineFriends.length <= MAX_DISPLAY_COUNT) || (indexOffset === (onlineFriends.length - 1))) ? false : true;
+    const elementRef = useRef<HTMLDivElement>();
 
     return (
-        <Flex alignItems="center" className="friend-bar">
-            <Button variant="black" className="friend-bar-button" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
+        <Flex innerRef={ elementRef } alignItems="center" className="friend-bar">
+            <Button variant="black" className="friend-bar-button" disabled={ (indexOffset <= 0) } onClick={ event => setIndexOffset(indexOffset - 1) }>
                 <FontAwesomeIcon icon="chevron-left" />
             </Button>
             { Array.from(Array(MAX_DISPLAY_COUNT), (e, i) => <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />) }
-            <Button variant="black" className="friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
+            <Button variant="black" className="friend-bar-button" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } onClick={ event => setIndexOffset(indexOffset + 1) }>
                 <FontAwesomeIcon icon="chevron-right" />
             </Button>
         </Flex>