🆙 Init V3

src/components/nitropedia/NitropediaView.tsx

@@ -0,0 +1,105 @@
+import { AddLinkEventTracker, ILinkEventTracker, NitroLogger, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useRef, useState } from 'react';
+import { GetConfigurationValue, OpenUrl } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+
+const NEW_LINE_REGEX = /\n\r|\n|\r/mg;
+
+export const NitropediaView: FC<{}> = props =>
+{
+    const [ content, setContent ] = useState<string>(null);
+    const [ header, setHeader ] = useState<string>('');
+    const [ dimensions, setDimensions ] = useState<{ width: number, height: number }>(null);
+    const elementRef = useRef<HTMLDivElement>(null);
+
+    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) =>
+            {
+                const value = url.split('/');
+
+                if(value.length < 2) return;
+
+                value.shift();
+
+                openPage(GetConfigurationValue<string>('habbopages.url') + value.join('/'));
+            },
+            eventUrlPrefix: 'habbopages/'
+        };
+
+        AddLinkEventTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, []);
+
+    useEffect(() =>
+    {
+        const handle = (event: MouseEvent) =>
+        {
+            if(!(event.target instanceof HTMLAnchorElement)) return;
+
+            event.preventDefault();
+
+            const link = event.target.href;
+
+            if(!link || !link.length) return;
+
+            OpenUrl(link);
+        };
+
+        document.addEventListener('click', handle);
+
+        return () =>
+        {
+            document.removeEventListener('click', handle);
+        };
+    }, []);
+
+    if(!content) return null;
+
+    return (
+        <NitroCardView className="nitropedia" style={ dimensions ? { width: dimensions.width, height: dimensions.height } : {} } theme="primary-slim">
+            <NitroCardHeaderView headerText={ header } onCloseClick={ () => setContent(null) }/>
+            <NitroCardContentView>
+                <div ref={ elementRef } className="text-black size-full" dangerouslySetInnerHTML={ { __html: content } } />
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};