From 86eb76229f167fe72fc71f104997d621545f56f6 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Thu, 10 Aug 2023 22:14:13 +0100 Subject: [PATCH] feat: support comment deletion --- src/components/common/CommentItem.tsx | 41 ++++++++++++++++++- .../DeleteConfirmationModal.tsx | 2 +- src/components/dashboard/OptionsButton.tsx | 3 +- .../PagesManagerBatchSelectActionTab.tsx | 3 +- src/components/dashboard/PagesManagerMenu.tsx | 3 +- src/components/dashboard/PublishButton.tsx | 2 +- src/lib/i18n/locales/zh/common.json | 7 +++- src/lib/i18n/locales/zh/dashboard.json | 5 --- 8 files changed, 51 insertions(+), 15 deletions(-) rename src/components/{dashboard => common}/DeleteConfirmationModal.tsx (95%) diff --git a/src/components/common/CommentItem.tsx b/src/components/common/CommentItem.tsx index 8da8766a..9907d970 100644 --- a/src/components/common/CommentItem.tsx +++ b/src/components/common/CommentItem.tsx @@ -1,12 +1,14 @@ "use client" import type { CharacterEntity, NoteEntity } from "crossbell" -import { useState } from "react" +import { useEffect, useState } from "react" import { useAccountState } from "@crossbell/connect-kit" +import { useQueryClient } from "@tanstack/react-query" import { CharacterFloatCard } from "~/components/common/CharacterFloatCard" import { CommentInput } from "~/components/common/CommentInput" +import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal" import PageContent from "~/components/common/PageContent" import { ReactionLike } from "~/components/common/ReactionLike" import { Titles } from "~/components/common/Titles" @@ -19,6 +21,7 @@ import { CSB_SCAN } from "~/lib/env" import { getSiteLink } from "~/lib/helpers" import { useTranslation } from "~/lib/i18n/client" import { cn } from "~/lib/utils" +import { useDeletePage } from "~/queries/page" export const CommentItem = ({ comment, @@ -37,12 +40,23 @@ export const CommentItem = ({ }) => { const [replyOpen, setReplyOpen] = useState(false) const [editOpen, setEditOpen] = useState(false) + const [deleteConfirmModalOpen, setDeleteConfirmModalOpen] = useState(false) const { t } = useTranslation("common") const date = useDate() + const queryClient = useQueryClient() + const deletePage = useDeletePage() const account = useAccountState(({ computed }) => computed.account) + useEffect(() => { + queryClient.refetchQueries([ + "getComments", + originalCharacterId, + originalNoteId, + ]) + }, [deletePage.isSuccess, originalCharacterId, originalNoteId, queryClient]) + if (!comment.metadata?.content?.content) { return null } @@ -156,6 +170,31 @@ export const CommentItem = ({ {t(`${editOpen ? "Cancel " : ""}Edit`)} )} + {comment.characterId === account?.characterId && + !(comment as any)?.fromNotes?.list?.length && ( + <> + + + deletePage.mutate({ + noteId: comment.noteId, + characterId: comment.characterId, + }) + } + type="comment" + /> + + )} {replyOpen && (
diff --git a/src/components/dashboard/DeleteConfirmationModal.tsx b/src/components/common/DeleteConfirmationModal.tsx similarity index 95% rename from src/components/dashboard/DeleteConfirmationModal.tsx rename to src/components/common/DeleteConfirmationModal.tsx index eec62edf..da17b1ab 100644 --- a/src/components/dashboard/DeleteConfirmationModal.tsx +++ b/src/components/common/DeleteConfirmationModal.tsx @@ -14,7 +14,7 @@ export const DeleteConfirmationModal = ({ onConfirm: () => void type?: string }) => { - const { t } = useTranslation("dashboard") + const { t } = useTranslation("common") return ( diff --git a/src/components/dashboard/OptionsButton.tsx b/src/components/dashboard/OptionsButton.tsx index 73e36db2..1baea607 100644 --- a/src/components/dashboard/OptionsButton.tsx +++ b/src/components/dashboard/OptionsButton.tsx @@ -3,11 +3,10 @@ import { useTranslation } from "react-i18next" import { Menu, Popover, Transition } from "@headlessui/react" +import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal" import { NoteType, PageVisibilityEnum } from "~/lib/types" import { cn } from "~/lib/utils" -import { DeleteConfirmationModal } from "./DeleteConfirmationModal" - export const OptionsButton = ({ visibility, previewPage, diff --git a/src/components/dashboard/PagesManagerBatchSelectActionTab.tsx b/src/components/dashboard/PagesManagerBatchSelectActionTab.tsx index f841c54d..bf987d34 100644 --- a/src/components/dashboard/PagesManagerBatchSelectActionTab.tsx +++ b/src/components/dashboard/PagesManagerBatchSelectActionTab.tsx @@ -4,14 +4,13 @@ import toast from "react-hot-toast" import type { InfiniteData } from "@tanstack/react-query" import { useQueryClient } from "@tanstack/react-query" +import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal" import { type TabItem, Tabs } from "~/components/ui/Tabs" import { useTranslation } from "~/lib/i18n/client" import { delStorage, getStorage, setStorage } from "~/lib/storage" import { ExpandedNote, NoteType } from "~/lib/types" import { useDeletePage, useUpdatePage } from "~/queries/page" -import { DeleteConfirmationModal } from "./DeleteConfirmationModal" - function getPageId(page: ExpandedNote) { return page.noteId || page.draftKey || 0 } diff --git a/src/components/dashboard/PagesManagerMenu.tsx b/src/components/dashboard/PagesManagerMenu.tsx index 7ae389e4..69c3fd66 100644 --- a/src/components/dashboard/PagesManagerMenu.tsx +++ b/src/components/dashboard/PagesManagerMenu.tsx @@ -5,6 +5,7 @@ import toast from "react-hot-toast" import { Menu } from "@headlessui/react" import { useQueryClient } from "@tanstack/react-query" +import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal" import { useGetState } from "~/hooks/useGetState" import { getNoteSlugFromNote, getTwitterShareUrl } from "~/lib/helpers" import { useTranslation } from "~/lib/i18n/client" @@ -13,8 +14,6 @@ import { ExpandedNote, NoteType } from "~/lib/types" import { useDeletePage, usePinPage, useUpdatePage } from "~/queries/page" import { useGetSite } from "~/queries/site" -import { DeleteConfirmationModal } from "./DeleteConfirmationModal" - const usePageEditLink = (page: ExpandedNote, type: NoteType) => { const params = useParams() const subdomain = params?.subdomain as string diff --git a/src/components/dashboard/PublishButton.tsx b/src/components/dashboard/PublishButton.tsx index e0a32447..fc9a0cdc 100644 --- a/src/components/dashboard/PublishButton.tsx +++ b/src/components/dashboard/PublishButton.tsx @@ -1,11 +1,11 @@ import { useEffect, useRef, useState } from "react" import useOnClickOutside from "use-onclickoutside" +import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal" import { useTranslation } from "~/lib/i18n/client" import { NoteType } from "~/lib/types" import { Button, ButtonGroup } from "../ui/Button" -import { DeleteConfirmationModal } from "./DeleteConfirmationModal" export const PublishButton = ({ savePage, diff --git a/src/lib/i18n/locales/zh/common.json b/src/lib/i18n/locales/zh/common.json index 9e65444c..c5af2c59 100644 --- a/src/lib/i18n/locales/zh/common.json +++ b/src/lib/i18n/locales/zh/common.json @@ -101,5 +101,10 @@ "Blockchain ID": "区块链标识", "Confirmed by {{blockNumber}} blocks": "已被 {{blockNumber}} 个区块确认", "Current Block Height": "当前区块高度", - "Portfolio": "作品" + "Portfolio": "作品", + "Delete": "删除", + "delete_confirmation_post": "你确定要删除这篇文章吗？", + "delete_confirmation_page": "你确定要删除这个页面吗？", + "delete_confirmation_comment": "你确定要删除这个评论吗？", + "delete_confirmation_portfolio": "你确定要删除这个作品吗？" } diff --git a/src/lib/i18n/locales/zh/dashboard.json b/src/lib/i18n/locales/zh/dashboard.json index 400ca088..df7819b3 100644 --- a/src/lib/i18n/locales/zh/dashboard.json +++ b/src/lib/i18n/locales/zh/dashboard.json @@ -203,11 +203,6 @@ "This week": "本周", "All time": "全部", "Confirm Deletion?": "确认删除？", - "delete_confirmation_post": "你确定要删除这篇文章吗？", - "delete_confirmation_page": "你确定要删除这个页面吗？", - "delete_confirmation_portfolio": "你确定要删除这个作品吗？", - "Confirm": "确认", - "Cancel": "取消", "Published a new post on my blockchain blog: {{title}}. Check it out now!": "在我的区块链博客发布了一篇新文章《{{title}}》，快来看看吧！", "Comments": "评论", "You can subscribe to comments through an RSS reader to receive timely reminders.": "你可以通过 RSS 阅读器订阅评论，以便及时收到提醒。",