nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Feature - Find friends

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

43
src/components/friends/FriendsView.scss
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 {

30
src/components/friends/views/friends-bar/FriendBarItemView.tsx
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 { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api';
import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api';
import { Base, Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
import { useFriends } from '../../../../hooks';
export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@ -33,9 +33,17 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
if(!friend)
{
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="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>
);
}
@ -48,12 +56,12 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
</div>
<div className="text-truncate">{ friend.name }</div>
{ isVisible &&
<div className="d-flex justify-content-between">
<Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
{ friend.followingAllowed &&
<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) } />
</div> }
<div className="d-flex justify-content-between">
<Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
{ friend.followingAllowed &&
<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) } />
</div> }
</div>
);
}

15
src/hooks/friends/useFriends.ts
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 { 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 { useNotification } from '../notification';
const useFriendsState = () =>
{
@ -11,6 +12,7 @@ const useFriendsState = () =>
const [ sentRequests, setSentRequests ] = useState<number[]>([]);
const [ dismissedRequestIds, setDismissedRequestIds ] = useState<number[]>([]);
const [ settings, setSettings ] = useState<MessengerSettings>(null);
const { simpleAlert } = useNotification();
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(() =>
{
SendMessageComposer(new MessengerInitComposer());