From 8efeed99c51e8e125f81b42314b5da3fc3c890ec Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 03:41:29 -0500 Subject: [PATCH 1/6] Update layout --- src/layout/card/NitroCardView.scss | 47 ++++---- .../accordion/NitroCardAccordionView.scss | 2 +- .../card/accordion/NitroCardAccordionView.tsx | 2 +- src/layout/card/accordion/index.ts | 1 + .../item/NitroCardAccordionItemView.scss | 9 -- .../item/NitroCardAccordionItemView.tsx | 28 +---- .../item/NitroCardAccordionItemView.types.ts | 10 +- .../set/NitroCardAccordionSetView.scss | 9 ++ .../set/NitroCardAccordionSetView.tsx | 43 +++++++ .../set/NitroCardAccordionSetView.types.ts | 7 ++ src/layout/card/accordion/set/index.ts | 2 + .../card/content/NitroCardContentView.tsx | 2 +- .../card/grid/item/NitroCardGridItemView.scss | 6 - .../card/grid/item/NitroCardGridItemView.tsx | 3 +- .../card/header/NitroCardHeaderView.scss | 112 +++++++++--------- .../card/header/NitroCardHeaderView.tsx | 16 +-- src/layout/card/tabs/NitroCardTabsView.scss | 2 - src/layout/card/tabs/NitroCardTabsView.tsx | 4 +- .../tabs/tabs-item/NitroCardTabsItemView.scss | 13 -- .../tabs/tabs-item/NitroCardTabsItemView.tsx | 11 +- 20 files changed, 175 insertions(+), 154 deletions(-) delete mode 100644 src/layout/card/accordion/item/NitroCardAccordionItemView.scss create mode 100644 src/layout/card/accordion/set/NitroCardAccordionSetView.scss create mode 100644 src/layout/card/accordion/set/NitroCardAccordionSetView.tsx create mode 100644 src/layout/card/accordion/set/NitroCardAccordionSetView.types.ts create mode 100644 src/layout/card/accordion/set/index.ts delete mode 100644 src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss index 2ba6ec2e..0c7ba873 100644 --- a/src/layout/card/NitroCardView.scss +++ b/src/layout/card/NitroCardView.scss @@ -5,15 +5,26 @@ $nitro-card-tabs-height: 33px; pointer-events: all; resize: both; - &.theme-dark { - padding: 2px; - background-color: #1C323F; - border: 2px solid rgba(255, 255, 255, 0.5); - border-radius: 0.25rem; - } - &.theme-primary { border: $border-width solid $border-color; + + .nitro-card-header-container { + background-color: $primary; + + .nitro-card-header { + .header-text { + color: $white; + } + } + } + + .nitro-card-tabs { + background-color: $secondary; + } + + .content-area { + background-color: $light; + } } } @@ -27,7 +38,6 @@ $nitro-card-tabs-height: 33px; overflow: hidden; @include media-breakpoint-down(lg) { - .draggable-window { top: 0 !important; left: 0 !important; @@ -36,20 +46,15 @@ $nitro-card-tabs-height: 33px; //transform: none !important; overflow: hidden; } - + .nitro-card { max-width: 75%; max-height: calc(100% - 20px); margin: 10px auto 10px; - - // &.rounded { - // border-radius: 0 !important; - // } } } @include media-breakpoint-down(sm) { - .draggable-window { top: 0 !important; left: 0 !important; @@ -58,13 +63,13 @@ $nitro-card-tabs-height: 33px; //transform: none !important; overflow: hidden; } - + .nitro-card { width: 100%; max-width: 100%; max-height: calc(100% - #{$toolbar-height}); margin: 0; - + &.rounded { border-radius: 0 !important; } @@ -72,8 +77,8 @@ $nitro-card-tabs-height: 33px; } } -@import './accordion/NitroCardAccordionView'; -@import './content/NitroCardContentView'; -@import './grid/NitroCardGridView'; -@import './header/NitroCardHeaderView'; -@import './tabs/NitroCardTabsView'; +@import "./accordion/NitroCardAccordionView"; +@import "./content/NitroCardContentView"; +@import "./grid/NitroCardGridView"; +@import "./header/NitroCardHeaderView"; +@import "./tabs/NitroCardTabsView"; diff --git a/src/layout/card/accordion/NitroCardAccordionView.scss b/src/layout/card/accordion/NitroCardAccordionView.scss index 6e9da785..417a6cc6 100644 --- a/src/layout/card/accordion/NitroCardAccordionView.scss +++ b/src/layout/card/accordion/NitroCardAccordionView.scss @@ -1 +1 @@ -@import './item/NitroCardAccordionItemView'; +@import "./set/NitroCardAccordionSetView"; diff --git a/src/layout/card/accordion/NitroCardAccordionView.tsx b/src/layout/card/accordion/NitroCardAccordionView.tsx index 798c54cb..40a68384 100644 --- a/src/layout/card/accordion/NitroCardAccordionView.tsx +++ b/src/layout/card/accordion/NitroCardAccordionView.tsx @@ -6,7 +6,7 @@ export const NitroCardAccordionView: FC = props => const { className = '' } = props; return ( -
+
{ props.children }
); diff --git a/src/layout/card/accordion/index.ts b/src/layout/card/accordion/index.ts index eaf0344c..830eabfb 100644 --- a/src/layout/card/accordion/index.ts +++ b/src/layout/card/accordion/index.ts @@ -1,3 +1,4 @@ export * from './item'; export * from './NitroCardAccordionView'; export * from './NitroCardAccordionView.types'; +export * from './set'; diff --git a/src/layout/card/accordion/item/NitroCardAccordionItemView.scss b/src/layout/card/accordion/item/NitroCardAccordionItemView.scss deleted file mode 100644 index 88355d00..00000000 --- a/src/layout/card/accordion/item/NitroCardAccordionItemView.scss +++ /dev/null @@ -1,9 +0,0 @@ -.nitro-card-accordion-item { - .nitro-card-accordion-item-header { - border-bottom: 1px solid rgba($black, 0.2); - } - - .nitro-card-accordion-item-content { - background: rgba($white, 0.5); - } -} diff --git a/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx b/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx index e1cb135d..d680bc09 100644 --- a/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx +++ b/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx @@ -1,30 +1,14 @@ -import { FC, useEffect, useState } from 'react'; +import { FC } from 'react'; +import { NitroLayoutBase } from '../../../base'; import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types'; export const NitroCardAccordionItemView: FC = props => { - const { className = '', headerClassName = '', contentClassName = '', headerText = '', defaultState = false } = props; - - const [ isExpanded, setIsExpanded ] = useState(false); - - useEffect(() => - { - setIsExpanded(defaultState); - }, [ defaultState ]); + const { children = null, ...rest } = props; return ( -
-
setIsExpanded((value) => !value) }> -
- { headerText } -
-
- -
-
-
- { props.children } -
-
+ + { children } + ); } diff --git a/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts b/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts index 771ef503..bfd94cc6 100644 --- a/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts +++ b/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts @@ -1,8 +1,6 @@ -export interface NitroCardAccordionItemViewProps +import { NitroLayoutBaseProps } from '../../../base'; + +export interface NitroCardAccordionItemViewProps extends NitroLayoutBaseProps { - className?: string; - headerClassName?: string; - contentClassName?: string; - headerText: string; - defaultState?: boolean; + } diff --git a/src/layout/card/accordion/set/NitroCardAccordionSetView.scss b/src/layout/card/accordion/set/NitroCardAccordionSetView.scss new file mode 100644 index 00000000..24324967 --- /dev/null +++ b/src/layout/card/accordion/set/NitroCardAccordionSetView.scss @@ -0,0 +1,9 @@ +.nitro-card-accordion-set { + .nitro-card-accordion-set-header { + border-bottom: 1px solid rgba($black, 0.2); + } + + .nitro-card-accordion-set-content { + background: rgba($white, 0.5); + } +} diff --git a/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx b/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx new file mode 100644 index 00000000..dcc513ea --- /dev/null +++ b/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx @@ -0,0 +1,43 @@ +import classNames from 'classnames'; +import { FC, useEffect, useMemo, useState } from 'react'; +import { NitroLayoutFlex } from '../../..'; +import { NitroLayoutBase } from '../../../base'; +import { NitroCardAccordionSetViewProps } from './NitroCardAccordionSetView.types'; + +export const NitroCardAccordionSetView: FC = props => +{ + const { headerText = '', isExpanded = false, className = '', children = null, ...rest } = props; + const [ isOpen, setIsOpen ] = useState(false); + + const getClassName = useMemo(() => + { + let newClassName = 'nitro-card-accordion-set'; + + if(isOpen) newClassName += ' active'; + + if(className && className.length) newClassName += ` ${ className }`; + + return newClassName; + }, [ className, isOpen ]); + + useEffect(() => + { + setIsOpen(isExpanded); + }, [ isExpanded ]); + + return ( + + setIsOpen(!isOpen) }> +
+ { headerText } +
+
+ +
+ + + { children } + + + ); +} diff --git a/src/layout/card/accordion/set/NitroCardAccordionSetView.types.ts b/src/layout/card/accordion/set/NitroCardAccordionSetView.types.ts new file mode 100644 index 00000000..27c5bbb5 --- /dev/null +++ b/src/layout/card/accordion/set/NitroCardAccordionSetView.types.ts @@ -0,0 +1,7 @@ +import { NitroLayoutBaseProps } from '../../../base'; + +export interface NitroCardAccordionSetViewProps extends NitroLayoutBaseProps +{ + headerText: string; + isExpanded?: boolean; +} diff --git a/src/layout/card/accordion/set/index.ts b/src/layout/card/accordion/set/index.ts new file mode 100644 index 00000000..8492fd82 --- /dev/null +++ b/src/layout/card/accordion/set/index.ts @@ -0,0 +1,2 @@ +export * from './NitroCardAccordionSetView'; +export * from './NitroCardAccordionSetView.types'; diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx index 4553d7dc..f7f478db 100644 --- a/src/layout/card/content/NitroCardContentView.tsx +++ b/src/layout/card/content/NitroCardContentView.tsx @@ -8,7 +8,7 @@ export const NitroCardContentView: FC = props => const { simple = false } = useNitroCardContext(); return ( -
+
{ children }
); diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss index ab6ad600..af7966ce 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.scss +++ b/src/layout/card/grid/item/NitroCardGridItemView.scss @@ -22,12 +22,6 @@ background-color: rgba($success, 0.4); } - .badge { - top: 2px; - right: 2px; - font-size: 8px; - } - .avatar-image { background-position-y: 10px; } diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx index 6c1e4886..e6edcf93 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.tsx +++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx @@ -1,4 +1,5 @@ import { FC, useMemo } from 'react'; +import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView'; import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView'; import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types'; @@ -39,7 +40,7 @@ export const NitroCardGridItemView: FC = props => return (
{ (itemCount > itemCountMinimum) && - { itemCount } } + } { (itemUniqueNumber > 0) &&
diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss index 86b81a48..ded3c2bd 100644 --- a/src/layout/card/header/NitroCardHeaderView.scss +++ b/src/layout/card/header/NitroCardHeaderView.scss @@ -1,64 +1,66 @@ -.nitro-card-header { - min-height: 33px; - max-height: 33px; - white-space: nowrap; +.nitro-card-header-container { + .nitro-card-header { + min-height: 33px; + max-height: 33px; + white-space: nowrap; - .header-text { - margin: 0 35px; - } + .header-text { + margin: 0; + } - &.simple-header { - min-height: 28px; + &.simple-header { + min-height: 28px; + + .header-close { + font-size: 12px; + } + } + + &.theme-dark { + background-color: #3d5f6e !important; + color: #fff; + } + + .bg-tertiary-split { + position: relative; + border-bottom: 2px solid darken($quaternary, 5); + box-shadow: 0 2px white; + width: 100%; + margin: 0; + + &:before { + position: absolute; + content: " "; + top: 0; + left: 0; + width: 100%; + height: 2px; + background-color: rgba($white, 0.3); + } + } .header-close { - font-size: 12px; - } - } + right: 6px; + border-radius: $border-radius; + box-shadow: 0 0 0 1.5px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); + cursor: pointer; + line-height: 1; + padding: 1px 3px; - &.theme-dark { - background-color: #3d5f6e !important; - color: #fff; - } + &:hover { + filter: brightness(1.2); + } - .bg-tertiary-split { - position: relative; - border-bottom: 2px solid darken($quaternary, 5); - box-shadow: 0 2px white; - width: 100%; - margin: 0; - - &:before { - position: absolute; - content: " "; - top: 0; - left: 0; - width: 100%; - height: 2px; - background-color: rgba($white, 0.3); - } - } - - .header-close { - right: 6px; - border-radius: $border-radius; - box-shadow: 0 0 0 1.5px $white; - border: 2px solid #921911; - background: repeating-linear-gradient( - rgba(245, 80, 65, 1), - rgba(245, 80, 65, 1) 50%, - rgba(194, 48, 39, 1) 50%, - rgba(194, 48, 39, 1) 100% - ); - cursor: pointer; - line-height: 1; - padding: 1px 3px; - - &:hover { - filter: brightness(1.2); - } - - &:active { - filter: brightness(0.8); + &:active { + filter: brightness(0.8); + } } } } diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx index c87585f1..293f163a 100644 --- a/src/layout/card/header/NitroCardHeaderView.tsx +++ b/src/layout/card/header/NitroCardHeaderView.tsx @@ -4,7 +4,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types'; export const NitroCardHeaderView: FC = props => { - const { headerText = null, onCloseClick = null, theme= 'primary' } = props; + const { headerText = null, onCloseClick = null, theme = 'primary' } = props; const { simple = false } = useNitroCardContext(); const onMouseDown = useCallback((event: MouseEvent) => @@ -16,10 +16,10 @@ export const NitroCardHeaderView: FC = props => if(simple) { return ( -
-
-
-
{ headerText }
+
+
+
+
{ headerText }
@@ -30,10 +30,10 @@ export const NitroCardHeaderView: FC = props => } return ( -
-
+
+
-
{ headerText }
+
{ headerText }
diff --git a/src/layout/card/tabs/NitroCardTabsView.scss b/src/layout/card/tabs/NitroCardTabsView.scss index 60874fa6..f12bfa8e 100644 --- a/src/layout/card/tabs/NitroCardTabsView.scss +++ b/src/layout/card/tabs/NitroCardTabsView.scss @@ -2,6 +2,4 @@ min-height: $nitro-card-tabs-height; max-height: $nitro-card-tabs-height; border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; - - @import './tabs-item/NitroCardTabsItemView'; } diff --git a/src/layout/card/tabs/NitroCardTabsView.tsx b/src/layout/card/tabs/NitroCardTabsView.tsx index eb69565b..cddf6164 100644 --- a/src/layout/card/tabs/NitroCardTabsView.tsx +++ b/src/layout/card/tabs/NitroCardTabsView.tsx @@ -4,8 +4,8 @@ import { NitroCardTabsViewProps } from './NitroCardTabsView.types'; export const NitroCardTabsView: FC = props => { return ( -
-
    +
    +
      { props.children }
    diff --git a/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss b/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss deleted file mode 100644 index bbd3c283..00000000 --- a/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss +++ /dev/null @@ -1,13 +0,0 @@ -.nav-item { - - &:last-child() { - margin-right: 0 !important; - } - - .count { - color: $white; - font-size: 10px; - line-height: 10px; - padding: 2px 3px; - } -} diff --git a/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx b/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx index d907ad36..f0ef9bc4 100644 --- a/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx +++ b/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx @@ -1,5 +1,6 @@ import classNames from 'classnames'; import { FC } from 'react'; +import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView'; import { NitroCardTabsItemViewProps } from './NitroCardTabsItemView.types'; export const NitroCardTabsItemView: FC = props => @@ -7,12 +8,10 @@ export const NitroCardTabsItemView: FC = props => const { children = null, isActive = false, count = 0, onClick = null } = props; return ( -
  • - - { children } - { (count > 0) && - { count } } - +
  • + { children } + { (count > 0) && + }
    • ); } From 8694273c50420fe54ff4aaf5739c7bc5c86a671c Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 03:46:34 -0500 Subject: [PATCH 2/6] Update friends --- .../RoomWidgetUpdateFriendRequestEvent.ts | 35 ++ src/api/nitro/room/widgets/events/index.ts | 2 + .../widgets/handlers/FriendRequestHandler.ts | 65 ++++ .../handlers/FurnitureTrophyWidgetHandler.ts | 61 ++++ .../handlers/RoomWidgetInfostandHandler.ts | 20 +- src/api/nitro/room/widgets/handlers/index.ts | 3 + .../RoomWidgetFriendRequestMessage.ts | 21 ++ src/api/nitro/room/widgets/messages/index.ts | 1 + src/events/friends/FriendListContentEvent.ts | 4 +- src/events/friends/FriendRequestEvent.ts | 21 ++ .../FriendsAcceptFriendRequestEvent.ts | 20 ++ .../FriendsDeclineFriendRequestEvent.ts | 20 ++ .../friends/FriendsRequestCountEvent.ts | 20 ++ .../friends/FriendsSendFriendRequestEvent.ts | 13 +- src/events/friends/index.ts | 4 + src/views/friends/FriendsMessageHandler.tsx | 72 ---- src/views/friends/FriendsView.scss | 7 +- src/views/friends/FriendsView.tsx | 314 ++++++++++++++++-- src/views/friends/common/FriendsHelper.ts | 14 + src/views/friends/context/FriendsContext.tsx | 7 +- .../friends/context/FriendsContext.type.ts | 13 +- src/views/friends/reducers/FriendsReducer.tsx | 147 -------- .../friend-bar-item/FriendBarItemView.tsx | 11 +- .../views/friends-group/FriendsGroupView.tsx | 24 +- .../friends-group/FriendsGroupView.types.ts | 3 +- .../views/friends-list/FriendsListView.tsx | 62 ++-- .../FriendsRequestItemView.tsx | 29 +- .../friends-request/FriendsRequestView.tsx | 28 ++ .../FriendsRequestView.types.ts | 6 + .../views/messenger/FriendsMessengerView.tsx | 9 +- 30 files changed, 704 insertions(+), 352 deletions(-) create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetUpdateFriendRequestEvent.ts create mode 100644 src/api/nitro/room/widgets/handlers/FriendRequestHandler.ts create mode 100644 src/api/nitro/room/widgets/handlers/FurnitureTrophyWidgetHandler.ts create mode 100644 src/api/nitro/room/widgets/messages/RoomWidgetFriendRequestMessage.ts create mode 100644 src/events/friends/FriendRequestEvent.ts create mode 100644 src/events/friends/FriendsAcceptFriendRequestEvent.ts create mode 100644 src/events/friends/FriendsDeclineFriendRequestEvent.ts create mode 100644 src/events/friends/FriendsRequestCountEvent.ts delete mode 100644 src/views/friends/FriendsMessageHandler.tsx create mode 100644 src/views/friends/common/FriendsHelper.ts delete mode 100644 src/views/friends/reducers/FriendsReducer.tsx create mode 100644 src/views/friends/views/friends-request/FriendsRequestView.tsx create mode 100644 src/views/friends/views/friends-request/FriendsRequestView.types.ts diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdateFriendRequestEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateFriendRequestEvent.ts new file mode 100644 index 00000000..b60ac2d4 --- /dev/null +++ b/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; + } +} diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts index f4415bb9..6f7406a0 100644 --- a/src/api/nitro/room/widgets/events/index.ts +++ b/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'; diff --git a/src/api/nitro/room/widgets/handlers/FriendRequestHandler.ts b/src/api/nitro/room/widgets/handlers/FriendRequestHandler.ts new file mode 100644 index 00000000..123b31db --- /dev/null +++ b/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 + ]; + } +} diff --git a/src/api/nitro/room/widgets/handlers/FurnitureTrophyWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureTrophyWidgetHandler.ts new file mode 100644 index 00000000..9b345109 --- /dev/null +++ b/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(RoomObjectVariable.FURNITURE_COLOR); + const extra = parseInt(roomObject.model.getValue(RoomObjectVariable.FURNITURE_EXTRAS)); + + let data = roomObject.model.getValue(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 + ]; + } +} diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts index be1d8608..206af214 100644 --- a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts +++ b/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) { diff --git a/src/api/nitro/room/widgets/handlers/index.ts b/src/api/nitro/room/widgets/handlers/index.ts index 51f10e1a..463caaaa 100644 --- a/src/api/nitro/room/widgets/handlers/index.ts +++ b/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'; diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetFriendRequestMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetFriendRequestMessage.ts new file mode 100644 index 00000000..898a042d --- /dev/null +++ b/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; + } +} diff --git a/src/api/nitro/room/widgets/messages/index.ts b/src/api/nitro/room/widgets/messages/index.ts index 287a3aa6..c3d1bd48 100644 --- a/src/api/nitro/room/widgets/messages/index.ts +++ b/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'; diff --git a/src/events/friends/FriendListContentEvent.ts b/src/events/friends/FriendListContentEvent.ts index 80048267..5666c4f0 100644 --- a/src/events/friends/FriendListContentEvent.ts +++ b/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'; diff --git a/src/events/friends/FriendRequestEvent.ts b/src/events/friends/FriendRequestEvent.ts new file mode 100644 index 00000000..33c78132 --- /dev/null +++ b/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; + } +} diff --git a/src/events/friends/FriendsAcceptFriendRequestEvent.ts b/src/events/friends/FriendsAcceptFriendRequestEvent.ts new file mode 100644 index 00000000..565cd5f0 --- /dev/null +++ b/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; + } +} diff --git a/src/events/friends/FriendsDeclineFriendRequestEvent.ts b/src/events/friends/FriendsDeclineFriendRequestEvent.ts new file mode 100644 index 00000000..3fa71ac6 --- /dev/null +++ b/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; + } +} diff --git a/src/events/friends/FriendsRequestCountEvent.ts b/src/events/friends/FriendsRequestCountEvent.ts new file mode 100644 index 00000000..884819e0 --- /dev/null +++ b/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; + } +} diff --git a/src/events/friends/FriendsSendFriendRequestEvent.ts b/src/events/friends/FriendsSendFriendRequestEvent.ts index 9e42661b..177ce5b7 100644 --- a/src/events/friends/FriendsSendFriendRequestEvent.ts +++ b/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; + } } diff --git a/src/events/friends/index.ts b/src/events/friends/index.ts index 2f3699c3..21f764ef 100644 --- a/src/events/friends/index.ts +++ b/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'; diff --git a/src/views/friends/FriendsMessageHandler.tsx b/src/views/friends/FriendsMessageHandler.tsx deleted file mode 100644 index ce84725e..00000000 --- a/src/views/friends/FriendsMessageHandler.tsx +++ /dev/null @@ -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; -} diff --git a/src/views/friends/FriendsView.scss b/src/views/friends/FriendsView.scss index 3d55929f..35888832 100644 --- a/src/views/friends/FriendsView.scss +++ b/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"; diff --git a/src/views/friends/FriendsView.tsx b/src/views/friends/FriendsView.tsx index 0c9415f7..fedb706f 100644 --- a/src/views/friends/FriendsView.tsx +++ b/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([]); + const [ requests, setRequests ] = useState([]); + const [ settings, setSettings ] = useState(null); + const [ sentRequests, setSentRequests ] = useState([]); - 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 ( - - - { isReady && createPortal(, document.getElementById('toolbar-friend-bar-container')) } - { isListVisible && setIsListVisible(false) } /> } + + { isReady && + createPortal(, document.getElementById('toolbar-friend-bar-container')) } + { isVisible && + setIsVisible(false) } /> } ); diff --git a/src/views/friends/common/FriendsHelper.ts b/src/views/friends/common/FriendsHelper.ts new file mode 100644 index 00000000..2e80f50c --- /dev/null +++ b/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; + } +} diff --git a/src/views/friends/context/FriendsContext.tsx b/src/views/friends/context/FriendsContext.tsx index 5b551102..a93a2f43 100644 --- a/src/views/friends/context/FriendsContext.tsx +++ b/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({ - friendsState: null, - dispatchFriendsState: null + friends: null, + requests: null, + settings: null, + acceptFriend: null, + declineFriend: null }); export const FriendsContextProvider: FC = props => diff --git a/src/views/friends/context/FriendsContext.type.ts b/src/views/friends/context/FriendsContext.type.ts index a61ef776..2eaf79a9 100644 --- a/src/views/friends/context/FriendsContext.type.ts +++ b/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; + friends: MessengerFriend[]; + requests: MessengerRequest[]; + settings: MessengerSettings; + acceptFriend: (userId: number) => void; + declineFriend: (userId: number, declineAll?: boolean) => void; } export interface FriendsContextProps extends ProviderProps diff --git a/src/views/friends/reducers/FriendsReducer.tsx b/src/views/friends/reducers/FriendsReducer.tsx deleted file mode 100644 index 1901bb49..00000000 --- a/src/views/friends/reducers/FriendsReducer.tsx +++ /dev/null @@ -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 = (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; - } -} diff --git a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx index 40873386..c077ab43 100644 --- a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx +++ b/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 = 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 = props =>
    { friend.followingAllowed && } - + GetUserProfile(friend.id) } className="icon icon-fb-profile cursor-pointer" />
    }
); diff --git a/src/views/friends/views/friends-group/FriendsGroupView.tsx b/src/views/friends/views/friends-group/FriendsGroupView.tsx index c5eb989b..55b82fca 100644 --- a/src/views/friends/views/friends-group/FriendsGroupView.tsx +++ b/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 = props => { - const { list = null } = props; + const { list = null } = props; if(!list) return null; - return (<> - { list.map((item, index) => - { - if(item instanceof MessengerFriend) - return - else if(item instanceof MessengerRequest) - return - else - return null; - }) } - ); + return ( + <> + { list.map((item, index) => + { + return ; + }) } + + ); } diff --git a/src/views/friends/views/friends-group/FriendsGroupView.types.ts b/src/views/friends/views/friends-group/FriendsGroupView.types.ts index 48bc5ee6..5ce24421 100644 --- a/src/views/friends/views/friends-group/FriendsGroupView.types.ts +++ b/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[]; } diff --git a/src/views/friends/views/friends-list/FriendsListView.tsx b/src/views/friends/views/friends-list/FriendsListView.tsx index fd796044..f706d334 100644 --- a/src/views/friends/views/friends-list/FriendsListView.tsx +++ b/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 = props => { - const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props; - const [ currentTab, setCurrentTab ] = useState(0); + const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props; + const [ mode, setMode ] = useState(0); return ( - - - - { TABS.map((tab, index) => - { - return ( setCurrentTab(index) }> - { LocalizeText(tab) } - ); - }) } - -
- { currentTab === 0 && - - - - - - - { friendRequests.length > 0 && - - } - } -
- - + + + setMode(MODE_FRIENDS) }> + { LocalizeText('friendlist.friends') } + + setMode(MODE_SEARCH) }> + { LocalizeText('generic.search') } + + + + { (mode === MODE_FRIENDS) && + + + + + + + + + + + } + { (mode === MODE_SEARCH) && + <> + } + + ); }; diff --git a/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx b/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx index f25c42f9..e0929968 100644 --- a/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx +++ b/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 = 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 ( -
+
{ request.name }
- - + acceptFriend(request.requesterUserId) } /> + declineFriend(request.requesterUserId) } />
-
+ ); }; diff --git a/src/views/friends/views/friends-request/FriendsRequestView.tsx b/src/views/friends/views/friends-request/FriendsRequestView.tsx new file mode 100644 index 00000000..d2ac8bc7 --- /dev/null +++ b/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 = props => +{ + const { requests = [] } = props; + const { declineFriend = null } = useFriendsContext(); + + if(!requests.length) return null; + + return ( + + { requests.map(request => + { + return + }) } + + declineFriend(-1, true) }> + { LocalizeText('friendlist.requests.dismissall') } + + + + ); +} diff --git a/src/views/friends/views/friends-request/FriendsRequestView.types.ts b/src/views/friends/views/friends-request/FriendsRequestView.types.ts new file mode 100644 index 00000000..adf39c13 --- /dev/null +++ b/src/views/friends/views/friends-request/FriendsRequestView.types.ts @@ -0,0 +1,6 @@ +import { MessengerRequest } from '../../common/MessengerRequest'; + +export interface FriendsRequestViewProps +{ + requests: MessengerRequest[]; +} diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx index dac6a7a5..517280f6 100644 --- a/src/views/friends/views/messenger/FriendsMessengerView.tsx +++ b/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([]); const [ messageText, setMessageText ] = useState(''); - const { friendsState = null } = useFriendsContext(); - const { friends = [] } = friendsState; const messagesBox = useRef(); 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) => From 93146541db82b203d719bf6de74b0539e69e4815 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 03:46:55 -0500 Subject: [PATCH 3/6] Update toolbar --- src/views/toolbar/ToolbarView.scss | 43 +++++++++++----------- src/views/toolbar/ToolbarView.tsx | 49 ++++++++++++++------------ src/views/toolbar/me/ToolbarMeView.tsx | 3 +- 3 files changed, 49 insertions(+), 46 deletions(-) diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss index 779b8160..6e807297 100644 --- a/src/views/toolbar/ToolbarView.scss +++ b/src/views/toolbar/ToolbarView.scss @@ -5,19 +5,20 @@ width: 100%; height: $toolbar-height; z-index: $toolbar-zindex; - + .nitro-toolbar { height: 100%; pointer-events: all; - background: rgba($dark,.95); - box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); + background: rgba($dark, 0.95); + box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5), + inset 0 -4px darken(rgba($dark, 0.6), 4); #toolbar-chat-input-container { margin: 0 10px; @include media-breakpoint-down(sm) { - width: 0px; - height: 0px + width: 0px; + height: 0px; } } @@ -26,7 +27,7 @@ align-items: center; &.navigation-avatar { - border-right: 1px solid rgba(0, 0, 0, .3); + border-right: 1px solid rgba(0, 0, 0, 0.3); } .navigation-item { @@ -41,7 +42,7 @@ width: 50px; height: 45px; overflow: hidden; - + .avatar-image { margin-left: -5px; margin-top: 25px; @@ -53,7 +54,8 @@ position: relative; //transition: transform .2s ease-out; - &:hover, &.active { + &:hover, + &.active { -webkit-transform: translate(-1px, -1px); transform: translate(-1px, -1px); filter: drop-shadow(2px 2px 0 rgba($black, 0.8)); @@ -67,12 +69,6 @@ .chat-input-container { left: 60px; } - - .count { - top: 0rem; - right: 2px; - font-size: 10px; - } } } @@ -82,28 +78,27 @@ position: absolute; font-size: 12px; z-index: $toolbar-memenu-zindex; - + .list-group { - .list-group-item { min-width: 70px; - transition: all .3s; + transition: all 0.3s; font-size: 10px; text-align: center; - + i { filter: grayscale(1); } - + &:hover { color: $cyan; text-decoration: underline; - + i { filter: grayscale(0); } } - + .count { top: 0px; right: 5px; @@ -123,7 +118,9 @@ max-width: 120px; max-height: 150px; z-index: 500; - filter: drop-shadow(2px 1px 0 rgba($white, 1)) drop-shadow(-2px 1px 0 rgba($white, 1)) drop-shadow(0 -2px 0 rgba($white, 1)); + filter: drop-shadow(2px 1px 0 rgba($white, 1)) + drop-shadow(-2px 1px 0 rgba($white, 1)) + drop-shadow(0 -2px 0 rgba($white, 1)); } -@import './me/ToolbarMeView'; +@import "./me/ToolbarMeView"; diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx index 1e9fbab2..30ad7f8d 100644 --- a/src/views/toolbar/ToolbarView.tsx +++ b/src/views/toolbar/ToolbarView.tsx @@ -1,16 +1,17 @@ -import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, UserProfileComposer, Wait } from '@nitrots/nitro-renderer'; +import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer'; import { FC, useCallback, useState } from 'react'; -import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api'; -import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events'; +import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api'; +import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events'; import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements'; import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent'; import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent'; import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; import { dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks'; -import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event'; +import { CreateMessageHook } from '../../hooks/messages/message-event'; import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation'; import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types'; import { AvatarImageView } from '../shared/avatar-image/AvatarImageView'; +import { ItemCountView } from '../shared/item-count/ItemCountView'; import { ToolbarMeView } from './me/ToolbarMeView'; import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types'; @@ -28,9 +29,8 @@ export const ToolbarView: FC = props => const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN); const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0); const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0); - + const [ unseenFriendRequestCount, setFriendRequestCount ] = useState(0); const isMod = GetSessionDataManager().isModerator; - const unseenFriendListCount = 0; const onUserInfoEvent = useCallback((event: UserInfoEvent) => { @@ -72,27 +72,34 @@ export const ToolbarView: FC = props => useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent); + const onFriendsRequestCountEvent = useCallback((event: FriendsRequestCountEvent) => + { + setFriendRequestCount(event.count); + }, []); + + useUiEvent(FriendsRequestCountEvent.UPDATE_COUNT, onFriendsRequestCountEvent); + const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) => { const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement); if(!target) return; - image.className = 'toolbar-icon-animation'; - image.style.visibility = 'visible'; - image.style.left = (x + 'px'); - image.style.top = (y + 'px'); + image.className = 'toolbar-icon-animation'; + image.style.visibility = 'visible'; + image.style.left = (x + 'px'); + image.style.top = (y + 'px'); document.body.append(image); const targetBounds = target.getBoundingClientRect(); const imageBounds = image.getBoundingClientRect(); - const left = (imageBounds.x - targetBounds.x); - const top = (imageBounds.y - targetBounds.y); + const left = (imageBounds.x - targetBounds.x); + const top = (imageBounds.y - targetBounds.y); const squared = Math.sqrt(((left * left) + (top * top))); - const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5))); - const height = 20; + const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5))); + const height = 20; const motionName = (`ToolbarBouncing[${ iconName }]`); @@ -144,7 +151,7 @@ export const ToolbarView: FC = props => setMeExpanded(false); return; case ToolbarViewItems.PROFILE_ITEM: - SendMessageHook(new UserProfileComposer(GetSessionDataManager().userId)); + GetUserProfile(GetSessionDataManager().userId); setMeExpanded(false); return; case ToolbarViewItems.SETTINGS_ITEM: @@ -176,7 +183,7 @@ export const ToolbarView: FC = props =>
setMeExpanded(!isMeExpanded) }> { (unseenAchievementCount > 0) && -
{ unseenAchievementCount }
} + }
{ isInRoom && (
@@ -194,8 +201,8 @@ export const ToolbarView: FC = props =>
handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }> - { (unseenInventoryCount > 0) && ( -
{ unseenInventoryCount }
) } + { (unseenInventoryCount > 0) && + }
{ isInRoom && (
handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }> @@ -212,15 +219,13 @@ export const ToolbarView: FC = props =>
handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }> - { (unseenFriendListCount > 0) && ( -
{ unseenFriendListCount }
) } + { (unseenFriendRequestCount > 0) && + }
{ ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }> { (chatIconType === CHAT_ICON_SHOWING) && } { (chatIconType === CHAT_ICON_UNREAD) && } - { (unseenFriendListCount > 0) && -
{ unseenFriendListCount }
}
}
diff --git a/src/views/toolbar/me/ToolbarMeView.tsx b/src/views/toolbar/me/ToolbarMeView.tsx index 510e68ef..8a707870 100644 --- a/src/views/toolbar/me/ToolbarMeView.tsx +++ b/src/views/toolbar/me/ToolbarMeView.tsx @@ -1,6 +1,7 @@ import { RoomObjectCategory } from '@nitrots/nitro-renderer'; import { FC, useEffect } from 'react'; import { GetRoomEngine, GetRoomSession } from '../../../api'; +import { ItemCountView } from '../../shared/item-count/ItemCountView'; import { ToolbarViewItems } from '../ToolbarView.types'; import { ToolbarMeViewProps } from './ToolbarMeView.types'; @@ -29,7 +30,7 @@ export const ToolbarMeView: FC = props =>
handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }> { (unseenAchievementCount > 0) && -
{ unseenAchievementCount }
} + }
handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }> From e7dfb381ff2635c2964a5d1922cd1354da7e28b2 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 03:47:06 -0500 Subject: [PATCH 4/6] Add ItemCountView --- src/views/shared/item-count/ItemCountView.scss | 6 ++++++ src/views/shared/item-count/ItemCountView.tsx | 9 +++++++++ src/views/shared/item-count/ItemCountView.types.ts | 4 ++++ 3 files changed, 19 insertions(+) create mode 100644 src/views/shared/item-count/ItemCountView.scss create mode 100644 src/views/shared/item-count/ItemCountView.tsx create mode 100644 src/views/shared/item-count/ItemCountView.types.ts diff --git a/src/views/shared/item-count/ItemCountView.scss b/src/views/shared/item-count/ItemCountView.scss new file mode 100644 index 00000000..9db41f2b --- /dev/null +++ b/src/views/shared/item-count/ItemCountView.scss @@ -0,0 +1,6 @@ +.nitro-item-count { + top: 2px; + right: 2px; + font-size: 8px; + z-index: 1; +} diff --git a/src/views/shared/item-count/ItemCountView.tsx b/src/views/shared/item-count/ItemCountView.tsx new file mode 100644 index 00000000..5287b708 --- /dev/null +++ b/src/views/shared/item-count/ItemCountView.tsx @@ -0,0 +1,9 @@ +import { FC } from 'react'; +import { ItemCountViewProps } from './ItemCountView.types'; + +export const ItemCountView: FC = props => +{ + const { count = 0 } = props; + + return
{ count }
+} diff --git a/src/views/shared/item-count/ItemCountView.types.ts b/src/views/shared/item-count/ItemCountView.types.ts new file mode 100644 index 00000000..9435b1a7 --- /dev/null +++ b/src/views/shared/item-count/ItemCountView.types.ts @@ -0,0 +1,4 @@ +export interface ItemCountViewProps +{ + count: number; +} From 7aafbfba4cbfe5f6420a9d4d97946d59ce5e53ba Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 03:48:41 -0500 Subject: [PATCH 5/6] Random updates --- src/App.scss | 14 ++++++++++---- .../views/navigation/CatalogNavigationView.tsx | 4 ++-- src/views/room/RoomView.tsx | 3 ++- src/views/room/widgets/RoomWidgets.types.ts | 2 -- src/views/room/widgets/RoomWidgetsView.tsx | 4 ++-- .../avatar-info/AvatarInfoWidgetView.tsx | 2 +- .../views/avatar/AvatarInfoWidgetAvatarView.tsx | 12 +++--------- .../AvatarInfoWidgetOwnAvatarView.tsx | 13 ++++--------- src/views/shared/Shared.scss | 17 +++++++++-------- src/views/user-profile/UserProfileView.tsx | 9 ++++++--- .../RelationshipsContainerView.tsx | 12 ++++++------ 11 files changed, 45 insertions(+), 47 deletions(-) delete mode 100644 src/views/room/widgets/RoomWidgets.types.ts diff --git a/src/App.scss b/src/App.scss index 3ab4f7fd..047843ef 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,9 +10,9 @@ $infostand-zindex: 30; $chat-zindex: 20; $highscore-zindex: 19; -$grid-bg-color: #CDD3D9; +$grid-bg-color: #cdd3d9; $grid-border-color: $muted; -$grid-active-bg-color: #ECECEC; +$grid-active-bg-color: #ececec; $grid-active-border-color: $white; $toolbar-height: 55px; @@ -44,10 +44,16 @@ $nitro-widget-custom-stack-height-height: 220px; $nitro-widget-exchange-credit-width: 375px; $nitro-widget-exchange-credit-height: 150px; +$chat-history-width: 300px; +$chat-history-height: 300px; + +$friends-list-width: 250px; +$friends-list-height: 300px; + .nitro-app { width: 100%; height: 100%; } -@import './layout/Layout'; -@import './views/Styles'; +@import "./layout/Layout"; +@import "./views/Styles"; diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.tsx b/src/views/catalog/views/navigation/CatalogNavigationView.tsx index b7bf41ed..4ee356ec 100644 --- a/src/views/catalog/views/navigation/CatalogNavigationView.tsx +++ b/src/views/catalog/views/navigation/CatalogNavigationView.tsx @@ -24,9 +24,9 @@ export const CatalogNavigationView: FC = props => }, [ page ]); return ( - + - + diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index b885b48c..a4125e9f 100644 --- a/src/views/room/RoomView.tsx +++ b/src/views/room/RoomView.tsx @@ -1,6 +1,6 @@ import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer'; import { FC, useEffect, useRef, useState } from 'react'; -import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api'; +import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FriendRequestHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api'; import { FurnitureYoutubeDisplayWidgetHandler } from '../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler'; import { RoomContextProvider } from './context/RoomContext'; import { RoomColorView } from './RoomColorView'; @@ -37,6 +37,7 @@ export const RoomView: FC = props => widgetHandlerManager.registerHandler(new RoomWidgetChatHandler()); widgetHandlerManager.registerHandler(new UserChooserWidgetHandler()); widgetHandlerManager.registerHandler(new DoorbellWidgetHandler()); + widgetHandlerManager.registerHandler(new FriendRequestHandler()); widgetHandlerManager.registerHandler(new FurniChooserWidgetHandler()); widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler()); diff --git a/src/views/room/widgets/RoomWidgets.types.ts b/src/views/room/widgets/RoomWidgets.types.ts deleted file mode 100644 index ea28fdd6..00000000 --- a/src/views/room/widgets/RoomWidgets.types.ts +++ /dev/null @@ -1,2 +0,0 @@ -export interface RoomWidgetViewProps -{} diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index 3fd67cdc..1b62c52e 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/src/views/room/widgets/RoomWidgetsView.tsx @@ -15,8 +15,8 @@ import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView'; import { InfoStandWidgetView } from './infostand/InfoStandWidgetView'; import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView'; import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView'; -import { RoomWidgetViewProps } from './RoomWidgets.types'; -export const RoomWidgetsView: FC = props => + +export const RoomWidgetsView: FC<{}> = props => { const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext(); diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx index 7014b2f7..41b20557 100644 --- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx +++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx @@ -16,7 +16,6 @@ import { AvatarInfoUseProductView } from './views/use-product/AvatarInfoUseProdu export const AvatarInfoWidgetView: FC<{}> = props => { - const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext(); const [ name, setName ] = useState(null); const [ nameBubbles, setNameBubbles ] = useState([]); const [ productBubbles, setProductBubbles ] = useState([]); @@ -26,6 +25,7 @@ export const AvatarInfoWidgetView: FC<{}> = props => const [ isDancing, setIsDancing ] = useState(false); const [ isDecorating, setIsDecorating ] = useState(false); const [ rentableBotChatEvent, setRentableBotChatEvent ] = useState(null); + const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext(); const removeNameBubble = useCallback((index: number) => { diff --git a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx b/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx index 8e88af87..b926a175 100644 --- a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx +++ b/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx @@ -1,7 +1,6 @@ -import { RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, UserProfileComposer } from '@nitrots/nitro-renderer'; +import { RoomControllerLevel, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useMemo, useState } from 'react'; -import { GetOwnRoomObject, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api'; -import { SendMessageHook } from '../../../../../../hooks'; +import { GetOwnRoomObject, GetUserProfile, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api'; import { useRoomContext } from '../../../../context/RoomContext'; import { ContextMenuView } from '../../../context-menu/ContextMenuView'; import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView'; @@ -192,14 +191,9 @@ export const AvatarInfoWidgetAvatarView: FC = p return flag; }, []); - const openProfile = useCallback(() => - { - SendMessageHook(new UserProfileComposer(userData.webID)); - }, [ userData ]); - return ( - openProfile() }> + GetUserProfile(userData.webID) }> { userData.name } { (mode === MODE_NORMAL) && diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx index e20da225..8d1d9c46 100644 --- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx +++ b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx @@ -1,8 +1,8 @@ -import { AvatarAction, AvatarExpressionEnum, RoomControllerLevel, RoomObjectCategory, UserProfileComposer } from '@nitrots/nitro-renderer'; +import { AvatarAction, AvatarExpressionEnum, RoomControllerLevel, RoomObjectCategory } from '@nitrots/nitro-renderer'; import { FC, useCallback, useMemo, useState } from 'react'; -import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUserActionMessage } from '../../../../../../api'; +import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUserActionMessage } from '../../../../../../api'; import { AvatarEditorEvent } from '../../../../../../events'; -import { dispatchUiEvent, SendMessageHook } from '../../../../../../hooks'; +import { dispatchUiEvent } from '../../../../../../hooks'; import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon'; import { useRoomContext } from '../../../../context/RoomContext'; import { ContextMenuView } from '../../../context-menu/ContextMenuView'; @@ -103,11 +103,6 @@ export const AvatarInfoWidgetOwnAvatarView: FC - { - SendMessageHook(new UserProfileComposer(userData.webID)); - }, [ userData ]); - const isShowDecorate = useMemo(() => { return (userData.amIOwner || userData.amIAnyRoomController || (userData.roomControllerLevel > RoomControllerLevel.GUEST)); @@ -117,7 +112,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC - openProfile() }> + GetUserProfile(userData.webID) }> { userData.name } { (mode === MODE_NORMAL) && diff --git a/src/views/shared/Shared.scss b/src/views/shared/Shared.scss index 3fcc657f..542564b8 100644 --- a/src/views/shared/Shared.scss +++ b/src/views/shared/Shared.scss @@ -1,8 +1,9 @@ -@import './avatar-image/AvatarImage'; -@import './badge-image/BadgeImage'; -@import './currency-icon/CurrencyIcon'; -@import './furni-image/FurniImageView'; -@import './limited-edition/LimitedEdition'; -@import './pet-image/PetImage'; -@import './rarity-level/RarityLevelView'; -@import './room-previewer/RoomPreviewerView'; +@import "./avatar-image/AvatarImage"; +@import "./badge-image/BadgeImage"; +@import "./currency-icon/CurrencyIcon"; +@import "./furni-image/FurniImageView"; +@import "./limited-edition/LimitedEdition"; +@import "./pet-image/PetImage"; +@import "./rarity-level/RarityLevelView"; +@import "./room-previewer/RoomPreviewerView"; +@import "./item-count/ItemCountView"; diff --git a/src/views/user-profile/UserProfileView.tsx b/src/views/user-profile/UserProfileView.tsx index 14a579f0..33cfb22e 100644 --- a/src/views/user-profile/UserProfileView.tsx +++ b/src/views/user-profile/UserProfileView.tsx @@ -1,6 +1,6 @@ -import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileComposer, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; +import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useState } from 'react'; -import { GetSessionDataManager, LocalizeText } from '../../api'; +import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../api'; import { CreateMessageHook, SendMessageHook } from '../../hooks'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout'; import { BadgesContainerView } from './views/badges-container/BadgesContainerView'; @@ -23,7 +23,10 @@ export const UserProfileView: FC = props => const onLeaveGroup = useCallback(() => { - if(userProfile && userProfile.id === GetSessionDataManager().userId) SendMessageHook(new UserProfileComposer(userProfile.id)); + if(userProfile && userProfile.id === GetSessionDataManager().userId) + { + GetUserProfile(userProfile.id); + } }, [ userProfile ]); const OnUserCurrentBadgesEvent = useCallback((event: UserCurrentBadgesEvent) => diff --git a/src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx index 51fe425d..e1bb648c 100644 --- a/src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx +++ b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx @@ -1,7 +1,6 @@ -import { RelationshipStatusEnum, RelationshipStatusInfo, UserProfileComposer } from '@nitrots/nitro-renderer'; +import { RelationshipStatusEnum, RelationshipStatusInfo } from '@nitrots/nitro-renderer'; import { FC, useCallback } from 'react'; -import { LocalizeText } from '../../../../api'; -import { SendMessageHook } from '../../../../hooks'; +import { GetUserProfile, LocalizeText } from '../../../../api'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { RelationshipsContainerViewProps } from './RelationshipsContainerView.types'; @@ -11,8 +10,9 @@ export const RelationshipsContainerView: FC = p const OnUserClick = useCallback((user: RelationshipStatusInfo) => { - if(user) - SendMessageHook(new UserProfileComposer(user.randomFriendId)); + if(!user) return; + + GetUserProfile(user.randomFriendId); }, []); const RelationshipComponent = useCallback(({ type }) => @@ -28,7 +28,7 @@ export const RelationshipsContainerView: FC = p
- OnUserClick(relationshipInfo)}> + OnUserClick(relationshipInfo)}> { (relationshipInfo && relationshipInfo.friendCount > 0) ? relationshipInfo.randomFriendName : LocalizeText('extendedprofile.add.friends') } From f489bacd31d25d8eba5a61757b757a2718a6d732 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 05:03:29 -0500 Subject: [PATCH 6/6] More friend updates --- .../friend-bar-item/FriendBarItemView.tsx | 2 ++ .../views/messenger/FriendsMessengerView.tsx | 19 +++++++++++-------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx index c077ab43..36079517 100644 --- a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx +++ b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx @@ -27,6 +27,8 @@ export const FriendBarItemView: FC = props => { const element = elementRef.current; + if(!element) return; + if((event.target !== element) && !element.contains((event.target as Node))) { setVisible(false); diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx index 517280f6..115d7d55 100644 --- a/src/views/friends/views/messenger/FriendsMessengerView.tsx +++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx @@ -3,7 +3,7 @@ import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } import { AddEventLinkTracker, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api'; import { FriendsMessengerIconEvent } from '../../../../events'; import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex } from '../../../../layout'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { MessengerThread } from '../../common/MessengerThread'; import { MessengerThreadChat } from '../../common/MessengerThreadChat'; @@ -17,9 +17,9 @@ export const FriendsMessengerView: FC<{}> = props => const [ activeThreadIndex, setActiveThreadIndex ] = useState(-1); const [ hiddenThreadIndexes, setHiddenThreadIndexes ] = useState([]); const [ messageText, setMessageText ] = useState(''); - const messagesBox = useRef(); const [ updateValue, setUpdateValue ] = useState({}); const { friends = [] } = useFriendsContext(); + const messagesBox = useRef(); const followFriend = useCallback(() => { @@ -235,7 +235,7 @@ export const FriendsMessengerView: FC<{}> = props => setIsVisible(false) } /> -
+ { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) => { const messageThreadIndex = messageThreads.indexOf(thread); @@ -247,13 +247,16 @@ export const FriendsMessengerView: FC<{}> = props =>
); }) } -
-
+ + + { (activeThreadIndex >= 0) && +
+ { LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } +
} +
+ { (activeThreadIndex >= 0) && <> -
- { LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } -