Update friend bar

src/views/Styles.scss

@@ -13,5 +13,4 @@
 @import './right-side/RightSideView';
 @import './room/RoomView';
 @import './room-host/RoomHostView';
-@import './room-previewer/RoomPreviewerView';
 @import './toolbar/ToolbarView';

src/views/friend-list/FriendListMessageHandler.tsx

@@ -1,4 +1,4 @@
-import { FriendListFragmentEvent, GetFriendRequestsComposer, MessengerInitEvent } from 'nitro-renderer';
+import { FriendListFragmentEvent, FriendListUpdateEvent, GetFriendRequestsComposer, MessengerInitEvent } from 'nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
 import { MessengerSettings } from './common/MessengerSettings';
@@ -40,8 +40,21 @@ export const FriendListMessageHandler: FC<FriendListMessageHandlerProps> = props
         });
     }, [ dispatchFriendListState ]);
 
+    const onFriendListUpdateEvent = useCallback((event: FriendListUpdateEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFriendListState({
+            type: FriendListActions.PROCESS_UPDATE,
+            payload: {
+                update: parser
+            }
+        });
+    }, [ dispatchFriendListState ]);
+
     CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
     CreateMessageHook(FriendListFragmentEvent, onFriendListFragmentEvent);
+    CreateMessageHook(FriendListUpdateEvent, onFriendListUpdateEvent);
 
     return null;
 }

src/views/friend-list/FriendListView.scss

@@ -1,3 +1,6 @@
 .nitro-friend-list {
     width: 250px;
 }
+
+@import './views//friend-bar/FriendBarView';
+@import './views/friend-bar-item/FriendBarItemView';

src/views/friend-list/reducers/FriendListReducer.tsx

@@ -1,4 +1,4 @@
-import { FriendParser } from 'nitro-renderer';
+import { FriendListUpdateParser, FriendParser } from 'nitro-renderer';
 import { Reducer } from 'react';
 import { MessengerFriend } from '../common/MessengerFriend';
 import { MessengerSettings } from '../common/MessengerSettings';
@@ -14,7 +14,8 @@ export interface IFriendListAction
     type: string;
     payload: {
         settings?: MessengerSettings;
-        fragment?: FriendParser[]
+        fragment?: FriendParser[];
+        update?: FriendListUpdateParser;
     }
 }
 
@@ -23,6 +24,7 @@ export class FriendListActions
     public static RESET_STATE: string = 'FLA_RESET_STATE';
     public static UPDATE_SETTINGS: string = 'FLA_UPDATE_SETTINGS';
     public static PROCESS_FRAGMENT: string = 'FLA_PROCESS_FRAGMENT';
+    public static PROCESS_UPDATE: string = 'FLA_PROCESS_UPDATE';
 }
 
 export const initialFriendList: IFriendListState = {
@@ -69,6 +71,50 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
 
             return { ...state, friends };
         }
+        case FriendListActions.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));
+                    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.unshift(newFriend);
+                }
+
+                for(const friend of update.addedFriends) processUpdate(friend);
+
+                for(const friend of update.addedFriends) processUpdate(friend);
+
+                for(const removedFriendId of update.removedFriendIds)
+                {
+                    const index = friends.findIndex(existingFriend => (existingFriend.id === removedFriendId));
+
+                    if(index > -1) friends.splice(index);
+                }
+            }
+
+            return { ...state, friends };
+        }
         default:
             return state;
     }

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { FriendBarItemViewProps } from './FriendBarItemView.types';
+
+export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
+{
+    const { friend = null } = props;
+
+    return (
+        <div>{ friend.name }</div>
+    );
+}

src/views/friend-list/views/friend-bar-item/FriendBarItemView.types.ts

@@ -0,0 +1,6 @@
+import { MessengerFriend } from '../../common/MessengerFriend';
+
+export interface FriendBarItemViewProps
+{
+    friend: MessengerFriend;
+}

src/views/friend-list/views/friend-bar/FriendBarView.tsx

@@ -1,9 +1,19 @@
 import { FC } from 'react';
+import { useFriendListContext } from '../../context/FriendListContext';
+import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
 
 export const FriendBarView: FC<FriendBarViewProps> = props =>
 {
+    const { friendListState = null } = useFriendListContext();
+    const { friends = null } = friendListState;
+
     return (
-        <div>friend bar</div>
+        <div>
+            { friends.map((friend, index) =>
+                {
+                    return <FriendBarItemView key={ index } friend={ friend } />
+                })}
+        </div>
     );
 }

src/views/notification-center/NotificationCenterView.scss

@@ -5,9 +5,11 @@
     width: 300px;
     height: calc(100% - #{$toolbar-height});
     z-index: $notification-center-zindex;
+    pointer-events: none;
 
     .nitro-notification-center {
         background-color: $dark;
         height: 100%;
+        pointer-events: all;
     }
 }

src/views/shared/Shared.scss

@@ -4,3 +4,4 @@
 @import './furni-image/FurniImageView';
 @import './limited-edition/LimitedEdition';
 @import './pet-image/PetImage';
+@import './room-previewer/RoomPreviewerView';