From a8b0550550ee173db20241561b6cecef0c59ed53 Mon Sep 17 00:00:00 2001 From: dank074 Date: Fri, 25 Mar 2022 16:38:44 -0500 Subject: [PATCH] add onclick handler to widget buttons --- public/ui-config.json.example | 20 +++++++---- src/components/hotel-view/HotelView.tsx | 4 +-- .../views/widget-slot/WidgetSlotView.types.ts | 8 ----- .../views/widgets/GetWidgetLayout.tsx | 8 ++++- .../views/widgets/GetWidgetLayout.types.ts | 6 ---- .../WidgetSlotView.tsx | 12 +++++-- .../bonus-rare/BonusRareWidgetView.tsx | 4 ++- .../bonus-rare/BonusRareWidgetView.types.ts | 2 -- .../hall-of-fame-item/HallOfFameItemView.tsx | 8 ++++- .../HallOfFameItemView.types.ts | 7 ---- .../hall-of-fame/HallOfFameWidgetView.tsx | 5 +-- .../promo-article/PromoArticleWidgetView.tsx | 8 +++-- .../PromoArticleWidgetView.types.ts | 2 -- .../widget-container/WidgetContainerView.tsx | 34 ++++++------------- .../WidgetContainerView.types.ts | 4 --- 15 files changed, 59 insertions(+), 73 deletions(-) delete mode 100644 src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts delete mode 100644 src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts rename src/components/hotel-view/views/{widget-slot => widgets}/WidgetSlotView.tsx (60%) delete mode 100644 src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts delete mode 100644 src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts delete mode 100644 src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts delete mode 100644 src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts diff --git a/public/ui-config.json.example b/public/ui-config.json.example index 1078065c..e72f9731 100644 --- a/public/ui-config.json.example +++ b/public/ui-config.json.example @@ -20,19 +20,25 @@ "show.avatar": true, "widgets": { "slot.1.widget": "promoarticle", - "slot.1.conf": "", + "slot.1.conf": {}, "slot.2.widget": "widgetcontainer", - "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com", + "slot.2.conf": { + "image": "${image.library.url}web_promo_small/spromo_Canal_Bundle.png", + "texts": "2021NitroPromo", + "btnLink": "https://google.com" + }, "slot.3.widget": "promoarticle", - "slot.3.conf": "", + "slot.3.conf": {}, "slot.4.widget": "", - "slot.4.conf": "", + "slot.4.conf": {}, "slot.5.widget": "", - "slot.5.conf": "", + "slot.5.conf": {}, "slot.6.widget": "achievementcompetition_hall_of_fame", - "slot.6.conf": "", + "slot.6.conf": { + "campaign": "habboFameComp" + }, "slot.7.widget": "", - "slot.7.conf": "" + "slot.7.conf": {} }, "images": { "background": "${asset.url}/images/reception/stretch_blue.png", diff --git a/src/components/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx index dbcb1afa..e9f6835b 100644 --- a/src/components/hotel-view/HotelView.tsx +++ b/src/components/hotel-view/HotelView.tsx @@ -3,7 +3,7 @@ import { FC, useCallback, useState } from 'react'; import { GetConfiguration, GetConfigurationManager } from '../../api'; import { LayoutAvatarImageView } from '../../common'; import { BatchUpdates, UseMessageEventHook, UseRoomSessionManagerEvent } from '../../hooks'; -import { WidgetSlotView } from './views/widget-slot/WidgetSlotView'; +import { WidgetSlotView } from './views/widgets/WidgetSlotView'; export const HotelView: FC<{}> = props => { const [isVisible, setIsVisible] = useState(true); @@ -120,7 +120,7 @@ export const HotelView: FC<{}> = props =>
- {GetConfiguration("hotelview")["show.avatar"] && ( + {GetConfiguration('hotelview')['show.avatar'] && (
diff --git a/src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts b/src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts deleted file mode 100644 index e74dd1ec..00000000 --- a/src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { DetailsHTMLAttributes } from 'react'; - -export interface WidgetSlotViewProps extends DetailsHTMLAttributes -{ - widgetType: string; - widgetSlot: number; - widgetConf: string; -} diff --git a/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx b/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx index e4a73d81..ebd814b6 100644 --- a/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx +++ b/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx @@ -1,10 +1,16 @@ import { FC } from 'react'; import { BonusRareWidgetView } from './bonus-rare/BonusRareWidgetView'; -import { GetWidgetLayoutProps } from './GetWidgetLayout.types'; import { HallOfFameWidgetView } from './hall-of-fame/HallOfFameWidgetView'; import { PromoArticleWidgetView } from './promo-article/PromoArticleWidgetView'; import { WidgetContainerView } from './widget-container/WidgetContainerView'; +export interface GetWidgetLayoutProps +{ + widgetType: string; + slot: number; + widgetConf: any; +} + export const GetWidgetLayout: FC = props => { switch(props.widgetType) diff --git a/src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts b/src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts deleted file mode 100644 index b06d5e7a..00000000 --- a/src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface GetWidgetLayoutProps -{ - widgetType: string; - slot: number; - widgetConf: string; -} diff --git a/src/components/hotel-view/views/widget-slot/WidgetSlotView.tsx b/src/components/hotel-view/views/widgets/WidgetSlotView.tsx similarity index 60% rename from src/components/hotel-view/views/widget-slot/WidgetSlotView.tsx rename to src/components/hotel-view/views/widgets/WidgetSlotView.tsx index 739b34c7..380a61c5 100644 --- a/src/components/hotel-view/views/widget-slot/WidgetSlotView.tsx +++ b/src/components/hotel-view/views/widgets/WidgetSlotView.tsx @@ -1,6 +1,12 @@ -import { FC } from 'react'; -import { GetWidgetLayout } from '../widgets/GetWidgetLayout'; -import { WidgetSlotViewProps } from './WidgetSlotView.types'; +import { DetailsHTMLAttributes, FC } from 'react'; +import { GetWidgetLayout } from './GetWidgetLayout'; + +export interface WidgetSlotViewProps extends DetailsHTMLAttributes +{ + widgetType: string; + widgetSlot: number; + widgetConf: any; +} export const WidgetSlotView: FC = props => { diff --git a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx index c97d2b84..5cc195bf 100644 --- a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx +++ b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx @@ -2,7 +2,9 @@ import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from '@nit import { FC, useCallback, useEffect, useState } from 'react'; import { SendMessageComposer } from '../../../../../api'; import { UseMessageEventHook } from '../../../../../hooks'; -import { BonusRareWidgetViewProps } from './BonusRareWidgetView.types'; + +export interface BonusRareWidgetViewProps +{} export const BonusRareWidgetView: FC = props => { diff --git a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts deleted file mode 100644 index 9157b7b2..00000000 --- a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts +++ /dev/null @@ -1,2 +0,0 @@ -export interface BonusRareWidgetViewProps -{} diff --git a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx index becee467..4c9b27c8 100644 --- a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx +++ b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx @@ -1,7 +1,13 @@ +import { HallOfFameEntryData } from '@nitrots/nitro-renderer'; import { FC } from 'react'; import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api'; import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common'; -import { HallOfFameItemViewProps } from './HallOfFameItemView.types'; + +export interface HallOfFameItemViewProps +{ + data: HallOfFameEntryData; + level: number; +} export const HallOfFameItemView: FC = props => { diff --git a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts deleted file mode 100644 index 0e8c1e3a..00000000 --- a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { HallOfFameEntryData } from '@nitrots/nitro-renderer'; - -export interface HallOfFameItemViewProps -{ - data: HallOfFameEntryData; - level: number; -} diff --git a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx index c86cabfa..64b0211e 100644 --- a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx +++ b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx @@ -7,7 +7,7 @@ import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types'; export const HallOfFameWidgetView: FC = props => { - const { slot = -1, conf = '' } = props; + const { slot = -1, conf = null } = props; const [ data, setData ] = useState(null); const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) => @@ -21,7 +21,8 @@ export const HallOfFameWidgetView: FC = props => useEffect(() => { - SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(conf)); + const campaign: string = conf ? conf['campaign'] : ''; + SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(campaign)); }, [ conf ]); if(!data) return null; diff --git a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx index f5af0982..cbcc04ab 100644 --- a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx +++ b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx @@ -1,8 +1,10 @@ import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; -import { LocalizeText, SendMessageComposer } from '../../../../../api'; +import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../api'; import { UseMessageEventHook } from '../../../../../hooks'; -import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types'; + +export interface PromoArticleWidgetViewProps +{} export const PromoArticleWidgetView: FC = props => { @@ -46,7 +48,7 @@ export const PromoArticleWidgetView: FC = props =>

{articles[index].title}

{ articles[index].bodyText } - +
} diff --git a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts deleted file mode 100644 index e8a37dfa..00000000 --- a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts +++ /dev/null @@ -1,2 +0,0 @@ -export interface PromoArticleWidgetViewProps -{} diff --git a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx index 990255ba..41cd2785 100644 --- a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx +++ b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx @@ -1,32 +1,18 @@ -import { FC, useCallback, useMemo } from 'react'; -import { GetConfigurationManager, LocalizeText } from '../../../../../api'; -import { WidgetContainerViewProps } from './WidgetContainerView.types'; +import { FC, useCallback } from 'react'; +import { GetConfigurationManager, LocalizeText, NotificationUtilities } from '../../../../../api'; + +export interface WidgetContainerViewProps +{ + conf: any; +} export const WidgetContainerView: FC = props => { const { conf = null } = props; - const config = useMemo(() => - { - const config = {}; - - if(!conf || !conf.length) return config; - - let options = conf.split(','); - - options.forEach(option => - { - let [ key, value ] = option.split(':'); - - if(key && value) config[key] = value; - }); - - return config; - }, [ conf ]); - const getOption = useCallback((key: string) => { - const option = config[key]; + const option = conf[key]; if(!option) return null; @@ -37,7 +23,7 @@ export const WidgetContainerView: FC = props => } return option; - }, [ config ]); + }, [ conf ]); return (
@@ -45,7 +31,7 @@ export const WidgetContainerView: FC = props =>

{LocalizeText(`landing.view.${getOption('texts')}.header`)}

{ LocalizeText(`landing.view.${getOption('texts')}.body`) } - +
); diff --git a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts deleted file mode 100644 index 55f5924f..00000000 --- a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface WidgetContainerViewProps -{ - conf: string; -}