68 lines
1.4 KiB
JavaScript
68 lines
1.4 KiB
JavaScript
import styles from "./page.module.css";
|
|
import postgres from "postgres";
|
|
|
|
const sql = postgres({
|
|
host: "localhost:5432",
|
|
username: process.env["USERNAME"],
|
|
password: process.env["PASSWORD"],
|
|
});
|
|
|
|
await sql`CREATE TABLE IF NOT EXISTS Messages(name text, message text);`;
|
|
|
|
function Form() {
|
|
async function onSubmit(formData) {
|
|
"use server";
|
|
const name = formData.get("name");
|
|
const message = formData.get("message");
|
|
await sql`INSERT INTO Messages(name, message) VALUES (${name}, ${message})`;
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<form
|
|
style={{ display: "flex", flexDirection: "column" }}
|
|
action={onSubmit}
|
|
>
|
|
<label>
|
|
Name
|
|
<input type="text" name="name" />
|
|
</label>
|
|
<label>
|
|
Message
|
|
<input type="text" name="message" />
|
|
</label>
|
|
<button>Chat</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function Message(props) {
|
|
const user = props.user;
|
|
const text = props.text;
|
|
return (
|
|
<p>
|
|
{user}: {text}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
export default async function Home() {
|
|
const messages = await sql`SELECT * FROM Messages`;
|
|
|
|
const messageComponents = [];
|
|
let i = -1;
|
|
for (const message of messages) {
|
|
i++;
|
|
messageComponents.push(
|
|
<Message user={message.name} text={message.message} key={i} />,
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={styles.page}>
|
|
<Form />
|
|
{messageComponents}
|
|
</div>
|
|
);
|
|
}
|