nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed busted friend bar

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/friend-list/reducers/FriendListReducer.tsx
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.updatedFriends) processUpdate(friend);
for(const removedFriendId of update.removedFriendIds)
{

61
src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx
View File

@ -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>
);
}

21
src/views/friend-list/views/friend-bar/FriendBarView.tsx
View File

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