From a6839bdd152cf493fb6ff7545aa1168da701cd7b Mon Sep 17 00:00:00 2001
From: "Stephen J. Lu" <Stephen@StephenJLu.com>
Date: Sat, 4 Jan 2025 15:54:13 -0800
Subject: [PATCH] deletion dev

---
 app/routes/r2-test/r2-worker-test.tsx | 70 +++++++++++++++++++++------
 1 file changed, 55 insertions(+), 15 deletions(-)

diff --git a/app/routes/r2-test/r2-worker-test.tsx b/app/routes/r2-test/r2-worker-test.tsx
index d2eefae..9a1e35b 100644
--- a/app/routes/r2-test/r2-worker-test.tsx
+++ b/app/routes/r2-test/r2-worker-test.tsx
@@ -12,6 +12,7 @@ interface ActionData {
     name?: string;
     comment?: string;
     turnstile?: string;
+    delete?: string;
   };
 }
 
@@ -43,8 +44,30 @@ export const loader = async ({ context }: { context: any }) => {
 };
 
 export const action = async ({ request, context }: { request: Request; context: any }) => {
-  try {
-    const formData = await request.formData();
+const formData = await request.formData();
+  const intent = formData.get('intent');
+
+  // Handle delete
+  if (intent === 'delete') {
+    const timestamp = formData.get('timestamp') as string;
+    if (!timestamp) {
+      return json<ActionData>({ success: false, errors: { comment: 'Missing timestamp for deletion' } });
+    }
+
+    const response = await fetch('https://r2-worker.stephenjlu.com/comments.json', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Custom-Auth-Key': context.cloudflare.env.AUTH_KEY_SECRET,
+      },
+      body: JSON.stringify({ timestamp })
+    });
+
+    if (!response.ok) throw new Error('Failed to delete comment');
+    return json<ActionData>({ success: true });
+  }
+
+  try {    
     const name = formData.get('name') as string;
     const comment = formData.get('comment') as string;
     const token = formData.get('cf-turnstile-response') as string;
@@ -136,20 +159,37 @@ export default function R2WorkerTest() {
       )}
 
       <div className={styles.comments}>
-        <h2>Comments ({loaderData.comments.length})</h2>
-        <br />
-        {loaderData.comments.length === 0 ? (
-          <div>No comments yet!</div>
-        ) : (
-          loaderData.comments.map((comment, index) => (
-            <div key={index} className={styles.comment}>
-              <strong>{comment.name}</strong>
-              <p>{comment.comment}</p>
-              <small>{new Date(comment.timestamp).toLocaleString()}</small>
-            </div>
-          ))
-        )}
+  <h2>Comments ({loaderData.comments.length})</h2>
+  <br />
+  {loaderData.comments.length === 0 ? (
+    <div>No comments yet!</div>
+  ) : (
+    loaderData.comments.map((comment, index) => (
+      <div key={index} className={styles.comment}>
+        <div className={styles.commentHeader}>
+          <strong>{comment.name}</strong>
+          <Form method="post">
+            <input type="hidden" name="timestamp" value={comment.timestamp} />
+            <input type="hidden" name="intent" value="delete" />
+            <button
+              type="submit"
+              className={styles.deleteButton}
+              onClick={(e) => {
+                if (!confirm('Are you sure you want to delete this comment?')) {
+                  e.preventDefault();
+                }
+              }}
+            >
+              Delete
+            </button>
+          </Form>
+        </div>
+        <p>{comment.comment}</p>
+        <small>{new Date(comment.timestamp).toLocaleString()}</small>
       </div>
+    ))
+  )}
+</div>
     </div>
   );
 }
\ No newline at end of file