Talks with server actions

.gitignore

@@ -35,5 +35,10 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# nova 
-.nova
+# nova
+.nova
+
+# databases
+/**/*.db
+/**/*.db-shm
+/**/*.db-wal

app/actions/talks.ts

@@ -0,0 +1,16 @@
+"use server"
+
+import { talks } from "@/db/talks"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+
+export async function getTalks() {
+	return talks.getAll()
+}
+
+export async function createTalk(formData: FormData) {
+	talks.create(formData)
+
+	revalidatePath("/talk")
+	redirect("/talk")
+}

app/talk/page.tsx

@@ -1,18 +1,46 @@
-import { getTalks } from "../api/talk-requests/route";
-import "./page.css";
+import { createTalk, getTalks } from "../actions/talks"
+import { type Talk } from "@/db/talks/types"
 
 export default async function Talk() {
-	const data = await getTalks();
+	const talks = await getTalks()
+
 	return (
-		<main>
-			Current talks: {JSON.stringify(data)} <br />
-			<form className="max-w-screen-md m-auto" action="/api/talk-requests" method="POST">
-				<input type="text" placeholder="Speaker Name" name="speaker" />
-				<input type="text" placeholder="Talk Title" name="title" />
-				<textarea placeholder="Talk Description..." name="description"></textarea>
-				<input className="btn hover:bg-accent hover:text-base-100" type="reset" value="Reset" />
-				<button className="btn hover:bg-accent hover:text-base-100">Submit</button>
+		<main className="p-4">
+			<h2 className="text-2xl w-full text-center pb-4">Create a New Talk</h2>
+			<form
+				className="max-w-screen-md m-auto grid grid-cols-2 gap-2 text-lg p-2"
+				action={createTalk}
+			>
+				<input className="p-2" type="text" placeholder="Speaker Name" name="speaker" autoFocus />
+				<input className="p-2" type="text" placeholder="Talk Title" name="title" />
+				<textarea
+					className="p-2 col-span-2 resize-y"
+					placeholder="Talk Description..."
+					name="description"
+				></textarea>
+				<input className="btn hover:bg-accent hover:text-base-100 p-2" type="reset" value="Reset" />
+				<button className="btn hover:bg-accent hover:text-base-100 p-2" type="submit">
+					Submit
+				</button>
 			</form>
+			{talks.length > 0 ? (
+				<div className="pt-4 grid justify-center">
+					<h2 className="text-2xl w-full text-center pb-4">Current Talks</h2>
+					<ul className="list-none list-outside flex flex-col gap-4 py-4">
+						{talks.map(({ id, description, speaker, title }) => (
+							<li key={id} className="pl-8">
+								<div className="flex flex-row items-baseline gap-3">
+									<h3 className="text-lg font-bold">{title}</h3>
+									<h3 className="text-sm italic">{speaker}</h3>
+								</div>
+								<p className="text-sm p-2">{description}</p>
+							</li>
+						))}
+					</ul>
+				</div>
+			) : (
+				<p>No talks yet...</p>
+			)}
 		</main>
 	)
-}
+}

db/talks/index.ts

@@ -0,0 +1,38 @@
+import { Talk } from "./types"
+
+const db = require("better-sqlite3")("./talks.db")
+db.pragma("journal_mode = WAL")
+
+function initialize() {
+	db.prepare(
+		`
+CREATE TABLE IF NOT EXISTS Talks (
+    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    description TEXT,
+    speaker TEXT,
+    title TEXT
+);
+`
+	).run()
+}
+
+initialize()
+
+export const talks = {
+	getAll() {
+		return db.prepare("SELECT * FROM talks").all() as Talk[]
+	},
+
+	create(formData: FormData) {
+		const description = formData.get("description")
+		const speaker = formData.get("speaker")
+		const title = formData.get("title")
+
+		db.prepare(
+			`
+        INSERT INTO Talks (description, speaker, title)
+        VALUES (?, ?, ?)
+        `
+		).run(description, speaker, title)
+	}
+}

db/talks/types.ts

@@ -0,0 +1,6 @@
+export type Talk = {
+	id: number
+	description: string
+	speaker: string
+	title: string
+}