Update friends

src/api/nitro/room/widgets/events/RoomWidgetUpdateFriendRequestEvent.ts

@@ -0,0 +1,35 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateFriendRequestEvent extends RoomWidgetUpdateEvent
+{
+    public static SHOW_FRIEND_REQUEST: string = 'RWFRUE_SHOW_FRIEND_REQUEST';
+    public static HIDE_FRIEND_REQUEST: string = 'RWFRUE_HIDE_FRIEND_REQUEST';
+
+    private _requestId: number;
+    private _userId: number;
+    private _userName: string;
+
+    constructor(type: string, requestId: number = -1, userId: number = -1, userName: string = null)
+    {
+        super(type);
+
+        this._requestId = requestId;
+        this._userId = userId;
+        this._userName = userName;
+    }
+
+    public get requestId(): number
+    {
+        return this._requestId;
+    }
+
+    public get userId(): number
+    {
+        return this._userId;
+    }
+
+    public get userName(): string
+    {
+        return this._userName;
+    }
+}

src/api/nitro/room/widgets/events/index.ts

@@ -17,6 +17,7 @@ export * from './RoomWidgetUpdateDimmerEvent';
 export * from './RoomWidgetUpdateDimmerStateEvent';
 export * from './RoomWidgetUpdateEvent';
 export * from './RoomWidgetUpdateExternalImageEvent';
+export * from './RoomWidgetUpdateFriendRequestEvent';
 export * from './RoomWidgetUpdateInfostandEvent';
 export * from './RoomWidgetUpdateInfostandFurniEvent';
 export * from './RoomWidgetUpdateInfostandPetEvent';
@@ -31,5 +32,6 @@ export * from './RoomWidgetUpdateRoomViewEvent';
 export * from './RoomWidgetUpdateSongEvent';
 export * from './RoomWidgetUpdateTrophyEvent';
 export * from './RoomWidgetUpdateUserDataEvent';
+export * from './RoomWidgetUpdateYoutubeDisplayEvent';
 export * from './RoomWidgetUseProductBubbleEvent';
 export * from './UseProductItem';

src/api/nitro/room/widgets/handlers/FriendRequestHandler.ts

@@ -0,0 +1,65 @@
+import { NitroEvent, RoomSessionFriendRequestEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer';
+import { FriendRequestEvent, FriendsAcceptFriendRequestEvent, FriendsDeclineFriendRequestEvent } from '../../../../../events';
+import { dispatchUiEvent } from '../../../../../hooks';
+import { RoomWidgetUpdateEvent, RoomWidgetUpdateFriendRequestEvent } from '../events';
+import { RoomWidgetFriendRequestMessage, RoomWidgetMessage } from '../messages';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FriendRequestHandler extends RoomWidgetHandler
+{
+    public processEvent(event: NitroEvent): void
+    {
+        const friendRequestEvent = (event as RoomSessionFriendRequestEvent);
+
+        switch(event.type)
+        {
+            case RoomSessionFriendRequestEvent.RSFRE_FRIEND_REQUEST:
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateFriendRequestEvent(RoomWidgetUpdateFriendRequestEvent.SHOW_FRIEND_REQUEST, friendRequestEvent.requestId, friendRequestEvent.userId, friendRequestEvent.userName));
+                return;
+            case FriendRequestEvent.ACCEPTED:
+            case FriendRequestEvent.DECLINED:
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateFriendRequestEvent(RoomWidgetUpdateFriendRequestEvent.HIDE_FRIEND_REQUEST, friendRequestEvent.requestId));
+                return;
+        }
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        const friendMessage = (message as RoomWidgetFriendRequestMessage);
+
+        switch(message.type)
+        {
+            case RoomWidgetFriendRequestMessage.ACCEPT:
+                dispatchUiEvent(new FriendsAcceptFriendRequestEvent(friendMessage.requestId));
+                break;
+            case RoomWidgetFriendRequestMessage.DECLINE:
+                dispatchUiEvent(new FriendsDeclineFriendRequestEvent(friendMessage.requestId));
+                break;
+
+        }
+
+        return null;
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.FRIEND_REQUEST;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [
+            RoomSessionFriendRequestEvent.RSFRE_FRIEND_REQUEST,
+            FriendRequestEvent.ACCEPTED,
+            FriendRequestEvent.DECLINED
+        ];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [
+            RoomWidgetFriendRequestMessage.ACCEPT,
+            RoomWidgetFriendRequestMessage.DECLINE
+        ];
+    }
+}

src/api/nitro/room/widgets/handlers/FurnitureTrophyWidgetHandler.ts

@@ -0,0 +1,61 @@
+import { NitroEvent, RoomObjectVariable, RoomWidgetEnum } from '@nitrots/nitro-renderer';
+import { RoomWidgetUpdateEvent } from '..';
+import { GetRoomEngine } from '../..';
+import { RoomWidgetFurniToWidgetMessage, RoomWidgetMessage } from '../messages';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurnitureTrophyWidgetHandler extends RoomWidgetHandler
+{
+    public processEvent(event: NitroEvent): void
+    {
+        return;
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+            case RoomWidgetFurniToWidgetMessage.REQUEST_TROPHY: {
+                const widgetMessage = (message as RoomWidgetFurniToWidgetMessage);
+                const roomObject = GetRoomEngine().getRoomObject(widgetMessage.roomId, widgetMessage.objectId, widgetMessage.category);
+
+                if(!roomObject) return;
+
+                const color = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_COLOR);
+                const extra = parseInt(roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_EXTRAS));
+
+                let data  = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
+
+                const ownerName = data.substring(0, data.indexOf('\t'));
+
+                data = data.substring((ownerName.length + 1), data.length);
+
+                const date = data.substring(0, data.indexOf('\t'));
+                const text = data.substr((date.length + 1), data.length);
+
+                
+
+                break;
+            }
+        }
+
+        return null;
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.FURNI_TROPHY_WIDGET;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [
+            RoomWidgetFurniToWidgetMessage.REQUEST_TROPHY
+        ];
+    }
+}

