This repository has been archived on 2022-05-10. You can view files and clone it, but cannot push or open issues or pull requests.
tghandbook/lib/components/WikiPage.tsx

70 lines
1.7 KiB
TypeScript
Raw Normal View History

2020-06-16 09:32:48 +00:00
import { getPageHTML } from "../wiki";
import { darken, ColorFmt, lighten } from "../darkmode";
import * as React from "react";
2020-06-16 10:51:24 +00:00
import { useState, useEffect, useRef } from "react";
import userscript from "../userscript";
2020-06-16 15:08:44 +00:00
import speen from "~/assets/images/speen.svg";
2020-06-16 09:32:48 +00:00
2020-06-16 15:08:44 +00:00
export default function WikiPage({ page, visible }) {
2020-06-16 16:10:44 +00:00
const [data, setData] = useState({
loaded: false,
processed: false,
html: "",
});
2020-06-16 10:51:24 +00:00
const containerRef = useRef(null);
// Fetch page
2020-06-16 09:32:48 +00:00
useEffect(() => {
2020-06-16 16:21:12 +00:00
console.log(page + ": fetching");
2020-06-16 09:32:48 +00:00
(async () => {
let html = await getPageHTML(page);
2020-06-16 16:10:44 +00:00
// Convert relative links to absolute
html = html.replace(/"\/wiki/gi, '"//tgstation13.org/wiki');
setData({ loaded: true, processed: false, html });
2020-06-16 09:32:48 +00:00
})();
}, []);
2020-06-16 10:51:24 +00:00
2020-06-16 16:10:44 +00:00
// Process page
2020-06-16 10:51:24 +00:00
useEffect(() => {
2020-06-16 16:21:12 +00:00
console.log(page + ": processing");
2020-06-16 16:10:44 +00:00
if (data.loaded == true && data.processed == false) {
2020-06-16 10:51:24 +00:00
userscript(containerRef.current, page);
2020-06-16 16:21:12 +00:00
console.log(page + ": userscript applied");
2020-06-16 10:51:24 +00:00
}
}, [data]);
2020-06-16 16:10:44 +00:00
// Page fetched, instance userscript
useEffect(() => {
if (data.loaded) {
2020-06-16 16:21:12 +00:00
console.log(page + ": loaded!");
2020-06-16 16:10:44 +00:00
}
}, [data]);
2020-06-16 09:32:48 +00:00
if (!data.loaded) {
2020-06-16 15:08:44 +00:00
return (
2020-06-16 16:10:44 +00:00
<div
className="page waiting"
style={{
visibility: visible ? "" : "hidden",
}}
>
<p>You start skimming through the manual...</p>
2020-06-16 15:08:44 +00:00
<div className="speen">
<img src={speen} />
</div>
</div>
);
2020-06-16 09:32:48 +00:00
} else {
return (
<div
2020-06-16 10:51:24 +00:00
ref={containerRef}
2020-06-16 09:32:48 +00:00
className="page"
2020-06-16 15:08:44 +00:00
style={{
2020-06-16 16:00:29 +00:00
visibility: visible ? "" : "hidden",
2020-06-16 15:08:44 +00:00
}}
2020-06-16 09:32:48 +00:00
dangerouslySetInnerHTML={{ __html: data.html }}
></div>
);
}
}