Fixed busted friend bar

This commit is contained in:
Bill 2021-07-03 22:44:48 -04:00
parent deb5461d6a
commit 2d2e04764f
3 changed files with 44 additions and 40 deletions

View File

@ -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.addedFriends) processUpdate(friend); for(const friend of update.updatedFriends) processUpdate(friend);
for(const removedFriendId of update.removedFriendIds) for(const removedFriendId of update.removedFriendIds)
{ {

View File

@ -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 { LocalizeText } from '../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { FriendBarItemViewProps } from './FriendBarItemView.types'; import { FriendBarItemViewProps } from './FriendBarItemView.types';
@ -7,38 +8,33 @@ import { FriendBarItemViewProps } from './FriendBarItemView.types';
export const FriendBarItemView: FC<FriendBarItemViewProps> = props => export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
{ {
const { friend = null } = 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 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(() => 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); document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
return () => return () =>
{ {
document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick); document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
} }
}, [ elementRef, setVisible ]); }, [ onClick ]);
const followFriend = () =>
{
Nitro.instance.communication.connection.send(new FollowFriendComposer(friend.id));
}
if(!friend) if(!friend)
{ {
@ -51,16 +47,17 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
} }
return ( 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"> <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>
<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> </div>
); );
} }

View File

@ -3,12 +3,19 @@ import { useFriendListContext } from '../../context/FriendListContext';
import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView'; import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
import { FriendBarViewProps } from './FriendBarView.types'; import { FriendBarViewProps } from './FriendBarView.types';
const MAX_DISPLAY_COUNT: number = 3;
export const FriendBarView: FC<FriendBarViewProps> = props => export const FriendBarView: FC<FriendBarViewProps> = props =>
{ {
const { friendListState = null } = useFriendListContext(); const { friendListState = null } = useFriendListContext();
const { friends = null } = friendListState; const { friends = null } = friendListState;
const [ indexOffset, setIndexOffset ] = useState(0); const [ indexOffset, setIndexOffset ] = useState(0);
const onlineFriends = useMemo(() =>
{
return friends.filter(friend => friend.online);
}, [ friends ]);
const canDecreaseIndex = useMemo(() => const canDecreaseIndex = useMemo(() =>
{ {
if(indexOffset === 0) return false; if(indexOffset === 0) return false;
@ -18,20 +25,20 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
const canIncreaseIndex = useMemo(() => const canIncreaseIndex = useMemo(() =>
{ {
if(indexOffset === (friends.length - 1)) return false; if((onlineFriends.length <= MAX_DISPLAY_COUNT) || (indexOffset === (onlineFriends.length - 1))) return false;
return true; return true;
}, [ indexOffset, friends ]); }, [ indexOffset, onlineFriends ]);
return ( return (
<div className="d-flex friend-bar align-items-center"> <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" /> <i className="fas fa-chevron-left" />
</button> </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" /> <i className="fas fa-chevron-right" />
</button> </button>
</div> </div>