40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
|
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 }} />
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|