fix eventstatus text

Author: Tony Qiu

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

@@ -4,34 +4,27 @@ interface EventsStatusBarProps {
   isLoading: boolean;
   searchTerm: string;
   isShowingPastEvents: boolean;
-  paginatedCount: number;
   totalCount: number;
-  view: "grid" | "calendar";
 }
 
 const EventsStatusBar: React.FC<EventsStatusBarProps> = ({
   isLoading,
   searchTerm,
   isShowingPastEvents,
-  paginatedCount,
   totalCount,
-  view,
 }) => {
   const getStatusText = () => {
-    if (isLoading) return "Loading...";
-
-    // In calendar view, always show total count since pagination doesn't apply
-    const displayCount = view === "calendar" ? totalCount : paginatedCount;
+    if (isLoading) return "Loading..."; 
 
     if (searchTerm) {
-      return `Showing ${displayCount} of ${totalCount} found events`;
+      return `${totalCount} found events`;
     }
 
     if (isShowingPastEvents) {
-      return `Showing ${displayCount} of ${totalCount} total events`;
+      return `${totalCount} total events`;
     }
 
-    return `Showing ${displayCount} of ${totalCount} upcoming events`;
+    return `${totalCount} upcoming events`;
   };
 
   return <p className="text-sm">{getStatusText()}</p>;

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

@@ -127,16 +127,18 @@ export function useEvents() {
 
     if (searchTerm) {
       title = `${events.length} Found Events - Wat2Do`;
+    } else if (startDate) {
+      title = `${events.length} Total Events - Wat2Do`;
     } else {
-      title = `${events.length} Events - Wat2Do`;
+      title = `${events.length} Upcoming Events - Wat2Do`;
     }
 
     if (!isLoadingData) {
       previousTitleRef.current = title;
     }
 
     return previousTitleRef.current;
-  }, [events.length, isLoading, searchTerm, hasActiveFilters]);
+  }, [events.length, isLoading, searchTerm, hasActiveFilters, startDate]);
 
   useDocumentTitle(documentTitle);
 

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

@@ -17,11 +17,14 @@ function EventsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const view = (searchParams.get("view") as "grid" | "calendar") || "grid";
 
-  const handleViewChange = useCallback((newView: "grid" | "calendar") => {
-    const newParams = new URLSearchParams(searchParams);
-    newParams.set("view", newView);
-    setSearchParams(newParams);
-  }, [searchParams, setSearchParams]);
+  const handleViewChange = useCallback(
+    (newView: "grid" | "calendar") => {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("view", newView);
+      setSearchParams(newParams);
+    },
+    [searchParams, setSearchParams]
+  );
 
   const {
     data,
@@ -32,7 +35,6 @@ function EventsPage() {
     handleToggleStartDate,
   } = useEvents();
 
-
   const {
     isSelectMode,
     selectedEvents,
@@ -68,9 +70,7 @@ function EventsPage() {
           isLoading={isLoading}
           searchTerm={searchTerm}
           isShowingPastEvents={isShowingPastEvents}
-          paginatedCount={data.length}
           totalCount={data.length}
-          view={view}
         />
       </div>