Feature - Find friends

This commit is contained in:
oobjectt 2023-04-23 00:06:30 +02:00
parent aba4ddf2db
commit 04ba7e47b8
3 changed files with 75 additions and 13 deletions

View File

@ -146,6 +146,49 @@
} }
} }
} }
.friend-bar-item-search {
width: 130px;
margin: 0 3px;
z-index: 0;
position: relative;
text-align: left;
.left-text {
margin-left: 30px;
}
.search-content {
margin-bottom: 105px;
}
&.friend-bar-item-active {
margin-bottom:21px;
}
.friend-bar-item-head {
&.avatar {
top: -30px;
left: -30px;
}
&.group {
top: -5px;
left: -5px;
}
pointer-events: none;
}
&.friend-bar-search {
.friend-bar-item-head {
top: -3px;
left: 5px;
width: 31px;
height: 34px;
background-image: url('@/assets/images/toolbar/friend-search.png');
}
}
}
} }
.nitro-friends-messenger { .nitro-friends-messenger {

View File

@ -1,7 +1,7 @@
import { MouseEventType } from '@nitrots/nitro-renderer'; import { FindNewFriendsMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
import { FC, useEffect, useRef, useState } from 'react'; import { FC, useEffect, useRef, useState } from 'react';
import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api'; import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api';
import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common'; import { Base, Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
import { useFriends } from '../../../../hooks'; import { useFriends } from '../../../../hooks';
export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@ -33,9 +33,17 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
if(!friend) if(!friend)
{ {
return ( return (
<div ref={ elementRef } className="btn btn-primary friend-bar-item friend-bar-search"> <div ref={ elementRef } className="btn btn-primary friend-bar-item-search friend-bar-search" onClick={ event => setVisible(prevValue => !prevValue) }>
<div className="friend-bar-item-head position-absolute"/> <div className="friend-bar-item-head position-absolute"/>
<div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div> <div className="text-truncate left-text">{ LocalizeText('friend.bar.find.title') }</div>
{ isVisible &&
<>
<div className="search-content">
<div className="bg-white text-black mt-2 mb-2 px-1 py-1">{ LocalizeText('friend.bar.find.text') }</div>
<Button variant="white" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
</div>
</>
}
</div> </div>
); );
} }
@ -48,12 +56,12 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
</div> </div>
<div className="text-truncate">{ friend.name }</div> <div className="text-truncate">{ friend.name }</div>
{ isVisible && { isVisible &&
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } /> <Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
{ friend.followingAllowed && { friend.followingAllowed &&
<Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> } <Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
<Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } /> <Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
</div> } </div> }
</div> </div>
); );
} }

View File

@ -1,8 +1,9 @@
import { AcceptFriendMessageComposer, DeclineFriendMessageComposer, FollowFriendMessageComposer, FriendListFragmentEvent, FriendListUpdateComposer, FriendListUpdateEvent, FriendParser, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitComposer, MessengerInitEvent, NewFriendRequestEvent, RequestFriendComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer'; import { AcceptFriendMessageComposer, DeclineFriendMessageComposer, FindFriendsProcessResultEvent, FollowFriendMessageComposer, FriendListFragmentEvent, FriendListUpdateComposer, FriendListUpdateEvent, FriendParser, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitComposer, MessengerInitEvent, NewFriendRequestEvent, RequestFriendComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useBetween } from 'use-between'; import { useBetween } from 'use-between';
import { CloneObject, GetSessionDataManager, MessengerFriend, MessengerRequest, MessengerSettings, SendMessageComposer } from '../../api'; import { CloneObject, GetSessionDataManager, LocalizeText, MessengerFriend, MessengerRequest, MessengerSettings, SendMessageComposer } from '../../api';
import { useMessageEvent } from '../events'; import { useMessageEvent } from '../events';
import { useNotification } from '../notification';
const useFriendsState = () => const useFriendsState = () =>
{ {
@ -11,6 +12,7 @@ const useFriendsState = () =>
const [ sentRequests, setSentRequests ] = useState<number[]>([]); const [ sentRequests, setSentRequests ] = useState<number[]>([]);
const [ dismissedRequestIds, setDismissedRequestIds ] = useState<number[]>([]); const [ dismissedRequestIds, setDismissedRequestIds ] = useState<number[]>([]);
const [ settings, setSettings ] = useState<MessengerSettings>(null); const [ settings, setSettings ] = useState<MessengerSettings>(null);
const { simpleAlert } = useNotification();
const onlineFriends = useMemo(() => const onlineFriends = useMemo(() =>
{ {
@ -248,6 +250,15 @@ const useFriendsState = () =>
}); });
}); });
useMessageEvent<FindFriendsProcessResultEvent>(FindFriendsProcessResultEvent, event =>
{
const parser = event.getParser();
if (!parser) return;
simpleAlert(LocalizeText(!parser.success ? 'friendbar.find.error.text' : 'friendbar.find.success.text'), '', '', '', LocalizeText(!parser.success ? 'friendbar.find.error.title' : 'friendbar.find.success.title'));
});
useEffect(() => useEffect(() =>
{ {
SendMessageComposer(new MessengerInitComposer()); SendMessageComposer(new MessengerInitComposer());