From e80e59350fb8b722941f4ec94892f771707c32a9 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Sun, 7 Jul 2024 12:57:04 +0100
Subject: [PATCH] add delete post button (#7)

---
 src/img/icons/bin.svg            | 17 ++++++++++++++++
 src/lib/api.js                   | 11 ++++++-----
 src/lib/ui/post/ActionBar.svelte | 34 +++++++++++++++++++++++++++-----
 3 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 src/img/icons/bin.svg

diff --git a/src/img/icons/bin.svg b/src/img/icons/bin.svg
new file mode 100644
index 0000000..9f999a7
--- /dev/null
+++ b/src/img/icons/bin.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g>
+        <clipPath id="_clip1">
+            <rect x="4" y="4" width="24" height="24"/>
+        </clipPath>
+        <g clip-path="url(#_clip1)">
+            <g transform="matrix(2.28571,0,0,2.42857,-28.5714,-40)">
+                <path d="M23,21.412L23,26.765C23,27.447 22.412,28 21.688,28L17.312,28C16.588,28 16,27.447 16,26.765L16,21.412L23,21.412ZM22.125,22.647C22.125,22.42 21.929,22.235 21.688,22.235C21.446,22.235 21.25,22.42 21.25,22.647L21.25,26.765C21.25,26.992 21.446,27.176 21.688,27.176C21.929,27.176 22.125,26.992 22.125,26.765L22.125,22.647ZM19.938,22.647C19.938,22.42 19.741,22.235 19.5,22.235C19.259,22.235 19.063,22.42 19.063,22.647L19.063,26.765C19.063,26.992 19.259,27.176 19.5,27.176C19.741,27.176 19.938,26.992 19.938,26.765L19.938,22.647ZM17.75,22.647C17.75,22.42 17.554,22.235 17.313,22.235C17.071,22.235 16.875,22.42 16.875,22.647L16.875,26.765C16.875,26.992 17.071,27.176 17.313,27.176C17.554,27.176 17.75,26.992 17.75,26.765L17.75,22.647Z"/>
+            </g>
+            <g transform="matrix(2.57143,0,0,0.428571,-34.1429,-2)">
+                <path d="M21.444,21C22.304,21 23,25.179 23,30.333L16,30.333C16,25.179 16.696,21 17.556,21L17.556,20.995C17.556,19.14 17.678,17.361 17.897,16.049C18.116,14.737 18.412,14 18.721,14L20.278,14C20.922,14 21.444,17.134 21.444,21ZM18.333,21L20.667,21C20.667,20.381 20.626,19.788 20.553,19.35C20.48,18.912 20.381,18.667 20.278,18.667L18.722,18.667C18.507,18.667 18.333,19.712 18.333,21Z"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/lib/api.js b/src/lib/api.js
index 9cbf898..55b520b 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -231,7 +231,7 @@ export async function createPost(host, token, post_data) {
         body: formdata
     })
 
-    return await data.json()
+    return await data.json();
 }
 
 /**
@@ -249,16 +249,17 @@ export async function editPost(host, token, post_id, post_data) {
 
     let url = `https://${host}/api/v1/statuses/${post_id}`;
     const data = await fetch(url, {
-        method: 'POST',
+        method: 'PUT',
         headers: { "Authorization": `Bearer ${token}` },
         body: formdata
     })
 
-    return await data.json()
+    return await data.json();
 }
 
 /**
  * DELETE /api/v1/statuses/{post_id}
+ * Returns the deleted post's data, in the case of republishing.
  * @param {string} host - The domain of the target server.
  * @param {string} token - The application token
  * @param {any} post_id - The ID of the post to delete.
@@ -266,11 +267,11 @@ export async function editPost(host, token, post_id, post_data) {
 export async function deletePost(host, token, post_id) {
     let url = `https://${host}/api/v1/statuses/${post_id}`;
     const data = await fetch(url, {
-        method: 'POST',
+        method: 'DELETE',
         headers: { "Authorization": `Bearer ${token}` },
     })
 
-    return await data.json()
+    return await data.json();
 }
 
 /**
diff --git a/src/lib/ui/post/ActionBar.svelte b/src/lib/ui/post/ActionBar.svelte
index 8f3e490..2a08795 100644
--- a/src/lib/ui/post/ActionBar.svelte
+++ b/src/lib/ui/post/ActionBar.svelte
@@ -1,9 +1,11 @@
 <script>
-    import * as api from '$lib/api.js';
+    import * as api from '$lib/api';
     import { get } from 'svelte/store';
-    import { server } from '$lib/client/server.js';
-    import { app } from '$lib/client/app.js';
-    import { parseReactions } from '$lib/post.js';
+    import { server } from '$lib/client/server';
+    import { app } from '$lib/client/app';
+    import { account } from '@cf/store/account';
+    import { timeline } from '$lib/timeline';
+    import { parseReactions } from '$lib/post';
 
     import ActionButton from './ActionButton.svelte';
 
@@ -13,6 +15,7 @@
     import FavouriteIconFill from '../../../img/icons/like_fill.svg';
     import QuoteIcon from '../../../img/icons/quote.svg';
     import MoreIcon from '../../../img/icons/more.svg';
+    import DeleteIcon from '../../../img/icons/bin.svg';
 
     export let post;
 
@@ -44,9 +47,25 @@
         post.favourite_count = data.favourites_count;
         if (data.reactions) post.reactions = parseReactions(data.reactions);
     }
+
+    async function deletePost() {
+        if (!$account || post.account.id !== $account.id) return;
+
+        if (!confirm("Are you sure you want to delete this post? This action cannot be undone."))
+            return;
+
+        const res = await api.deletePost($server.host, $app.token, post.id);
+
+        if (!res || res.error) {
+            console.error(`Error while deleting post ${post.id}`);
+            return;
+        }
+
+        timeline.update(timeline => timeline.filter(p => p.id !== post.id));
+    }
 </script>
 
-<div class="post-actions" aria-label="Post actions" on:mouseup|stopPropagation on:keydown|stopPropagation>
+<div class="post-actions" aria-label="Post actions" role="toolbar" tabindex="0" on:mouseup|stopPropagation on:keydown|stopPropagation>
     <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
         <ReplyIcon/>
     </ActionButton>
@@ -68,6 +87,11 @@
     <ActionButton type="more" label="More" disabled>
         <MoreIcon/>
     </ActionButton>
+    {#if $account && post.account.id === $account.id}
+        <ActionButton type="delete" label="Delete" on:click={deletePost}>
+            <DeleteIcon/>
+        </ActionButton>
+    {/if}
 </div>
 
 <style>