ls-deno/routes/note.tsx

46 lines
1.4 KiB
TypeScript
Raw Normal View History

2022-09-27 15:49:41 -05:00
import { Handlers, PageProps } from "$fresh/server.ts";
2022-09-29 20:22:30 -05:00
import { query } from "../db.ts";
2022-09-30 15:14:57 -05:00
import { Page } from "../components/Page.tsx";
2022-09-27 15:49:41 -05:00
interface Note {
id: string;
created_at: Date;
content: string;
}
2022-09-30 15:14:57 -05:00
export const handler: Handlers<Note[]> = {
2022-09-27 15:49:41 -05:00
async GET(request, context) {
console.debug({ request, context });
2022-09-30 15:14:57 -05:00
const result = await query("select * from note order by created_at desc");
2022-09-27 15:49:41 -05:00
if (result == null) throw "unable to fetch from database";
2022-09-29 20:22:30 -05:00
const notes = result.rows as Note[];
2022-09-27 15:49:41 -05:00
console.debug(notes);
return await context.render(notes);
},
};
2022-09-30 15:14:57 -05:00
export default function NotesPage({ data: notes }: PageProps<Note[]>) {
2022-09-27 15:49:41 -05:00
return (
2022-09-30 15:14:57 -05:00
<Page>
2022-09-29 20:22:30 -05:00
<h1>List of Notes</h1>
<p>Create a note:</p>
2022-09-30 15:14:57 -05:00
<form class="flex flex-col" action="./note/create" method="POST">
<textarea rows="6" class="px-4 py-2 bg-gray-800" name="content">
</textarea>
<button class="mt-2 px-4 py-2 bg-gray-800">Post</button>
2022-09-29 20:22:30 -05:00
</form>
2022-09-30 15:14:57 -05:00
{notes.map(({ id, content, created_at }) => (
<div class="my-4" key={id}>
<span>
<a href={`/note/${id}`} class="text-blue-500">Note {id}</a>{" "}
created at {created_at.toLocaleString()}
</span>
<blockquote class="mt-2 pl-4 border-l(solid 4)">
<pre>{content}</pre>
</blockquote>
</div>
))}
</Page>
2022-09-27 15:49:41 -05:00
);
}