src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts

@@ -5,6 +5,7 @@ import { FriendsSendFriendRequestEvent } from '../../../../../events/friends/Fri
 import { HelpReportUserEvent } from '../../../../../events/help/HelpReportUserEvent';
 import { dispatchUiEvent } from '../../../../../hooks/events';
 import { SendMessageHook } from '../../../../../hooks/messages';
+import { FriendsHelper } from '../../../../../views/friends/common/FriendsHelper';
 import { PetSupplementEnum } from '../../../../../views/room/widgets/avatar-info/common/PetSupplementEnum';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { RoomWidgetObjectNameEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent } from '../events';
@@ -77,7 +78,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
             case RoomWidgetRoomObjectMessage.GET_OBJECT_INFO:
                 return this.processObjectInfoMessage((message as RoomWidgetRoomObjectMessage));
             case RoomWidgetUserActionMessage.SEND_FRIEND_REQUEST:
-                dispatchUiEvent(new FriendsSendFriendRequestEvent(userId));
+                dispatchUiEvent(new FriendsSendFriendRequestEvent(userData.webID, userData.name));
                 break;
             case RoomWidgetUserActionMessage.RESPECT_USER:
                 GetSessionDataManager().giveRespect(userId);
@@ -461,15 +462,18 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
 
         if(eventType === RoomWidgetUpdateInfostandUserEvent.PEER)
         {
-            // userInfoData.canBeAskedAsFriend = this._container.friendService.canBeAskedForAFriend(userData.webID);
+            event.canBeAskedAsFriend = FriendsHelper.canRequestFriend(userData.webID);
 
-            // const friend = this._container.friendService.getFriend(userData.webID);
+            if(!event.canBeAskedAsFriend)
+            {
+                const friend = FriendsHelper.getFriend(userData.webID);
 
-            // if(friend)
-            // {
-            //     userInfoData.realName  = friend.realName;
-            //     userInfoData.isFriend  = true;
-            // }
+                if(friend)
+                {
+                    event.realName = friend.realName;
+                    event.isFriend = true;
+                }
+            }
 
             if(roomObject)
             {

src/api/nitro/room/widgets/handlers/index.ts

@@ -1,4 +1,5 @@
 export * from './DoorbellWidgetHandler';
+export * from './FriendRequestHandler';
 export * from './FurniChooserWidgetHandler';
 export * from './FurnitureContextMenuWidgetHandler';
 export * from './FurnitureCreditWidgetHandler';
@@ -7,6 +8,8 @@ export * from './FurnitureDimmerWidgetHandler';
 export * from './FurnitureExternalImageWidgetHandler';
 export * from './FurnitureMannequinWidgetHandler';
 export * from './FurniturePresentWidgetHandler';
+export * from './FurnitureTrophyWidgetHandler';
+export * from './FurnitureYoutubeDisplayWidgetHandler';
 export * from './IRoomWidgetHandler';
 export * from './IRoomWidgetHandlerManager';
 export * from './RoomWidgetAvatarInfoHandler';

src/api/nitro/room/widgets/messages/RoomWidgetFriendRequestMessage.ts

@@ -0,0 +1,21 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetFriendRequestMessage extends RoomWidgetMessage
+{
+    public static ACCEPT: string = 'RWFRM_ACCEPT';
+    public static DECLINE: string = 'RMFRM_DECLINE';
+
+    private _requestId: number;
+
+    constructor(type: string, requestId: number)
+    {
+        super(type);
+
+        this._requestId = requestId;
+    }
+
+    public get requestId(): number
+    {
+        return this._requestId;
+    }
+}

src/api/nitro/room/widgets/messages/index.ts

@@ -9,6 +9,7 @@ export * from './RoomWidgetDanceMessage';
 export * from './RoomWidgetDimmerChangeStateMessage';
 export * from './RoomWidgetDimmerPreviewMessage';
 export * from './RoomWidgetDimmerSavePresetMessage';
+export * from './RoomWidgetFriendRequestMessage';
 export * from './RoomWidgetFurniActionMessage';
 export * from './RoomWidgetFurniToWidgetMessage';
 export * from './RoomWidgetLetUserInMessage';

src/events/friends/FriendListContentEvent.ts

@@ -1,7 +1,7 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
 import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
-import { FriendsEvent } from './FriendsEvent';
 
-export class FriendListContentEvent extends FriendsEvent
+export class FriendListContentEvent extends NitroEvent
 {
     public static FRIEND_LIST_CONTENT: string = 'FLSFRE_FRIEND_LIST_CONTENT';
 

src/events/friends/FriendRequestEvent.ts

@@ -0,0 +1,21 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class FriendRequestEvent extends NitroEvent
+{
+    public static ACCEPTED: string = 'FRE_ACCEPTED';
+    public static DECLINED: string = 'FRE_DECLINED';
+
+    private _requestId: number;
+
+    constructor(type: string, requestId: number)
+    {
+        super(type);
+
+        this._requestId = requestId;
+    }
+
+    public get requestId(): number
+    {
+        return this._requestId;
+    }
+}

src/events/friends/FriendsAcceptFriendRequestEvent.ts

@@ -0,0 +1,20 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class FriendsAcceptFriendRequestEvent extends NitroEvent
+{
+    public static ACCEPT_FRIEND_REQUEST: string = 'FAFRE_ACCEPT_FRIEND_REQUEST';
+
+    private _requestId: number;
+
+    constructor(requestId: number)
+    {
+        super(FriendsAcceptFriendRequestEvent.ACCEPT_FRIEND_REQUEST);
+
+        this._requestId = requestId;
+    }
+
+    public get requestId(): number
+    {
+        return this._requestId;
+    }
+}

src/events/friends/FriendsDeclineFriendRequestEvent.ts

@@ -0,0 +1,20 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class FriendsDeclineFriendRequestEvent extends NitroEvent
+{
+    public static DECLINE_FRIEND_REQUEST: string = 'FAFRE_DECLINE_FRIEND_REQUEST';
+
+    private _requestId: number;
+
+    constructor(requestId: number)
+    {
+        super(FriendsDeclineFriendRequestEvent.DECLINE_FRIEND_REQUEST);
+
+        this._requestId = requestId;
+    }
+
+    public get requestId(): number
+    {
+        return this._requestId;
+    }
+}

src/events/friends/FriendsRequestCountEvent.ts

@@ -0,0 +1,20 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class FriendsRequestCountEvent extends NitroEvent
+{
+    public static UPDATE_COUNT: string = 'FRCE_UPDATE_COUNT';
+
+    private _count: number;
+
+    constructor(count: number)
+    {
+        super(FriendsRequestCountEvent.UPDATE_COUNT);
+
+        this._count = count;
+    }
+
+    public get count(): number
+    {
+        return this._count;
+    }
+}

src/events/friends/FriendsSendFriendRequestEvent.ts

@@ -1,20 +1,27 @@
-import { FriendsEvent } from './FriendsEvent';
+import { NitroEvent } from '@nitrots/nitro-renderer';
 
-export class FriendsSendFriendRequestEvent extends FriendsEvent
+export class FriendsSendFriendRequestEvent extends NitroEvent
 {
     public static SEND_FRIEND_REQUEST: string = 'FLSFRE_SEND_FRIEND_REQUEST';
 
     private _userId: number;
+    private _userName: string;
 
-    constructor(userId: number)
+    constructor(userId: number, userName: string)
     {
         super(FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST);
 
         this._userId = userId;
+        this._userName = userName;
     }
 
     public get userId(): number
     {
         return this._userId;
     }
+
+    public get userName(): string
+    {
+        return this._userName;
+    }
 }

src/events/friends/index.ts

@@ -1,5 +1,9 @@
 export * from './FriendEnteredRoomEvent';
 export * from './FriendListContentEvent';
+export * from './FriendRequestEvent';
+export * from './FriendsAcceptFriendRequestEvent';
+export * from './FriendsDeclineFriendRequestEvent';
 export * from './FriendsEvent';
 export * from './FriendsMessengerIconEvent';
+export * from './FriendsRequestCountEvent';
 export * from './FriendsSendFriendRequestEvent';

src/views/friends/FriendsMessageHandler.tsx

@@ -1,72 +0,0 @@
-import { FriendListFragmentEvent, FriendListUpdateEvent, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
-import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
-import { MessengerSettings } from './common/MessengerSettings';
-import { useFriendsContext } from './context/FriendsContext';
-import { FriendsActions } from './reducers/FriendsReducer';
-
-export const FriendsMessageHandler: FC<{}> = props =>
-{
-    const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
-
-    const onMessengerInitEvent = useCallback((event: MessengerInitEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFriendsState({
-            type: FriendsActions.UPDATE_SETTINGS,
-            payload: {
-                settings: new MessengerSettings(
-                    parser.userFriendLimit,
-                    parser.normalFriendLimit,
-                    parser.extendedFriendLimit,
-                    parser.categories)
-            }
-        });
-
-        SendMessageHook(new GetFriendRequestsComposer());
-    }, [ dispatchFriendsState ]);
-
-    const onFriendsFragmentEvent = useCallback((event: FriendListFragmentEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFriendsState({
-            type: FriendsActions.PROCESS_FRAGMENT,
-            payload: {
-                fragment: parser.fragment
-            }
-        });
-    }, [ dispatchFriendsState ]);
-
-    const onFriendsUpdateEvent = useCallback((event: FriendListUpdateEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFriendsState({
-            type: FriendsActions.PROCESS_UPDATE,
-            payload: {
-                update: parser
-            }
-        });
-    }, [ dispatchFriendsState ]);
-
-    const onFriendRequestsEvent = useCallback((event: FriendRequestsEvent) =>
-    {
-        const parser = event.getParser();
-        
-        dispatchFriendsState({
-            type: FriendsActions.PROCESS_REQUESTS,
-            payload: {
-                requests: parser.requests
-            }
-        });
-    }, [ dispatchFriendsState ]);
-
-    CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
-    CreateMessageHook(FriendListFragmentEvent, onFriendsFragmentEvent);
-    CreateMessageHook(FriendListUpdateEvent, onFriendsUpdateEvent);
-    CreateMessageHook(FriendRequestsEvent, onFriendRequestsEvent);
-
-    return null;
-}

src/views/friends/FriendsView.scss

@@ -1,6 +1,7 @@
 .nitro-friends {
-    width: 250px;
+    width: $friends-list-width;
+    height: $friends-list-height;
 }
 
-@import './views/friend-bar/FriendBarView';
-@import './views/messenger/FriendsMessengerView';
+@import "./views/friend-bar/FriendBarView";
+@import "./views/messenger/FriendsMessengerView";

src/views/friends/FriendsView.tsx

@@ -1,57 +1,272 @@
-import { MessengerInitComposer, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectUserType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import { AcceptFriendMessageComposer, FriendListFragmentEvent, FriendListUpdateEvent, FriendParser, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitComposer, MessengerInitEvent, NewFriendRequestEvent, RequestFriendComposer, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectUserType } from '@nitrots/nitro-renderer';
+import { DeclineFriendMessageComposer } from '@nitrots/nitro-renderer/src';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { GetRoomSession } from '../../api';
-import { FriendEnteredRoomEvent, FriendListContentEvent, FriendsEvent } from '../../events';
+import { FriendEnteredRoomEvent, FriendListContentEvent, FriendsEvent, FriendsRequestCountEvent } from '../../events';
 import { FriendsSendFriendRequestEvent } from '../../events/friends/FriendsSendFriendRequestEvent';
-import { useRoomEngineEvent } from '../../hooks/events';
+import { CreateMessageHook, useRoomEngineEvent } from '../../hooks';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
+import { FriendsHelper } from './common/FriendsHelper';
+import { MessengerFriend } from './common/MessengerFriend';
+import { MessengerRequest } from './common/MessengerRequest';
+import { MessengerSettings } from './common/MessengerSettings';
 import { FriendsContextProvider } from './context/FriendsContext';
-import { FriendsMessageHandler } from './FriendsMessageHandler';
-import { FriendsReducer, initialFriends } from './reducers/FriendsReducer';
 import { FriendBarView } from './views/friend-bar/FriendBarView';
 import { FriendsListView } from './views/friends-list/FriendsListView';
 import { FriendsMessengerView } from './views/messenger/FriendsMessengerView';
 
 export const FriendsView: FC<{}> = props =>
 {
-    const [ friendsState, dispatchFriendsState ] = useReducer(FriendsReducer, initialFriends);
-    const { friends = [], requests = [], settings = null } = friendsState;
-
     const [ isReady, setIsReady ] = useState(false);
-    const [ isListVisible, setIsListVisible ] = useState(false);
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ friends, setFriends ] = useState<MessengerFriend[]>([]);
+    const [ requests, setRequests ] = useState<MessengerRequest[]>([]);
+    const [ settings, setSettings ] = useState<MessengerSettings>(null);
+    const [ sentRequests, setSentRequests ] = useState<number[]>([]);
 
-    useEffect(() =>
+    const getFriend = useCallback((userId: number) =>
     {
-        SendMessageHook(new MessengerInitComposer());
+        for(const friend of friends)
+        {
+            if(friend.id === userId) return friend;
+        }
+
+        return null;
+    }, [ friends ]);
+
+    FriendsHelper.getFriend = getFriend;
+
+    const canRequestFriend = useCallback((userId: number) =>
+    {
+        if(getFriend(userId)) return false;
+
+        if(sentRequests.indexOf(userId) >= 0) return false;
+
+        return true;
+    }, [ sentRequests, getFriend ]);
+
+    FriendsHelper.canRequestFriend = canRequestFriend;
+
+    const requestFriend = useCallback((userId: number, userName: string) =>
+    {
+        if(sentRequests.indexOf(userId) >= 0) return true;
+
+        if(!canRequestFriend(userId)) return false;
+
+        setSentRequests(prevValue =>
+            {
+                const newSentRequests = [ ...prevValue ];
+
+                newSentRequests.push(userId);
+
+                return newSentRequests;
+            });
+
+        SendMessageHook(new RequestFriendComposer(userName));
+    }, [ sentRequests, canRequestFriend ]);
+
+    const acceptFriend = useCallback((userId: number) =>
+    {
+        setRequests(prevValue =>
+            {
+                const newRequests: MessengerRequest[] = [];
+
+                for(const request of prevValue)
+                {
+                    if(request.requesterUserId !== userId)
+                    {
+                        newRequests.push(request);
+                    }
+                    else
+                    {
+                        SendMessageHook(new AcceptFriendMessageComposer(request.id));
+                    }
+                }
+
+                return newRequests;
+            });
     }, []);
 
-    useEffect(() =>
+    const declineFriend = useCallback((userId: number, declineAll: boolean = false) =>
     {
-        if(!settings) return;
+        setRequests(prevValue =>
+            {
+                if(declineAll)
+                {
+                    SendMessageHook(new DeclineFriendMessageComposer(true));
 
-        setIsReady(true);
-    }, [ settings ]);
+                    return [];
+                }
+                else
+                {
+                    const newRequests: MessengerRequest[] = [];
+
+                    for(const request of prevValue)
+                    {
+                        if(request.requesterUserId !== userId)
+                        {
+                            newRequests.push(request);
+                        }
+                        else
+                        {
+                            SendMessageHook(new DeclineFriendMessageComposer(false, request.id));
+                        }
+                    }
+
+                    return newRequests;
+                }
+            });
+    }, []);
+
+    const onMessengerInitEvent = useCallback((event: MessengerInitEvent) =>
+    {
+        const parser = event.getParser();
+
+        setSettings(new MessengerSettings(
+            parser.userFriendLimit,
+            parser.normalFriendLimit,
+            parser.extendedFriendLimit,
+            parser.categories));
+
+        SendMessageHook(new GetFriendRequestsComposer());
+    }, []);
+
+    CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
+
+    const onFriendsFragmentEvent = useCallback((event: FriendListFragmentEvent) =>
+    {
+        const parser = event.getParser();
+
+        setFriends(prevValue =>
+            {
+                const newFriends = [ ...prevValue ];
+
+                for(const friend of parser.fragment)
+                {
+                    const index = newFriends.findIndex(existingFriend => (existingFriend.id === friend.id));
+                    const newFriend = new MessengerFriend();
+
+                    newFriend.populate(friend);
+
+                    if(index > -1) newFriends[index] = newFriend;
+                    else newFriends.push(newFriend);
+                }
+
+                return newFriends;
+            });
+    }, []);
+
+    CreateMessageHook(FriendListFragmentEvent, onFriendsFragmentEvent);
+
+    const onFriendsUpdateEvent = useCallback((event: FriendListUpdateEvent) =>
+    {
+        const parser = event.getParser();
+
+        setFriends(prevValue =>
+            {
+                const newFriends = [ ...prevValue ];
+
+                const processUpdate = (friend: FriendParser) =>
+                {
+                    const index = newFriends.findIndex(existingFriend => (existingFriend.id === friend.id));
+
+                    if(index === -1)
+                    {
+                        const newFriend = new MessengerFriend();
+                        newFriend.populate(friend);
+
+                        newFriends.unshift(newFriend);
+                    }
+                    else
+                    {
+                        newFriends[index].populate(friend);
+                    }
+                }
+
+                for(const friend of parser.addedFriends) processUpdate(friend);
+
+                for(const friend of parser.updatedFriends) processUpdate(friend);
+
+                for(const removedFriendId of parser.removedFriendIds)
+                {
+                    const index = newFriends.findIndex(existingFriend => (existingFriend.id === removedFriendId));
+
+                    if(index > -1) newFriends.splice(index);
+                }
+
+                return newFriends;
+            });
+    }, []);
+
+    CreateMessageHook(FriendListUpdateEvent, onFriendsUpdateEvent);
+
+    const onFriendRequestsEvent = useCallback((event: FriendRequestsEvent) =>
+    {
+        const parser = event.getParser();
+
+        setRequests(prevValue =>
+            {
+                const newRequests = [ ...prevValue ];
+
+                for(const request of parser.requests)
+                {
+                    const index = newRequests.findIndex(existing => (existing.requesterUserId === request.requesterUserId));
+
+                    if(index > 0) continue;
+
+                    const newRequest = new MessengerRequest();
+                    newRequest.populate(request);
+
+                    newRequests.push(newRequest);
+                }
+
+                return newRequests;
+            });
+    }, []);
+
+    CreateMessageHook(FriendRequestsEvent, onFriendRequestsEvent);
+
+    const onNewFriendRequestEvent = useCallback((event: NewFriendRequestEvent) =>
+    {
+        const parser = event.getParser();
+        const request = parser.request;
+
+        setRequests(prevValue =>
+            {
+                const newRequests = [ ...prevValue ];
+
+                const newRequest = new MessengerRequest();
+                newRequest.populate(request);
+
+                newRequests.push(newRequest);
+
+                return newRequests;
+            });
+    }, []);
+
+    CreateMessageHook(NewFriendRequestEvent, onNewFriendRequestEvent);
 
     const onFriendsEvent = useCallback((event: FriendsEvent) =>
     {
         switch(event.type)
         {
             case FriendsEvent.SHOW_FRIEND_LIST:
-                setIsListVisible(true);
+                setIsVisible(true);
                 return;
             case FriendsEvent.TOGGLE_FRIEND_LIST:
-                setIsListVisible(value => !value);
+                setIsVisible(value => !value);
                 return;
             case FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST:
                 const requestEvent = (event as FriendsSendFriendRequestEvent);
+                requestFriend(requestEvent.userId, requestEvent.userName);
                 return;
             case FriendsEvent.REQUEST_FRIEND_LIST:
-                dispatchUiEvent(new FriendListContentEvent(friendsState.friends));
+                dispatchUiEvent(new FriendListContentEvent(friends));
                 return;
         }
-    }, [ friendsState.friends ]);
+    }, [ friends, requestFriend ]);
 
     useUiEvent(FriendsEvent.SHOW_FRIEND_LIST, onFriendsEvent);
     useUiEvent(FriendsEvent.TOGGLE_FRIEND_LIST, onFriendsEvent);
@@ -70,33 +285,70 @@ export const FriendsView: FC<{}> = props =>
 
         if(!userData || (userData.type !== RoomObjectUserType.getTypeNumber(RoomObjectUserType.USER))) return;
 
-        const friend = friendsState.friends.find(friend =>
-            {
-                return (friend.id === userData.webID);
-            });
+        const friend = getFriend(userData.webID);
 
         if(!friend) return;
 
         dispatchUiEvent(new FriendEnteredRoomEvent(userData.roomIndex, RoomObjectCategory.UNIT, userData.webID, userData.name, userData.type));
-    }, [ friendsState.friends ]);
+    }, [ getFriend ]);
 
     useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
 
     const onlineFriends = useMemo(() =>
     {
-        return friends.filter(f => f.online);
+        const onlineFriends = friends.filter(friend => friend.online);
+
+        onlineFriends.sort((a, b) =>
+        {
+            if( a.name < b.name ) return -1;
+
+            if( a.name > b.name ) return 1;
+
+            return 0;
+        });
+
+        return onlineFriends;
     }, [ friends ]);
 
     const offlineFriends = useMemo(() =>
     {
-        return friends.filter(f => !f.online);
+        const offlineFriends = friends.filter(friend => !friend.online);
+
+        offlineFriends.sort((a, b) =>
+        {
+            if( a.name < b.name ) return -1;
+
+            if( a.name > b.name ) return 1;
+
+            return 0;
+        });
+
+        return offlineFriends;
     }, [ friends ]);
 
