Add "Delete post" to post actions menu

src/api/posts.ts

@@ -79,6 +79,9 @@ export async function getPostContext(
   const url = `${BACKEND_URL}/api/v1/statuses/${postId}/context`
   const response = await http(url, { authToken })
   const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
   return data
 }
 
@@ -124,6 +127,21 @@ export async function getPost(
   return data
 }
 
+export async function deletePost(
+  authToken: string,
+  postId: string,
+): Promise<void> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}`
+  const response = await http(url, {
+    method: "DELETE",
+    authToken,
+  })
+  if (response.status !== 204) {
+    const data = await response.json()
+    throw new Error(data.message)
+  }
+}
+
 export async function favourite(
   authToken: string,
   postId: string,

src/assets/feather/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>

src/components/Post.vue

@@ -108,7 +108,7 @@
       </a>
       <div
         class="post-menu-wrapper"
-        v-if="canSaveToIpfs() || canMintToken()"
+        v-if="canSaveToIpfs() || canMintToken() || canDeletePost()"
         v-click-away="hideMenu"
       >
         <a class="icon" title="More" @click="toggleMenu()">
@@ -135,6 +135,16 @@
               <span>Mint NFT</span>
             </a>
           </li>
+          <li v-if="canDeletePost()">
+            <a
+              class="icon"
+              title="Delete post"
+              @click="hideMenu(); deletePost()"
+            >
+              <img :src="require('@/assets/feather/trash.svg')">
+              <span>Delete post</span>
+            </a>
+          </li>
         </ul>
       </div>
       <div class="crypto-widget">
@@ -167,7 +177,15 @@ import { Options, Vue, setup } from "vue-class-component"
 import { Prop } from "vue-property-decorator"
 
 import { makePermanent, getSignature, mintToken, onTokenMinted } from "@/api/nft"
-import { Post, getPost, favourite, unfavourite, createRepost, deleteRepost } from "@/api/posts"
+import {
+  Post,
+  getPost,
+  deletePost,
+  favourite,
+  unfavourite,
+  createRepost,
+  deleteRepost,
+} from "@/api/posts"
 import Avatar from "@/components/Avatar.vue"
 import CryptoAddress from "@/components/CryptoAddress.vue"
 import PostEditor from "@/components/PostEditor.vue"
@@ -319,6 +337,16 @@ export default class PostComponent extends Vue {
     this.post.ipfs_cid = ipfs_cid
   }
 
+  canDeletePost(): boolean {
+    return this.post.account.id === this.store.currentUser?.id
+  }
+
+  async deletePost() {
+    const authToken = this.store.ensureAuthToken()
+    await deletePost(authToken, this.post.id)
+    this.$emit("post-deleted")
+  }
+
   getPaymentOptions(): PaymentOption[] {
     const items = []
     for (const [code, name] of CRYPTOCURRENCIES) {

src/components/PostOrRepost.vue

@@ -4,9 +4,12 @@
       <img :src="require('@/assets/feather/repeat.svg')">
       <span>{{ post.account.display_name || post.account.username }} reposted</span>
     </div>
-    <post :post="post.reblog"></post>
+    <post
+      :post="post.reblog"
+      @post-deleted="onPostDeleted(post.reblog.id); onPostDeleted(post.id)"
+    ></post>
   </template>
-  <post v-else :post="post"></post>
+  <post v-else :post="post" @post-deleted="onPostDeleted(post.id)"></post>
 </template>
 
 <script setup lang="ts">
@@ -18,6 +21,12 @@ import Post from "@/components/Post.vue"
 const props = defineProps<{
   post: PostObject,
 }>()
+
+const emit = defineEmits<{(event: "post-deleted"): void}>()
+
+function onPostDeleted(postId: string) {
+  emit("post-deleted", postId)
+}
 </script>
 
 <style scoped lang="scss">

src/views/NotificationList.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="main">
     <div class="content">
-      <div class="notification" v-for="notification in notifications" :key="notification.id">
+      <div
+        class="notification"
+        v-for="(notification, index) in notifications"
+        :key="notification.id"
+      >
         <div class="action">
           <template v-if="notification.type === 'follow'">
             <img :src="require('@/assets/feather/user-plus.svg')">
@@ -24,7 +28,11 @@
             <span>{{ getSenderName(notification) }} reposted your post</span>
           </template>
         </div>
-        <post v-if="notification.status" :post="notification.status"></post>
+        <post
+          v-if="notification.status"
+          :post="notification.status"
+          @post-deleted="onPostDeleted(index)"
+        ></post>
         <router-link
           v-else
           class="profile"
@@ -73,6 +81,10 @@ function getSenderName(notification: Notification): string {
   const sender = notification.account
   return sender.display_name || sender.username
 }
+
+function onPostDeleted(notificationIndex: number) {
+  notifications.value.splice(notificationIndex, 1)
+}
 </script>
 
 <style scoped lang="scss">

src/views/PostDetail.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="main">
-    <div class="content posts">
+    <div v-if="!isLoading && thread.length === 0" class="content not-found">
+      Not found
+    </div>
+    <div v-else class="content posts">
       <post
         v-for="(post, index) in thread"
         :key="post.id"
@@ -10,6 +13,7 @@
         @highlight="onPostHighlight($event)"
         @navigate-to="onPostNavigate($event)"
         @comment-created="onCommentCreated(index, $event)"
+        @post-deleted="onPostDeleted(index)"
       ></post>
     </div>
     <sidebar></sidebar>
@@ -44,14 +48,26 @@ export default class PostDetail extends Vue {
   private highlightedId: string | null = null
 
   thread: Post[] = []
+  isLoading = false
 
   created() {
     this.selectedId = this.$route.params.postId as string
     this.loader = getPostContext(this.store.authToken, this.selectedId)
+    this.isLoading = true
   }
 
   async mounted() {
-    this.thread = await this.loader
+    try {
+      this.thread = await this.loader
+    } catch (error) {
+      if (error.message === "post not found") {
+        // Show "not found" text
+        return
+      }
+      throw error
+    } finally {
+      this.isLoading = false
+    }
     this.$nextTick(() => {
       // TODO: scrolls to wrong position if posts above it have images
       this.scrollTo(this.selectedId as string)
@@ -98,6 +114,10 @@ export default class PostDetail extends Vue {
     this.thread.splice(index + 1, 0, post)
   }
 
+  onPostDeleted(postIndex: number) {
+    this.thread.splice(postIndex, 1)
+  }
+
 }
 
 </script>
@@ -105,6 +125,11 @@ export default class PostDetail extends Vue {
 <style scoped lang="scss">
 @import "../styles/layout";
 
+.not-found {
+  font-size: 20px;
+  text-align: center;
+}
+
 .post {
   margin: 0 0 $block-outer-padding;
 }

src/views/PostList.vue

@@ -2,7 +2,12 @@
   <div id="main">
     <div class="content posts">
       <post-editor @post-created="insertPost"></post-editor>
-      <post-or-repost v-for="post in posts" :post="post" :key="post.id"></post-or-repost>
+      <post-or-repost
+        v-for="post in posts"
+        :post="post"
+        :key="post.id"
+        @post-deleted="onPostDeleted($event)"
+      ></post-or-repost>
       <button
         v-if="isPageFull()"
         class="btn"
@@ -53,6 +58,11 @@ export default class PostList extends Vue {
     this.posts = [post, ...this.posts]
   }
 
+  onPostDeleted(postId: string) {
+    const postIndex = this.posts.findIndex((post) => post.id === postId)
+    this.posts.splice(postIndex, 1)
+  }
+
   isPageFull(): boolean {
     return this.posts.length >= PAGE_SIZE
   }

src/views/Profile.vue

@@ -33,7 +33,12 @@
           <dt>{{ profile.followers_count }}</dt><dd>followers</dd>
         </dl>
       </div>
-      <post-or-repost v-for="post in posts" :post="post" :key="post.id"></post-or-repost>
+      <post-or-repost
+        v-for="post in posts"
+        :post="post"
+        :key="post.id"
+        @post-deleted="onPostDeleted($event)"
+      ></post-or-repost>
     </div>
     <sidebar></sidebar>
   </div>
@@ -138,6 +143,11 @@ export default class ProfileView extends Vue {
     )
   }
 
+  onPostDeleted(postId: string) {
+    const postIndex = this.posts.findIndex((post) => post.id === postId)
+    this.posts.splice(postIndex, 1)
+  }
+
 }
 </script>