added delete functionality to comments

app/routes/r2-test/r2-worker-test.module.css

@@ -70,4 +70,25 @@
   margin-bottom: 1rem;
   padding: 1rem;
   border: 1px solid #ccc;
+}
+
+.commentHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.deleteButton {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  background-color: #dc2626;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.deleteButton:hover {
+  background-color: #b91c1c;
 }

app/routes/r2-test/r2-worker-test.tsx

@@ -12,6 +12,7 @@ interface ActionData {
     name?: string;
     comment?: string;
     turnstile?: string;
+    delete?: string;
   };
 }
 
@@ -43,6 +44,32 @@ export const loader = async ({ context }: { context: any }) => {
 };
 
 export const action = async ({ request, context }: { request: Request; context: any }) => {
+  const formData = await request.formData();
+  const intent = formData.get('intent');
+
+  if (intent === 'delete') {
+    try {
+      const timestamp = formData.get('timestamp') as string;
+      if (!timestamp) {
+        return { success: false, errors: { delete: 'Missing timestamp' } };
+      }
+
+      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 { success: true };
+    } catch {
+      return { success: false, errors: { delete: 'Failed to delete comment' } };
+    }
+  }
+
   try {
     const formData = await request.formData();
     const name = formData.get('name') as string;
@@ -143,7 +170,24 @@ export default function R2WorkerTest() {
         ) : (
           loaderData.comments.map((comment, index) => (
             <div key={index} className={styles.comment}>
-              <strong>{comment.name}</strong>
+              <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>