Update nitropedia

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';

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';

src/components/nitropedia/NitropediaView.tsx

@@ -1,25 +1,43 @@
 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<string>(null);
     const [ header, setHeader ] = useState<string>('');
     const elementRef = useRef<HTMLDivElement>(null);
     
-    const openPage = useCallback((link: string) =>
+    const openPage = useCallback(async (link: string) =>
     {
-        fetch(link)
+        const response = await fetch(link);
-        .then(response => response.text())
+
-        .then(data =>
+        if(!response) return;
-            {
+
-                const splitData = data.split(newLineRegex);
+        const text = await response.text();
-                setHeader(splitData.shift());
+
-                setContent(splitData.join(''));
+        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) =>
@@ -31,46 +49,27 @@ export const NitropediaView: FC<{}> = props =>
         value.shift();
 
         openPage(GetConfiguration<string>('habbopages.url') + value.join('/'));
-    }, [openPage]);
+    }, [ openPage ]);
-
-    const onClick = useCallback((event: MouseEvent) =>
-    {
-        if(event.target instanceof HTMLAnchorElement)
-        {
-            event.preventDefault();
-            
-            const link = event.target.href;
-
-            NotificationUtilities.openUrl(link);
-        }
-        
-    },[]);
 
     useEffect(() =>
     {
         const linkTracker = { linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' };
+
         AddEventLinkTracker(linkTracker);
 
-        return () =>
+        return () => RemoveLinkEventTracker(linkTracker);
-        {
+    }, [ onLinkReceived ]);
-            RemoveLinkEventTracker(linkTracker);
-        }
-    }, [onLinkReceived]);
 
     useEffect(() =>
     {
         const element = elementRef.current;
 
-        if(element)
+        if(!element) return;
-        {
-            element.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
-        }
         
-        return () =>
+        element.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
-        {
+
-            if(element) element.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
+        return () => element.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
-        }
+    }, [ onClick, content ]);
-    }, [onClick, content]);
 
     if(!content) return null;
 
@@ -78,7 +77,7 @@ export const NitropediaView: FC<{}> = props =>
         <NitroCardView className="nitropedia">
             <NitroCardHeaderView headerText={header} onCloseClick={() => setContent(null)}/>
             <NitroCardContentView>
-                <div ref={elementRef} className="w-100 h-100 text-black" dangerouslySetInnerHTML={{ __html: content }} />
+                <Base fit innerRef={ elementRef } className="text-black" dangerouslySetInnerHTML={{ __html: content }} />
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/Styles.scss

@@ -1,3 +1,2 @@
 @import "./hotel-view/HotelView";
-@import "./nitropedia/NitropediaView";
 @import "./hc-center/HcCenterView.scss";