+    useEffect(() =>
+    {
+        SendMessageHook(new MessengerInitComposer());
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!settings) return;
+
+        setIsReady(true);
+    }, [ settings ]);
+
+    useEffect(() =>
+    {
+        dispatchUiEvent(new FriendsRequestCountEvent(requests.length));
+    }, [ requests ]);
+
     return (
-        <FriendsContextProvider value={ { friendsState, dispatchFriendsState } }>
-            <FriendsMessageHandler />
-            { isReady && createPortal(<FriendBarView onlineFriends={ onlineFriends } />, document.getElementById('toolbar-friend-bar-container')) }
-            { isListVisible && <FriendsListView onlineFriends={ onlineFriends } offlineFriends={ offlineFriends } friendRequests={ requests } onCloseClick={ () => setIsListVisible(false) } /> }
+        <FriendsContextProvider value={ { friends, requests, settings, acceptFriend, declineFriend } }>
+            { isReady &&
+                createPortal(<FriendBarView onlineFriends={ onlineFriends } />, document.getElementById('toolbar-friend-bar-container')) }
+            { isVisible &&
+                <FriendsListView onlineFriends={ onlineFriends } offlineFriends={ offlineFriends } friendRequests={ requests } onCloseClick={ () => setIsVisible(false) } /> }
             <FriendsMessengerView />
         </FriendsContextProvider>
     );

