97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
import { URL, catcher_async, fetch_json } from "utils";
|
|
import { Database } from "types";
|
|
import Conv from "components/Conv.tsx";
|
|
import WithStyleSheet from "components/WithStyleSheet.tsx";
|
|
import AddMsg from "components/AddMsg.tsx";
|
|
import PresetSelector from "components/PresetSelector.tsx";
|
|
import PresetCreator from "components/PresetCreator.tsx";
|
|
import { fetch_db } from "db";
|
|
import Meta from "components/Meta.tsx";
|
|
|
|
const UPDATE_DB_INTERVAL_MS = 3000;
|
|
|
|
export default function Interactive({
|
|
conv,
|
|
db,
|
|
}: {
|
|
conv: string;
|
|
db: Database;
|
|
}) {
|
|
const [database, setDatabase] = useState(db);
|
|
const conv_ = database.conversations[conv];
|
|
useEffect(() => {
|
|
const interval = setInterval(updateDB, UPDATE_DB_INTERVAL_MS);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const [preset, setPreset] = useState("default");
|
|
|
|
const [creating, setCreating] = useState("preset");
|
|
const [fg, setFg] = useState("black");
|
|
const [bg, setBg] = useState("");
|
|
const [font, setFont] = useState("");
|
|
|
|
async function updateDB() {
|
|
(await fetch_db()).map(db => setDatabase(db));
|
|
}
|
|
|
|
function select_preset(s: string) {
|
|
setPreset(s);
|
|
setCreating(s);
|
|
setFg(conv_.presets[s].fg);
|
|
setBg(conv_.presets[s].bg ?? "");
|
|
setFont(conv_.presets[s].font ?? "");
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<WithStyleSheet href="/Interactive.css" />
|
|
<Meta
|
|
title={`Interactive version of: ${conv_.name}`}
|
|
description={conv_.description}
|
|
after_slash={`${conv}/i`}
|
|
color={conv_.presets?.page?.bg}
|
|
></Meta>
|
|
<Conv conv={conv} db={database}>
|
|
<AddMsg
|
|
preset={preset}
|
|
db={database}
|
|
conv={conv_}
|
|
onsubmit={async function (msg) {
|
|
await fetch(`${URL}/api/conv/${conv}`, {
|
|
method: "PUT",
|
|
body: JSON.stringify(msg),
|
|
});
|
|
updateDB();
|
|
}}
|
|
/>
|
|
<PresetSelector
|
|
selected={preset}
|
|
setPreset={select_preset}
|
|
db={database}
|
|
conv={conv_}
|
|
/>
|
|
<PresetCreator
|
|
conv={conv}
|
|
name={creating}
|
|
setName={setCreating}
|
|
onsubmit={updateDB}
|
|
{...{ fg, setFg, bg, setBg, font, setFont }}
|
|
/>
|
|
<GoToStaticPage conv={conv} />
|
|
</Conv>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function GoToStaticPage({ conv }: { conv: string }) {
|
|
return (
|
|
<footer>
|
|
<a href={`/${conv}`} className="back-to-static">
|
|
Go to static page
|
|
</a>
|
|
</footer>
|
|
);
|
|
}
|