Fixed earthquake display

src/app/earthquakes/page.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
 
 import Map from "@components/Map";
 import Sidebar from "@components/Sidebar";
 import { createPoster, fetcher } from "@utils/axiosHelpers";
+import { Earthquake } from "@prismaclient";
+import { getRelativeDate } from "@utils/formatters";
 
 export default function Earthquakes() {
 	const [selectedEventId, setSelectedEventId] = useState("");
@@ -13,11 +15,27 @@ export default function Earthquakes() {
 	// todo properly integrate loading
 	const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 5 }));
 
+	const earthquakeEvents = useMemo(
+		() =>
+			data && data.earthquakes
+				? data.earthquakes.map((x: Earthquake) => ({
+						id: x.id,
+						// e.g Earthquake in Germany
+						title: `Earthquake in ${x.code.split("-")[2]}`,
+						magnitude: x.magnitude,
+						longitude: x.longitude,
+						latitude: x.latitude,
+						text2: getRelativeDate(x.date),
+				  }))
+				: [],
+		[data]
+	);
+
 	return (
 		<div className="h-full flex overflow-hidden">
 			<div className="flex-grow">
 				<Map
-					events={data ? data.earthquakes : []}
+					events={earthquakeEvents}
 					selectedEventId={selectedEventId}
 					setSelectedEventId={setSelectedEventId}
 					hoveredEventId={hoveredEventId}
@@ -29,7 +47,7 @@ export default function Earthquakes() {
 				logTitle="Log an Earthquake"
 				logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
 				recentsTitle="Recent Earthquakes"
-				events={data ? data.earthquakes : []}
+				events={earthquakeEvents}
 				selectedEventId={selectedEventId}
 				setSelectedEventId={setSelectedEventId}
 				hoveredEventId={hoveredEventId}
@@ -37,7 +55,6 @@ export default function Earthquakes() {
 				button1Name="Log an Earthquake"
 				button2Name="Search Earthquakes"
 			></Sidebar>
-			{/* <SidebarTest></SidebarTest> */}
 		</div>
 	);
 }

src/app/learn/page.tsx

@@ -1,7 +1,6 @@
 // app/learn/page.tsx
 "use client";
 import BottomFooter from "@components/BottomFooter";
-import Navbar from "@components/Navbar";
 
 export default function LearnPage() {
 	return (

src/app/shop/page.tsx

@@ -323,7 +323,6 @@ export default function Shop() {
 			}
 			// todo create receiving api route
 			// todo handle sending to api route
-			// todo remove order number generation - we don't need one
 			// todo add option to save details in new account
 			const genOrder = () => "#" + Math.random().toString(36).substring(2, 10).toUpperCase();
 			setOrderNumber(genOrder());

src/utils/formatters.ts

@@ -0,0 +1,29 @@
+export function getRelativeDate(date: Date) {
+	const now = new Date();
+	now.setHours(0, 0, 0, 0);
+	const target = new Date(date);
+	target.setHours(0, 0, 0, 0);
+
+	const diffMs = target.getTime() - now.getTime();
+	const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
+	const absDiffDays = Math.abs(diffDays);
+
+	if (diffDays === 0) return "today";
+	if (diffDays === 1) return "tomorrow";
+	if (diffDays === -1) return "yesterday";
+
+	if (absDiffDays < 7) {
+		return `${absDiffDays} day${absDiffDays > 1 ? "s" : ""} ${diffDays < 0 ? "ago" : "time"}`;
+	}
+	if (absDiffDays < 28) {
+		const weeks = Math.round(absDiffDays / 7);
+		return `${weeks} week${weeks > 1 ? "s" : ""} ${diffDays < 0 ? "ago" : "time"}`;
+	}
+	if (absDiffDays < 365) {
+		const months = Math.round(absDiffDays / 30);
+		return `${months} month${months > 1 ? "s" : ""} ${diffDays < 0 ? "ago" : "time"}`;
+	}
+
+	const years = Math.round(absDiffDays / 365);
+	return `${years} year${years > 1 ? "s" : ""} ${diffDays < 0 ? "ago" : "time"}`;
+}