src/views/friends/common/FriendsHelper.ts

@@ -0,0 +1,14 @@
+import { MessengerFriend } from './MessengerFriend';
+
+export class FriendsHelper
+{
+    public static getFriend(userId: number): MessengerFriend
+    {
+        return null;
+    }
+
+    public static canRequestFriend(userId: number): boolean
+    {
+        return false;
+    }
+}

src/views/friends/context/FriendsContext.tsx

@@ -2,8 +2,11 @@ import { createContext, FC, useContext } from 'react';
 import { FriendsContextProps, IFriendsContext } from './FriendsContext.type';
 
 const FriendsContext = createContext<IFriendsContext>({
-    friendsState: null,
-    dispatchFriendsState: null
+    friends: null,
+    requests: null,
+    settings: null,
+    acceptFriend: null,
+    declineFriend: null
 });
 
 export const FriendsContextProvider: FC<FriendsContextProps> = props =>

src/views/friends/context/FriendsContext.type.ts

@@ -1,10 +1,15 @@
-import { Dispatch, ProviderProps } from 'react';
-import { IFriendsAction, IFriendsState } from '../reducers/FriendsReducer';
+import { ProviderProps } from 'react';
+import { MessengerFriend } from '../common/MessengerFriend';
+import { MessengerRequest } from '../common/MessengerRequest';
+import { MessengerSettings } from '../common/MessengerSettings';
 
 export interface IFriendsContext
 {
-    friendsState: IFriendsState;
-    dispatchFriendsState: Dispatch<IFriendsAction>;
+    friends: MessengerFriend[];
+    requests: MessengerRequest[];
+    settings: MessengerSettings;
+    acceptFriend: (userId: number) => void;
+    declineFriend: (userId: number, declineAll?: boolean) => void;
 }
 
 export interface FriendsContextProps extends ProviderProps<IFriendsContext>

