👁️
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

clone button

+35 -2
+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" />