Public
HTTP
stevekrouse-blobcommentdemo.web.val.run
July 3, 2024
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/** @jsxImportSource npm:hono@3/jsx */
import { blob } from "https://esm.town/v/std/blob?v=10";
import { Hono } from "npm:hono";
const app = new Hono();
app.get("/", async (c) => {
const comments = await blob.getJSON("comments") || [];
return c.html(
<div>
<h2>Comments</h2>
<div>
{comments.map((comment) => (
<div key={comment.id} style={{ marginBottom: "10px", padding: "10px", border: "1px solid #ccc" }}>
{comment.text}
<form method="POST" action={`/comment/${comment.id}/delete`} style={{ display: "inline" }}>
<input type="submit" value="x" style={{ marginLeft: "10px" }} />
</form>
</div>
))}
</div>
<form method="POST" action="/comment">
<input type="text" name="comment" placeholder="New comment..." /> <input type="submit" />
</form>
</div>,
);
});
app.post("/comment", async (c) => {
const formData = await c.req.parseBody();
const newComment = formData.comment as string;
let comments = await blob.getJSON("comments") || [];
comments.push({ text: newComment, id: Math.floor(Math.random() * 1000).toString() });
await blob.setJSON("comments", comments);
return c.redirect("/");
});
app.post("/comment/:id/delete", async (c) => {
const id = c.req.param("id");
let comments = await blob.getJSON("comments");
await blob.setJSON("comments", comments.filter((comment) => comment.id !== id));
return c.redirect("/");
});
export default app.fetch;
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
July 3, 2024
Can anyone delete a comment here? Even comments by other people?
Ah, that looks like a UI bug. We'll remove that button on other peoples' comments
The way the logic works is that you can delete your own comments and any comments on your own vals, like you can delete a comment on your own youtube video, for example