From 9691f2c2d7cff4136bbd96dd5591160efa140956 Mon Sep 17 00:00:00 2001
From: dan <me@danrh.co.uk>
Date: Mon, 15 May 2023 12:36:07 -0400
Subject: feat: add demo html file
---
client.js | 39 ++++++++++++++++++++++++++++-----------
1 file changed, 28 insertions(+), 11 deletions(-)
(limited to 'client.js')
diff --git a/client.js b/client.js
index 27055de..d855c38 100644
--- a/client.js
+++ b/client.js
@@ -1,12 +1,22 @@
/* Config */
-const baseUrl = 'https://localhost:7060/comments';
const pageId = 'add-page-id-here';
const commentsUrl = `${baseUrl}?page_url=${pageId}`;
-
-/* State */
+/* Running State */
let comments = [];
+/* LocalStorage Access */
+
+function getDeletionKeys() {
+ return (localStorage.deletion_keys && JSON.parse(localStorage.deletion_keys)) || {};
+}
+
+function setDeletionKey(commentId, key) {
+ const keys = getDeletionKeys();
+ keys[commentId] = key;
+ localStorage.deletion_keys = JSON.stringify(keys);
+}
+
/* GUI components */
const deleteButton = x =>
@@ -15,7 +25,7 @@ const deleteButton = x =>
const commentFmt = x =>
`<div class='comment' id='comment${x.id}'>${x.content}<br/>${x.created_at}`+
- `${x.deletion_key ? deleteButton(x) :''}</div>`;
+ `${getDeletionKeys()[x.id] ? deleteButton(x) :''}</div>`;
function commentsRender() {
commentsthread.innerHTML =
@@ -24,7 +34,6 @@ function commentsRender() {
</div>`;
}
-
/* API calls */
// GET comments
@@ -39,11 +48,16 @@ function fetchComments() {
})
}
-// POST new comment
-function createComment(comment) {
+// only 64 bits so not very strong
+function generateRandomKey() {
const xs = new BigUint64Array(1);
crypto.getRandomValues(xs);
- comment.deletion_key = xs[0].toString();
+ return xs[0].toString();
+}
+
+// POST new comment
+function createComment(comment) {
+ comment.deletion_key = generateRandomKey();
fetch(baseUrl, {
method: 'POST',
body: JSON.stringify(comment),
@@ -52,6 +66,7 @@ function createComment(comment) {
.then(id => {
const newComment = {id, created_at: 'just now', ...comment}
comments = [newComment, ...comments];
+ setDeletionKey(id, comment.deletion_key);
commentsRender();
})
}
@@ -60,14 +75,17 @@ function createComment(comment) {
function handleCommentFormSubmit() {
if (commentcontent.value !== "") {
- createComment({page_url: pageId, content: commentcontent.value});
+ createComment({
+ page_url: pageId,
+ content: `${commentcontent.value}\n - ${username.value}`,
+ bot: bot.value
+ });
commentcontent.value = '';
}
}
// DELETE comment
function handleDelete(commentId, deletionKey) {
- console.log('deleting:',{commentId,deletionKey});
fetch(
`${baseUrl}?comment=${commentId}&deletion_key=${deletionKey}`,
{method: 'DELETE'}
@@ -79,6 +97,5 @@ function handleDelete(commentId, deletionKey) {
});
}
-
/* init */
fetchComments();
--
cgit v1.2.3