Merge branch 'main' of https://github.com/ericahan22/Wat2Do

Author: ericahan22

backend/apps/core/auth.py

@@ -18,20 +18,17 @@
 class JwtAuthBackend(BaseBackend):
     def authenticate(self, request, **kwargs):
         if 'Authorization' not in request.headers:
-            logger.warning("JWT auth: Missing Authorization header on %s %s", request.method, request.path)
+            logger.warning(f"JWT auth: Missing Authorization header on {request.method} {request.path}")
             return None
 
         try:
             auth_header = request.headers.get('Authorization')
             if not auth_header.startswith('Bearer '):
-                logger.warning("JWT auth: Authorization header not Bearer on %s %s", request.method, request.path)
+                logger.warning(f"JWT auth: Authorization header not Bearer on {request.method} {request.path}")
                 return None
 
             logger.debug(
-                "JWT auth: attempting Clerk auth (aud=%s) on %s %s",
-                CLERK_AUTHORIZED_PARTIES,
-                request.method,
-                request.path,
+                f"JWT auth: attempting Clerk auth (aud={CLERK_AUTHORIZED_PARTIES}) on {request.method} {request.path}"
             )
             request_state = authenticate_request(
                 request,
@@ -42,7 +39,7 @@ def authenticate(self, request, **kwargs):
             )
             if not request_state.is_signed_in:
                 request.error_message = request_state.message
-                logger.warning("JWT auth: Clerk rejected token: %s", request_state.message)
+                logger.warning(f"JWT auth: Clerk rejected token: {request_state.message}")
                 return None
             print(request_state.payload, 'request_state.payload')
             # Ideally at this point user object must be fetched from DB and returned, but we will just return a dummy

backend/scraping/instagram_feed.py

@@ -532,10 +532,7 @@ def check_post_limit():
         logger.error(f"Traceback: {traceback.format_exc()}")
 
     logger.debug(
-        "Feed processing completed. reason=%s, posts_processed=%d, events_added=%d",
-        termination_reason,
-        posts_processed,
-        events_added,
+        f"Feed processing completed. reason={termination_reason}, posts_processed={posts_processed}, events_added={events_added}"
     )
     logger.info("\n------------------------- Summary -------------------------")
     logger.info(f"Added {events_added} event(s) to Supabase")

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

@@ -20,7 +20,7 @@ import {
   DollarSign,
 } from "lucide-react";
 import "@/shared/styles/calendar.css";
-import { formatEventTimeRange, removeTimezoneInfo, formatPrettyDate } from "@/shared/lib/dateUtils";
+import { formatEventTimeRange, removeTimezoneInfo, formatEventDate } from "@/shared/lib/dateUtils";
 import { getClubTypeColor } from "@/shared/lib/clubTypeColors";
 import { Event } from "@/features/events";
 import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs";
