rc-1

frontend/source/components/views/Text.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+import { wtEvent } from '../../functions/Watchtower'
+import { setTitle } from '../../functions/Route'
+import './styles/Text.css'
+
+import HeaderMessage from '../layout/HeaderMessage'
+import HeaderError from '../layout/HeaderError'
+
+/**
+ * Load article from index.html using the 'include-article' placeholder
+ */
+
+interface PropsForViewText {
+    id: string
+}
+
+export default function ViewText({ id }: PropsForViewText) {
+    const template = document.head.querySelectorAll('template.article')
+    const relevant = [...template].find((e) => e.id === id)
+
+    useEffect(() => {
+        const t = Date.now()
+        return () => {
+            wtEvent('view_article', { id, duration: Date.now() - t })
+        }
+    }, [])
+
+    if (!relevant) {
+        return <HeaderError reason="Unknown Article" />
+    }
+
+    setTitle(`Article: ${id}`)
+    return (
+        <>
+            <HeaderMessage label={`Article <ID: ${id}>`} />
+            <article className="view-document" dangerouslySetInnerHTML={{ __html: relevant.innerHTML }} />
+        </>
+    )
+}