src/views/friends/reducers/FriendsReducer.tsx

@@ -1,147 +0,0 @@
-import { FriendListUpdateParser, FriendParser, FriendRequestData } from '@nitrots/nitro-renderer';
-import { Reducer } from 'react';
-import { MessengerFriend } from '../common/MessengerFriend';
-import { MessengerRequest } from '../common/MessengerRequest';
-import { MessengerSettings } from '../common/MessengerSettings';
-
-function compareName(a, b)
-{
-    if( a.name < b.name ) return -1;
-    if( a.name > b.name ) return 1;
-    return 0;
-}
-
-export interface IFriendsState
-{
-    settings: MessengerSettings;
-    friends: MessengerFriend[];
-    requests: MessengerRequest[];
-}
-
-export interface IFriendsAction
-{
-    type: string;
-    payload: {
-        settings?: MessengerSettings;
-        fragment?: FriendParser[];
-        update?: FriendListUpdateParser;
-        requests?: FriendRequestData[];
-        numberValue?: number;
-        boolValue?: boolean;
-    }
-}
-
-export class FriendsActions
-{
-    public static RESET_STATE: string = 'FA_RESET_STATE';
-    public static UPDATE_SETTINGS: string = 'FA_UPDATE_SETTINGS';
-    public static PROCESS_FRAGMENT: string = 'FA_PROCESS_FRAGMENT';
-    public static PROCESS_UPDATE: string = 'FA_PROCESS_UPDATE';
-    public static PROCESS_REQUESTS: string = 'FA_PROCESS_REQUESTS';
-}
-
-export const initialFriends: IFriendsState = {
-    settings: null,
-    friends: [],
-    requests: []
-}
-
-export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, action) =>
-{
-    switch(action.type)
-    {
-        case FriendsActions.UPDATE_SETTINGS: {
-            const settings = (action.payload.settings || state.settings || null);
-
-            return { ...state, settings };
-        }
-        case FriendsActions.PROCESS_FRAGMENT: {
-            const fragment = (action.payload.fragment || null);
-            let friends = [ ...state.friends ];
-
-            for(const friend of fragment)
-            {
-                const index = friends.findIndex(existingFriend => (existingFriend.id === friend.id));
-                const newFriend = new MessengerFriend();
-
-                newFriend.id = friend.id;
-                newFriend.name = friend.name;
-                newFriend.gender = friend.gender;
-                newFriend.online = friend.online;
-                newFriend.followingAllowed = friend.followingAllowed;
-                newFriend.figure = friend.figure;
-                newFriend.categoryId = friend.categoryId;
-                newFriend.motto = friend.motto;
-                newFriend.realName = friend.realName;
-                newFriend.lastAccess = friend.lastAccess;
-                newFriend.persistedMessageUser = friend.persistedMessageUser;
-                newFriend.vipMember = friend.vipMember;
-                newFriend.pocketHabboUser = friend.pocketHabboUser;
-                newFriend.relationshipStatus = friend.relationshipStatus;
-
-                if(index > -1) friends[index] = newFriend;
-                else friends.push(newFriend);
-            }
-
-            friends.sort(compareName);
-
-            return { ...state, friends };
-        }
-        case FriendsActions.PROCESS_UPDATE: {
-            const update = (action.payload.update || null);
-            let friends = [ ...state.friends ];
-
-            if(update)
-            {
-                const processUpdate = (friend: FriendParser) =>
-                {
-                    const index = friends.findIndex(existingFriend => (existingFriend.id === friend.id));
-
-                    if(index === -1)
-                    {
-                        const newFriend = new MessengerFriend();
-                        newFriend.populate(friend);
-
-                        friends.unshift(newFriend);
-                    }
-                    else
-                    {
-                        friends[index].populate(friend);
-                    }
-                }
-
-                for(const friend of update.addedFriends) processUpdate(friend);
-
-                for(const friend of update.updatedFriends) processUpdate(friend);
-
-                for(const removedFriendId of update.removedFriendIds)
-                {
-                    const index = friends.findIndex(existingFriend => (existingFriend.id === removedFriendId));
-
-                    if(index > -1) friends.splice(index);
-                }
-            }
-            
-            friends.sort(compareName);
-
-            return { ...state, friends };
-        }
-        case FriendsActions.PROCESS_REQUESTS: {
-            const newRequests = (action.payload.requests || null);
-            let requests = [ ...state.requests ];
-
-            for(const request of newRequests)
-            {
-                const newRequest = new MessengerRequest();
-                newRequest.populate(request);
-                requests.push(newRequest);
-            }
-
-            requests.sort(compareName);
-
-            return { ...state, requests };
-        }
-        default:
-            return state;
-    }
-}

