Refactor: Use Radix UI Dialog

src/components/upload/PhotoManagementDialog.tsx

@@ -9,6 +9,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -43,6 +53,9 @@ export function PhotoManagementDialog({
   const [photos, setPhotos] = useState<Photo[]>([]);
   const [loading, setLoading] = useState(false);
   const [editingPhoto, setEditingPhoto] = useState<Photo | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [photoToDelete, setPhotoToDelete] = useState<Photo | null>(null);
+  const [deleteReason, setDeleteReason] = useState('');
   const { toast } = useToast();
 
   useEffect(() => {
@@ -77,9 +90,14 @@ export function PhotoManagementDialog({
 
 
 
-  const requestPhotoDelete = async (photoId: string, photo: Photo) => {
+  const handleDeleteClick = (photo: Photo) => {
-    const reason = prompt('Please provide a reason for deleting this photo:');
+    setPhotoToDelete(photo);
-    if (!reason) return;
+    setDeleteReason('');
+    setDeleteDialogOpen(true);
+  };
+
+  const requestPhotoDelete = async () => {
+    if (!photoToDelete || !deleteReason.trim()) return;
 
     try {
       // Get current user
@@ -93,10 +111,10 @@ export function PhotoManagementDialog({
           user_id: user.id,
           submission_type: 'photo_delete',
           content: {
-            photo_id: photoId,
+            photo_id: photoToDelete.id,
             entity_type: entityType,
             entity_id: entityId,
-            reason: reason
+            reason: deleteReason
           }
         }])
         .select()
@@ -111,12 +129,12 @@ export function PhotoManagementDialog({
           submission_id: submission.id,
           item_type: 'photo_delete',
           item_data: {
-            photo_id: photoId,
+            photo_id: photoToDelete.id,
             entity_type: entityType,
             entity_id: entityId,
-            cloudflare_image_url: photo.cloudflare_image_url,
+            cloudflare_image_url: photoToDelete.cloudflare_image_url,
-            caption: photo.caption,
+            caption: photoToDelete.caption,
-            reason: reason
+            reason: deleteReason
           },
           status: 'pending'
         });
@@ -127,6 +145,9 @@ export function PhotoManagementDialog({
         title: 'Delete request submitted',
         description: 'Your photo deletion request has been submitted for moderation',
       });
+      setDeleteDialogOpen(false);
+      setPhotoToDelete(null);
+      setDeleteReason('');
       onOpenChange(false);
     } catch (error) {
       console.error('Error requesting photo deletion:', error);
@@ -301,7 +322,7 @@ export function PhotoManagementDialog({
                         <Button
                           size="sm"
                           variant="destructive"
-                          onClick={() => requestPhotoDelete(photo.id, photo)}
+                          onClick={() => handleDeleteClick(photo)}
                           className="flex-1 sm:flex-initial"
                         >
                           <Trash2 className="w-4 h-4 mr-2" />
@@ -322,6 +343,44 @@ export function PhotoManagementDialog({
           </Button>
         </DialogFooter>
       </DialogContent>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Request Photo Deletion</AlertDialogTitle>
+            <AlertDialogDescription>
+              Please provide a reason for deleting this photo. This request will be reviewed by moderators.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          
+          <div className="space-y-2">
+            <Label htmlFor="delete-reason">Reason for deletion</Label>
+            <Textarea
+              id="delete-reason"
+              value={deleteReason}
+              onChange={(e) => setDeleteReason(e.target.value)}
+              placeholder="Please explain why this photo should be deleted..."
+              rows={3}
+            />
+          </div>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => {
+              setDeleteDialogOpen(false);
+              setPhotoToDelete(null);
+              setDeleteReason('');
+            }}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={requestPhotoDelete}
+              disabled={!deleteReason.trim()}
+            >
+              Submit Request
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Dialog>
   );
 }