Add "Delete post" to post actions menu

This commit is contained in:
silverpill 2021-12-04 00:14:49 +00:00
parent 6f0f288537
commit 0b82ffff83
8 changed files with 123 additions and 10 deletions

View file

@ -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,

View file

@ -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>

After

Width:  |  Height:  |  Size: 358 B

View file

@ -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) {

View file

@ -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">

View file

@ -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">

View file

@ -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;
}

View file

@ -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
}

View file

@ -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>