ui changes for calendar export

tonyqiu123 · tonyqiu123 · commit 15764e2cc74f · 2025-10-05T21:45:15.000-04:00
diff --git a/backend/.dockerignore b/backend/.dockerignore
@@ -0,0 +1,29 @@
+# Python / project
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.venv/
+
+# git/artifacts
+.git
+.gitignore
+
+# local IDE/editor
+.vscode
+.idea
+
+# build artifacts / node_modules
+dist/
+build/
+node_modules/
+
+# tests / docs
+tests/
+docs/
+
+# docker files (so build context is smaller)
+*.egg-info
diff --git a/backend/Dockerfile b/backend/Dockerfile
@@ -1,28 +1,31 @@
-FROM python:3.10-slim
+# Use official Python runtime as base image
+FROM python:3.11-slim
 
 # Set environment variables
-ENV PYTHONDONTWRITEBYTECODE=1
-ENV PYTHONUNBUFFERED=1
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1
 
 # Set work directory
 WORKDIR /app
 
-# Install system dependencies
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends \
-        gcc \
-        g++ \
-    && rm -rf /var/lib/apt/lists/*
+# Copy requirements files and wheels directory
+COPY requirements.txt .
+COPY wheels/ ./wheels/
 
 # Install Python dependencies
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
 
-# Copy project
+# Copy project files
 COPY . .
 
-# Collect static files
-RUN python manage.py collectstatic --noinput
+# Copy and set up entrypoint script
+COPY docker-entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# Expose port
+EXPOSE 8000
+
+# Use entrypoint script
+ENTRYPOINT ["docker-entrypoint.sh"]
 
-# Run the application
-CMD ["gunicorn", "--bind", "0.0.0.0:8000", "my_django_project.wsgi:application"] 
diff --git a/backend/api/settings.py b/backend/api/settings.py
@@ -27,7 +27,14 @@
 )
 DEBUG = os.getenv("PRODUCTION") != "1"  # Fixed the DEBUG logic
 
-ALLOWED_HOSTS = ["localhost", "127.0.0.1", ".vercel.app"]
+ALLOWED_HOSTS = [
+    "localhost",
+    "127.0.0.1",
+    ".vercel.app",
+    ".elasticbeanstalk.com",
+    ".elb.amazonaws.com",
+    "*",  # Temporary - allows any host. Replace with specific IP/domain in production
+]
 
 INSTALLED_APPS = [
     "django.contrib.admin",
diff --git a/backend/docker-entrypoint.sh b/backend/docker-entrypoint.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+set -e
+
+echo "Running database migrations..."
+python manage.py migrate --noinput
+
+echo "Collecting static files..."
+python manage.py collectstatic --noinput
+
+echo "Starting gunicorn..."
+exec gunicorn --bind 0.0.0.0:8000 --workers 4 --timeout 120 api.wsgi:app
+
diff --git a/backend/scraping/get_static_events.py b/backend/scraping/get_static_events.py
@@ -75,7 +75,10 @@ def main():
         )
         logging.info(f"Writing to {output_path}...")
         with output_path.open("w", encoding="utf-8") as f:
+            # Write the last updated timestamp
+            current_time = datetime.now().isoformat()
             f.write('import { Event } from "@/hooks/useEvents";\n\n')
+            f.write(f'export const LAST_UPDATED = "{current_time}";\n\n')
             f.write("export const staticEventsData = new Map<string, Event>([\n")
             for i, event in enumerate(events):
                 event_id = str(event["id"])
diff --git a/frontend/public/test1.svg b/frontend/public/test1.svg
diff --git a/frontend/src/components/EventLegend.tsx b/frontend/src/components/EventLegend.tsx
@@ -5,7 +5,7 @@ const EventLegend: React.FC = () => {
   const clubTypes = getAllClubTypes();
 
   return (
-    <div className="flex flex-wrap items-center justify-center gap-6 mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+    <div className="flex flex-wrap items-center justify-center gap-6 mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-md">
       {clubTypes.map((clubType, index) => (
         <div key={index} className="flex items-center gap-2">
           <div
diff --git a/frontend/src/components/EventsCalendar.tsx b/frontend/src/components/EventsCalendar.tsx
@@ -69,7 +69,7 @@ const EventPopup: React.FC<{
   style: React.CSSProperties;
 }> = ({ event, onClose, style }) => (
   <div
-    className="event-popup absolute bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-80 z-50 border border-gray-200 dark:border-gray-700"
+    className="event-popup absolute bg-white dark:bg-gray-800 rounded-md shadow-lg p-4 w-80 z-50 border border-gray-200 dark:border-gray-700"
     style={style}
     onClick={(e) => e.stopPropagation()}
   >
diff --git a/frontend/src/components/EventsGrid.tsx b/frontend/src/components/EventsGrid.tsx
@@ -63,7 +63,7 @@ const EventStatusBadge = ({ event }: { event: Event }) => {
         <img
           src={theme === "dark" ? "/test1-dark.svg" : "/test1.svg"}
           alt=""
-          className="absolute top-0 right-0 z-10 w-13"
+          className="absolute top-0 right-0 z-10 w-12"
         />
       <Badge variant="live" className="absolute top-0 right-0 z-10">
         LIVE
@@ -118,7 +118,7 @@ const EventsGrid = memo(({ data, isSelectMode = false, selectedEvents = new Set(
           return (
           <Card
             key={event.id}
-            className={`border-none relative p-0 hover:shadow-lg gap-0 h-full overflow-hidden ${isSelectMode ? 'cursor-pointer' : ''} ${isSelected ? 'ring-2 ring-blue-500' : ''}`}
+            className={`border-none rounded-md relative p-0 hover:shadow-lg gap-0 h-full overflow-hidden ${isSelectMode ? 'cursor-pointer' : ''} ${isSelected ? 'ring-2 ring-blue-500' : ''}`}
             onMouseDown={() => isSelectMode && onToggleEvent?.(event.id)}
           >
             <EventStatusBadge event={event} />
@@ -162,7 +162,7 @@ const EventsGrid = memo(({ data, isSelectMode = false, selectedEvents = new Set(
                 @{event.club_handle}
               </p>
             </CardHeader>
-            <CardContent className="flex border-gray-200 dark:border-gray-700 flex-col border-b border-l rounded-b-xl border-r gap-1 h-full p-3.5 pt-2.5">
+            <CardContent className="flex border-gray-200 dark:border-gray-700 flex-col border-b border-l rounded-b-md border-r gap-1 h-full p-3.5 pt-2.5">
               <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.date)}</span>
diff --git a/frontend/src/components/FloatingEventExportBar.tsx b/frontend/src/components/FloatingEventExportBar.tsx
@@ -38,16 +38,18 @@ export default function FloatingEventExportBar({
         view !== "grid" || !isSelectMode || selectedEvents.size === 0
       }
     >
-      <div className="bg-white dark:bg-gray-800 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 px-6 py-3 flex items-center gap-4">
-        <Button
-          size="sm"
-          onClick={() => onExportICalendar(data)}
-          className="rounded-full"
-          variant="default"
-        >
-          <SiApple className="h-4 w-4" />
-          Export {selectedEvents.size} to iCalendar
-        </Button>
+      <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-full shadow-lg border border-gray-200/50 dark:border-gray-700/50 px-6 py-3 flex items-center gap-4">
+        {selectedEvents.size > 0 && (
+          <Button
+            size="sm"
+            onClick={() => onExportICalendar(data)}
+            className="rounded-full"
+            variant="default"
+          >
+            <SiApple className="h-4 w-4" />
+            Export {selectedEvents.size} to iCalendar
+          </Button>
+        )}
         {selectedEvents.size === 1 && (
           <Button
             size="sm"
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "flex flex-col gap-6 rounded-xl border border-gray-200 bg-white py-6 shadow-sm dark:border-gray-700 dark:bg-gray-900",
+        "flex flex-col gap-6 rounded-md border border-gray-200 bg-white py-6 shadow-sm dark:border-gray-700 dark:bg-gray-900",
         className
       )}
       {...props}
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "select-none inline-flex h-9 items-center justify-center rounded-lg bg-gray-100 p-1 text-gray-500 dark:bg-gray-700 dark:text-gray-400",
+      "select-none inline-flex h-9 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500 dark:bg-gray-700 dark:text-gray-400",
       className
     )}
     {...props}
diff --git a/frontend/src/data/staticEvents.ts b/frontend/src/data/staticEvents.ts
@@ -1,5 +1,7 @@
 import { Event } from "@/hooks/useEvents";
 
+export const LAST_UPDATED = "2025-01-05T12:30:00";
+
 export const staticEventsData = new Map<string, Event>([
   ["4", {
     id: "4",
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
@@ -1,5 +1,5 @@
 export { useClubs, type Club } from './useClubs'
-export { useEvents, type Event } from './useEvents'
+export { useEvents, type Event, getLastUpdatedText } from './useEvents'
 export { useDocumentTitle } from './useDocumentTitle'
 export { useTheme } from './useTheme'
 export { useEventSelection } from './useEventSelection'
diff --git a/frontend/src/hooks/useEvents.ts b/frontend/src/hooks/useEvents.ts
@@ -1,7 +1,7 @@
 import { useMemo, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
-import { staticEventsData } from "@/data/staticEvents";
+import { staticEventsData, LAST_UPDATED } from "@/data/staticEvents";
 import { useDocumentTitle } from "./useDocumentTitle";
 
 export interface Event {
@@ -29,6 +29,40 @@ interface EventsResponse {
 const API_BASE_URL =
   import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
 
+// Format the last updated timestamp into a human-readable format
+export const getLastUpdatedText = (): string => {
+  const timestamp = LAST_UPDATED;
+  
+  if (!timestamp) return "";
+  
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) {
+    return "Updated just now";
+  } else if (diffMins < 60) {
+    return `Updated ${diffMins} minute${diffMins !== 1 ? 's' : ''} ago`;
+  } else if (diffHours < 24) {
+    return `Updated ${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
+  } else if (diffDays === 1) {
+    return "Updated yesterday";
+  } else if (diffDays < 7) {
+    return `Updated ${diffDays} days ago`;
+  } else {
+    const dateStr = date.toLocaleDateString('en-US', { 
+      month: 'long', 
+      day: 'numeric', 
+      year: 'numeric' 
+    });
+    const timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return `Updated on ${dateStr} at ${timeStr}`;
+  }
+};
+
 const fetchEvents = async ({
   queryKey,
 }: {
diff --git a/frontend/src/pages/EventsPage.tsx b/frontend/src/pages/EventsPage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useSearchParams } from "react-router-dom";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Calendar, LayoutGrid, X } from "lucide-react";
-import { useEvents, useEventSelection } from "@/hooks";
+import { useEvents, useEventSelection, getLastUpdatedText } from "@/hooks";
 import EventsGrid from "@/components/EventsGrid";
 import EventsCalendar from "@/components/EventsCalendar";
 import EventLegend from "@/components/EventLegend";
@@ -26,6 +26,9 @@ function EventsPage() {
     exportToGoogleCalendar,
   } = useEventSelection(view);
 
+  // Get formatted last updated time
+  const lastUpdatedText = getLastUpdatedText();
+
   return (
     <div className="flex flex-col gap-4">
       {/* Header */}
@@ -35,6 +38,11 @@ function EventsPage() {
         </h1>
         <p className="text-gray-600 dark:text-gray-400">
           Discover and explore upcoming events. Updates daily at ~8:30am EST.
+          {lastUpdatedText && (
+            <span className="ml-1">
+              {lastUpdatedText}.
+            </span>
+          )}
         </p>
       </div>
 

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ const EventPopup: React.FC<{`
`69`	`69`	`style: React.CSSProperties;`
`70`	`70`	`}> = ({ event, onClose, style }) => (`
`71`	`71`	`<div`
`72`		`- className="event-popup absolute bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-80 z-50 border border-gray-200 dark:border-gray-700"`
	`72`	`+ className="event-popup absolute bg-white dark:bg-gray-800 rounded-md shadow-lg p-4 w-80 z-50 border border-gray-200 dark:border-gray-700"`
`73`	`73`	`style={style}`
`74`	`74`	`onClick={(e) => e.stopPropagation()}`
`75`	`75`	`>`