From c2762cc0d034d6c833c8f95bcd37c75c4ff73a38 Mon Sep 17 00:00:00 2001 From: Bill Date: Sat, 12 Mar 2022 00:53:43 -0500 Subject: [PATCH] Update nitropedia --- src/components/index.scss | 1 + src/components/main/MainView.tsx | 2 +- .../nitropedia/NitropediaView.scss | 0 .../nitropedia/NitropediaView.tsx | 81 +++++++++---------- src/views/Styles.scss | 1 - 5 files changed, 42 insertions(+), 43 deletions(-) rename src/{views => components}/nitropedia/NitropediaView.scss (100%) rename src/{views => components}/nitropedia/NitropediaView.tsx (55%) diff --git a/src/components/index.scss b/src/components/index.scss index 4346ea12..71c7727a 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -13,6 +13,7 @@ @import './loading/LoadingView'; @import './mod-tools/ModToolsView'; @import './navigator/NavigatorView'; +@import './nitropedia/NitropediaView'; @import './notification-center/NotificationCenterView'; @import './purse/PurseView'; @import './right-side/RightSideView'; diff --git a/src/components/main/MainView.tsx b/src/components/main/MainView.tsx index 840d29ed..250cf763 100644 --- a/src/components/main/MainView.tsx +++ b/src/components/main/MainView.tsx @@ -5,7 +5,6 @@ import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../commo import { UseRoomSessionManagerEvent } from '../../hooks'; import { HcCenterView } from '../../views/hc-center/HcCenterView'; import { HotelView } from '../../views/hotel-view/HotelView'; -import { NitropediaView } from '../../views/nitropedia/NitropediaView'; import { AchievementsView } from '../achievements/AchievementsView'; import { AvatarEditorView } from '../avatar-editor/AvatarEditorView'; import { CameraWidgetView } from '../camera/CameraWidgetView'; @@ -20,6 +19,7 @@ import { HelpView } from '../help/HelpView'; import { InventoryView } from '../inventory/InventoryView'; import { ModToolsView } from '../mod-tools/ModToolsView'; import { NavigatorView } from '../navigator/NavigatorView'; +import { NitropediaView } from '../nitropedia/NitropediaView'; import { RightSideView } from '../right-side/RightSideView'; import { RoomHostView } from '../room/RoomHostView'; import { ToolbarView } from '../toolbar/ToolbarView'; diff --git a/src/views/nitropedia/NitropediaView.scss b/src/components/nitropedia/NitropediaView.scss similarity index 100% rename from src/views/nitropedia/NitropediaView.scss rename to src/components/nitropedia/NitropediaView.scss diff --git a/src/views/nitropedia/NitropediaView.tsx b/src/components/nitropedia/NitropediaView.tsx similarity index 55% rename from src/views/nitropedia/NitropediaView.tsx rename to src/components/nitropedia/NitropediaView.tsx index 3b0001ac..5baf57f9 100644 --- a/src/views/nitropedia/NitropediaView.tsx +++ b/src/components/nitropedia/NitropediaView.tsx @@ -1,27 +1,45 @@ import { MouseEventType } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { AddEventLinkTracker, GetConfiguration, NotificationUtilities, RemoveLinkEventTracker } from '../../api'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; +import { Base, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; +import { BatchUpdates } from '../../hooks'; + +const NEW_LINE_REGEX = /\n\r|\n|\r/mg; -const newLineRegex = /\n\r|\n|\r/mg; export const NitropediaView: FC<{}> = props => { const [ content, setContent ] = useState(null); const [ header, setHeader ] = useState(''); const elementRef = useRef(null); - const openPage = useCallback((link: string) => + const openPage = useCallback(async (link: string) => { - fetch(link) - .then(response => response.text()) - .then(data => - { - const splitData = data.split(newLineRegex); - setHeader(splitData.shift()); - setContent(splitData.join('')); - }) + const response = await fetch(link); + + if(!response) return; + + const text = await response.text(); + + const splitData = text.split(NEW_LINE_REGEX); + + BatchUpdates(() => + { + setHeader(splitData.shift()); + setContent(splitData.join('')); + }); }, []); - + + const onClick = useCallback((event: MouseEvent) => + { + if(!(event.target instanceof HTMLAnchorElement)) return; + + event.preventDefault(); + + const link = event.target.href; + + NotificationUtilities.openUrl(link); + }, []); + const onLinkReceived = useCallback((link: string) => { const value = link.split('/'); @@ -31,46 +49,27 @@ export const NitropediaView: FC<{}> = props => value.shift(); openPage(GetConfiguration('habbopages.url') + value.join('/')); - }, [openPage]); - - const onClick = useCallback((event: MouseEvent) => - { - if(event.target instanceof HTMLAnchorElement) - { - event.preventDefault(); - - const link = event.target.href; - - NotificationUtilities.openUrl(link); - } - - },[]); + }, [ openPage ]); useEffect(() => { const linkTracker = { linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' }; + AddEventLinkTracker(linkTracker); - return () => - { - RemoveLinkEventTracker(linkTracker); - } - }, [onLinkReceived]); + return () => RemoveLinkEventTracker(linkTracker); + }, [ onLinkReceived ]); useEffect(() => { const element = elementRef.current; - if(element) - { - element.addEventListener(MouseEventType.MOUSE_CLICK, onClick); - } + if(!element) return; + + element.addEventListener(MouseEventType.MOUSE_CLICK, onClick); - return () => - { - if(element) element.removeEventListener(MouseEventType.MOUSE_CLICK, onClick); - } - }, [onClick, content]); + return () => element.removeEventListener(MouseEventType.MOUSE_CLICK, onClick); + }, [ onClick, content ]); if(!content) return null; @@ -78,7 +77,7 @@ export const NitropediaView: FC<{}> = props => setContent(null)}/> -
+ ); diff --git a/src/views/Styles.scss b/src/views/Styles.scss index d2b14372..2c62c8e7 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -1,3 +1,2 @@ @import "./hotel-view/HotelView"; -@import "./nitropedia/NitropediaView"; @import "./hc-center/HcCenterView.scss";