From ad4ba2ffc3fc88fff6776af6eac7084fe781eb41 Mon Sep 17 00:00:00 2001
From: vmork <vallemork@gmail.com>
Date: Tue, 30 Apr 2024 19:06:00 +0200
Subject: [PATCH] refactor and improve styling

---
 src/app/student/_components/EventDetails.tsx  | 101 ++++++++++++++++++
 src/app/student/events/[event]/page.tsx       |  24 -----
 src/app/student/events/[id]/page.tsx          |  30 ++++++
 .../student/events/_components/EventCard.tsx  |  22 ----
 4 files changed, 131 insertions(+), 46 deletions(-)
 create mode 100644 src/app/student/_components/EventDetails.tsx
 delete mode 100644 src/app/student/events/[event]/page.tsx
 create mode 100644 src/app/student/events/[id]/page.tsx
 delete mode 100644 src/app/student/events/_components/EventCard.tsx

diff --git a/src/app/student/_components/EventDetails.tsx b/src/app/student/_components/EventDetails.tsx
new file mode 100644
index 0000000..2250930
--- /dev/null
+++ b/src/app/student/_components/EventDetails.tsx
@@ -0,0 +1,101 @@
+import { P } from "@/app/_components/Paragraph"
+import { Button } from "@/components/ui/button"
+import { Page } from "@/components/shared/Page"
+import { Event } from "@/components/shared/hooks/api/useEvents"
+
+import { MapPin, Calendar, Clock, Utensils, Coins } from "lucide-react"
+import { DateTime } from "luxon"
+import { ReactNode } from "react"
+import Image from "next/image"
+import Link from "next/link"
+
+function timestampToDateString(epochSeconds: number) {
+	return DateTime.fromMillis(epochSeconds * 1000).toFormat("dd LLL, yyyy")
+}
+function timestampToTimeString(epochSeconds: number) {
+	return DateTime.fromMillis(epochSeconds * 1000).toFormat("HH:mm")
+}
+
+function InfoBoxItem({
+	label,
+	value,
+	icon
+}: {
+	label: ReactNode
+	value: ReactNode
+	icon?: ReactNode
+}) {
+	if (value == null) return
+	return (
+		<div className="flex gap-2">
+			<div className="flex gap-2 text-stone-200">
+				<span className="mt-1 w-5">{icon}</span>
+				<span className="w-20 flex-none font-bold ">{label}:</span>
+			</div>
+			<span className="text-stone-400">{value}</span>
+		</div>
+	)
+}
+
+export default function EventDetails({ event }: { event: Event }) {
+	event.description =
+		"Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid rem quis enim nulla ipsa et praesentium aut autem non? Exercitationem harum tenetur incidunt in doloremque nostrum inventore veniam libero ipsa atque porro praesentium consequuntur excepturi necessitatibus, doloribus, aspernatur saepe eos quibusdam soluta dolorem ad voluptates laudantium debitis? Obcaecati autem consectetur laborum aspernatur non veniam ut tempora? Culpa sint id itaque sed rerum ipsa doloremque minima, nihil quos maiores ea laboriosam ab harum ut error eveniet quas sapiente optio iste, atque quibusdam? Ipsam numquam unde iste tempore! Aspernatur officia commodi expedita iste, dolor ad? Obcaecati quam quae dolor, fuga porro quis!"
+	return (
+		<div className="mx-auto flex max-w-[600px] flex-col gap-10 lg:max-w-[1000px] lg:flex-row">
+			<div className="lg:w-3/5">
+				{event.image_url && (
+					<Image
+						className="float-left mb-2 mr-7 rounded-md"
+						src={event.image_url}
+						alt="" // TODO
+						width={150}
+						height={150}
+					/>
+				)}
+				<Page.Header>{event.name}</Page.Header>
+				<P className="mt-2">{event.description}</P>
+			</div>
+			<div className=" flex h-fit flex-col gap-4 rounded-md border border-stone-400 bg-slate-800 bg-gradient-to-br from-emerald-950 via-stone-900 to-stone-900 p-5 lg:w-2/5 ">
+				{/* Top row */}
+				<InfoBoxItem
+					label="Location"
+					value={event.location}
+					icon={<MapPin size={16} />}></InfoBoxItem>
+				<InfoBoxItem
+					label="Date"
+					value={timestampToDateString(event.event_start)}
+					icon={<Calendar size={16} />}></InfoBoxItem>
+				<InfoBoxItem
+					label="Time"
+					value={`${timestampToTimeString(event.event_start)} - ${timestampToTimeString(event.event_end)}`}
+					icon={<Clock size={16} />}></InfoBoxItem>
+
+				{/* Separator */}
+				{(event.food || event.fee) && (
+					<div className="h-[1px] w-full bg-stone-400"></div>
+				)}
+
+				{/* Bottom row */}
+				<InfoBoxItem
+					label="Food"
+					value={event.food}
+					icon={<Utensils size={16} />}></InfoBoxItem>
+				<InfoBoxItem
+					label="Fee"
+					value={`${event.fee} kr`}
+					icon={<Coins size={16} />}></InfoBoxItem>
+
+				{/* Signup */}
+				{event.open_for_signup ? (
+					<Button className="mt-5">
+						<Link href={event.signup_link ?? ""}>Sign Up!</Link>
+					</Button>
+				) : (
+					<Button className="mt-5" disabled>
+						Registration closed
+					</Button>
+				)}
+			</div>
+		</div>
+	)
+}
diff --git a/src/app/student/events/[event]/page.tsx b/src/app/student/events/[event]/page.tsx
deleted file mode 100644
index ef2d04c..0000000
--- a/src/app/student/events/[event]/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import EventCard from "@/app/student/events/_components/EventCard"
-import { Page } from "@/components/shared/Page"
-import Image from "next/image"
-import { notFound } from "next/navigation"
-
-
-export default async function EventsPage(props: { params: { event: string } }) {
-	const id = props.params.event
-
-	const response = await fetch("https://ais.armada.nu/api/events")
-	const events = (await response.json()) as any[]
-
-	const event = events.find(event => event.id == id)
-	if (!event) return notFound()
-
-	return (
-		<Page.Background withIndents>
-			<Page.Boundary>
-				<Page.Header>{event.name}</Page.Header>
-					<EventCard event={event}></EventCard>
-			</Page.Boundary>
-		</Page.Background>
-	)
-}
diff --git a/src/app/student/events/[id]/page.tsx b/src/app/student/events/[id]/page.tsx
new file mode 100644
index 0000000..84cb3d6
--- /dev/null
+++ b/src/app/student/events/[id]/page.tsx
@@ -0,0 +1,30 @@
+import EventDetails from "@/app/student/_components/EventDetails"
+import { Page } from "@/components/shared/Page"
+import { notFound } from "next/navigation"
+import { fetchEvents } from "@/components/shared/hooks/api/useEvents"
+
+export async function generateStaticParams() {
+	const events = await fetchEvents()
+	return events.map(event => ({
+		id: event.id.toString()
+	}))
+}
+
+export default async function EventDetailsPage({
+	params
+}: {
+	params: { id: string }
+}) {
+	const id = Number.parseInt(params.id)
+	const events = await fetchEvents()
+	const event = events.find(event => event.id == id)
+	if (event == null) return notFound()
+
+	return (
+		<Page.Background withIndents>
+			<Page.Boundary>
+				<EventDetails event={event}></EventDetails>
+			</Page.Boundary>
+		</Page.Background>
+	)
+}
diff --git a/src/app/student/events/_components/EventCard.tsx b/src/app/student/events/_components/EventCard.tsx
deleted file mode 100644
index 32bb909..0000000
--- a/src/app/student/events/_components/EventCard.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { P } from "@/app/_components/Paragraph"
-import { Button } from "@/components/ui/button"
-import Image from "next/image"
-
-export default function EventCard({ event }: { event: any }) {
-	const startString = new Date(event.event_start * 1000).toLocaleDateString()
-	const endString = new Date(event.event_start * 1000).toLocaleDateString()
-
-	return (
-		<>
-			<P>{event.description}</P>
-			<div>Location: {event.location}</div>
-			<div>Start: {startString}</div>
-			<div>End: {endString}</div>
-			<Button variant={"outline"}>Sign Up!</Button>
-
-			{event.image_url && (
-				<Image src={event.image_url} alt="" width={100} height={100} />
-			)}
-		</>
-	)
-}