freshter-logs/islands/Home.tsx
2023-04-28 19:48:34 -04:00

84 lines
2.6 KiB
TypeScript

import { useState } from "preact/hooks";
import { Database } from "types";
import { Head } from "$fresh/runtime.ts";
import { DEFAULT_STYLE } from "style";
import ConversationLink from "components/ConversationLink.tsx";
import WithStyleSheet from "components/WithStyleSheet.tsx";
import { fetch_db } from "db";
import { URL } from "utils";
export default function Home({ db }: { db: Database }) {
const [data, setData] = useState(db);
const links = Object.keys(data.conversations)
.reverse()
.map(c => <ConversationLink conv={c} db={data} interactive={true} />);
return (
<>
<Head>
<title>Freshter Logs</title>
</Head>
<WithStyleSheet href="/index.css" />
<a href="/">
<h1 className="title" style={DEFAULT_STYLE}>
freshter logs
</h1>
</a>
<MakeConversation
onsubmit={async () => (await fetch_db()).map(db => setData(db))}
/>
{links}
<div className="promo" style={DEFAULT_STYLE}>
by <a href="https://pl.pyrope.net/terezi">mehbark</a>
</div>
</>
);
}
function MakeConversation({ onsubmit }: { onsubmit?: () => void }) {
const [name, setName] = useState("");
const [desc, setDesc] = useState("");
async function handleClick() {
await fetch(`${URL}/api/conv`, {
method: "PUT",
body: JSON.stringify({ name, description: desc }),
});
setName("");
setDesc("");
onsubmit && onsubmit();
}
return (
<>
<WithStyleSheet href="/MakeConversation.css" />
<div className="make-conversation">
<input
value={name}
onInput={(e: any) => setName(e.target.value)}
className="mc-name"
placeholder="name"
/>
<textarea
value={desc}
onInput={(e: any) => setDesc(e.target.value)}
className="mc-desc"
placeholder="description"
/>
<button className="mc-submit" onClick={handleClick}>
create
</button>
</div>
</>
);
}
//TODO: making new conversations
//TODO: ui obv
//TODO: adding presets to convs (i think i'll have global presets be just manual tbh, people can email)
//TODO: conversation browser (ez)
//TODO: maybe preview but ehh name and description sbs
//TODO: oo def integrate their custom colors