src/views/friends/views/friend-bar-item/FriendBarItemView.tsx

@@ -1,6 +1,6 @@
-import { FollowFriendMessageComposer, MouseEventType, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FollowFriendMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { LocalizeText, OpenMessengerChat } from '../../../../api';
+import { GetUserProfile, LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { FriendBarItemViewProps } from './FriendBarItemView.types';
@@ -23,11 +23,6 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
         OpenMessengerChat(friend.id);
     }, [ friend ]);
 
-    const openProfile = useCallback(() =>
-    {
-        SendMessageHook(new UserProfileComposer(friend.id));
-    }, [ friend ]);
-
     const onClick = useCallback((event: MouseEvent) =>
     {
         const element = elementRef.current;
@@ -68,7 +63,7 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
                 <div className="d-flex justify-content-between">
                     <i onClick={ openMessengerChat } className="icon icon-fb-chat cursor-pointer" />
                     { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-fb-visit cursor-pointer" /> }
-                    <i onClick={ openProfile } className="icon icon-fb-profile cursor-pointer" />
+                    <i onClick={ event => GetUserProfile(friend.id) } className="icon icon-fb-profile cursor-pointer" />
                 </div> }
         </div>
     );

src/views/friends/views/friends-group/FriendsGroupView.tsx

@@ -1,25 +1,19 @@
 import React, { FC } from 'react';
-import { MessengerFriend } from '../../common/MessengerFriend';
-import { MessengerRequest } from '../../common/MessengerRequest';
 import { FriendsGroupItemView } from '../friends-group-item/FriendsGroupItemView';
-import { FriendsRequestItemView } from '../friends-request-item/FriendsRequestItemView';
 import { FriendsGroupViewProps } from './FriendsGroupView.types';
 
 export const FriendsGroupView: FC<FriendsGroupViewProps> = props =>
 {
-    const { list =  null } = props;
+    const { list = null } = props;
 
     if(!list) return null;
 
-    return (<>
-        { list.map((item, index) =>
-        {
-            if(item instanceof MessengerFriend)
-                return <FriendsGroupItemView key={ index } friend={ item } />
-            else if(item instanceof MessengerRequest)
-                return  <FriendsRequestItemView key={ index } request={ item } />
-            else
-                return null;
-        }) }
-    </>);
+    return (
+        <>
+            { list.map((item, index) =>
+                {
+                    return <FriendsGroupItemView key={ index } friend={ item } />;
+                }) }
+        </>
+    );
 }

src/views/friends/views/friends-group/FriendsGroupView.types.ts

@@ -1,7 +1,6 @@
 import { MessengerFriend } from '../../common/MessengerFriend';
-import { MessengerRequest } from '../../common/MessengerRequest';
 
 export interface FriendsGroupViewProps
 {
-    list: MessengerFriend[] | MessengerRequest[];
+    list: MessengerFriend[];
 }

src/views/friends/views/friends-list/FriendsListView.tsx

@@ -1,43 +1,47 @@
 import { FC, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import { FriendsGroupView } from '../friends-group/FriendsGroupView';
+import { FriendsRequestView } from '../friends-request/FriendsRequestView';
 import { FriendsListViewProps } from './FriendsListView.types';
 
-const TABS: string[] = ['friendlist.friends', 'generic.search'];
+const MODE_FRIENDS: number = 0;
+const MODE_SEARCH: number = 1;
 
 export const FriendsListView: FC<FriendsListViewProps> = props =>
 {
-    const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props;
     
-    const [ currentTab, setCurrentTab ] = useState<number>(0);
+    const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props;
+    const [ mode, setMode ] = useState<number>(0);
 
     return (
         <NitroCardView className="nitro-friends">
-                <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ onCloseClick } />
-                <NitroCardContentView className="p-0">
-                    <NitroCardTabsView>
-                        { TABS.map((tab, index) =>
-                            {
-                                return (<NitroCardTabsItemView key={ index } isActive={ currentTab === index } onClick={ () => setCurrentTab(index) }>
-                                    { LocalizeText(tab) }
-                                </NitroCardTabsItemView>);
-                            }) }
-                    </NitroCardTabsView>
-                    <div className="text-black">
-                        { currentTab === 0 && <NitroCardAccordionView>
-                            <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
-                                <FriendsGroupView list={ onlineFriends } />
-                            </NitroCardAccordionItemView>
-                            <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
-                                <FriendsGroupView list={ offlineFriends } />
-                            </NitroCardAccordionItemView>
-                            { friendRequests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${friendRequests.length})` }>
-                                <FriendsGroupView list={ friendRequests } />
-                            </NitroCardAccordionItemView> }
-                        </NitroCardAccordionView> }
-                    </div>
-                </NitroCardContentView>
-            </NitroCardView>
+            <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ onCloseClick } />
+            <NitroCardTabsView>
+                <NitroCardTabsItemView isActive={ (mode === MODE_FRIENDS) } count={ friendRequests.length } onClick={ event => setMode(MODE_FRIENDS) }>
+                    { LocalizeText('friendlist.friends') }
+                </NitroCardTabsItemView>
+                <NitroCardTabsItemView isActive={ (mode === MODE_SEARCH) } onClick={ event => setMode(MODE_SEARCH) }>
+                    { LocalizeText('generic.search') }
+                </NitroCardTabsItemView>
+            </NitroCardTabsView>
+            <NitroCardContentView className="p-0 text-black">
+                { (mode === MODE_FRIENDS) &&
+                    <NitroCardAccordionView>
+                        <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } isExpanded={ true }>
+                            <FriendsGroupView list={ onlineFriends } />
+                        </NitroCardAccordionSetView>
+                        <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
+                            <FriendsGroupView list={ offlineFriends } />
+                        </NitroCardAccordionSetView>
+
+
+                        <FriendsRequestView requests={ friendRequests } />
+                    </NitroCardAccordionView> }
+                { (mode === MODE_SEARCH) &&
+                    <>
+                    </> }
+            </NitroCardContentView>
+        </NitroCardView>
     );
 };

src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx

@@ -1,37 +1,24 @@
-import { AcceptFriendMessageComposer, DeclineFriendMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
-import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { FC } from 'react';
+import { NitroCardAccordionItemView } from '../../../../layout';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
+import { useFriendsContext } from '../../context/FriendsContext';
 import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
 
 export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
 {
     const { request = null } = props;
-
-    const accept = useCallback(() =>
-    {
-        if(!request) return;
-        
-        SendMessageHook(new AcceptFriendMessageComposer(request.id));
-    }, [ request ]);
-
-    const decline = useCallback(() =>
-    {
-        if(!request) return;
-        
-        SendMessageHook(new DeclineFriendMessageComposer(false, request.id));
-    }, [ request ]);
+    const { acceptFriend = null, declineFriend = null } = useFriendsContext();
 
     if(!request) return null;
 
     return (
-        <div className="px-2 py-1 d-flex gap-1 align-items-center">
+        <NitroCardAccordionItemView>
             <UserProfileIconView userId={ request.id } />
             <div>{ request.name }</div>
             <div className="ms-auto d-flex align-items-center gap-1">
-               <i className="icon icon-accept cursor-pointer" onClick={ accept } />
-               <i className="icon icon-deny cursor-pointer" onClick={ decline } />
+               <i className="icon icon-accept cursor-pointer" onClick={ event => acceptFriend(request.requesterUserId) } />
+               <i className="icon icon-deny cursor-pointer" onClick={ event => declineFriend(request.requesterUserId) } />
             </div>
-        </div>
+        </NitroCardAccordionItemView>
     );
 };

src/views/friends/views/friends-request/FriendsRequestView.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../api';
+import { NitroCardAccordionSetView, NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
+import { useFriendsContext } from '../../context/FriendsContext';
+import { FriendsRequestItemView } from '../friends-request-item/FriendsRequestItemView';
+import { FriendsRequestViewProps } from './FriendsRequestView.types';
+
+export const FriendsRequestView: FC<FriendsRequestViewProps> = props =>
+{
+    const { requests = [] } = props;
+    const { declineFriend = null } = useFriendsContext();
+
+    if(!requests.length) return null;
+
+    return (
+        <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${ requests.length })` } isExpanded={ true }>
+            { requests.map(request =>
+                {
+                    return <FriendsRequestItemView key={ request.requesterUserId } request={ request } />
+                }) }
+            <NitroLayoutFlex className="justify-content-center p-1">
+                <NitroLayoutButton size="sm" onClick={ event => declineFriend(-1, true) }>
+                    { LocalizeText('friendlist.requests.dismissall') }
+                </NitroLayoutButton>
+            </NitroLayoutFlex>
+        </NitroCardAccordionSetView>
+    );
+}

src/views/friends/views/friends-request/FriendsRequestView.types.ts

@@ -0,0 +1,6 @@
+import { MessengerRequest } from '../../common/MessengerRequest';
+
+export interface FriendsRequestViewProps
+{
+    requests: MessengerRequest[];
+}

src/views/friends/views/messenger/FriendsMessengerView.tsx

@@ -1,6 +1,6 @@
-import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { AddEventLinkTracker, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
 import { FriendsMessengerIconEvent } from '../../../../events';
 import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
@@ -17,10 +17,9 @@ export const FriendsMessengerView: FC<{}> = props =>
     const [ activeThreadIndex, setActiveThreadIndex ] = useState(-1);
     const [ hiddenThreadIndexes, setHiddenThreadIndexes ] = useState<number[]>([]);
     const [ messageText, setMessageText ] = useState('');
-    const { friendsState = null } = useFriendsContext();
-    const { friends = [] } = friendsState;
     const messagesBox = useRef<HTMLDivElement>();
     const [ updateValue, setUpdateValue ] = useState({});
+    const { friends = [] } = useFriendsContext();
 
     const followFriend = useCallback(() =>
     {
@@ -29,7 +28,7 @@ export const FriendsMessengerView: FC<{}> = props =>
 
     const openProfile = useCallback(() =>
     {
-        SendMessageHook(new UserProfileComposer(messageThreads[activeThreadIndex].participant.id));
+        GetUserProfile(messageThreads[activeThreadIndex].participant.id);
     }, [ messageThreads, activeThreadIndex ]);
 
     const getFriend = useCallback((userId: number) =>