Merge pull request #164 from GenerateNU/event-performance

Speed up event render performance in frontend

Author: danctila

backend/src/controllers/local-events.ts

@@ -226,6 +226,7 @@ export const getLocalEvents = async (req: Request, res: Response) => {
       orderBy: { time: 'asc' }
     });
 
+    // Process events in parallel with optimized geocoding
     const data = await Promise.all(events.map(async event => {
       const eventDate = event.time || new Date();
       const date = eventDate.toLocaleDateString('en-US', { 
@@ -238,10 +239,10 @@ export const getLocalEvents = async (req: Request, res: Response) => {
         minute: '2-digit' 
       });
 
-      return {
+      // Create a base event object without location
+      const baseEvent = {
         id: event.id,
         title: event.title,
-        location: await reverseGeocode(event.lat, event.lon),
         date,
         time,
         genre: event.genre,
@@ -253,6 +254,23 @@ export const getLocalEvents = async (req: Request, res: Response) => {
         lon: event.lon,
         imageUrl: event.imageUrl,
       };
+
+      // Add location with timeout to prevent hanging
+      try {
+        const locationPromise = reverseGeocode(event.lat, event.lon);
+        const timeoutPromise = new Promise<string>((_, reject) => 
+          setTimeout(() => reject(new Error('Geocoding timeout')), 3000)
+        );
+        
+        const location = await Promise.race([locationPromise, timeoutPromise]);
+        return { ...baseEvent, location };
+      } catch (error) {
+        // Fallback to coordinates if geocoding fails or times out
+        return { 
+          ...baseEvent, 
+          location: `${(event.lat ?? 0).toFixed(2)}, ${(event.lon ?? 0).toFixed(2)}` 
+        };
+      }
     }));
 
     res.status(200).json({ message: "Local events retrieved.", data });

backend/src/services/geocoding.ts

@@ -1,5 +1,20 @@
-// Simple in-memory cache to avoid repeated geocoding calls
-const locationCache = new Map<string, string>();
+// Enhanced in-memory cache with TTL
+interface CacheEntry {
+  location: string;
+  timestamp: number;
+}
+const locationCache = new Map<string, CacheEntry>();
+const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 hours
+
+// Clean up expired cache entries periodically
+setInterval(() => {
+  const now = Date.now();
+  for (const [key, entry] of locationCache.entries()) {
+    if (now - entry.timestamp > CACHE_TTL) {
+      locationCache.delete(key);
+    }
+  }
+}, 60 * 60 * 1000); // Clean up every hour
 
 /**
  * Reverse geocode lat/lon coordinates to a human-readable location string
@@ -15,17 +30,28 @@ export async function reverseGeocode(
 ): Promise<string> {
   if (!lat || !lon) return 'Location TBD';
 
-  const cacheKey = `${lat},${lon}`;
-  if (locationCache.has(cacheKey)) {
-    return locationCache.get(cacheKey)!;
+  const cacheKey = `${lat.toFixed(4)},${lon.toFixed(4)}`;
+  const cached = locationCache.get(cacheKey);
+  
+  // Return cached location if still valid
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.location;
   }
 
   try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 2000); // 2 second timeout
+    
     const response = await fetch(
       `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`,
-      { headers: { 'User-Agent': 'CineCircle/1.0' } }
+      { 
+        headers: { 'User-Agent': 'CineCircle/1.0' },
+        signal: controller.signal
+      }
     );
 
+    clearTimeout(timeoutId);
+    
     if (!response.ok) throw new Error('Geocoding failed');
 
     const data = await response.json();
@@ -36,11 +62,38 @@ export async function reverseGeocode(
     const region = address.state || address.country;
     const location = city && region ? `${city}, ${region}` : `${lat.toFixed(2)}, ${lon.toFixed(2)}`;
 
-    locationCache.set(cacheKey, location);
+    // Cache the result
+    locationCache.set(cacheKey, { location, timestamp: Date.now() });
     return location;
   } catch (error) {
     // Fallback to coordinates if geocoding fails
-    return `${lat.toFixed(2)}, ${lon.toFixed(2)}`;
+    const fallback = `${lat.toFixed(2)}, ${lon.toFixed(2)}`;
+    // Cache fallback for a shorter period
+    locationCache.set(cacheKey, { location: fallback, timestamp: Date.now() });
+    return fallback;
+  }
+}
+
+/**
+ * Batch reverse geocode multiple coordinates efficiently
+ * @param coordinates - Array of {lat, lon} objects
+ * @returns Promise resolving to array of location strings
+ */
+export async function batchReverseGeocode(
+  coordinates: Array<{lat: number, lon: number}>
+): Promise<string[]> {
+  // Process in parallel with concurrency limit to avoid overwhelming the API
+  const BATCH_SIZE = 5;
+  const results: string[] = [];
+  
+  for (let i = 0; i < coordinates.length; i += BATCH_SIZE) {
+    const batch = coordinates.slice(i, i + BATCH_SIZE);
+    const batchResults = await Promise.all(
+      batch.map(({lat, lon}) => reverseGeocode(lat, lon))
+    );
+    results.push(...batchResults);
   }
+  
+  return results;
 }
 

frontend/app/events/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   StyleSheet,
   View,
@@ -7,6 +7,7 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   SafeAreaView,
+  RefreshControl,
 } from 'react-native';
 import { router } from 'expo-router';
 import { getLocalEvents, type LocalEvent } from '../../services/eventsService';
@@ -34,24 +35,31 @@ export default function Events() {
     dates: [],
     eventType: [],
   });
+  const [refreshing, setRefreshing] = useState(false);
 
-  useEffect(() => {
-    loadEvents();
-  }, []);
-
-  const loadEvents = async () => {
+  // Simple in-memory cache with 5-minute TTL
+  const loadEvents = useCallback(async (forceRefresh = false) => {
     try {
-      setLoading(true);
+      if (!forceRefresh) {
+        setLoading(true);
+      } else {
+        setRefreshing(true);
+      }
       setError(null);
-      const response = await getLocalEvents();
+      const response = await getLocalEvents(forceRefresh);
       setEvents(response.data ?? []);
     } catch (err) {
       console.error('Failed to load events:', err);
       setError('Failed to load events. Please try again.');
     } finally {
       setLoading(false);
+      setRefreshing(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    loadEvents();
+  }, [loadEvents]);
 
   const handleEventPress = (eventId: string) => {
     router.push(`/events/eventDetail?eventId=${eventId}`);
@@ -74,7 +82,7 @@ export default function Events() {
       [filterKey]: selectedValues,
     });
     // TODO: Call backend API with filters
-    loadEvents();
+    loadEvents(true); // Force refresh when filters change
   };
 
   if (loading) {
@@ -90,7 +98,7 @@ export default function Events() {
     return (
       <View style={[styles.container, styles.centered]}>
         <Text style={styles.errorText}>{error}</Text>
-        <TouchableOpacity onPress={loadEvents} style={styles.retryButton}>
+        <TouchableOpacity onPress={() => loadEvents(true)} style={styles.retryButton}>
           <Text style={styles.retryButtonText}>Retry</Text>
         </TouchableOpacity>
       </View>
@@ -158,6 +166,14 @@ export default function Events() {
       <ScrollView
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: 96 }}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={() => loadEvents(true)}
+            tintColor="#333"
+            colors={['#333']}
+          />
+        }
       >
       <SearchBar
         placeholder="Search events..."

frontend/services/eventsService.ts

@@ -6,12 +6,44 @@ type GetLocalEventResponse = components["schemas"]["GetLocalEventResponse"];
 export type LocalEvent = components["schemas"]["LocalEvent"];
 type GetUserEventsResponse = { data?: LocalEvent[]; message?: string };
 
+// Client-side cache with 5-minute TTL
+interface CacheEntry<T> {
+  data: T;
+  timestamp: number;
+}
+const cache = new Map<string, CacheEntry<any>>();
+const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
+
+function getCachedData<T>(key: string): T | null {
+  const entry = cache.get(key);
+  if (entry && Date.now() - entry.timestamp < CACHE_TTL) {
+    return entry.data;
+  }
+  cache.delete(key);
+  return null;
+}
+
+function setCachedData<T>(key: string, data: T): void {
+  cache.set(key, { data, timestamp: Date.now() });
+}
+
 /**
  * Fetch all local events
  * GET /api/local-events
  */
-export async function getLocalEvents() {
-  return api.get<GetLocalEventsResponse>("/api/local-events");
+export async function getLocalEvents(bypassCache = false) {
+  const cacheKey = 'local-events';
+  
+  if (!bypassCache) {
+    const cached = getCachedData<GetLocalEventsResponse>(cacheKey);
+    if (cached) {
+      return cached;
+    }
+  }
+
+  const response = await api.get<GetLocalEventsResponse>("/api/local-events");
+  setCachedData(cacheKey, response);
+  return response;
 }
 
 /**
@@ -27,19 +59,39 @@ export async function getLocalEvent(id: string) {
  * GET /api/user/events?user_id=:userId
  * Falls back to all local events if the endpoint is unavailable (404)
  */
-export async function getUserEvents(userId: string): Promise<LocalEvent[]> {
+export async function getUserEvents(userId: string, bypassCache = false): Promise<LocalEvent[]> {
+  const cacheKey = `user-events-${userId}`;
+  
+  if (!bypassCache) {
+    const cached = getCachedData<LocalEvent[]>(cacheKey);
+    if (cached) {
+      return cached;
+    }
+  }
+
   try {
     const res = await api.get<GetUserEventsResponse>('/api/user/events', {
       user_id: userId,
     });
-    return res.data ?? [];
+    const events = res.data ?? [];
+    setCachedData(cacheKey, events);
+    return events;
   } catch (err) {
     const status = (err as ApiError)?.status;
     if (status && status !== 404) {
       throw err;
     }
     // Endpoint missing or not implemented on backend; return all local events as a fallback
-    const fallback = await getLocalEvents();
-    return (fallback as GetLocalEventsResponse)?.data ?? [];
+    const fallback = await getLocalEvents(bypassCache);
+    const events = (fallback as GetLocalEventsResponse)?.data ?? [];
+    setCachedData(cacheKey, events);
+    return events;
   }
 }
+
+/**
+ * Clear all cached events data
+ */
+export function clearEventsCache(): void {
+  cache.clear();
+}