lets users remove event submissions

Author: tonyqiu123

backend/apps/events/urls.py

@@ -21,6 +21,7 @@
     path("submissions/", views.get_submissions, name="get_submissions"),
     path("submissions/<int:submission_id>/process/", views.process_submission, name="process_submission"),
     path("submissions/<int:submission_id>/review/", views.review_submission, name="review_submission"),
+    path("submissions/<int:submission_id>/", views.delete_submission, name="delete_submission"),
     # Test endpoints
     path("test-similarity/", views.test_similarity, name="test_similarity"),
 ]

backend/apps/events/views.py

@@ -675,3 +675,33 @@ def get_user_submissions(request):
         return Response(data)
     except Exception as e:
         return Response({"error": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
+
+@api_view(["DELETE"])
+@permission_classes([ClerkAuthenticated])
+@ratelimit(key="ip", rate="30/hr", block=True)
+def delete_submission(request, submission_id): 
+    try:
+        submission = get_object_or_404(EventSubmission, id=submission_id)
+
+        current_user_id = (getattr(request, "clerk_user", None) or {}).get("id")
+        if not current_user_id or submission.submitted_by != current_user_id:
+            return Response({"error": "Not authorized to delete this submission"}, status=status.HTTP_403_FORBIDDEN)
+
+        if submission.status == "approved":
+            return Response({
+                "error": "Approved submissions cannot be removed. Contact support if needed."
+            }, status=status.HTTP_400_BAD_REQUEST)
+
+        # Delete linked event first (cascades to submission)
+        event = submission.created_event
+        if event:
+            event.delete()
+            return Response({"message": "Submission and linked event removed"}, status=status.HTTP_200_OK)
+
+        # Fallback: if no linked event, delete submission directly
+        submission.delete()
+        return Response({"message": "Submission removed"}, status=status.HTTP_200_OK)
+
+    except Exception as e:
+        return Response({"error": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

backend/scraping/generate_static_data.py

@@ -12,6 +12,9 @@
 
 load_dotenv()
 
+# Ensure this script always uses development settings, even in CI environments
+os.environ["PRODUCTION"] = "0"
+
 os.environ.setdefault(
     "DJANGO_SETTINGS_MODULE",
     os.getenv("DJANGO_SETTINGS_MODULE", "config.settings.development"),

frontend/src/features/events/hooks/useUserSubmissions.ts

@@ -1,16 +1,33 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useApi } from '@/shared/hooks/useApi';
 import { useAuth } from '@clerk/clerk-react';
+import type { EventSubmission } from '@/features/events/types/submission';
 
 export const useUserSubmissions = () => {
   const { isSignedIn, userId } = useAuth();
   const { events } = useApi();
+  const queryClient = useQueryClient();
 
-  return useQuery({
+  // Fetch current user's submissions
+  const submissionsQuery = useQuery<EventSubmission[]>({
     queryKey: ['user-submissions', userId],
     queryFn: () => events.getUserSubmissions(),
     enabled: isSignedIn && !!userId,
     staleTime: 30 * 1000, // 30 seconds - submissions don't change often
     gcTime: 5 * 60 * 1000, // 5 minutes
   });
+
+  // Delete a submission owned by the current user
+  const { mutate: removeSubmission, isPending: isDeleting } = useMutation({
+    mutationFn: (submissionId: number) => events.deleteSubmission(submissionId),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['user-submissions'] });
+    },
+  });
+
+  return {
+    ...submissionsQuery,
+    removeSubmission,
+    isDeleting,
+  };
 };

frontend/src/features/events/pages/MySubmissionsPage.tsx

@@ -1,55 +1,75 @@
-import { useUserSubmissions } from '@/features/events/hooks/useUserSubmissions'
-import { Card, CardContent, CardHeader, CardTitle } from '@/shared/components/ui/card'
-import { Badge } from '@/shared/components/ui/badge'
-import { Button } from '@/shared/components/ui/button'
-import { Calendar, ExternalLink, Clock, CheckCircle, XCircle, AlertCircle } from 'lucide-react'
-import { formatPrettyDate } from '@/shared/lib/dateUtils'
-import type { EventSubmission } from '@/features/events/types/submission'
-import { useNavigate } from 'react-router-dom'
+import { useUserSubmissions } from "@/features/events/hooks/useUserSubmissions";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/components/ui/card";
+import { Badge } from "@/shared/components/ui/badge";
+import { Button } from "@/shared/components/ui/button";
+import {
+  Calendar,
+  ExternalLink,
+  Clock,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Trash2,
+} from "lucide-react";
+import { formatPrettyDate } from "@/shared/lib/dateUtils";
+import type { EventSubmission } from "@/features/events/types/submission";
+import { useNavigate } from "react-router-dom";
 
 export function MySubmissionsPage() {
-  const { data: submissions = [], isLoading } = useUserSubmissions()
-  const navigate = useNavigate()    
+  const {
+    data: submissions = [],
+    isLoading,
+    removeSubmission,
+    isDeleting,
+  } = useUserSubmissions();
+  const navigate = useNavigate();
   // Type assertion to fix TypeScript issues
-  const submissionsArray = submissions as EventSubmission[]
+  const submissionsArray = submissions as EventSubmission[];
 
   const getStatusIcon = (status: string) => {
     switch (status) {
-      case 'approved':
-        return <CheckCircle className="h-4 w-4 text-green-600" />
-      case 'rejected':
-        return <XCircle className="h-4 w-4 text-red-600" />
-      case 'pending':
-        return <AlertCircle className="h-4 w-4 text-yellow-600" />
+      case "approved":
+        return <CheckCircle className="h-4 w-4 text-green-600" />;
+      case "rejected":
+        return <XCircle className="h-4 w-4 text-red-600" />;
+      case "pending":
+        return <AlertCircle className="h-4 w-4 text-yellow-600" />;
       default:
-        return <AlertCircle className="h-4 w-4 text-gray-600" />
+        return <AlertCircle className="h-4 w-4 text-gray-600" />;
     }
-  }
+  };
 
   const getStatusBadgeVariant = (status: string) => {
     switch (status) {
-      case 'approved':
-        return 'default' as const
-      case 'rejected':
-        return 'destructive' as const
-      case 'pending':
-        return 'secondary' as const
+      case "approved":
+        return "default" as const;
+      case "rejected":
+        return "destructive" as const;
+      case "pending":
+        return "secondary" as const;
       default:
-        return 'outline' as const
+        return "outline" as const;
     }
-  }
+  };
 
   if (isLoading) {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-6xl mx-auto">
           <div className="text-center py-12">
             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
-            <p className="mt-4 text-gray-600 dark:text-gray-400">Loading your submissions...</p>
+            <p className="mt-4 text-gray-600 dark:text-gray-400">
+              Loading your submissions...
+            </p>
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -77,7 +97,7 @@ export function MySubmissionsPage() {
                 <p className="text-gray-600 dark:text-gray-400 mb-6">
                   Submit your first event to get started!
                 </p>
-                <Button onClick={() => navigate('/submit')}>
+                <Button onClick={() => navigate("/submit")}>
                   Submit Event
                 </Button>
               </div>
@@ -86,12 +106,17 @@ export function MySubmissionsPage() {
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {submissionsArray.map((submission) => (
-              <Card key={submission.id} className="hover:shadow-lg transition-shadow">
+              <Card
+                key={submission.id}
+                className="hover:shadow-lg transition-shadow"
+              >
                 <CardHeader className="pb-3">
                   <div className="flex items-start justify-between">
                     <div className="flex items-center gap-2">
                       {getStatusIcon(submission.status)}
-                      <CardTitle className="text-lg">Submission #{submission.id}</CardTitle>
+                      <CardTitle className="text-lg">
+                        Submission #{submission.id}
+                      </CardTitle>
                     </div>
                     <Badge variant={getStatusBadgeVariant(submission.status)}>
                       {submission.status}
@@ -162,19 +187,42 @@ export function MySubmissionsPage() {
                       <Button
                         variant="outline"
                         size="sm"
-                        onClick={() => navigate(`/events/${submission.created_event_id}`)}
+                        onClick={() =>
+                          navigate(`/events/${submission.created_event_id}`)
+                        }
                         className="w-full"
                       >
                         View Created Event
                       </Button>
                     </div>
                   )}
+
+                  {/* Remove Button (only if not approved) */}
+                  {submission.status !== "approved" && (
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      className="w-full"
+                      disabled={isDeleting}
+                      onClick={() => {
+                        const confirmed = window.confirm(
+                          "Remove this submission? If it created an event, that event will also be removed. This cannot be undone."
+                        );
+                        if (confirmed) {
+                          removeSubmission(submission.id);
+                        }
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Remove Submission
+                    </Button>
+                  )}
                 </CardContent>
               </Card>
             ))}
           </div>
         )}
       </div>
     </div>
-  )
+  );
 }

frontend/src/features/events/pages/SubmitEventPage.tsx

@@ -136,7 +136,7 @@ export function SubmitEventPage() {
                   <Input
                     id="source_url"
                     type="url"
-                    placeholder="https://example.com/event-page"
+                    placeholder="https://wusa.ca/event/watch-party"
                     className="h-12 text-base"
                     {...register('source_url')}
                     disabled={isLoading}

frontend/src/shared/api/EventsAPIClient.ts

@@ -142,6 +142,14 @@ class EventsAPIClient {
     );
   }
 
+  /**
+   * Deletes a user's own submission.
+   * Corresponds to a DELETE request to /api/events/submissions/{id}/
+   */
+  async deleteSubmission(submissionId: number): Promise<{ message: string }> {
+    return this.apiClient.delete(`events/submissions/${submissionId}/`);
+  }
+
   /**
    * Exports events as ICS file.
    * Corresponds to a GET request to /api/events/export/ics/