Updates

src/api/friends/OpenMessengerChat.ts

@@ -0,0 +1,7 @@
+import { CreateLinkEvent } from '..';
+
+export function OpenMessengerChat(friendId: number): void
+{
+    console.log(`friends/messenger/${friendId}`);
+    CreateLinkEvent(`friends/messenger/${friendId}`);
+}

src/api/friends/index.ts

@@ -0,0 +1 @@
+export * from './OpenMessengerChat';

src/api/index.ts

@@ -1,4 +1,5 @@
 export * from './core';
+export * from './friends';
 export * from './groups';
 export * from './navigator';
 export * from './nitro';

src/views/friends/FriendsView.tsx

@@ -21,7 +21,6 @@ export const FriendsView: FC<{}> = props =>
 
     const [ isReady, setIsReady ] = useState(false);
     const [ isListVisible, setIsListVisible ] = useState(false);
-    const [ isMessengerVisible, setIsMessengerVisible ] = useState(false);
 
     useEffect(() =>
     {
@@ -45,12 +44,6 @@ export const FriendsView: FC<{}> = props =>
             case FriendsEvent.TOGGLE_FRIEND_LIST:
                 setIsListVisible(value => !value);
                 return;
-            case FriendsEvent.SHOW_FRIEND_MESSENGER:
-                setIsMessengerVisible(true);
-                return;
-            case FriendsEvent.TOGGLE_FRIEND_MESSENGER:
-                setIsMessengerVisible(value => !value);
-                return;
             case FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST:
                 const requestEvent = (event as FriendsSendFriendRequestEvent);
                 return;
@@ -104,7 +97,7 @@ export const FriendsView: FC<{}> = props =>
             <FriendsMessageHandler />
             { isReady && createPortal(<FriendBarView />, document.getElementById('toolbar-friend-bar-container')) }
             { isListVisible && <FriendsListView onlineFriends={ onlineFriends } offlineFriends={ offlineFriends } friendRequests={ requests } onCloseClick={ () => setIsListVisible(false) } /> }
-            { isMessengerVisible && <FriendsMessengerView /> }
+            <FriendsMessengerView />
         </FriendsContextProvider>
     );
 }

src/views/friends/common/MessengerChat.ts

@@ -12,9 +12,9 @@ export class MessengerChat
         this._messages = [];
     }
 
-    public addMessage(): void
+    public addMessage(type: number, senderId: number, message: string, sentAt: number, extraData?: string): void
     {
-        this._messages.push();
+        this._messages.push(new MessengerChatMessage(type, senderId, message, sentAt, extraData));
     }
 
     public get friendId(): number

src/views/friends/common/MessengerChatMessage.ts

@@ -3,11 +3,40 @@ export class MessengerChatMessage
     private _type: number;
     private _senderId: number;
     private _message: string;
-    private _extraData: string;
     private _sentAt: number;
+    private _extraData: string;
 
-    constructor(type: number, senderId: number, message: string, extraData: string, sentAt: number)
+    constructor(type: number, senderId: number, message: string, sentAt: number, extraData?: string)
     {
+        this._type = type;
+        this._senderId = senderId;
+        this._message = message;
+        this._sentAt = sentAt;
+        this._extraData = extraData;
+    }
 
+    public get type(): number
+    {
+        return this._type;
+    }
+
+    public get senderId(): number
+    {
+        return this._senderId;
+    }
+
+    public get message(): string
+    {
+        return this._message;
+    }
+
+    public get sentAt(): number
+    {
+        return this._sentAt;
+    }
+
+    public get extraData(): string
+    {
+        return this._extraData;
     }
 }

src/views/friends/views/friend-item/FriendsListItemView.tsx

@@ -1,7 +1,7 @@
 import { SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
 import { FollowFriendMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/friendlist/FollowFriendMessageComposer';
 import { FC, useCallback, useState } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
 import { MessengerFriend } from '../../common/MessengerFriend';
@@ -20,6 +20,13 @@ export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
         SendMessageHook(new FollowFriendMessageComposer(friend.id));
     }, [ friend ]);
 
+    const openMessengerChat = useCallback(() =>
+    {
+        if(!friend) return;
+        
+        OpenMessengerChat(friend.id);
+    }, [ friend ]);
+
     const getCurrentRelationshipName = useCallback(() =>
     {
         if(!friend) return 'none';
@@ -48,8 +55,8 @@ export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
             <div>{ friend.name }</div>
             <div className="ms-auto d-flex align-items-center gap-1">
                 { !isExpanded && <>
-                    { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-friendlist-follow cursor-pointer" title={ LocalizeText('friendlist.tip.follow') } /> }
-                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" title={ LocalizeText('friendlist.tip.im') } /> }
+                    { friend.followingAllowed && <i className="icon icon-friendlist-follow cursor-pointer" onClick={ followFriend } title={ LocalizeText('friendlist.tip.follow') } /> }
+                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
                     <i className={ 'icon cursor-pointer icon-relationship-' + getCurrentRelationshipName() } onClick={ () => setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } />
                     </> }
                 { isExpanded && <>

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

@@ -1,9 +1,80 @@
-import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
+import { ILinkEventTracker, NitroEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { FriendsEvent } from '../../../../events/friends/FriendsEvent';
+import { useUiEvent } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { MessengerChat } from '../../common/MessengerChat';
+import { useFriendsContext } from '../../context/FriendsContext';
+import { FriendsActions } from '../../reducers/FriendsReducer';
 
 export const FriendsMessengerView: FC<{}> = props =>
 {
+    const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
+    const { activeChats = [] } = friendsState;
+
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ activeChatIndex, setActiveChatIndex ] = useState(0);
+    
+    const onNitroEvent = useCallback((event: NitroEvent) =>
+    {
+        switch(event.type)
+        {
+            case FriendsEvent.SHOW_FRIEND_MESSENGER:
+                setIsVisible(true);
+                return;
+            case FriendsEvent.TOGGLE_FRIEND_MESSENGER:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(FriendsEvent.SHOW_FRIEND_MESSENGER, onNitroEvent);
+    useUiEvent(FriendsEvent.TOGGLE_FRIEND_MESSENGER, onNitroEvent);
+
+    const linkReceived = useCallback((url: string) =>
+    {
+        const parts = url.split('/');
+        console.log(parts);
+        if(parts.length < 3) return;
+
+        const friendId = parseInt(parts[2]);
+        console.log(friendId);
+        let existingChatIndex = activeChats.findIndex(c => c.friendId === friendId);
+
+        if(existingChatIndex === -1)
+        {
+            const clonedActiveChats = Array.from(activeChats);
+            clonedActiveChats.push(new MessengerChat(friendId, true));
+
+            dispatchFriendsState({
+                type: FriendsActions.SET_ACTIVE_CHATS,
+                payload: {
+                    chats: clonedActiveChats
+                }
+            });
+
+            existingChatIndex = clonedActiveChats.length - 1;
+        }
+
+        setActiveChatIndex(existingChatIndex);
+        setIsVisible(true);
+    }, [ activeChats, dispatchFriendsState ]);
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived,
+            eventUrlPrefix: 'friends/messenger/'
+        };
+
+        AddEventLinkTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, [ linkReceived ]);
+
+    if(!isVisible) return null;
+
     return (<NitroCardView className="nitro-friends-messenger" simple={ true }>
                 <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ () => {} } />
                 <NitroCardContentView className="p-0">