fix empty search input

Author: Tony Qiu

README.md

@@ -82,7 +82,7 @@ python manage.py runserver
 ```bash
 cd backend
 docker build -t instagram-scraper-api .
-docker run -p 8000:8000 instagram-scraper-api
+docker run -p 3000:3000 instagram-scraper-api
 ```
 
 ## Dependencies
@@ -98,7 +98,7 @@ docker run -p 8000:8000 instagram-scraper-api
 
 ## Notes
 
-- The Django server runs on port 8000
+- The Django server runs on port 3000
 - CSV files are now located in `/backend/scripts/`
 - API endpoints are prefixed with `/api/`
 - CORS is enabled for frontend integration
@@ -108,9 +108,9 @@ docker run -p 8000:8000 instagram-scraper-api
 
 | Goal/Description | cURL Command |
 |------------------|--------------|
-| Get API info | `curl http://localhost:8000/api/` |
-| Health check | `curl http://localhost:8000/api/health/` |
-| Get all events | `curl http://localhost:8000/api/events/` |
-| Get all clubs | `curl http://localhost:8000/api/clubs/` |
-| Create mock event | `curl -X POST http://localhost:8000/api/mock-event/ -H "Content-Type: application/json" -d '{"name": "Test Event", "location": "Test Location", "food": "Pizza"}'` |
-| Find similar events | `curl "http://localhost:8000/api/test-similarity/?text=Your%20Search%20Text"` | 
+| Get API info | `curl http://localhost:3000/api/` |
+| Health check | `curl http://localhost:3000/health/` |
+| Get all events | `curl http://localhost:3000/api/events/` |
+| Get all clubs | `curl http://localhost:3000/api/clubs/` |
+| Create mock event | `curl -X POST http://localhost:3000/api/mock-event/ -H "Content-Type: application/json" -d '{"name": "Test Event", "location": "Test Location", "food": "Pizza"}'` |
+| Find similar events | `curl "http://localhost:3000/api/test-similarity/?text=Your%20Search%20Text"` | 

backend/Dockerfile

@@ -24,7 +24,7 @@ COPY docker-entrypoint.sh /usr/local/bin/
 RUN chmod +x /usr/local/bin/docker-entrypoint.sh
 
 # Expose port
-EXPOSE 8000
+EXPOSE 3000
 
 # Use entrypoint script
 ENTRYPOINT ["docker-entrypoint.sh"]

backend/api/urls.py

@@ -17,8 +17,10 @@
 
 from django.contrib import admin
 from django.urls import include, path
+from example import views
 
 urlpatterns = [
     path("admin/", admin.site.urls),
+    path("health/", views.health, name="health"),
     path("api/", include("example.urls")),
 ]

backend/docker-entrypoint.sh

@@ -1,12 +1,42 @@
 #!/bin/bash
 set -e
 
+# Wait for database to be ready
+echo "Waiting for database..."
+max_attempts=30
+attempt=0
+until python manage.py check --database default > /dev/null 2>&1 || [ $attempt -eq $max_attempts ]; do
+    attempt=$((attempt + 1))
+    echo "Database not ready, attempt $attempt/$max_attempts..."
+    sleep 2
+done
+
+if [ $attempt -eq $max_attempts ]; then
+    echo "ERROR: Database connection timeout after $max_attempts attempts"
+    exit 1
+fi
+
+echo "Database is ready!"
+
 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
+# Graceful shutdown settings:
+# --graceful-timeout: Time to wait for workers to finish after SIGTERM (default 30s)
+# --timeout: Worker timeout for requests (120s)
+# --worker-class: Use sync workers (default)
+# --access-logfile and --error-logfile: Send logs to stdout/stderr for ECS CloudWatch
+exec gunicorn \
+    --bind 0.0.0.0:3000 \
+    --workers 4 \
+    --timeout 120 \
+    --graceful-timeout 30 \
+    --access-logfile - \
+    --error-logfile - \
+    --log-level info \
+    api.wsgi:app
 

backend/example/views.py

@@ -31,7 +31,7 @@ def home(_request):
             "endpoints": {
                 "GET /api/events/?search=search_text": "Search events using vector similarity",
                 "GET /api/clubs/": "Get all clubs from database",
-                "GET /api/health/": "Health check",
+                "GET /health/": "Health check",
                 "POST /api/mock-event/": (
                     "Create a mock event with vector embedding (admin only)"
                 ),

frontend/src/hooks/useClubs.ts

@@ -16,7 +16,7 @@ export interface Club {
 }
 
 const API_BASE_URL =
-  import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
+  import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
 
 const fetchClubs = async ({
   queryKey,

frontend/src/hooks/useEvents.ts

@@ -27,7 +27,7 @@ interface EventsResponse {
 }
 
 const API_BASE_URL =
-  import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
+  import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
 
 // Format the last updated timestamp into a human-readable format
 export const getLastUpdatedText = (): string => {

frontend/src/hooks/useSearchState.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useLocalStorage } from "react-use";
 
@@ -10,10 +10,18 @@ export function useSearchState() {
 
   const searchParam = searchParams.get("search") || "";
   const [inputValue, setInputValue] = useState(searchParam || lastSearch || "");
+  const isInitialMount = useRef(true);
 
   // Sync input value with URL search param when it changes
   useEffect(() => {
-    if (searchParam) {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      // On initial mount, only sync if there's an actual search param
+      if (searchParam) {
+        setInputValue(searchParam);
+      }
+    } else {
+      // On subsequent updates, always sync with URL
       setInputValue(searchParam);
     }
   }, [searchParam]);
@@ -26,6 +34,15 @@ export function useSearchState() {
         nextParams.set("search", inputValue);
         return nextParams;
       });
+    } else {
+      // If input is empty, clear the search
+      setInputValue("");
+      setLastSearch("");
+      setSearchParams((prev) => {
+        const nextParams = new URLSearchParams(prev);
+        nextParams.delete("search");
+        return nextParams;
+      });
     }
   }, [inputValue, setLastSearch, setSearchParams]);
 

frontend/src/pages/EventsPage.tsx

@@ -62,7 +62,7 @@ function EventsPage() {
           <SearchInput placeholder="Search events..." className="flex-1" />
 
           {/* View toggle tabs */}
-          <div className="flex gap-2">
+          <div className="flex justify-between gap-2">
             {view === "grid" && (
               <Button
                 variant="outline"
@@ -78,7 +78,7 @@ function EventsPage() {
                 ) : (
                   <>
                     <Calendar className="h-4 w-4" />
-                    Export to Calendar
+                    Export
                   </>
                 )}
               </Button>