@@ -103,7 +103,7 @@ const EventPopup: React.FC<{
     <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
       <div className="flex items-center gap-2">
         <CalendarIcon className="h-4 w-4 flex-shrink-0" />
-        <span>{formatPrettyDate(event.dtstart_utc)}</span>
+        <span>{formatEventDate(event.dtstart_utc, event.dtend_utc)}</span>
       </div>
 
       <div className="flex items-center gap-2">

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

@@ -29,7 +29,7 @@ import { Event, EVENTS_PER_PAGE } from "@/features/events";
 import { memo, useState, useMemo, useEffect } from "react";
 import {
   formatEventTimeRange,
-  formatPrettyDate,
+  formatEventDate,
   getDateCategory,
 } from "@/shared/lib/dateUtils";
 import { getEventStatus, isEventNew } from "@/shared/lib/eventUtils";
@@ -138,7 +138,7 @@ const EventsGrid = memo(
       };
 
       paginatedData.forEach((event) => {
-        const category = getDateCategory(event.dtstart_utc);
+        const category = getDateCategory(event.dtstart_utc, event.dtend_utc);
         groups[category].push(event);
       });
 
@@ -221,7 +221,7 @@ const EventsGrid = memo(
               <div className="flex items-center space-x-2 text-xs text-gray-600 dark:text-gray-400">
                 <Calendar className="h-3.5 w-3.5 flex-shrink-0" />
                 <span className="truncate">
-                  {formatPrettyDate(event.dtstart_utc)}
+                  {formatEventDate(event.dtstart_utc, event.dtend_utc)}
                 </span>
               </div>
 

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

@@ -14,7 +14,7 @@ import { Button } from "@/shared/components/ui/button";
 import { Badge } from "@/shared/components/ui/badge";
 import { SEOHead } from "@/shared/components/SEOHead";
 import { API_BASE_URL } from "@/shared/constants/api";
-import { formatEventTimeRange, formatPrettyDate } from "@/shared/lib/dateUtils";
+import { formatEventTimeRange, formatEventDate } from "@/shared/lib/dateUtils";
 import { getEventStatus, isEventNew } from "@/shared/lib/eventUtils";
 import { Event } from "@/features/events/types/events";
 import BadgeMask from "@/shared/components/ui/badge-mask";
@@ -131,7 +131,7 @@ function EventDetailPage() {
         title={`${event.title} - Event Details`}
         description={
           event.description ||
-          `Join us for ${event.title} on ${formatPrettyDate(event.dtstart_utc)}`
+          `Join us for ${event.title} on ${formatEventDate(event.dtstart_utc, event.dtend_utc)}`
         }
         url={`/event/${event.id}`}
         keywords={[
@@ -207,7 +207,7 @@ function EventDetailPage() {
                 <Calendar className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0" />
                 <div>
                   <p className="font-semibold text-gray-900 dark:text-white">
-                    {formatPrettyDate(event.dtstart_utc)}
+                    {formatEventDate(event.dtstart_utc, event.dtend_utc)}
                   </p>
                   <p className="text-sm text-gray-600 dark:text-gray-400">
                     {formatEventTimeRange(event.dtstart_utc, event.dtend_utc)}

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

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
   useEvents,
@@ -19,12 +19,16 @@ import {
 import { Calendar, History, LayoutGrid, Sparkles } from "lucide-react";
 import SearchInput from "@/features/search/components/SearchInput";
 import NumberFlow from "@number-flow/react";
-import { LAST_UPDATED } from "@/data/staticData";
+import { LAST_UPDATED, RECOMMENDED_FILTERS } from "@/data/staticData";
 
 function EventsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const view = (searchParams.get("view") as "grid" | "calendar") || "grid";
-  const placeholder = searchParams.get("placeholder") || "Free food";
+  const randomFilter = useMemo(() => 
+    RECOMMENDED_FILTERS[Math.floor(Math.random() * RECOMMENDED_FILTERS.length)][2],
+    []
+  );
+  const placeholder = searchParams.get("placeholder") || randomFilter;
 
   const handleViewChange = useCallback(
     (newView: "grid" | "calendar") => {
@@ -90,7 +94,7 @@ function EventsPage() {
             suffix={` ${getEventTypeText()} events`}
           />
         </h1>
-        <p>Updated {formatRelativeDateTime(LAST_UPDATED)}</p>
+        <p className="text-gray-600 dark:text-gray-400">Updated {formatRelativeDateTime(LAST_UPDATED)}</p>
       </div>
 
       <div className="flex flex-col gap-4">

frontend/src/shared/lib/dateUtils.ts

@@ -26,6 +26,37 @@ export const formatPrettyDate = (dateString: string): string => {
   }
 }
 
+/**
+ * Format event date(s) in short format
+ * Single day: "Friday Oct 31"
+ * Multiple days: "Fri Oct 31 to Mon Nov 3"
+ */
+export const formatEventDate = (startDateString: string, endDateString?: string | null): string => {
+  try {
+    const startDate = new Date(removeTimezoneInfo(startDateString));
+    
+    // If no end date or end date is the same day as start date
+    if (!endDateString) {
+      return format(startDate, "EEEE MMM d");
+    }
+    
+    const endDate = new Date(removeTimezoneInfo(endDateString));
+    
+    // Check if events are on the same day (ignoring time)
+    const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+    const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+    
+    if (startDateOnly.getTime() === endDateOnly.getTime()) {
+      return format(startDate, "EEEE MMM d");
+    }
+    
+    // Multi-day event
+    return `${format(startDate, "EEE MMM d")} to ${format(endDate, "EEE MMM d")}`;
+  } catch {
+    return startDateString; // Return original string if parsing fails
+  }
+}
+
 /**
  * Format a time string to a prettier format (e.g., "3pm" or "3:30pm")
  */
@@ -94,10 +125,13 @@ export const formatDtstartToMidnight = (dtstart: string): string => {
 
 /**
  * Get date category for event grouping (today, tomorrow, later this week, later this month, later, past)
+ * For multi-day events, checks if today falls within the event's date range
  */
-export const getDateCategory = (dateString: string): 'today' | 'tomorrow' | 'later this week' | 'later this month' | 'later' | 'past' => {
+export const getDateCategory = (startDateString: string, endDateString?: string | null): 'today' | 'tomorrow' | 'later this week' | 'later this month' | 'later' | 'past' => {
   try {
-    const eventDate = new Date(removeTimezoneInfo(dateString));
+    const eventStartDate = new Date(removeTimezoneInfo(startDateString));
+    const eventEndDate = endDateString ? new Date(removeTimezoneInfo(endDateString)) : null;
+    
     const today = new Date();
     const tomorrow = new Date(today);
     tomorrow.setDate(today.getDate() + 1);
@@ -111,21 +145,28 @@ export const getDateCategory = (dateString: string): 'today' | 'tomorrow' | 'lat
     const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
 
     // Reset time to start of day for comparison
-    const eventDateOnly = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate());
+    const eventStartDateOnly = new Date(eventStartDate.getFullYear(), eventStartDate.getMonth(), eventStartDate.getDate());
+    const eventEndDateOnly = eventEndDate ? new Date(eventEndDate.getFullYear(), eventEndDate.getMonth(), eventEndDate.getDate()) : eventStartDateOnly;
     const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
     const tomorrowOnly = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate());
     const endOfWeekOnly = new Date(endOfWeek.getFullYear(), endOfWeek.getMonth(), endOfWeek.getDate());
     const endOfMonthOnly = new Date(endOfMonth.getFullYear(), endOfMonth.getMonth(), endOfMonth.getDate());
 
-    if (eventDateOnly.getTime() === todayOnly.getTime()) {
+    // Check if today falls within the event's date range (for multi-day events)
+    const todayTime = todayOnly.getTime();
+    const isHappeningToday = todayTime >= eventStartDateOnly.getTime() && todayTime <= eventEndDateOnly.getTime();
+    const isHappeningTomorrow = tomorrowOnly.getTime() >= eventStartDateOnly.getTime() && tomorrowOnly.getTime() <= eventEndDateOnly.getTime();
+    
+    if (isHappeningToday) {
       return 'today';
-    } else if (eventDateOnly.getTime() === tomorrowOnly.getTime()) {
+    } else if (isHappeningTomorrow || eventStartDateOnly.getTime() === tomorrowOnly.getTime()) {
       return 'tomorrow';
-    } else if (eventDateOnly.getTime() < todayOnly.getTime()) {
+    } else if (eventEndDateOnly.getTime() < todayOnly.getTime()) {
+      // Event has completely ended
       return 'past';
-    } else if (eventDateOnly.getTime() <= endOfWeekOnly.getTime()) {
+    } else if (eventStartDateOnly.getTime() <= endOfWeekOnly.getTime()) {
       return 'later this week';
-    } else if (eventDateOnly.getTime() <= endOfMonthOnly.getTime()) {
+    } else if (eventStartDateOnly.getTime() <= endOfMonthOnly.getTime()) {
       return 'later this month';
     } else {
       return 'later';