👁️
clone button
+35
-2
+35
-2
src/components/deck/DeckActionsMenu.tsx
+35
-2
src/components/deck/DeckActionsMenu.tsx
···
1
1
import { useQueryClient } from "@tanstack/react-query";
2
2
import { Link } from "@tanstack/react-router";
3
-
import { Download, MoreVertical, Play, Trash2 } from "lucide-react";
3
+
import { Copy, Download, MoreVertical, Play, Trash2 } from "lucide-react";
4
4
import { useEffect, useRef, useState } from "react";
5
5
import { toast } from "sonner";
6
6
import { DeleteDeckDialog } from "@/components/deck/DeleteDeckDialog";
7
7
import type { Rkey } from "@/lib/atproto-client";
8
8
import { getCardDataProvider } from "@/lib/card-data-provider";
9
9
import { prefetchCards } from "@/lib/card-prefetch";
10
-
import { useDeleteDeckMutation } from "@/lib/deck-queries";
10
+
import {
11
+
useCreateDeckMutation,
12
+
useDeleteDeckMutation,
13
+
} from "@/lib/deck-queries";
11
14
import type { Deck } from "@/lib/deck-types";
12
15
import {
13
16
findAllCanonicalPrintings,
···
15
18
updateDeckPrintings,
16
19
} from "@/lib/printing-selection";
17
20
import type { ScryfallId } from "@/lib/scryfall-types";
21
+
import { useAuth } from "@/lib/useAuth";
18
22
19
23
interface DeckActionsMenuProps {
20
24
deck: Deck;
···
33
37
onCardsChanged,
34
38
readOnly = false,
35
39
}: DeckActionsMenuProps) {
40
+
const { session } = useAuth();
36
41
const queryClient = useQueryClient();
37
42
const [isOpen, setIsOpen] = useState(false);
38
43
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
39
44
const menuRef = useRef<HTMLDivElement>(null);
40
45
const deleteMutation = useDeleteDeckMutation(rkey);
46
+
const cloneMutation = useCreateDeckMutation();
41
47
42
48
useEffect(() => {
43
49
const handleClickOutside = (event: MouseEvent) => {
···
99
105
}
100
106
};
101
107
108
+
const handleClone = () => {
109
+
setIsOpen(false);
110
+
const cloneName = `Copy of ${deck.name}`;
111
+
cloneMutation.mutate(
112
+
{
113
+
name: cloneName,
114
+
format: deck.format,
115
+
primer: deck.primer,
116
+
cards: deck.cards,
117
+
},
118
+
{
119
+
onSuccess: () => toast.success(`Created "${cloneName}"`),
120
+
},
121
+
);
122
+
};
123
+
102
124
return (
103
125
<div className="relative" ref={menuRef}>
104
126
<button
···
131
153
<Download size={14} />
132
154
Export
133
155
</Link>
156
+
{session && (
157
+
<button
158
+
type="button"
159
+
onClick={handleClone}
160
+
disabled={cloneMutation.isPending}
161
+
className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors text-gray-900 dark:text-white text-sm flex items-center gap-2 disabled:opacity-50"
162
+
>
163
+
<Copy size={14} />
164
+
{cloneMutation.isPending ? "Cloning..." : "Clone"}
165
+
</button>
166
+
)}
134
167
{!readOnly && (
135
168
<>
136
169
<div className="border-t border-gray-200 dark:border-zinc-600" />