fix bug where events with multiple occurences show up as past event

Author: Tony Qiu

backend/apps/events/views.py

@@ -132,19 +132,30 @@ def get_events(request):
                 Prefetch('event_dates', queryset=EventDates.objects.order_by('dtstart_utc'))
             )[:limit + 1])
 
-        # Build results with earliest occurrence dates
+        # Build results with most recent upcoming occurrence dates
         results = []
+        now = timezone.now()
+        ninety_minutes_ago = now - timedelta(minutes=90)
+        
         for event in events_list:
-            event_dates = list(event.event_dates.all())
-            earliest_date = event_dates[0] if event_dates else None
+            # Get all event dates and filter for upcoming ones
+            all_dates = list(event.event_dates.all())
+            # Filter to only upcoming dates (>= ninety_minutes_ago to match the filter logic)
+            upcoming_dates = [
+                date for date in all_dates 
+                if date.dtstart_utc >= ninety_minutes_ago
+            ]
+            # Select the most recent upcoming date (first one since they're ordered by dtstart_utc)
+            # If no upcoming dates, fall back to the earliest date overall
+            selected_date = upcoming_dates[0] if upcoming_dates else (all_dates[0] if all_dates else None)
 
             event_data = {
                 "id": event.id,
                 "title": event.title,
                 "description": event.description,
                 "location": event.location,
-                "dtstart_utc": earliest_date.dtstart_utc if earliest_date else None,
-                "dtend_utc": earliest_date.dtend_utc if earliest_date else None,
+                "dtstart_utc": selected_date.dtstart_utc if selected_date else None,
+                "dtend_utc": selected_date.dtend_utc if selected_date else None,
                 "price": event.price,
                 "food": event.food,
                 "registration": event.registration,

frontend/src/features/admin/pages/SubmissionsReviewPage.tsx

@@ -5,7 +5,7 @@ import { ArrowLeft } from "lucide-react";
 import { useSubmissionsReview } from "@/features/admin/hooks/useSubmissionsReview";
 import { Badge } from "@/shared/components/ui/badge";
 import { Loading } from "@/shared/components/ui/loading";
-import { getSubmissionStatusVariant } from "@/shared/components/badges/EventBadges";
+import { getSubmissionStatusVariant } from "@/shared/lib/eventUtils";
 
 export function SubmissionsReviewPage() {
   const { signOut } = useClerk();

frontend/src/features/clubs/hooks/useClubs.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, type InfiniteData } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
 import { useApi } from "@/shared/hooks/useApi";
 import type { ClubsResponse } from "@/shared/api";
@@ -17,10 +17,10 @@ export function useClubs() {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useInfiniteQuery<ClubsResponse, Error, any, string[], string | undefined>({
+  } = useInfiniteQuery<ClubsResponse, Error, ClubsResponse, string[], string | undefined>({
     queryKey: ["clubs", searchTerm, categoryFilter],
     queryFn: async ({ pageParam }: { pageParam: string | undefined }) => {
-      const queryParams: Record<string, any> = {};
+      const queryParams: Record<string, string | undefined> = {};
 
       if (pageParam) {
         queryParams.cursor = pageParam;
@@ -44,12 +44,13 @@ export function useClubs() {
 
   // Flatten all pages into a single array of clubs
   const clubs = useMemo(() => {
-    if (!data?.pages) return [];
-    return data.pages.flatMap((page: ClubsResponse) => page.results);
+    const infiniteData = data as unknown as InfiniteData<ClubsResponse> | undefined;
+    if (!infiniteData?.pages) return [];
+    return infiniteData.pages.flatMap((page: ClubsResponse) => page.results);
   }, [data]);
 
   // Get total count from first page
-  const totalCount = (data?.pages?.[0] as ClubsResponse | undefined)?.totalCount ?? 0;
+  const totalCount = ((data as unknown as InfiniteData<ClubsResponse>)?.pages?.[0] as ClubsResponse | undefined)?.totalCount ?? 0;
 
   const uniqueCategories = useMemo(() => {
     return [

frontend/src/features/events/components/EventEditForm.tsx

@@ -42,8 +42,8 @@ export function EventEditForm({ event }: EventEditFormProps) {
   });
 
   const updateEventMutation = useMutation({
-    mutationFn: (eventData: any) =>
-      eventsAPIClient.updateEvent(Number(event.id), eventData),
+    mutationFn: (eventData: EventFormData) =>
+      eventsAPIClient.updateEvent(Number(event.id), eventData as unknown as Record<string, unknown>),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["event", event.id] });
       toast.success("Event updated successfully");
@@ -79,7 +79,7 @@ export function EventEditForm({ event }: EventEditFormProps) {
         dtend_utc: d.dtend_local ? localToUtc(d.dtend_local) : null,
       })),
     };
-    updateEventMutation.mutate(submitData);
+    updateEventMutation.mutate(submitData as unknown as EventFormData);
   };
 
   const handleApprove = () => {

frontend/src/features/events/components/EventFormFields.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { useFieldArray } from "react-hook-form";
+import { useFieldArray, type UseFormReturn } from "react-hook-form";
 import { Plus, Trash2, Undo2 } from "lucide-react";
 import { Button } from "@/shared/components/ui/button";
 import { Input } from "@/shared/components/ui/input";
@@ -36,7 +36,7 @@ interface DeletedDate {
 }
 
 interface EventFormFieldsProps {
-  form: any; // UseFormReturn from react-hook-form
+  form: UseFormReturn<EventFormData>;
   isDisabled?: boolean;
   showUndoHistory?: boolean;
 }

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

@@ -1,6 +1,8 @@
 import { useMutation, useQuery, useQueryClient, InfiniteData } from "@tanstack/react-query";
 import { useAuth } from "@clerk/clerk-react";
 import { useApi } from "@/shared/hooks/useApi";
+import type { EventsResponse } from "@/shared/api/EventsAPIClient";
+import type { Event } from "@/features/events/types/events";
 
 /**
  * Hook to get all event IDs the current user is interested in
@@ -59,14 +61,14 @@ export function useToggleEventInterest(eventId: number) {
       });
 
       // Optimistically update event interest counts in events list (infinite query structure)
-      queryClient.setQueriesData<InfiniteData<any>>({ queryKey: ["events"] }, (oldData) => {
+      queryClient.setQueriesData<InfiniteData<EventsResponse>>({ queryKey: ["events"] }, (oldData) => {
         if (!oldData?.pages) return oldData;
 
         return {
           ...oldData,
-          pages: oldData.pages.map((page: any) => ({
+          pages: oldData.pages.map((page: EventsResponse) => ({
             ...page,
-            results: page.results.map((event: any) => {
+            results: page.results.map((event: Event) => {
               if (event.id === eventId) {
                 const delta = nextInterested ? 1 : -1;
                 return {
@@ -84,14 +86,14 @@ export function useToggleEventInterest(eventId: number) {
     },
     onSuccess: (response) => {
       // Update the event's interest count with the actual server value (infinite query structure)
-      queryClient.setQueriesData<InfiniteData<any>>({ queryKey: ["events"] }, (oldData) => {
+      queryClient.setQueriesData<InfiniteData<EventsResponse>>({ queryKey: ["events"] }, (oldData) => {
         if (!oldData?.pages) return oldData;
 
         return {
           ...oldData,
-          pages: oldData.pages.map((page: any) => ({
+          pages: oldData.pages.map((page: EventsResponse) => ({
             ...page,
-            results: page.results.map((event: any) => {
+            results: page.results.map((event: Event) => {
               if (event.id === eventId) {
                 return {
                   ...event,
@@ -111,14 +113,14 @@ export function useToggleEventInterest(eventId: number) {
       }
 
       // Rollback event interest count (infinite query structure)
-      queryClient.setQueriesData<InfiniteData<any>>({ queryKey: ["events"] }, (oldData) => {
+      queryClient.setQueriesData<InfiniteData<EventsResponse>>({ queryKey: ["events"] }, (oldData) => {
         if (!oldData?.pages) return oldData;
 
         return {
           ...oldData,
-          pages: oldData.pages.map((page: any) => ({
+          pages: oldData.pages.map((page: EventsResponse) => ({
             ...page,
-            results: page.results.map((event: any) => {
+            results: page.results.map((event: Event) => {
               if (event.id === eventId) {
                 const delta = nextInterested ? -1 : 1; // Reverse the optimistic update
                 return {

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

@@ -1,12 +1,12 @@
 import { useMemo, useRef } from "react";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, type InfiniteData } from "@tanstack/react-query";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import { useAuth } from "@clerk/clerk-react";
 import { useDocumentTitle } from "@/shared/hooks/useDocumentTitle";
 import { useApi } from "@/shared/hooks/useApi";
 import { getTodayString } from "@/shared/lib/dateUtils";
 import { useMyInterestedEvents } from "./useEventInterest";
-import { EventsResponse } from "@/shared/api/EventsAPIClient";
+import { EventsResponse, type EventsQueryParams } from "@/shared/api/EventsAPIClient";
 import { Event } from "@/features/events";
 
 export function useEvents() {
@@ -33,7 +33,7 @@ export function useEvents() {
   } = useInfiniteQuery<
     EventsResponse,
     Error,
-    any,
+    EventsResponse,
     string[],
     string | undefined
   >({
@@ -47,7 +47,7 @@ export function useEvents() {
       showInterested ? "interested" : "",
     ],
     queryFn: async ({ pageParam }: { pageParam: string | undefined }) => {
-      const queryParams: Record<string, any> = {};
+      const queryParams: EventsQueryParams = {};
 
       if (pageParam) {
         queryParams.cursor = pageParam;
@@ -90,13 +90,14 @@ export function useEvents() {
 
   // Flatten all pages into a single array of events
   const events = useMemo(() => {
-    if (!data?.pages) return [];
-    return data.pages.flatMap((page: EventsResponse) => page.results);
+    const infiniteData = data as unknown as InfiniteData<EventsResponse> | undefined;
+    if (!infiniteData?.pages) return [];
+    return infiniteData.pages.flatMap((page: EventsResponse) => page.results);
   }, [data]);
 
   // Get total count from first page
   const totalCount =
-    (data?.pages?.[0] as EventsResponse | undefined)?.totalCount ?? 0;
+    ((data as unknown as InfiniteData<EventsResponse>)?.pages?.[0] as EventsResponse | undefined)?.totalCount ?? 0;
 
   // Filter events by interested if the filter is active
   const filteredEvents = useMemo(() => {

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

@@ -16,7 +16,7 @@ import {
 import { formatEventDate } from "@/shared/lib/dateUtils";
 import type { EventSubmission } from "@/features/events/types/submission";
 import { useNavigate } from "react-router-dom";
-import { getSubmissionStatusVariant } from "@/shared/components/badges/EventBadges";
+import { getSubmissionStatusVariant } from "@/shared/lib/eventUtils";
 
 export function MySubmissionsPage() {
   const {

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

@@ -63,7 +63,7 @@ export function SubmitEventPage() {
 
       // Convert UTC occurrences to local dates format
       const occurrences = result.occurrences && result.occurrences.length > 0
-        ? result.occurrences.map((occ: any) => ({
+        ? result.occurrences.map((occ: { dtstart_utc?: string; dtend_utc?: string }) => ({
             dtstart_local: occ.dtstart_utc ? utcToLocal(occ.dtstart_utc) : "",
             dtend_local: occ.dtend_utc ? utcToLocal(occ.dtend_utc) : "",
           }))

frontend/src/shared/api/EventsAPIClient.ts

@@ -105,7 +105,7 @@ class EventsAPIClient {
     food?: string;
     registration: boolean;
     occurrences: Array<{ dtstart_utc: string; dtend_utc?: string; tz?: string }>;
-    all_extracted: any[];
+    all_extracted: unknown[];
   }> {
     const dataForm = new FormData();
     dataForm.append('screenshot', screenshot);
@@ -175,7 +175,7 @@ class EventsAPIClient {
     eventData?: Record<string, unknown>
   ): Promise<{ message: string }> {
     // Event data is now passed flat at top level (not nested)
-    const payload: any = { action };
+    const payload: Record<string, unknown> = { action };
     if (eventData) {
       Object.assign(payload, eventData);
     }