diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx index 72ed3678..416a0167 100644 --- a/src/common/card/NitroCardHeaderView.tsx +++ b/src/common/card/NitroCardHeaderView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { FC, MouseEvent, useCallback, useMemo } from 'react'; +import { FC, MouseEvent, useMemo } from 'react'; import { Base, Column, ColumnProps, Flex } from '..'; interface NitroCardHeaderViewProps extends ColumnProps @@ -22,11 +22,11 @@ export const NitroCardHeaderView: FC = props => return newClassNames; }, [ classNames ]); - const onMouseDown = useCallback((event: MouseEvent) => + const onMouseDown = (event: MouseEvent) => { event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); - }, []); + } return ( diff --git a/src/common/layout/LayoutFurniImageView.tsx b/src/common/layout/LayoutFurniImageView.tsx index ed14d0af..d74d7e4b 100644 --- a/src/common/layout/LayoutFurniImageView.tsx +++ b/src/common/layout/LayoutFurniImageView.tsx @@ -1,5 +1,5 @@ import { IGetImageListener, ImageResult, TextureUtils, Vector3d } from '@nitrots/nitro-renderer'; -import { CSSProperties, FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { CSSProperties, FC, useEffect, useMemo, useState } from 'react'; import { BaseProps } from '..'; import { GetRoomEngine, ProductTypeEnum } from '../../api'; import { Base } from '../Base'; @@ -41,7 +41,7 @@ export const LayoutFurniImageView: FC = props => return newStyle; }, [ imageElement, scale, style ]); - const buildImage = useCallback(() => + useEffect(() => { let imageResult: ImageResult = null; @@ -71,16 +71,11 @@ export const LayoutFurniImageView: FC = props => if(imageResult) { const image = imageResult.getImage(); - + image.onload = () => setImageElement(image); } }, [ productType, productClassId, direction, extraData ]); - useEffect(() => - { - buildImage(); - }, [ buildImage ]); - if(!imageElement) return null; return ; diff --git a/src/common/layout/LayoutMiniCameraView.tsx b/src/common/layout/LayoutMiniCameraView.tsx index 934e1cc8..31b361c7 100644 --- a/src/common/layout/LayoutMiniCameraView.tsx +++ b/src/common/layout/LayoutMiniCameraView.tsx @@ -1,5 +1,5 @@ import { NitroRectangle, NitroRenderTexture } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useRef } from 'react'; +import { FC, useRef } from 'react'; import { GetRoomEngine, LocalizeText, PlaySound, SoundNames } from '../../api'; import { DraggableWindow } from '../draggable-window'; @@ -15,20 +15,20 @@ export const LayoutMiniCameraView: FC = props => const { roomId = -1, textureReceiver = null, onClose = null } = props; const elementRef = useRef(); - const getCameraBounds = useCallback(() => + const getCameraBounds = () => { if(!elementRef || !elementRef.current) return null; const frameBounds = elementRef.current.getBoundingClientRect(); return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height)); - }, []); + } - const takePicture = useCallback(() => + const takePicture = () => { PlaySound(SoundNames.CAMERA_SHUTTER); textureReceiver(GetRoomEngine().createTextureFromRoom(roomId, 1, getCameraBounds())); - }, [ roomId, getCameraBounds, textureReceiver ]); + } return ( diff --git a/src/common/layout/LayoutRoomPreviewerView.tsx b/src/common/layout/LayoutRoomPreviewerView.tsx index a45ca522..d115e22f 100644 --- a/src/common/layout/LayoutRoomPreviewerView.tsx +++ b/src/common/layout/LayoutRoomPreviewerView.tsx @@ -1,5 +1,5 @@ import { ColorConverter, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer'; -import { FC, MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react'; +import { FC, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react'; import { GetNitroInstance } from '../../api'; export interface LayoutRoomPreviewerViewProps @@ -19,58 +19,51 @@ export const LayoutRoomPreviewerView: FC = props = { if(!roomPreviewer) return; - if(event.shiftKey) - { - roomPreviewer.changeRoomObjectDirection(); - } - else - { - roomPreviewer.changeRoomObjectState(); - } + if(event.shiftKey) roomPreviewer.changeRoomObjectDirection(); + else roomPreviewer.changeRoomObjectState(); } - const update = useCallback((time: number) => - { - if(!roomPreviewer || !renderingCanvas || !elementRef.current) return; - - roomPreviewer.updatePreviewRoomView(); - - if(!renderingCanvas.canvasUpdated) return; - - elementRef.current.style.backgroundImage = `url(${ TextureUtils.generateImageUrl(renderingCanvas.master) })`; - }, [ roomPreviewer, renderingCanvas, elementRef ]); - - const setupPreviewer = useCallback(() => - { - if(!elementRef.current || !roomPreviewer) return; - - const computed = document.defaultView.getComputedStyle(elementRef.current, null); - - let backgroundColor = computed.backgroundColor; - - backgroundColor = ColorConverter.rgbStringToHex(backgroundColor); - backgroundColor = backgroundColor.replace('#', '0x'); - - roomPreviewer.backgroundColor = parseInt(backgroundColor, 16); - - const width = elementRef.current.parentElement.clientWidth; - - roomPreviewer.getRoomCanvas(width, height); - - const canvas = roomPreviewer.getRenderingCanvas(); - - setRenderingCanvas(canvas); - - canvas.canvasUpdated = true; - - update(-1); - }, [ elementRef, height, roomPreviewer, update ]); - useEffect(() => { if(!roomPreviewer) return; - if(!renderingCanvas) setupPreviewer(); + const update = (time: number) => + { + if(!roomPreviewer || !renderingCanvas || !elementRef.current) return; + + roomPreviewer.updatePreviewRoomView(); + + if(!renderingCanvas.canvasUpdated) return; + + elementRef.current.style.backgroundImage = `url(${ TextureUtils.generateImageUrl(renderingCanvas.master) })`; + } + + if(!renderingCanvas) + { + if(elementRef.current && roomPreviewer) + { + const computed = document.defaultView.getComputedStyle(elementRef.current, null); + + let backgroundColor = computed.backgroundColor; + + backgroundColor = ColorConverter.rgbStringToHex(backgroundColor); + backgroundColor = backgroundColor.replace('#', '0x'); + + roomPreviewer.backgroundColor = parseInt(backgroundColor, 16); + + const width = elementRef.current.parentElement.clientWidth; + + roomPreviewer.getRoomCanvas(width, height); + + const canvas = roomPreviewer.getRenderingCanvas(); + + setRenderingCanvas(canvas); + + canvas.canvasUpdated = true; + + update(-1); + } + } GetNitroInstance().ticker.add(update); @@ -94,7 +87,7 @@ export const LayoutRoomPreviewerView: FC = props = GetNitroInstance().ticker.remove(update); } - }, [ renderingCanvas, roomPreviewer, elementRef, height, setupPreviewer, update ]); + }, [ renderingCanvas, roomPreviewer, elementRef, height ]); return (
diff --git a/src/common/utils/FriendlyTimeView.tsx b/src/common/utils/FriendlyTimeView.tsx index d98d45e8..95af3a3f 100644 --- a/src/common/utils/FriendlyTimeView.tsx +++ b/src/common/utils/FriendlyTimeView.tsx @@ -1,5 +1,5 @@ import { FriendlyTime } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { FC, useEffect, useMemo, useState } from 'react'; import { Base, BaseProps } from '..'; interface FriendlyTimeViewProps extends BaseProps @@ -15,15 +15,6 @@ export const FriendlyTimeView: FC = props => const getStartSeconds = useMemo(() => (Math.round(new Date().getSeconds()) - seconds), [ seconds ]); - const getFriendlyTime = useCallback(() => - { - const value = (Math.round(new Date().getSeconds()) - getStartSeconds); - - if(isShort) return FriendlyTime.format(value); - - return FriendlyTime.format(value); - }, [ getStartSeconds, isShort ]); - useEffect(() => { const interval = setInterval(() => setUpdateId(prevValue => (prevValue + 1)), 10000); @@ -31,5 +22,7 @@ export const FriendlyTimeView: FC = props => return () => clearInterval(interval); }, []); - return { getFriendlyTime() }; + const value = (Math.round(new Date().getSeconds()) - getStartSeconds); + + return { isShort ? FriendlyTime.shortFormat(value) : FriendlyTime.format(value) }; } diff --git a/src/components/avatar-editor/views/AvatarEditorFigurePreviewView.tsx b/src/components/avatar-editor/views/AvatarEditorFigurePreviewView.tsx index 0c6afbf8..d5715acf 100644 --- a/src/components/avatar-editor/views/AvatarEditorFigurePreviewView.tsx +++ b/src/components/avatar-editor/views/AvatarEditorFigurePreviewView.tsx @@ -1,5 +1,5 @@ import { AvatarDirectionAngle } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { FigureData } from '../../../api'; import { Base, Column, LayoutAvatarImageView } from '../../../common'; import { AvatarEditorIcon } from './AvatarEditorIcon'; @@ -14,12 +14,7 @@ export const AvatarEditorFigurePreviewView: FC - { - setUpdateId(prevValue => (prevValue + 1)); - }, []); - - const rotateFigure = useCallback((direction: number) => + const rotateFigure = (direction: number) => { if(direction < AvatarDirectionAngle.MIN_DIRECTION) { @@ -32,19 +27,19 @@ export const AvatarEditorFigurePreviewView: FC { if(!figureData) return; - figureData.notify = rerender; + figureData.notify = () => setUpdateId(prevValue => (prevValue + 1)); return () => { figureData.notify = null; } - }, [ figureData, rerender ] ); + }, [ figureData ] ); return ( diff --git a/src/components/camera/CameraWidgetView.tsx b/src/components/camera/CameraWidgetView.tsx index db168554..00ab0a87 100644 --- a/src/components/camera/CameraWidgetView.tsx +++ b/src/components/camera/CameraWidgetView.tsx @@ -1,5 +1,5 @@ import { ILinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api'; import { useCamera, useRoomSessionManagerEvent } from '../../hooks'; import { CameraWidgetCaptureView } from './views/CameraWidgetCaptureView'; @@ -43,11 +43,11 @@ export const CameraWidgetView: FC<{}> = props => } } - const checkoutPictureUrl = useCallback((pictureUrl: string) => + const checkoutPictureUrl = (pictureUrl: string) => { setSavedPictureUrl(pictureUrl); setMode(MODE_CHECKOUT); - }, []); + } useRoomSessionManagerEvent(RoomSessionEvent.ENDED, event => setMode(MODE_NONE)); diff --git a/src/components/camera/views/CameraWidgetCaptureView.tsx b/src/components/camera/views/CameraWidgetCaptureView.tsx index e6c6a3fa..b104c503 100644 --- a/src/components/camera/views/CameraWidgetCaptureView.tsx +++ b/src/components/camera/views/CameraWidgetCaptureView.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useRef } from 'react'; +import { FC, useRef } from 'react'; import { CameraPicture, GetRoomEngine, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../api'; import { Column, DraggableWindow, Flex } from '../../../common'; import { useCamera, useNotification } from '../../../hooks'; @@ -23,16 +23,16 @@ export const CameraWidgetCaptureView: FC = props = const selectedPicture = ((selectedPictureIndex > -1) ? cameraRoll[selectedPictureIndex] : null); - const getCameraBounds = useCallback(() => + const getCameraBounds = () => { if(!elementRef || !elementRef.current) return null; const frameBounds = elementRef.current.getBoundingClientRect(); return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height)); - }, []); + } - const takePicture = useCallback(() => + const takePicture = () => { if(selectedPictureIndex > -1) { @@ -55,7 +55,7 @@ export const CameraWidgetCaptureView: FC = props = clone.push(new CameraPicture(texture, TextureUtils.generateImageUrl(texture))); setCameraRoll(clone); - }, [ cameraRoll, selectedPictureIndex, getCameraBounds, setCameraRoll, setSelectedPictureIndex, simpleAlert ]); + } return ( diff --git a/src/components/campaign/CampaignView.tsx b/src/components/campaign/CampaignView.tsx index dec8aea4..fe803838 100644 --- a/src/components/campaign/CampaignView.tsx +++ b/src/components/campaign/CampaignView.tsx @@ -1,5 +1,5 @@ import { CampaignCalendarData, CampaignCalendarDataMessageEvent, CampaignCalendarDoorOpenedMessageEvent, ILinkEventTracker, OpenCampaignCalendarDoorAsStaffComposer, OpenCampaignCalendarDoorComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { AddEventLinkTracker, CalendarItem, RemoveLinkEventTracker, SendMessageComposer } from '../../api'; import { useMessageEvent } from '../../hooks'; import { CalendarView } from './CalendarView'; @@ -11,11 +11,29 @@ export const CampaignView: FC<{}> = props => const [ receivedProducts, setReceivedProducts ] = useState>(new Map()); const [ isCalendarOpen, setCalendarOpen ] = useState(false); + const openPackage = (id: number, asStaff = false) => + { + if(!calendarData) return; + + setLastOpenAttempt(id); + + if(asStaff) + { + SendMessageComposer(new OpenCampaignCalendarDoorAsStaffComposer(calendarData.campaignName, id)); + } + + else + { + SendMessageComposer(new OpenCampaignCalendarDoorComposer(calendarData.campaignName, id)); + } + } + useMessageEvent(CampaignCalendarDataMessageEvent, event => { const parser = event.getParser(); if(!parser) return; + setCalendarData(parser.calendarData); }); @@ -49,28 +67,6 @@ export const CampaignView: FC<{}> = props => setLastOpenAttempt(-1); }); - const openPackage = useCallback((id: number, asStaff = false) => - { - if(!calendarData) return; - - setLastOpenAttempt(id); - - if(asStaff) - { - SendMessageComposer(new OpenCampaignCalendarDoorAsStaffComposer(calendarData.campaignName, id)); - } - - else - { - SendMessageComposer(new OpenCampaignCalendarDoorComposer(calendarData.campaignName, id)); - } - }, [ calendarData ]); - - const onCalendarClose = useCallback(() => - { - setCalendarOpen(false); - }, []); - useEffect(() => { const linkTracker: ILinkEventTracker = { @@ -98,7 +94,7 @@ export const CampaignView: FC<{}> = props => return ( <> { (calendarData && isCalendarOpen) && - + setCalendarOpen(false) } campaignName={ calendarData.campaignName } currentDay={ calendarData.currentDay } numDays={ calendarData.campaignDays } openedDays={ calendarData.openedDays } missedDays={ calendarData.missedDays } openPackage={ openPackage } receivedProducts={ receivedProducts } /> } ) diff --git a/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx b/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx index e364b281..1eb673f1 100644 --- a/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx +++ b/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx @@ -1,5 +1,5 @@ import { NitroToolbarAnimateIconEvent, TextureUtils, ToolbarIconEnum } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useRef } from 'react'; +import { FC, useRef } from 'react'; import { GetRoomEngine } from '../../../../api'; import { LayoutRoomPreviewerView, LayoutRoomPreviewerViewProps } from '../../../../common'; import { CatalogPurchasedEvent } from '../../../../events'; @@ -10,7 +10,7 @@ export const CatalogRoomPreviewerView: FC = props const { roomPreviewer = null } = props; const elementRef = useRef(null); - const animatePurchase = useCallback(() => + useUiEvent(CatalogPurchasedEvent.PURCHASE_SUCCESS, event => { if(!elementRef) return; @@ -27,19 +27,12 @@ export const CatalogRoomPreviewerView: FC = props const x = (bounds.x + (bounds.width / 2)); const y = (bounds.y + (bounds.height / 2)); - const event = new NitroToolbarAnimateIconEvent(image, x, y); + const animateEvent = new NitroToolbarAnimateIconEvent(image, x, y); - event.iconName = ToolbarIconEnum.INVENTORY; + animateEvent.iconName = ToolbarIconEnum.INVENTORY; - GetRoomEngine().events.dispatchEvent(event); - }, [ roomPreviewer ]); - - const onCatalogPurchasedEvent = useCallback((event: CatalogPurchasedEvent) => - { - animatePurchase(); - }, [ animatePurchase ]); - - useUiEvent(CatalogPurchasedEvent.PURCHASE_SUCCESS, onCatalogPurchasedEvent); + GetRoomEngine().events.dispatchEvent(animateEvent); + }); return (
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx index 67724c81..d9fc7635 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx @@ -1,5 +1,5 @@ import { GetRoomAdPurchaseInfoComposer, GetUserEventCatsMessageComposer, PurchaseRoomAdMessageComposer, RoomAdPurchaseInfoEvent, RoomEntryData, UserEventCatsEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { LocalizeText, SendMessageComposer } from '../../../../../api'; import { Base, Button, Column, Text } from '../../../../../common'; import { useMessageEvent } from '../../../../../hooks'; @@ -16,16 +16,7 @@ export const CatalogLayoutRoomAdsView: FC = props => const [ categoryId, setCategoryId ] = useState(1); const [ categories, setCategories ] = useState(null); - useMessageEvent(RoomAdPurchaseInfoEvent, event => - { - const parser = event.getParser(); - - if(!parser) return; - - setAvailableRooms(parser.rooms); - }); - - const purchaseAd = useCallback(() => + const purchaseAd = () => { const pageId = page.pageId; const offerId = page.offers.length >= 1 ? page.offers[0].offerId : -1; @@ -35,7 +26,16 @@ export const CatalogLayoutRoomAdsView: FC = props => const catId = categoryId; SendMessageComposer(new PurchaseRoomAdMessageComposer(pageId, offerId, flatId, name, extended, desc, catId)) - }, [ categoryId, eventDesc, eventName, extended, page.offers, page.pageId, roomId ]); + } + + useMessageEvent(RoomAdPurchaseInfoEvent, event => + { + const parser = event.getParser(); + + if(!parser) return; + + setAvailableRooms(parser.rooms); + }); useMessageEvent(UserEventCatsEvent, event => { diff --git a/src/components/groups/views/GroupInformationView.tsx b/src/components/groups/views/GroupInformationView.tsx index ce7469e5..3916a29d 100644 --- a/src/components/groups/views/GroupInformationView.tsx +++ b/src/components/groups/views/GroupInformationView.tsx @@ -1,5 +1,5 @@ import { GroupInformationParser, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback } from 'react'; +import { FC } from 'react'; import { CatalogPageName, CreateLinkEvent, GetGroupManager, GetGroupMembers, GetSessionDataManager, GroupMembershipType, GroupType, LocalizeText, SendMessageComposer, TryJoinGroup, TryVisitRoom } from '../../../api'; import { Button, Column, Flex, Grid, GridProps, LayoutBadgeImageView, Text } from '../../../common'; import { useNotification } from '../../../hooks'; @@ -72,7 +72,7 @@ export const GroupInformationView: FC = props => joinGroup(); } - const handleAction = useCallback((action: string) => + const handleAction = (action: string) => { switch(action) { @@ -95,7 +95,7 @@ export const GroupInformationView: FC = props => CreateLinkEvent('navigator/search/groups'); break; } - }, [ groupInformation ]); + } if(!groupInformation) return null; diff --git a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx index bc978353..9ec72807 100644 --- a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx +++ b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx @@ -1,5 +1,5 @@ import { GuideSessionFeedbackMessageComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback } from 'react'; +import { FC } from 'react'; import { LocalizeText, SendMessageComposer } from '../../../api'; import { Button, Column, Flex, Text } from '../../../common'; @@ -12,10 +12,7 @@ export const GuideToolUserFeedbackView: FC = pro { const { userName = null } = props; - const giveFeedback = useCallback((recommend: boolean) => - { - SendMessageComposer(new GuideSessionFeedbackMessageComposer(recommend)); - }, []); + const giveFeedback = (recommend: boolean) => SendMessageComposer(new GuideSessionFeedbackMessageComposer(recommend)); return ( diff --git a/src/components/help/views/name-change/NameChangeConfirmationView.tsx b/src/components/help/views/name-change/NameChangeConfirmationView.tsx index 8aef9c26..ccdfe824 100644 --- a/src/components/help/views/name-change/NameChangeConfirmationView.tsx +++ b/src/components/help/views/name-change/NameChangeConfirmationView.tsx @@ -1,5 +1,5 @@ import { ChangeUserNameMessageComposer, UserNameChangeMessageEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api'; import { useMessageEvent } from '../../../../hooks'; import { NameChangeLayoutViewProps } from './NameChangeView.types'; @@ -8,6 +8,14 @@ export const NameChangeConfirmationView:FC = props => { const { username = '', onAction = null } = props; const [ isConfirming, setIsConfirming ] = useState(false); + + const confirm = () => + { + if(isConfirming) return; + + setIsConfirming(true); + SendMessageComposer(new ChangeUserNameMessageComposer(username)); + } useMessageEvent(UserNameChangeMessageEvent, event => { @@ -20,14 +28,6 @@ export const NameChangeConfirmationView:FC = props => onAction('close'); }); - const confirm = useCallback(() => - { - if(isConfirming) return; - - setIsConfirming(true); - SendMessageComposer(new ChangeUserNameMessageComposer(username)); - }, [ isConfirming, username ]); - return (
{ LocalizeText('tutorial.name_change.info.confirm') }
diff --git a/src/components/help/views/name-change/NameChangeInputView.tsx b/src/components/help/views/name-change/NameChangeInputView.tsx index cfcb540a..8f352102 100644 --- a/src/components/help/views/name-change/NameChangeInputView.tsx +++ b/src/components/help/views/name-change/NameChangeInputView.tsx @@ -1,5 +1,5 @@ import { CheckUserNameMessageComposer, CheckUserNameResultMessageEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { LocalizeText, SendMessageComposer } from '../../../../api'; import { useMessageEvent } from '../../../../hooks'; import { NameChangeLayoutViewProps } from './NameChangeView.types'; @@ -14,12 +14,31 @@ const DISABLED: number = 6; export const NameChangeInputView:FC = props => { const { onAction = null } = props; - const [ newUsername, setNewUsername ] = useState(''); const [ canProceed, setCanProceed ] = useState(false); const [ isChecking, setIsChecking ] = useState(false); const [ errorCode, setErrorCode ] = useState(null); const [ suggestions, setSuggestions ] = useState([]); + + const check = () => + { + if(newUsername === '') return; + + setCanProceed(false); + setSuggestions([]); + setErrorCode(null); + setIsChecking(true); + + SendMessageComposer(new CheckUserNameMessageComposer(newUsername)); + } + + const handleUsernameChange = (username: string) => + { + setCanProceed(false); + setSuggestions([]); + setErrorCode(null); + setNewUsername(username); + } useMessageEvent(CheckUserNameResultMessageEvent, event => { @@ -52,45 +71,23 @@ export const NameChangeInputView:FC = props => } }); - const check = useCallback(() => - { - if(newUsername === '') return; - - setCanProceed(false); - setSuggestions([]); - setErrorCode(null); - - setIsChecking(true); - SendMessageComposer(new CheckUserNameMessageComposer(newUsername)); - }, [ newUsername ]); - - const handleUsernameChange = useCallback((username: string) => - { - setCanProceed(false); - setSuggestions([]); - setErrorCode(null); - - setNewUsername(username); - }, []); - return (
{ LocalizeText('tutorial.name_change.info.select') }
- handleUsernameChange(e.target.value) } /> + handleUsernameChange(event.target.value) } />
- { !errorCode && !canProceed &&
{ LocalizeText('help.tutorial.name.info') }
} - { errorCode &&
{ LocalizeText(`help.tutorial.name.${ errorCode }`, [ 'name' ], [ newUsername ]) }
} - { canProceed &&
{ LocalizeText('help.tutorial.name.available', [ 'name' ], [ newUsername ]) }
} - { suggestions &&
- { - suggestions.map((suggestion, i) => - { - return (
handleUsernameChange(suggestion) }>{ suggestion }
); - }) - } -
} + { !errorCode && !canProceed && +
{ LocalizeText('help.tutorial.name.info') }
} + { errorCode && +
{ LocalizeText(`help.tutorial.name.${ errorCode }`, [ 'name' ], [ newUsername ]) }
} + { canProceed && +
{ LocalizeText('help.tutorial.name.available', [ 'name' ], [ newUsername ]) }
} + { suggestions && +
+ { suggestions.map((suggestion, index) =>
handleUsernameChange(suggestion) }>{ suggestion }
) } +
}
diff --git a/src/components/help/views/name-change/NameChangeView.tsx b/src/components/help/views/name-change/NameChangeView.tsx index 5cc76a9a..9bb1b4c3 100644 --- a/src/components/help/views/name-change/NameChangeView.tsx +++ b/src/components/help/views/name-change/NameChangeView.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useMemo, useState } from 'react'; +import { FC, useMemo, useState } from 'react'; import { LocalizeText } from '../../../../api'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; import { HelpNameChangeEvent } from '../../../../events'; @@ -17,13 +17,7 @@ export const NameChangeView:FC<{}> = props => const [ layout, setLayout ] = useState(INIT); const [ newUsername, setNewUsername ] = useState(''); - useUiEvent(HelpNameChangeEvent.INIT, event => - { - setLayout(INIT); - setIsVisible(true); - }); - - const onAction = useCallback((action: string, value?: string) => + const onAction = (action: string, value?: string) => { switch(action) { @@ -39,7 +33,7 @@ export const NameChangeView:FC<{}> = props => setIsVisible(false); break; } - }, []); + } const titleKey = useMemo(() => { @@ -50,6 +44,12 @@ export const NameChangeView:FC<{}> = props => case CONFIRMATION: return 'tutorial.name_change.title.confirm'; } }, [ layout ]); + + useUiEvent(HelpNameChangeEvent.INIT, event => + { + setLayout(INIT); + setIsVisible(true); + }); if(!isVisible) return null; diff --git a/src/components/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx index 2222765f..a3e806ff 100644 --- a/src/components/hotel-view/HotelView.tsx +++ b/src/components/hotel-view/HotelView.tsx @@ -1,5 +1,5 @@ import { RoomSessionEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { GetConfiguration, GetConfigurationManager } from '../../api'; import { LayoutAvatarImageView } from '../../common'; import { useRoomSessionManagerEvent, useSessionInfo } from '../../hooks'; @@ -12,7 +12,9 @@ export const HotelView: FC<{}> = props => const [ isVisible, setIsVisible ] = useState(true); const { userFigure = null } = useSessionInfo(); - const onRoomSessionEvent = useCallback((event: RoomSessionEvent) => + useRoomSessionManagerEvent([ + RoomSessionEvent.CREATED, + RoomSessionEvent.ENDED ], event => { switch(event.type) { @@ -23,10 +25,7 @@ export const HotelView: FC<{}> = props => setIsVisible(event.openLandingView); return; } - }, []); - - useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent); - useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent); + }); if(!isVisible) return null; 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 699d812d..31b06072 100644 --- a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx +++ b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import { FC } from 'react'; import { GetConfigurationManager, LocalizeText, OpenUrl } from '../../../../../api'; export interface WidgetContainerViewProps @@ -10,7 +10,7 @@ export const WidgetContainerView: FC = props => { const { conf = null } = props; - const getOption = useCallback((key: string) => + const getOption = (key: string) => { const option = conf[key]; @@ -23,7 +23,7 @@ export const WidgetContainerView: FC = props => } return option; - }, [ conf ]); + } return (
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx index fb71db16..e817dd74 100644 --- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx +++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx @@ -1,5 +1,5 @@ import { BannedUserData, BannedUsersFromRoomEvent, RoomBannedUsersComposer, RoomModerationSettings, RoomUnbanUserComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api'; import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common'; import { useMessageEvent } from '../../../../hooks'; @@ -16,16 +16,7 @@ export const NavigatorRoomSettingsModTabView: FC(-1); const [ bannedUsers, setBannedUsers ] = useState([]); - useMessageEvent(BannedUsersFromRoomEvent, event => - { - const parser = event.getParser(); - - if(!roomData || (roomData.roomId !== parser.roomId)) return; - - setBannedUsers(parser.bannedUsers); - }); - - const unBanUser = useCallback((userId: number) => + const unBanUser = (userId: number) => { setBannedUsers(prevValue => { @@ -41,7 +32,16 @@ export const NavigatorRoomSettingsModTabView: FC(BannedUsersFromRoomEvent, event => + { + const parser = event.getParser(); + + if(!roomData || (roomData.roomId !== parser.roomId)) return; + + setBannedUsers(parser.bannedUsers); + }); useEffect(() => { diff --git a/src/components/nitropedia/NitropediaView.tsx b/src/components/nitropedia/NitropediaView.tsx index e2fc9380..7cc57312 100644 --- a/src/components/nitropedia/NitropediaView.tsx +++ b/src/components/nitropedia/NitropediaView.tsx @@ -1,5 +1,5 @@ import { ILinkEventTracker, NitroLogger } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { FC, useEffect, useRef, useState } from 'react'; import { AddEventLinkTracker, GetConfiguration, OpenUrl, RemoveLinkEventTracker } from '../../api'; import { Base, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; @@ -11,45 +11,45 @@ export const NitropediaView: FC<{}> = props => const [ header, setHeader ] = useState(''); const [ dimensions, setDimensions ] = useState<{ width: number, height: number }>(null); const elementRef = useRef(null); - - const openPage = useCallback(async (link: string) => - { - try - { - const response = await fetch(link); - - if(!response) return; - - const text = await response.text(); - const splitData = text.split(NEW_LINE_REGEX); - const line = splitData.shift().split('|'); - - setHeader(line[0]); - - setDimensions(prevValue => - { - if(line[1] && (line[1].split(';').length === 2)) - { - return { - width: parseInt(line[1].split(';')[0]), - height: parseInt(line[1].split(';')[1]) - } - } - - return null; - }); - - setContent(splitData.join('')); - } - - catch (error) - { - NitroLogger.error(`Failed to fetch ${ link }`); - } - }, []); useEffect(() => { + const openPage = async (link: string) => + { + try + { + const response = await fetch(link); + + if(!response) return; + + const text = await response.text(); + const splitData = text.split(NEW_LINE_REGEX); + const line = splitData.shift().split('|'); + + setHeader(line[0]); + + setDimensions(prevValue => + { + if(line[1] && (line[1].split(';').length === 2)) + { + return { + width: parseInt(line[1].split(';')[0]), + height: parseInt(line[1].split(';')[1]) + } + } + + return null; + }); + + setContent(splitData.join('')); + } + + catch (error) + { + NitroLogger.error(`Failed to fetch ${ link }`); + } + } + const linkTracker: ILinkEventTracker = { linkReceived: (url: string) => { @@ -67,7 +67,7 @@ export const NitropediaView: FC<{}> = props => AddEventLinkTracker(linkTracker); return () => RemoveLinkEventTracker(linkTracker); - }, [ openPage ]); + }, []); useEffect(() => { diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx index 38ae337b..87bb66ed 100644 --- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx +++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { LocalizeText, NotificationAlertItem, NotificationAlertType, OpenUrl } from '../../../../api'; import { Base, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common'; @@ -10,17 +10,16 @@ interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewP export const NotificationDefaultAlertView: FC = props => { const { item = null, title = ((props.item && props.item.title) || ''), onClose = null, ...rest } = props; - const [ imageFailed, setImageFailed ] = useState(false) - const visitUrl = useCallback(() => + const visitUrl = () => { OpenUrl(item.clickUrl); onClose(); - }, [ item, onClose ]); + } - const hasFrank = item.alertType === NotificationAlertType.DEFAULT; + const hasFrank = (item.alertType === NotificationAlertType.DEFAULT); return ( diff --git a/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx index 508a142d..cac309ea 100644 --- a/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx +++ b/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { LocalizeText, NotificationAlertItem, OpenUrl } from '../../../../api'; import { AutoGrid, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common'; @@ -14,24 +14,25 @@ export const NotificationSeachAlertView: FC = const [ searchValue, setSearchValue ] = useState(''); const [ results, setResults ] = useState([]); - const visitUrl = useCallback(() => + const visitUrl = () => { OpenUrl(item.clickUrl); onClose(); - }, [ item, onClose ]); + } + + const updateSearchValue = (value: string) => + { + let res = JSON.parse(item.messages[0]); + + setResults(res.filter((val: string) => val.includes(value))); + setSearchValue(value); + } useEffect(() => { setResults(JSON.parse(item.messages[0])); - }, [ item ]) - - const updateSearchValue = useCallback((value: string) => - { - let res = JSON.parse(item.messages[0]); - setResults(res.filter((val: string) => val.includes(value))); - setSearchValue(value); - },[ item ]) + }, [ item ]); const isAction = (item.clickUrl && item.clickUrl.startsWith('event:')); diff --git a/src/components/purse/PurseView.tsx b/src/components/purse/PurseView.tsx index 726cc842..1fb91c89 100644 --- a/src/components/purse/PurseView.tsx +++ b/src/components/purse/PurseView.tsx @@ -1,5 +1,5 @@ import { FriendlyTime, HabboClubLevelEnum } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api'; import { Column, Flex, Grid, LayoutCurrencyIcon, Text } from '../../common'; import { usePurse } from '../../hooks'; @@ -9,10 +9,11 @@ import { SeasonalView } from './views/SeasonalView'; export const PurseView: FC<{}> = props => { const { purse = null, hcDisabled = false } = usePurse(); + const displayedCurrencies = useMemo(() => GetConfiguration('system.currency.types', []), []); const currencyDisplayNumberShort = useMemo(() => GetConfiguration('currency.display.number.short', false), []); - const getClubText = useMemo(() => + const getClubText = (() => { if(!purse) return null; @@ -24,9 +25,9 @@ export const PurseView: FC<{}> = props => else if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24))) return FriendlyTime.shortFormat(minutesUntilExpiration * 60); else return FriendlyTime.shortFormat(totalDays * 86400); - }, [ purse ]); + })(); - const getCurrencyElements = useCallback((offset: number, limit: number = -1, seasonal: boolean = false) => + const getCurrencyElements = (offset: number, limit: number = -1, seasonal: boolean = false) => { if(!purse || !purse.activityPoints || !purse.activityPoints.size) return null; @@ -56,7 +57,7 @@ export const PurseView: FC<{}> = props => } return elements; - }, [ purse, displayedCurrencies, currencyDisplayNumberShort ]); + } if(!purse) return null; diff --git a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx index e9d6718b..402aba50 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx @@ -1,5 +1,5 @@ import { IFurnitureData, PetCustomPart, PetFigureData, RoomObjectCategory, RoomObjectVariable, RoomUserData } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { FC, useEffect, useMemo, useState } from 'react'; import { FurniCategory, GetFurnitureDataForRoomObject, GetRoomEngine, LocalizeText, UseProductItem } from '../../../../api'; import { Base, Button, Column, Flex, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; import { useRoom } from '../../../../hooks'; @@ -27,19 +27,19 @@ export const AvatarInfoUseProductConfirmView: FC(null); const { roomSession = null } = useRoom(); - const selectRoomObject = useCallback(() => + const selectRoomObject = () => { if(!petData) return; GetRoomEngine().selectRoomObject(roomSession.roomId, petData.roomIndex, RoomObjectCategory.UNIT); - }, [ roomSession, petData ]); + } - const useProduct = useCallback(() => + const useProduct = () => { roomSession.usePetProduct(item.requestRoomObjectId, petData.webID); onClose(); - }, [ roomSession, item, petData, onClose ]); + } const getPetImage = useMemo(() => { diff --git a/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx index 7b001801..f2a800cd 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx @@ -1,5 +1,5 @@ import { RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { FurniCategory, GetFurnitureDataForRoomObject, LocalizeText, UseProductItem } from '../../../../api'; import { useRoom } from '../../../../hooks'; import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView'; @@ -28,6 +28,26 @@ export const AvatarInfoUseProductView: FC = props const [ mode, setMode ] = useState(0); const { roomSession = null } = useRoom(); + const processAction = (name: string) => + { + if(!name) return; + + switch(name) + { + case 'use_product': + case 'use_product_shampoo': + case 'use_product_custom_part': + case 'use_product_custom_part_shampoo': + case 'use_product_saddle': + case 'replace_product_saddle': + case 'revive_monsterplant': + case 'rebreed_monsterplant': + case 'fertilize_monsterplant': + updateConfirmingProduct(item); + break; + } + } + useEffect(() => { if(!item) return; @@ -65,26 +85,6 @@ export const AvatarInfoUseProductView: FC = props setMode(mode); }, [ roomSession, item ]); - - const processAction = useCallback((name: string) => - { - if(!name) return; - - switch(name) - { - case 'use_product': - case 'use_product_shampoo': - case 'use_product_custom_part': - case 'use_product_custom_part_shampoo': - case 'use_product_saddle': - case 'replace_product_saddle': - case 'revive_monsterplant': - case 'rebreed_monsterplant': - case 'fertilize_monsterplant': - updateConfirmingProduct(item); - break; - } - }, [ item, updateConfirmingProduct ]); return ( diff --git a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx index a235f25b..18585713 100644 --- a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx +++ b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import YouTube, { Options } from 'react-youtube'; import { YouTubePlayer } from 'youtube-player/dist/types'; import { LocalizeText, YoutubeVideoPlaybackStateEnum } from '../../../../api'; @@ -10,7 +10,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props => const [ player, setPlayer ] = useState(null); const { objectId = -1, videoId = null, videoStart = 0, videoEnd = 0, currentVideoState = null, selectedVideo = null, playlists = [], onClose = null, previous = null, next = null, pause = null, play = null, selectVideo = null } = useFurnitureYoutubeWidget(); - const onStateChange = useCallback((event: { target: YouTubePlayer; data: number }) => + const onStateChange = (event: { target: YouTubePlayer; data: number }) => { setPlayer(event.target); @@ -30,7 +30,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props => case 2: if(currentVideoState !== 2) pause(); } - }, [ objectId, currentVideoState, play, pause ]); + } useEffect(() => { diff --git a/src/components/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx b/src/components/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx index 20fc171c..055e7341 100644 --- a/src/components/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx +++ b/src/components/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx @@ -1,5 +1,5 @@ import { NitroRenderTexture } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { GetRoomEngine } from '../../../../api'; import { LayoutMiniCameraView } from '../../../../common'; import { RoomWidgetThumbnailEvent } from '../../../../events'; @@ -10,7 +10,10 @@ export const RoomThumbnailWidgetView: FC<{}> = props => const [ isVisible, setIsVisible ] = useState(false); const { roomSession = null } = useRoom(); - const onNitroEvent = useCallback((event: RoomWidgetThumbnailEvent) => + useUiEvent([ + RoomWidgetThumbnailEvent.SHOW_THUMBNAIL, + RoomWidgetThumbnailEvent.HIDE_THUMBNAIL, + RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL ], event => { switch(event.type) { @@ -24,18 +27,14 @@ export const RoomThumbnailWidgetView: FC<{}> = props => setIsVisible(value => !value); return; } - }, []); + }); - useUiEvent(RoomWidgetThumbnailEvent.SHOW_THUMBNAIL, onNitroEvent); - useUiEvent(RoomWidgetThumbnailEvent.HIDE_THUMBNAIL, onNitroEvent); - useUiEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL, onNitroEvent); - - const receiveTexture = useCallback((texture: NitroRenderTexture) => + const receiveTexture = (texture: NitroRenderTexture) => { GetRoomEngine().saveTextureAsScreenshot(texture, true); setIsVisible(false); - }, []); + } if(!isVisible) return null; diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index 4a67374b..5b7081bd 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -1,5 +1,5 @@ import { Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { CreateLinkEvent, GetSessionDataManager, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api'; import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common'; import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks'; @@ -8,7 +8,6 @@ import { ToolbarMeView } from './ToolbarMeView'; export const ToolbarView: FC<{ isInRoom: boolean }> = props => { const { isInRoom } = props; - const [ isMeExpanded, setMeExpanded ] = useState(false); const [ useGuideTool, setUseGuideTool ] = useState(false); const { userFigure = null } = useSessionInfo(); @@ -25,42 +24,42 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => setUseGuideTool(parser.isAllowed(PerkEnum.USE_GUIDE_TOOL)); }); - 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'); - - 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 squared = Math.sqrt(((left * left) + (top * top))); - const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5))); - const height = 20; - - const motionName = (`ToolbarBouncing[${ iconName }]`); - - if(!Motions.getMotionByTag(motionName)) - { - Motions.runMotion(new Queue(new Wait((wait + 8)), new DropBounce(target, 400, 12))).tag = motionName; - } - - const motion = new Queue(new EaseOut(new JumpBy(image, wait, ((targetBounds.x - imageBounds.x) + height), (targetBounds.y - imageBounds.y), 100, 1), 1), new Dispose(image)); - - Motions.runMotion(motion); - }, []); - useRoomEngineEvent(NitroToolbarAnimateIconEvent.ANIMATE_ICON, event => { + const animationIconToToolbar = (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'); + + 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 squared = Math.sqrt(((left * left) + (top * top))); + const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5))); + const height = 20; + + const motionName = (`ToolbarBouncing[${ iconName }]`); + + if(!Motions.getMotionByTag(motionName)) + { + Motions.runMotion(new Queue(new Wait((wait + 8)), new DropBounce(target, 400, 12))).tag = motionName; + } + + const motion = new Queue(new EaseOut(new JumpBy(image, wait, ((targetBounds.x - imageBounds.x) + height), (targetBounds.y - imageBounds.y), 100, 1), 1), new Dispose(image)); + + Motions.runMotion(motion); + } + animationIconToToolbar('icon-inventory', event.image, event.x, event.y); }); diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx index 59f426da..c40abf81 100644 --- a/src/components/user-profile/UserProfileView.tsx +++ b/src/components/user-profile/UserProfileView.tsx @@ -1,5 +1,5 @@ import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { CreateLinkEvent, GetRoomSession, GetSessionDataManager, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api'; import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; import { useMessageEvent, useRoomEngineEvent } from '../../hooks'; @@ -21,12 +21,12 @@ export const UserProfileView: FC<{}> = props => setUserRelationships(null); } - const onLeaveGroup = useCallback(() => + const onLeaveGroup = () => { if(!userProfile || (userProfile.id !== GetSessionDataManager().userId)) return; GetUserProfile(userProfile.id); - }, [ userProfile ]); + } useMessageEvent(UserCurrentBadgesEvent, event => { diff --git a/src/components/user-settings/UserSettingsView.tsx b/src/components/user-settings/UserSettingsView.tsx index d8f4efa2..b8db53dd 100644 --- a/src/components/user-settings/UserSettingsView.tsx +++ b/src/components/user-settings/UserSettingsView.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ILinkEventTracker, NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { AddEventLinkTracker, DispatchMainEvent, DispatchUiEvent, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api'; import { Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useMessageEvent } from '../../hooks'; @@ -12,7 +12,7 @@ export const UserSettingsView: FC<{}> = props => const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems(); const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation(); - const processAction = useCallback((type: string, value?: boolean | number | string) => + const processAction = (type: string, value?: boolean | number | string) => { let doUpdate = true; @@ -56,9 +56,9 @@ export const UserSettingsView: FC<{}> = props => if(doUpdate) setUserSettings(clone); DispatchMainEvent(clone) - }, [ userSettings ]); + } - const saveRangeSlider = useCallback((type: string) => + const saveRangeSlider = (type: string) => { switch(type) { @@ -66,7 +66,7 @@ export const UserSettingsView: FC<{}> = props => SendMessageComposer(new UserSettingsSoundComposer(Math.round(userSettings.volumeSystem), Math.round(userSettings.volumeFurni), Math.round(userSettings.volumeTrax))); break; } - }, [ userSettings ]); + } useMessageEvent(UserSettingsEvent, event => { diff --git a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx index 937a175d..bf71a7a3 100644 --- a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx +++ b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import ReactSlider from 'react-slider'; import { LocalizeText, WiredFurniType } from '../../../../api'; import { Button, Column, Flex, Text } from '../../../../common'; @@ -16,12 +16,9 @@ export const WiredActionGiveRewardView: FC<{}> = props => const [ rewards, setRewards ] = useState<{ isBadge: boolean, itemCode: string, probability: number }[]>([]); const { trigger = null, setIntParams = null, setStringParam = null } = useWired(); - const addReward = useCallback(() => - { - setRewards(rewards => [ ...rewards, { isBadge: false, itemCode: '', probability: null } ]); - }, [ setRewards ]); + const addReward = () => setRewards(rewards => [ ...rewards, { isBadge: false, itemCode: '', probability: null } ]); - const removeReward = useCallback((index: number) => + const removeReward = (index: number) => { setRewards(prevValue => { @@ -31,9 +28,9 @@ export const WiredActionGiveRewardView: FC<{}> = props => return newValues; }); - }, [ setRewards ]); + } - const updateReward = useCallback((index: number, isBadge: boolean, itemCode: string, probability: number) => + const updateReward = (index: number, isBadge: boolean, itemCode: string, probability: number) => { const rewardsClone = Array.from(rewards); const reward = rewardsClone[index]; @@ -45,9 +42,9 @@ export const WiredActionGiveRewardView: FC<{}> = props => reward.probability = probability; setRewards(rewardsClone); - }, [ rewards, setRewards ]); + } - const save = useCallback(() => + const save = () => { let stringRewards = []; @@ -64,7 +61,7 @@ export const WiredActionGiveRewardView: FC<{}> = props => setStringParam(stringRewards.join(';')); setIntParams([ rewardTime, uniqueRewards ? 1 : 0, rewardsLimit, limitationInterval ]); } - }, [ rewardTime, uniqueRewards, rewardsLimit, limitationInterval, rewards, setIntParams, setStringParam ]); + } useEffect(() => { diff --git a/src/hooks/inventory/useInventoryUnseenTracker.ts b/src/hooks/inventory/useInventoryUnseenTracker.ts index 90ba66e9..24349fdc 100644 --- a/src/hooks/inventory/useInventoryUnseenTracker.ts +++ b/src/hooks/inventory/useInventoryUnseenTracker.ts @@ -1,28 +1,25 @@ import { UnseenItemsEvent, UnseenResetCategoryComposer, UnseenResetItemsComposer } from '@nitrots/nitro-renderer'; -import { useCallback, useMemo, useState } from 'react'; +import { useState } from 'react'; import { useBetween } from 'use-between'; import { SendMessageComposer } from '../../api'; import { useMessageEvent } from '../events'; -const sendResetCategoryMessage = (category: number) => SendMessageComposer(new UnseenResetCategoryComposer(category)); -const sendResetItemsMessage = (category: number, itemIds: number[]) => SendMessageComposer(new UnseenResetItemsComposer(category, ...itemIds)); - const useInventoryUnseenTrackerState = () => { const [ unseenItems, setUnseenItems ] = useState>(new Map()); - const getCount = useCallback((category: number) => (unseenItems.get(category)?.length || 0), [ unseenItems ]); + const getCount = (category: number) => (unseenItems.get(category)?.length || 0); - const getFullCount = useMemo(() => + const getFullCount = (() => { let count = 0; for(const key of unseenItems.keys()) count += getCount(key); return count; - }, [ unseenItems, getCount ]); + })(); - const resetCategory = useCallback((category: number) => + const resetCategory = (category: number) => { let didReset = true; @@ -39,15 +36,15 @@ const useInventoryUnseenTrackerState = () => newValue.delete(category); - sendResetCategoryMessage(category); + SendMessageComposer(new UnseenResetCategoryComposer(category)); return newValue; }); return didReset; - }, []); + } - const resetItems = useCallback((category: number, itemIds: number[]) => + const resetItems = (category: number, itemIds: number[]) => { let didReset = true; @@ -65,24 +62,24 @@ const useInventoryUnseenTrackerState = () => if(existing) for(const itemId of itemIds) existing.splice(existing.indexOf(itemId), 1); - sendResetItemsMessage(category, itemIds); + SendMessageComposer(new UnseenResetItemsComposer(category, ...itemIds)) return newValue; }); return didReset; - }, []); + } - const isUnseen = useCallback((category: number, itemId: number) => + const isUnseen = (category: number, itemId: number) => { if(!unseenItems.has(category)) return false; const items = unseenItems.get(category); return (items.indexOf(itemId) >= 0); - }, [ unseenItems ]); + } - const removeUnseen = useCallback((category: number, itemId: number) => + const removeUnseen = (category: number, itemId: number) => { setUnseenItems(prevValue => { @@ -96,7 +93,7 @@ const useInventoryUnseenTrackerState = () => return newValue; }); - }, []); + } useMessageEvent(UnseenItemsEvent, event => { diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureContextMenuWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureContextMenuWidget.ts index 8cd0cb30..22b735c8 100644 --- a/src/hooks/rooms/widgets/furniture/useFurnitureContextMenuWidget.ts +++ b/src/hooks/rooms/widgets/furniture/useFurnitureContextMenuWidget.ts @@ -1,5 +1,5 @@ import { ContextMenuEnum, GroupFurniContextMenuInfoMessageEvent, GroupFurniContextMenuInfoMessageParser, RoomEngineTriggerWidgetEvent, RoomObjectCategory } from '@nitrots/nitro-renderer'; -import { useCallback, useState } from 'react'; +import { useState } from 'react'; import { GetRoomEngine, IsOwnerOfFurniture, TryJoinGroup, TryVisitRoom } from '../../../../api'; import { useMessageEvent, useRoomEngineEvent } from '../../../events'; import { useRoom } from '../../useRoom'; @@ -19,13 +19,13 @@ const useFurnitureContextMenuWidgetState = () => const [ isGroupMember, setIsGroupMember ] = useState(false); const { roomSession = null } = useRoom(); - const onClose = useCallback(() => + const onClose = () => { setObjectId(-1); setGroupData(null); setIsGroupMember(false); setMode(null); - }, []); + } const closeConfirm = () => { diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureExchangeWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureExchangeWidget.ts index 5162607d..0dbb3d4f 100644 --- a/src/hooks/rooms/widgets/furniture/useFurnitureExchangeWidget.ts +++ b/src/hooks/rooms/widgets/furniture/useFurnitureExchangeWidget.ts @@ -1,5 +1,5 @@ import { FurnitureExchangeComposer, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer'; -import { useCallback, useState } from 'react'; +import { useState } from 'react'; import { GetRoomEngine, GetRoomSession, IsOwnerOfFurniture } from '../../../../api'; import { useRoomEngineEvent } from '../../../events'; import { useFurniRemovedEvent } from '../../engine'; @@ -10,12 +10,12 @@ const useFurnitureExchangeWidgetState = () => const [ category, setCategory ] = useState(-1); const [ value, setValue ] = useState(0); - const onClose = useCallback(() => + const onClose = () => { setObjectId(-1); setCategory(-1); setValue(0); - }, []); + } const redeem = () => { diff --git a/src/hooks/rooms/widgets/useWordQuizWidget.ts b/src/hooks/rooms/widgets/useWordQuizWidget.ts index be18edf9..3c5f5ac9 100644 --- a/src/hooks/rooms/widgets/useWordQuizWidget.ts +++ b/src/hooks/rooms/widgets/useWordQuizWidget.ts @@ -1,5 +1,5 @@ import { AvatarAction, IQuestion, RoomSessionWordQuizEvent } from '@nitrots/nitro-renderer'; -import { useCallback, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { GetRoomEngine, VoteValue } from '../../../api'; import { useRoomSessionManagerEvent } from '../../events'; import { useRoom } from '../useRoom'; @@ -34,29 +34,6 @@ const useWordQuizWidgetState = () => setAnswerSent(true); } - const checkSignFade = useCallback(() => - { - setUserAnswers(prevValue => - { - const keysToRemove: number[] = []; - - prevValue.forEach((value, key) => - { - value.secondsLeft--; - - if(value.secondsLeft <= 0) keysToRemove.push(key); - }); - - if(keysToRemove.length === 0) return prevValue; - - const copy = new Map(prevValue); - - keysToRemove.forEach(key => copy.delete(key)); - - return copy; - }); - }, []); - useRoomSessionManagerEvent(RoomSessionWordQuizEvent.ANSWERED, event => { const userData = roomSession.userDataManager.getUserData(event.userId); @@ -79,14 +56,7 @@ const useWordQuizWidgetState = () => return prevValue; }); - if(event.value === '0') - { - GetRoomEngine().updateRoomObjectUserGesture(roomSession.roomId, userData.roomIndex, AvatarAction.getGestureId(AvatarAction.GESTURE_SAD)); - } - else - { - GetRoomEngine().updateRoomObjectUserGesture(roomSession.roomId, userData.roomIndex, AvatarAction.getGestureId(AvatarAction.GESTURE_SMILE)); - } + GetRoomEngine().updateRoomObjectUserGesture(roomSession.roomId, userData.roomIndex, AvatarAction.getGestureId((event.value === '0') ? AvatarAction.GESTURE_SAD : AvatarAction.GESTURE_SMILE)); }); useRoomSessionManagerEvent(RoomSessionWordQuizEvent.FINISHED, event => @@ -132,10 +102,33 @@ const useWordQuizWidgetState = () => useEffect(() => { + const checkSignFade = () => + { + setUserAnswers(prevValue => + { + const keysToRemove: number[] = []; + + prevValue.forEach((value, key) => + { + value.secondsLeft--; + + if(value.secondsLeft <= 0) keysToRemove.push(key); + }); + + if(keysToRemove.length === 0) return prevValue; + + const copy = new Map(prevValue); + + keysToRemove.forEach(key => copy.delete(key)); + + return copy; + }); + } + const interval = setInterval(() => checkSignFade(), 1000); return () => clearInterval(interval); - }, [ checkSignFade ]); + }, []); useEffect(() => {