From 04ba7e47b8cc836697f5e183094f1581b8bb6cf7 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 23 Apr 2023 00:06:30 +0200
Subject: [PATCH] Feature - Find friends

---
 src/components/friends/FriendsView.scss       | 43 +++++++++++++++++++
 .../views/friends-bar/FriendBarItemView.tsx   | 30 ++++++++-----
 src/hooks/friends/useFriends.ts               | 15 ++++++-
 3 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/src/components/friends/FriendsView.scss b/src/components/friends/FriendsView.scss
index b45fff42..0ebecbb0 100644
--- a/src/components/friends/FriendsView.scss
+++ b/src/components/friends/FriendsView.scss
@@ -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 {
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
index 52f7568f..2392d8f1 100644
--- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx
+++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
@@ -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>
     );
 }
diff --git a/src/hooks/friends/useFriends.ts b/src/hooks/friends/useFriends.ts
index 05437b2a..c2c4e9fb 100644
--- a/src/hooks/friends/useFriends.ts
+++ b/src/hooks/friends/useFriends.ts
@@ -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());