Load search query from URL parameter

app/events/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, Suspense } from 'react';
 import Header from '../../components/custom/header';
 import Footer from '../../components/custom/footer';
 import { useSearchParams } from 'next/navigation';
@@ -63,7 +63,7 @@ const fetchEvents = (): Event[] => {
 const EventsPage: React.FC = () => {
   const [events, setEvents] = useState<Event[]>([]);
   const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
-  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>("");
   const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
   const [sortOption, setSortOption] = useState<string>(''); // Track sorting option
   const [filterOptions, setFilterOptions] = useState<string[]>([]); // Track applied filters
@@ -71,8 +71,6 @@ const EventsPage: React.FC = () => {
   const [showSortMenu, setShowSortMenu] = useState<boolean>(false);
   const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
 
-  const searchParams = useSearchParams();
-
   const sortRef = useRef<HTMLDivElement>(null);
   const filterRef = useRef<HTMLDivElement>(null);
 
@@ -82,6 +80,17 @@ const EventsPage: React.FC = () => {
     setFilteredEvents(eventsData);
   }, []);
 
+  const SearchBox = () => {
+    setSearchQuery(useSearchParams().get("q") || "");
+    return <input
+      type="text"
+      placeholder="Search events..."
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+      className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+    />
+  };
+
   useEffect(() => {
     let filtered = events.filter((event) =>
       ['name', 'date', 'location', 'description', 'host'].some((key) =>
@@ -143,13 +152,10 @@ const EventsPage: React.FC = () => {
 
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
-    if (searchParams.get("q")) {
-      setSearchQuery(searchParams.get("q")!);
-    };
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [searchParams]);
+  }, []);
 
   return (
     <div className="relative min-h-screen overflow-hidden">
@@ -167,13 +173,18 @@ const EventsPage: React.FC = () => {
 
       <div className="relative z-20 container mx-auto p-4 pt-16">
         <div className="mb-6">
-          <input
-            type="text"
-            placeholder="Search events..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
-          />
+          <Suspense fallback={
+            <input
+              type="text"
+              placeholder="Search events..."
+              disabled={true}
+              value="loading..."
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+            />
+          }>
+            <SearchBox />
+          </Suspense>
           <div className="flex mt-4 space-x-4">
             {/* Sort Button and Dropdown */}
             <div className="relative" ref={sortRef}>