yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import type { ApolloCache, NormalizedCacheObject } from "@apollo/client";
2import { MenuItem } from "@headlessui/react";
3import { CheckCircleIcon, NoSymbolIcon } from "@heroicons/react/24/outline";
4import {
5 type PostFragment,
6 useHideReplyMutation,
7 useUnhideReplyMutation
8} from "@hey/indexer";
9import type { ApolloClientError } from "@hey/types/errors";
10import { useCallback } from "react";
11import { toast } from "sonner";
12import { useHiddenCommentFeedStore } from "@/components/Post";
13import cn from "@/helpers/cn";
14import errorToast from "@/helpers/errorToast";
15import stopEventPropagation from "@/helpers/stopEventPropagation";
16import { useAccountStore } from "@/store/persisted/useAccountStore";
17
18interface HideCommentProps {
19 post: PostFragment;
20}
21
22const HideComment = ({ post }: HideCommentProps) => {
23 const { currentAccount } = useAccountStore();
24 const { showHiddenComments } = useHiddenCommentFeedStore();
25
26 const updateCache = (cache: ApolloCache<NormalizedCacheObject>) => {
27 cache.evict({ id: cache.identify(post) });
28 };
29
30 const onError = useCallback((error: ApolloClientError) => {
31 errorToast(error);
32 }, []);
33
34 const [hideComment] = useHideReplyMutation({
35 onCompleted: () => {
36 toast.success("Comment hidden");
37 },
38 onError,
39 update: updateCache,
40 variables: { request: { post: post.id } }
41 });
42
43 const [unhideComment] = useUnhideReplyMutation({
44 onCompleted: () => {
45 toast.success("Comment unhidden");
46 },
47 onError,
48 update: updateCache,
49 variables: { request: { post: post.id } }
50 });
51
52 const canHideComment = currentAccount?.address !== post?.author?.address;
53
54 if (!canHideComment) {
55 return null;
56 }
57
58 const handleToggleHideComment = async () => {
59 if (showHiddenComments) {
60 return await unhideComment();
61 }
62
63 return await hideComment();
64 };
65
66 return (
67 <MenuItem
68 as="div"
69 className={({ focus }) =>
70 cn(
71 { "dropdown-active": focus },
72 "m-2 block cursor-pointer rounded-lg px-2 py-1.5 text-sm"
73 )
74 }
75 onClick={(event) => {
76 stopEventPropagation(event);
77 handleToggleHideComment();
78 }}
79 >
80 <div className="flex items-center space-x-2">
81 {showHiddenComments ? (
82 <>
83 <CheckCircleIcon className="size-4" />
84 <div>Unhide comment</div>
85 </>
86 ) : (
87 <>
88 <NoSymbolIcon className="size-4" />
89 <div>Hide comment</div>
90 </>
91 )}
92 </div>
93 </MenuItem>
94 );
95};
96
97export default HideComment;