Fixed busted friend bar

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)
                 {

src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx

@@ -1,5 +1,6 @@
-import { FollowFriendComposer, MouseEventType, Nitro } from 'nitro-renderer';
+import { FollowFriendComposer, MouseEventType } from 'nitro-renderer';
-import { FC, useEffect, useRef, useState } from 'react';
+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 [ isVisible, setVisible ] = useState(false);
-
-    const toggleVisible = () => setVisible(prevCheck => !prevCheck);
-
     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 ]);
+    }, [ onClick ]);
-    
-
-    const followFriend = () =>
-    {
-
-        Nitro.instance.communication.connection.send(new FollowFriendComposer(friend.id));
-    }
 
     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>
+            <div className="text-truncate">{ friend.name }</div>
-            {isVisible && <div className="d-flex justify-content-between">
+            { isVisible &&
-                <i className="icon icon-fb-chat cursor-pointer" />
+                <div className="d-flex justify-content-between">
-                {friend.followingAllowed && <i onClick={ event => followFriend() } className="icon icon-fb-visit cursor-pointer" />}
+                    <i className="icon icon-fb-chat cursor-pointer" />
-                <i className="icon icon-fb-profile cursor-pointer" />
+                    { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-fb-visit cursor-pointer" /> }
-            </div>}
+                    <i className="icon icon-fb-profile cursor-pointer" />
+                </div> }
         </div>
     );
 }

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={ (onlineFriends[ indexOffset ] || null) } />
-            <FriendBarItemView friend={ (friends[ indexOffset + 1 ] || null) } />
+            <FriendBarItemView friend={ (onlineFriends[ indexOffset + 1 ] || null) } />
-            <FriendBarItemView friend={ (friends[ indexOffset + 2 ] || 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)}>
+            <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>