feat: find friends

By @oobjectt
https://github.com/billsonnn/nitro-react/pull/149

apps/frontend/src/components/friends/FriendsView.scss

@@ -162,6 +162,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 {
@@ -258,3 +301,4 @@
     }
   }
 }
+

apps/frontend/src/components/friends/views/friends-bar/FriendBarItemView.tsx

@@ -1,8 +1,8 @@
-import {MouseEventType} from "@nitro/renderer";
+import {FindNewFriendsMessageComposer, MouseEventType} from "@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 => {
@@ -29,9 +29,19 @@ 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>
     );
   }
@@ -40,8 +50,7 @@ export const FriendBarItemView: FC<{friend: MessengerFriend}> = props => {
     <div
       ref={elementRef}
       className={"btn btn-success friend-bar-item " + (isVisible ? "friend-bar-item-active" : "")}
-      onClick={event => setVisible(prevValue => !prevValue)}
-    >
+      onClick={event => setVisible(prevValue => !prevValue)}>
       <div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? "avatar" : "group"}`}>
         {friend.id > 0 && <LayoutAvatarImageView headOnly={true} figure={friend.figure} direction={2} />}
         {friend.id <= 0 && <LayoutBadgeImageView isGroup={true} badgeCode={friend.figure} />}
@@ -59,3 +68,4 @@ export const FriendBarItemView: FC<{friend: MessengerFriend}> = props => {
     </div>
   );
 };
+

apps/frontend/src/hooks/friends/useFriends.ts

@@ -1,6 +1,7 @@
 import {
   AcceptFriendMessageComposer,
   DeclineFriendMessageComposer,
+  FindFriendsProcessResultEvent,
   FollowFriendMessageComposer,
   FriendListFragmentEvent,
   FriendListUpdateComposer,
@@ -17,8 +18,9 @@ import {
 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 = () => {
   const [friends, setFriends] = useState<MessengerFriend[]>([]);
@@ -26,6 +28,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(() => {
     const onlineFriends = friends.filter(friend => friend.online);
@@ -223,6 +226,20 @@ 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());
 
@@ -252,3 +269,4 @@ const useFriendsState = () => {
 };
 
 export const useFriends = () => useBetween(useFriendsState);
+