add internal link handling

src/views/nitropedia/NitropediaView.tsx

@@ -1,13 +1,15 @@
-import { FC, useCallback, useState } from 'react';
-import { AddEventLinkTracker, GetConfiguration } from '../../api';
-import { UseMountEffect } from '../../hooks';
+import { MouseEventType } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, RemoveLinkEventTracker } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 
-const regex = /\n\r|\n|\r/mg;
+const newLineRegex = /\n\r|\n|\r/mg;
+const internalLinkPrefix = 'event:';
 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) =>
     {
@@ -15,7 +17,7 @@ export const NitropediaView: FC<{}> = props =>
         .then(response => response.text())
         .then(data =>
             {
-                const splitData = data.split(regex);
+                const splitData = data.split(newLineRegex);
                 setHeader(splitData.shift());
                 setContent(splitData.join(''));
             })
@@ -32,10 +34,52 @@ export const NitropediaView: FC<{}> = props =>
         openPage(GetConfiguration<string>('habbopages.url') + value.join('/'));
     }, [openPage]);
 
-    UseMountEffect(() =>
+    const onClick = useCallback((event: MouseEvent) =>
     {
-        AddEventLinkTracker({ linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' });
-    });
+        if(event.target instanceof HTMLAnchorElement)
+        {
+            const link = event.target.href;
+            console.log(link);
+
+            if(link.startsWith(internalLinkPrefix))
+            {
+                const internalLink = link.substring(internalLinkPrefix.length);
+                CreateLinkEvent(internalLink);
+            }
+
+            else
+            {
+                window.open(link);
+            }
+        }
+        
+    },[]);
+
+    useEffect(() =>
+    {
+        const linkTracker = { linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' };
+        AddEventLinkTracker(linkTracker);
+
+        return () =>
+        {
+            RemoveLinkEventTracker(linkTracker);
+        }
+    }, [onLinkReceived]);
+
+    useEffect(() =>
+    {
+        const element = elementRef.current;
+
+        if(element)
+        {
+            element.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
+        }
+
+        return () =>
+        {
+            if(element) element.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
+        }
+    }, [onClick, content]);
 
     if(!content) return null;
 
@@ -43,7 +87,7 @@ export const NitropediaView: FC<{}> = props =>
         <NitroCardView className="nitropedia">
             <NitroCardHeaderView headerText={header} onCloseClick={() => setContent(null)}/>
             <NitroCardContentView>
-                {content && <div className="w-100 h-100 text-black" dangerouslySetInnerHTML={{ __html: content }} />}
+                <div ref={elementRef} className="w-100 h-100 text-black" dangerouslySetInnerHTML={{ __html: content }} />
             </NitroCardContentView>
         </NitroCardView>
     );