From 6bc5b79a1f3a0a7c07669ec7d032767221300854 Mon Sep 17 00:00:00 2001
From: Adwit Mukherji <66975870+4dw1tz@users.noreply.github.com>
Date: Sat, 26 Oct 2024 13:51:14 +0100
Subject: [PATCH] Search Functionality

---
 app/TicketListings/TicketListings.tsx |  21 +++++-
 package-lock.json                     | 105 ++++++++++++++++++++++++++
 2 files changed, 125 insertions(+), 1 deletion(-)

diff --git a/app/TicketListings/TicketListings.tsx b/app/TicketListings/TicketListings.tsx
index 0ae0c67..4e3f9d0 100644
--- a/app/TicketListings/TicketListings.tsx
+++ b/app/TicketListings/TicketListings.tsx
@@ -57,13 +57,30 @@ const fetchEvents = (): Event[] => {
 
 const TicketListing: React.FC = () => {
   const [events, setEvents] = useState<Event[]>([]);
+  const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
+  const [searchQuery, setSearchQuery] = useState<string>('');
   const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
 
   useEffect(() => {
     const eventsData = fetchEvents();
     setEvents(eventsData);
+    setFilteredEvents(eventsData);
   }, []);
 
+  useEffect(() => {
+    // Filter events based on search query
+    const lowercasedQuery = searchQuery.toLowerCase();
+    const filtered = events.filter((event) =>
+      ['name', 'date', 'location', 'description'].some((key) =>
+        event[key as keyof Event]
+          .toString()
+          .toLowerCase()
+          .includes(lowercasedQuery)
+      )
+    );
+    setFilteredEvents(filtered);
+  }, [searchQuery, events]);
+
   return (
     <div className="relative min-h-screen overflow-hidden">
       <Header />
@@ -86,6 +103,8 @@ const TicketListing: React.FC = () => {
           <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"
           />
           <div className="flex mt-4 space-x-4">
@@ -103,7 +122,7 @@ const TicketListing: React.FC = () => {
               Available Events
             </h2>
             <div className="grid grid-cols-1 gap-6">
-              {events.map((event) => (
+              {filteredEvents.map((event) => (
                 <div
                   key={event.EventID}
                   className="relative flex bg-white p-4 rounded-lg shadow-lg"
diff --git a/package-lock.json b/package-lock.json
index eeb4a7f..d93dad5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16925,6 +16925,111 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.13.tgz",
+      "integrity": "sha512-IkAmQEa2Htq+wHACBxOsslt+jMoV3msvxCn0WFSfJSkv/scy+i/EukBKNad36grRxywaXUYJc9mxEGkeIs8Bzg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz",
+      "integrity": "sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz",
+      "integrity": "sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz",
+      "integrity": "sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz",
+      "integrity": "sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz",
+      "integrity": "sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz",
+      "integrity": "sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }