From eb43087dbf9c17e1ee350bdb9ed01aed2d4b686d Mon Sep 17 00:00:00 2001 From: Shay Patel Date: Sat, 26 Oct 2024 20:23:36 +0100 Subject: [PATCH 1/4] Update homepage and link input to search --- app/events/page.tsx | 6 +++ app/page.tsx | 79 ++++++++++++++++++++--------- components/custom/FeaturedEvent.tsx | 46 +++++++++++++++++ 3 files changed, 107 insertions(+), 24 deletions(-) create mode 100644 components/custom/FeaturedEvent.tsx diff --git a/app/events/page.tsx b/app/events/page.tsx index 7bda79c..1aa11f6 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'; import Header from '../../components/custom/header'; import Footer from '../../components/custom/footer'; +import { useSearchParams } from 'next/navigation'; // Define the Event interface including new fields interface Event { @@ -70,6 +71,8 @@ const EventsPage: React.FC = () => { const [showSortMenu, setShowSortMenu] = useState(false); const [showFilterMenu, setShowFilterMenu] = useState(false); + const searchParams = useSearchParams(); + const sortRef = useRef(null); const filterRef = useRef(null); @@ -140,6 +143,9 @@ const EventsPage: React.FC = () => { useEffect(() => { document.addEventListener('mousedown', handleClickOutside); + if (searchParams.get("q")) { + setSearchQuery(searchParams.get("q")!); + }; return () => { document.removeEventListener('mousedown', handleClickOutside); }; diff --git a/app/page.tsx b/app/page.tsx index 0018a04..c1413cd 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,16 +1,26 @@ 'use client'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; +import { useRouter } from 'next/navigation'; import Header from '../components/custom/header'; import Footer from '../components/custom/footer'; import { Input } from '@/components/ui/input'; +import FeaturedEvent from '@/components/custom/FeaturedEvent'; +import { Button } from '@/components/ui/button'; export default function Home() { + const router = useRouter(); const [isClient, setIsClient] = useState(false); + const inputRef: any = useRef(null); useEffect(() => { setIsClient(true); }, []); + function searchForEvents() { + if (inputRef.current.value == "") return; + router.replace("/events?q=" + encodeURIComponent(inputRef.current.value)); + } + return ( <>
@@ -32,34 +42,55 @@ export default function Home() {
{/* Page Content Over the Video */} -
+
-
+

+ Book your next adventure
on the Flare blockchain
+

+
+
-

-
-

- Featured Events -

-

- No events available at the moment. -

-
-
-

- Upcoming Events -

-
    -
  • Event 1 - Date
    • -
  • Event 2 - Date
    • -
  • Event 3 - Date
    • -
+
+ + +
@@ -68,4 +99,4 @@ export default function Home() {
); -} +} \ No newline at end of file diff --git a/components/custom/FeaturedEvent.tsx b/components/custom/FeaturedEvent.tsx new file mode 100644 index 0000000..a1e1c51 --- /dev/null +++ b/components/custom/FeaturedEvent.tsx @@ -0,0 +1,46 @@ +'use client'; +import React from 'react'; +import { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent, +} from '@/components/ui/card'; + +interface props { + name: string; + description: string; + location: string; + capacity: number; + ticketsSold: number; + eventStartDate: number; + eventHost: string; + imageURL: string | null; +} + +const FeaturedEvent = ({ + name, description, location, capacity, ticketsSold, eventStartDate, eventHost, imageURL +}: props) => { + return + + {imageURL && } + + {name} + + + {location}
+ {new Date(eventStartDate*1000).toLocaleString()} + + + + {description} + + + Host: {eventHost.substring(0, 8)}...{eventHost.substring(eventHost.length-3)} + + +} + +export default FeaturedEvent; \ No newline at end of file From 6cb2481bc60fc8420af2200da8001e2ab0a92f70 Mon Sep 17 00:00:00 2001 From: Shay Patel Date: Sat, 26 Oct 2024 20:32:28 +0100 Subject: [PATCH 2/4] Allow any in certain situations --- .eslintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 1a1ad7a..c9fcf13 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,7 @@ { "extends": ["next/core-web-vitals", "next/typescript"], "rules": { - "@next/next/no-img-element": "off" + "@next/next/no-img-element": "off", + "@typescript-eslint/no-explicit-any": "off" } } From 6dd271d9a81398014d870981d4520621b8fd1afe Mon Sep 17 00:00:00 2001 From: Shay Patel Date: Sat, 26 Oct 2024 20:34:01 +0100 Subject: [PATCH 3/4] Fix warnings --- app/events/page.tsx | 2 +- app/page.tsx | 6 ------ components/custom/FeaturedEvent.tsx | 6 ++---- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/app/events/page.tsx b/app/events/page.tsx index 1aa11f6..75825ca 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -149,7 +149,7 @@ const EventsPage: React.FC = () => { return () => { document.removeEventListener('mousedown', handleClickOutside); }; - }, []); + }, [searchParams]); return (
diff --git a/app/page.tsx b/app/page.tsx index c1413cd..c66eab0 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -65,8 +65,6 @@ export default function Home() { name="FAB XO Halloween" description="Halloween is upon us and is one of the biggest nights of the FAB XO calendar. Fancy dress is encouraged! So have your fancy dress ready and we look forward to seeing who have the best fancy dress on the night! As a special treat we will be serving our very own witches brew!!!" location="Birmingham, UK" - capacity={100} - ticketsSold={50} eventStartDate={1729980000} eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6" imageURL={"https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg"} @@ -75,8 +73,6 @@ export default function Home() { name="Halls Halloween Spooktacular" description="Put on your spookiest costume and head on down to Pritchatts Park and join your Event Activators for our ResLife SPOOKTACULAR on Wednesday 30th October 5-8pm." location="Birmingham, UK" - capacity={100} - ticketsSold={50} eventStartDate={1730307600} eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6" imageURL={"https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"} @@ -85,8 +81,6 @@ export default function Home() { name="Housing Fair" description="We’re hosting a Housing Fair, so make sure you save the date! Whether you’re living in student accommodation or the local community, this will be a great place to start as you begin thinking about where you’ll be living next year." location="Birmingham, UK" - capacity={100} - ticketsSold={50} eventStartDate={1730804400} eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6" imageURL={"https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png"} diff --git a/components/custom/FeaturedEvent.tsx b/components/custom/FeaturedEvent.tsx index a1e1c51..50ab18d 100644 --- a/components/custom/FeaturedEvent.tsx +++ b/components/custom/FeaturedEvent.tsx @@ -13,19 +13,17 @@ interface props { name: string; description: string; location: string; - capacity: number; - ticketsSold: number; eventStartDate: number; eventHost: string; imageURL: string | null; } const FeaturedEvent = ({ - name, description, location, capacity, ticketsSold, eventStartDate, eventHost, imageURL + name, description, location, eventStartDate, eventHost, imageURL }: props) => { return - {imageURL && } + {imageURL && {name}} {name} From 9071da494c9a5477b9d8fb4ab6250f0f7ddbb7c5 Mon Sep 17 00:00:00 2001 From: Shay Patel Date: Sat, 26 Oct 2024 21:15:16 +0100 Subject: [PATCH 4/4] Load search query from URL parameter --- app/events/page.tsx | 41 ++++++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/app/events/page.tsx b/app/events/page.tsx index 75825ca..11473a2 100644 --- a/app/events/page.tsx +++ b/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([]); const [filteredEvents, setFilteredEvents] = useState([]); - const [searchQuery, setSearchQuery] = useState(''); + const [searchQuery, setSearchQuery] = useState(""); const [hoveredEventId, setHoveredEventId] = useState(null); const [sortOption, setSortOption] = useState(''); // Track sorting option const [filterOptions, setFilterOptions] = useState([]); // Track applied filters @@ -71,8 +71,6 @@ const EventsPage: React.FC = () => { const [showSortMenu, setShowSortMenu] = useState(false); const [showFilterMenu, setShowFilterMenu] = useState(false); - const searchParams = useSearchParams(); - const sortRef = useRef(null); const filterRef = useRef(null); @@ -82,6 +80,17 @@ const EventsPage: React.FC = () => { setFilteredEvents(eventsData); }, []); + const SearchBox = () => { + setSearchQuery(useSearchParams().get("q") || ""); + return 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 (
@@ -167,13 +173,18 @@ const EventsPage: React.FC = () => {
- setSearchQuery(e.target.value)} - className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md" - /> + setSearchQuery(e.target.value)} + className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md" + /> + }> + +
{/* Sort Button and Dropdown */}