fix eventdetailspage user auth

tonyqiu123 · tonyqiu123 · commit 676d5cf79ae4 · 2025-11-06T11:23:16.000-05:00
diff --git a/backend/apps/core/auth.py b/backend/apps/core/auth.py
@@ -59,6 +59,41 @@ def _wrapped_view(request, *args, **kwargs):
     return _wrapped_view
 
 
+def optional_jwt(view_func):
+    """
+    Optional JWT authentication decorator.
+    If a token is provided and valid, populates request.auth_payload.
+    If no token or invalid token, continues without error (for public endpoints).
+    """
+    @wraps(view_func)
+    def _wrapped_view(request, *args, **kwargs):
+        try:
+            state = authenticate_request(
+                request,
+                AuthenticateRequestOptions(
+                    secret_key=CLERK_SECRET_KEY,
+                    authorized_parties=CLERK_AUTHORIZED_PARTIES,
+                ),
+            )
+            
+            if state.is_signed_in:
+                request.auth_payload = state.payload
+                django_user = AnonymousUser()
+                django_user.username = state.payload.get("sub") or "clerk_user"
+                request.user = django_user
+            else:
+                # No token or invalid token - that's fine, just continue
+                request.auth_payload = {}
+                request.user = AnonymousUser()
+        except Exception:
+            # Any error during auth - that's fine, just continue
+            request.auth_payload = {}
+            request.user = AnonymousUser()
+        
+        return view_func(request, *args, **kwargs)
+    return _wrapped_view
+
+
 def admin_required(view_func):
     @wraps(view_func)
     @jwt_required
diff --git a/backend/apps/events/views.py b/backend/apps/events/views.py
@@ -2,7 +2,7 @@
 from datetime import timedelta
 import pytz
 
-from apps.core.auth import jwt_required, admin_required
+from apps.core.auth import jwt_required, admin_required, optional_jwt
 from django.conf import settings
 from django.db import transaction
 from django.db.models import Q
@@ -188,6 +188,7 @@ def get_events(request):
 
 @api_view(["GET"])
 @permission_classes([AllowAny])
+@optional_jwt
 @ratelimit(key="ip", rate="60/hr", block=True)
 def get_event(request, event_id):
     """Get a single event by ID with upcoming dates"""
@@ -206,12 +207,22 @@ def get_event(request, event_id):
         
         event_data["display_handle"] = events_utils.determine_display_handle(event_data)
         
-        # Get upcoming event dates
-        upcoming_dates = EventDates.objects.filter(
-            event_id=event_id, dtstart_utc__gte=timezone.now()
-        ).order_by('dtstart_utc')[:10].values("dtstart_utc", "dtend_utc")
+        # Check if user is submitter or admin (optional_jwt sets auth_payload)
+        auth_payload = request.auth_payload
+        user_id = auth_payload.get("sub") or auth_payload.get("id")
+        is_admin = auth_payload.get("role") == "admin"
+        
+        submission = EventSubmission.objects.filter(created_event_id=event_id).first()
+        is_submitter = submission and user_id and str(submission.submitted_by) == str(user_id)
+        
+        event_data["is_submitter"] = is_submitter
+        event_data["screenshot_url"] = submission.screenshot_url if (is_admin or is_submitter) and submission else None
         
-        event_data["upcoming_dates"] = list(upcoming_dates)
+        # Get upcoming event dates
+        event_data["upcoming_dates"] = list(
+            EventDates.objects.filter(event_id=event_id, dtstart_utc__gte=timezone.now())
+            .order_by('dtstart_utc')[:10].values("dtstart_utc", "dtend_utc")
+        )
 
         return Response(event_data)
 
diff --git a/frontend/src/features/events/hooks/useEvents.ts b/frontend/src/features/events/hooks/useEvents.ts
@@ -31,7 +31,7 @@ export function useEvents() {
     hasNextPage,
     isFetchingNextPage,
   } = useInfiniteQuery<EventsResponse, Error, any, string[], string | undefined>({
-    queryKey: ["events", searchTerm, categories, dtstart_utc, addedAt, view],
+    queryKey: ["events", searchTerm, categories, dtstart_utc, addedAt, view, showInterested ? "interested" : ""],
     queryFn: async ({ pageParam }: { pageParam: string | undefined }) => {
       const queryParams: Record<string, any> = {
         limit: 30, // Load 30 events at a time
@@ -62,6 +62,12 @@ export function useEvents() {
         queryParams.all = true;
       }
 
+      // When viewing Interested, reveal all interested from 2025-01-01
+      if (showInterested) {
+        queryParams.all = true;
+        queryParams.dtstart_utc = formatDtstartToMidnight("2025-01-01");
+      }
+
       return eventsAPIClient.getEvents(queryParams);
     },
     initialPageParam: undefined as string | undefined,
@@ -169,10 +175,14 @@ export function useEvents() {
       const nextParams = new URLSearchParams(prev);
 
       if (showInterested) {
+        // When deselecting interested, remove all filters to show upcoming events
         nextParams.delete("interested");
+        nextParams.delete("dtstart_utc");
+        nextParams.delete("added_at");
       } else {
         nextParams.set("interested", "true");
-        nextParams.delete("dtstart_utc");
+        // Reveal all interested from 2025-01-01
+        nextParams.set("dtstart_utc", formatDtstartToMidnight("2025-01-01"));
         nextParams.delete("added_at");
       }
       return nextParams;
diff --git a/frontend/src/features/events/pages/EventDetailPage.tsx b/frontend/src/features/events/pages/EventDetailPage.tsx
@@ -2,7 +2,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
 import { useState, useEffect } from "react";
-import { useAuth } from "@clerk/clerk-react";
+import { useAuth, useUser } from "@clerk/clerk-react";
 import {
   ArrowLeft,
   Calendar,
@@ -26,8 +26,12 @@ import { getEventStatus, isEventNew } from "@/shared/lib/eventUtils";
 import { Event } from "@/features/events/types/events";
 import BadgeMask from "@/shared/components/ui/badge-mask";
 
-const fetchEvent = async (eventId: string): Promise<Event> => {
-  const response = await fetch(`${API_BASE_URL}/events/${eventId}`);
+const fetchEvent = async (eventId: string, token?: string | null): Promise<Event> => {
+  const headers: HeadersInit = {};
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+  const response = await fetch(`${API_BASE_URL}/events/${eventId}`, { headers });
   if (!response.ok) {
     throw new Error("Event not found");
   }
@@ -86,6 +90,8 @@ const OrganizationBadge = ({ event }: { event: Event }) => {
 
 function EventDetailPage() {
   const { eventId } = useParams<{ eventId: string }>();
+  const { user } = useUser();
+  const isAdmin = user?.publicMetadata?.role === 'admin';
   const navigate = useNavigate();
   const { getToken } = useAuth();
   const queryClient = useQueryClient();
@@ -95,45 +101,19 @@ function EventDetailPage() {
 
   const { data: event, isLoading, error } = useQuery({
     queryKey: ["event", eventId],
-    queryFn: () => fetchEvent(eventId!),
-    enabled: !!eventId,
-  });
-
-  // Fetch submission info to check if user is submitter or admin
-  const { data: submissionInfo, isLoading: isSubmissionLoading } = useQuery({
-    queryKey: ["event-submission", eventId],
     queryFn: async () => {
-      try {
-        const token = await getToken();
-        const headers: HeadersInit = {};
-        if (token) {
-          headers.Authorization = `Bearer ${token}`;
-        }
-        
-        const response = await fetch(`${API_BASE_URL}/events/${eventId}/submission/`, {
-          headers,
-        });
-        if (!response.ok) throw new Error("Failed to fetch submission info");
-        return response.json();
-      } catch (error) {
-        console.error("Error fetching submission info:", error);
-        return { is_submitter: false, is_admin: false };
-      }
+      const token = await getToken();
+      return fetchEvent(eventId!, token);
     },
     enabled: !!eventId,
   });
 
   // Initialize editedData when event loads for pending events or for admins
-  // Filter to only show user-editable fields
   useEffect(() => {
-    if (event && !editedData && submissionInfo) {
-      const shouldEdit = (event.status === "PENDING" && (submissionInfo.is_submitter || submissionInfo.is_admin)) || submissionInfo.is_admin;
+    if (event && !editedData) {
+      const shouldEdit = (event.status === "PENDING" && (event as any).is_submitter) || isAdmin;
       if (shouldEdit) {
-        // Filter to only user-editable fields (same as submission form)
-        const allowedFields = new Set([
-          'title', 'dtstart', 'dtend', 'all_day', 'location', 
-          'price', 'food', 'registration', 'description'
-        ]);
+        const allowedFields = new Set(['title', 'dtstart', 'dtend', 'all_day', 'location', 'price', 'food', 'registration', 'description']);
         const filteredData: any = {};
         for (const field of Object.keys(event)) {
           if (allowedFields.has(field)) {
@@ -143,7 +123,7 @@ function EventDetailPage() {
         setEditedData(filteredData);
       }
     }
-  }, [event, submissionInfo, editedData]);
+  }, [event, editedData, isAdmin]);
 
   // Mutation for updating event
   const updateEventMutation = useMutation({
@@ -200,14 +180,11 @@ function EventDetailPage() {
     setEditError(null);
   };
 
-  // Determine if user can edit this event
-  const canEditEvent = submissionInfo?.is_submitter || submissionInfo?.is_admin;
-  
-  // Check if event is pending and user cannot view it (only check after submissionInfo is loaded)
-  const isPendingAndUnauthorized = event?.status === "PENDING" && !canEditEvent && !isSubmissionLoading;
+  const canEditEvent = (event as any)?.is_submitter || isAdmin;
+  const isPendingAndUnauthorized = event?.status === "PENDING" && !canEditEvent;
 
   // Show loading while either query is loading
-  if (isLoading || (event?.status === "PENDING" && isSubmissionLoading)) {
+  if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-[400px]">
         <div className="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
@@ -237,7 +214,7 @@ function EventDetailPage() {
   }
 
   // Render edit mode for pending events when user has permission, OR for admins regardless of status
-  if ((event.status === "PENDING" && canEditEvent) || submissionInfo?.is_admin) {
+  if ((event.status === "PENDING" && canEditEvent) || isAdmin) {
     return (
       <div className="max-w-4xl mx-auto">
         <SEOHead
@@ -255,12 +232,12 @@ function EventDetailPage() {
         </div>
 
         {/* Original Screenshot (if available for submitter/admin) */}
-        {submissionInfo?.screenshot_url && (
+        {(event as any)?.screenshot_url && (
           <div className="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
             <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Original Screenshot</h2>
             <div className="relative w-full max-w-2xl mx-auto">
               <img
-                src={submissionInfo.screenshot_url}
+                src={(event as any).screenshot_url}
                 alt="Original event screenshot"
                 className="w-full h-auto rounded-lg shadow-lg"
               />
@@ -581,20 +558,28 @@ function EventDetailPage() {
                       </p>
                     </div>
                   </div>
-                  {/* Google Maps Embed */}
-                  <div className="w-full h-64 rounded-lg overflow-hidden">
-                    <iframe
-                      width="100%"
-                      height="100%"
-                      style={{ border: 0 }}
-                      loading="lazy"
-                      allowFullScreen
-                      referrerPolicy="no-referrer-when-downgrade"
-                      src={`https://www.google.com/maps/embed/v1/place?key=${
-                        import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ""
-                      }&q=${encodeURIComponent(`${event.location}, ${event.school || ""}`)}`}
-                    ></iframe>
-                  </div>
+                  {/* Google Maps Embed - Only show for physical locations */}
+                  {(() => {
+                    const locationLower = event.location.toLowerCase();
+                    const isVirtual = locationLower.includes("virtual") || 
+                                     locationLower.includes("zoom") || 
+                                     locationLower.includes("google meet");
+                    return !isVirtual && (
+                      <div className="w-full h-64 rounded-lg overflow-hidden">
+                        <iframe
+                          width="100%"
+                          height="100%"
+                          style={{ border: 0 }}
+                          loading="lazy"
+                          allowFullScreen
+                          referrerPolicy="no-referrer-when-downgrade"
+                          src={`https://www.google.com/maps/embed/v1/place?key=${
+                            import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ""
+                          }&q=${encodeURIComponent(`${event.location}, ${event.school || ""}`)}`}
+                        ></iframe>
+                      </div>
+                    );
+                  })()}
                 </div>
               )}
 
@@ -708,7 +693,7 @@ function EventDetailPage() {
       </motion.div>
 
       {/* Original Screenshot (if available for submitter/admin) */}
-      {canEditEvent && submissionInfo?.screenshot_url && (
+      {(event as any)?.screenshot_url && (
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -721,7 +706,7 @@ function EventDetailPage() {
             </h3>
             <div className="relative w-full">
               <img
-                src={submissionInfo.screenshot_url}
+                src={(event as any).screenshot_url}
                 alt="Original event screenshot"
                 className="w-full h-auto rounded-lg shadow-lg"
               />
diff --git a/frontend/src/features/events/pages/EventsPage.tsx b/frontend/src/features/events/pages/EventsPage.tsx
@@ -161,15 +161,7 @@ function EventsPage() {
                   Interested
                 </FilterButton>
               )}
-              {!isShowingNewEvents && !showInterested && (
-                <FilterButton
-                  isActive={isShowingPastEvents}
-                  onToggle={handleToggleStartDate}
-                  icon={<History className="h-4 w-4" />}
-                >
-                  All
-                </FilterButton>
-              )}
+              {/* Removed the 'All' button as requested */}
               {view === "grid" && (
                 <FilterButton
                   isActive={isSelectMode}
