1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
"use client";
import { useToast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { ZBookmark } from "@/lib/types/api/bookmarks";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Archive,
Link,
MoreHorizontal,
RotateCw,
Star,
Tags,
Trash2,
} from "lucide-react";
import { useTagModel } from "./TagModal";
export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
const { toast } = useToast();
const linkId = bookmark.id;
const [_, setTagModalIsOpen, tagModal] = useTagModel(bookmark);
const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
const onError = () => {
toast({
variant: "destructive",
title: "Something went wrong",
description: "There was a problem with your request.",
});
};
const onSettled = () => {
invalidateBookmarksCache();
};
const deleteBookmarkMutator = api.bookmarks.deleteBookmark.useMutation({
onSuccess: () => {
toast({
description: "The bookmark has been deleted!",
});
},
onError,
onSettled,
});
const updateBookmarkMutator = api.bookmarks.updateBookmark.useMutation({
onSuccess: () => {
toast({
description: "The bookmark has been updated!",
});
},
onError,
onSettled,
});
const crawlBookmarkMutator = api.bookmarks.recrawlBookmark.useMutation({
onSuccess: () => {
toast({
description: "Re-fetch has been enqueued!",
});
},
onError,
onSettled,
});
return (
<>
{tagModal}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost">
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-fit">
<DropdownMenuItem
onClick={() =>
updateBookmarkMutator.mutate({
bookmarkId: linkId,
favourited: !bookmark.favourited,
})
}
>
<Star className="mr-2 size-4" />
<span>{bookmark.favourited ? "Un-favourite" : "Favourite"}</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() =>
updateBookmarkMutator.mutate({
bookmarkId: linkId,
archived: !bookmark.archived,
})
}
>
<Archive className="mr-2 size-4" />
<span>{bookmark.archived ? "Un-archive" : "Archive"}</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
navigator.clipboard.writeText(bookmark.content.url);
toast({
description: "Link was added to your clipboard!",
});
}}
>
<Link className="mr-2 size-4" />
<span>Copy Link</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTagModalIsOpen(true)}>
<Tags className="mr-2 size-4" />
<span>Edit Tags</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() =>
crawlBookmarkMutator.mutate({ bookmarkId: bookmark.id })
}
>
<RotateCw className="mr-2 size-4" />
<span>Refresh</span>
</DropdownMenuItem>
<DropdownMenuItem
className="text-destructive"
onClick={() =>
deleteBookmarkMutator.mutate({ bookmarkId: bookmark.id })
}
>
<Trash2 className="mr-2 size-4" />
<span>Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
);
}
|
