Began switching over to api for earthquake and observatory events

package-lock.json

@@ -28,7 +28,8 @@
                 "react-dom": "^19.0.0",
                 "react-icons": "^5.5.0",
                 "react-leaflet": "^5.0.0",
-                "react-node": "^1.0.2"
+                "react-node": "^1.0.2",
+                "swr": "^2.3.3"
             },
             "devDependencies": {
                 "@eslint/eslintrc": "^3",
@@ -3015,6 +3016,15 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/detect-libc": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -7704,6 +7714,19 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/swr": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.3.tgz",
+            "integrity": "sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==",
+            "license": "MIT",
+            "dependencies": {
+                "dequal": "^2.0.3",
+                "use-sync-external-store": "^1.4.0"
+            },
+            "peerDependencies": {
+                "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/tailwindcss": {
             "version": "3.4.17",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",

package.json

@@ -31,7 +31,8 @@
         "react-dom": "^19.0.0",
         "react-icons": "^5.5.0",
         "react-leaflet": "^5.0.0",
-        "react-node": "^1.0.2"
+        "react-node": "^1.0.2",
+        "swr": "^2.3.3"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3",

src/app/api/earthquakes/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from 'next/server';
+
+import { PrismaClient } from '@prisma/client';
+
+const usingPrisma = false;
+let prisma: PrismaClient;
+if (usingPrisma) prisma = new PrismaClient();
+
+export async function GET(request: Request) {
+	try {
+		const events = [
+			{
+				id: "1234",
+				title: "Earthquake in Germany",
+				text1: "Magnitude 8.5",
+				text2: "30 minutes ago",
+				magnitude: 8.5,
+				longitude: 10.4515, // Near Berlin, Germany
+				latitude: 52.52,
+			},
+			{
+				id: "2134",
+				title: "Earthquake in California",
+				text1: "Magnitude 5.3",
+				text2: "2 hours ago",
+				magnitude: 5.3,
+				longitude: -122.4194, // Near San Francisco, California, USA
+				latitude: 37.7749,
+			},
+			{
+				id: "2314",
+				title: "Tremor in Japan",
+				text1: "Magnitude 4.7",
+				text2: "5 hours ago",
+				magnitude: 4.7,
+				longitude: 139.6917, // Near Tokyo, Japan
+				latitude: 35.6762,
+			},
+			{
+				id: "2341",
+				title: "Tremor in Spain",
+				text1: "Magnitude 2.1",
+				text2: "10 hours ago",
+				magnitude: 2.1,
+				longitude: -3.7038, // Near Madrid, Spain
+				latitude: 40.4168,
+			},
+		];
+
+		let earthquakes;
+		if (usingPrisma) earthquakes = await prisma.earthquakes.findMany();
+
+		if (earthquakes) {
+			return NextResponse.json({ message: "Got earthquakes successfully", earthquakes }, { status: 200 });
+		} else {
+			return NextResponse.json({ message: "Got earthquakes successfully", earthquakes: events }, { status: 200 });
+			// return NextResponse.json({ message: "Failed to get earthquakes" }, { status: 401 });
+		}
+	} catch (error) {
+		console.error("Error in earthquakes endpoint:", error);
+		return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+	} finally {
+		if (usingPrisma) await prisma.$disconnect();
+	}
+}

src/app/api/login/route.ts

@@ -5,8 +5,9 @@ import { PrismaClient } from '@prisma/client';
 
 import { findUserByEmail, readUserCsv, User } from '../functions/csvReadWrite';
 
-const prisma = new PrismaClient();
 const usingPrisma = false;
+let prisma: PrismaClient;
+if (usingPrisma) prisma = new PrismaClient();
 
 export async function POST(request: Request) {
 	try {

src/app/api/observatories/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+
+import { PrismaClient } from '@prisma/client';
+
+const usingPrisma = false;
+let prisma: PrismaClient;
+if (usingPrisma) prisma = new PrismaClient();
+
+export async function GET(request: Request) {
+	try {
+		const events = [
+			{
+				id: "1234",
+				title: "Earthquake - Berlin Observatory",
+				text1: "Logged by ",
+				text2: "30 minutes ago",
+				longitude: 10.4515, // Near Berlin, Germany
+				latitude: 52.52,
+			},
+			{
+				id: "2134",
+				title: "New Observatory - Phuket, Thailand",
+				text1: "Dr. Neil Armstrong",
+				text2: "2 weeks ago",
+				longitude: -122.4194,
+				latitude: 37.7749,
+			},
+			{
+				id: "2314",
+				title: "Observatory Scientist Change",
+				text1: "Dr. Samantha Green new lead scientist",
+				text2: "1 month ago",
+				longitude: 139.6917,
+				latitude: 35.6762,
+			},
+		];
+
+		// todo get earthquakes associated with observatories
+		let observatories;
+		if (usingPrisma) observatories = await prisma.observatories.findMany();
+
+		if (observatories) {
+			return NextResponse.json({ message: "Got observatories successfully", observatories }, { status: 200 });
+		} else {
+			return NextResponse.json({ message: "Got observatories successfully", observatories: events }, { status: 200 });
+			// return NextResponse.json({ message: "Failed to get observatories" }, { status: 401 });
+		}
+	} catch (error) {
+		console.error("Error in observatories endpoint:", error);
+		return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+	} finally {
+		if (usingPrisma) await prisma.$disconnect();
+	}
+}

src/app/api/signup/route.ts

@@ -7,8 +7,9 @@ import {
     findUserByEmail, passwordStrengthCheck, readUserCsv, User, writeUserCsv
 } from '../functions/csvReadWrite';
 
-const prisma = new PrismaClient();
 const usingPrisma = false;
+let prisma: PrismaClient;
+if (usingPrisma) prisma = new PrismaClient();
 
 export async function POST(request: Request) {
 	try {

src/app/earthquakes/page.tsx

@@ -1,61 +1,23 @@
 "use client";
 
 import { useMemo, useState } from 'react';
+import useSWR from 'swr';
 
 import Map from '@components/Map';
 import Sidebar from '@components/Sidebar';
+import { fetcher } from '@utils/fetcher';
 
 export default function Earthquakes() {
 	const [selectedEventId, setSelectedEventId] = useState("");
 	const [hoveredEventId, setHoveredEventId] = useState("");
-
+	// todo properly integrate loading
-	const events = useMemo(
+	const { data, error, isLoading } = useSWR("/api/earthquakes", fetcher);
-		() => [
-			{
-				id: "1234",
-				title: "Earthquake in Germany",
-				text1: "Magnitude 8.5",
-				text2: "30 minutes ago",
-				magnitude: 8.5,
-				longitude: 10.4515, // Near Berlin, Germany
-				latitude: 52.52,
-			},
-			{
-				id: "2134",
-				title: "Earthquake in California",
-				text1: "Magnitude 5.3",
-				text2: "2 hours ago",
-				magnitude: 5.3,
-				longitude: -122.4194, // Near San Francisco, California, USA
-				latitude: 37.7749,
-			},
-			{
-				id: "2314",
-				title: "Tremor in Japan",
-				text1: "Magnitude 4.7",
-				text2: "5 hours ago",
-				magnitude: 4.7,
-				longitude: 139.6917, // Near Tokyo, Japan
-				latitude: 35.6762,
-			},
-			{
-				id: "2341",
-				title: "Tremor in Spain",
-				text1: "Magnitude 2.1",
-				text2: "10 hours ago",
-				magnitude: 2.1,
-				longitude: -3.7038, // Near Madrid, Spain
-				latitude: 40.4168,
-			},
-		],
-		[]
-	);
 
 	return (
 		<div className="h-full flex overflow-hidden">
 			<div className="flex-grow">
 				<Map
-					events={events}
+					events={data ? data.earthquakes : []}
 					selectedEventId={selectedEventId}
 					setSelectedEventId={setSelectedEventId}
 					hoveredEventId={hoveredEventId}
@@ -67,7 +29,7 @@ export default function Earthquakes() {
 				logTitle="Log an Earthquake"
 				logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
 				recentsTitle="Recent Earthquakes"
-				events={events}
+				events={data ? data.earthquakes : []}
 				selectedEventId={selectedEventId}
 				setSelectedEventId={setSelectedEventId}
 				hoveredEventId={hoveredEventId}

src/app/observatories/page.tsx

@@ -1,48 +1,23 @@
 "use client";
 
-import Sidebar from "@/components/Sidebar";
+import { useMemo, useState } from 'react';
-import Map from "@components/Map";
+import useSWR from 'swr';
-import { useState, useMemo } from "react";
+
+import Sidebar from '@/components/Sidebar';
+import Map from '@components/Map';
+import { fetcher } from '@utils/fetcher';
 
 export default function Observatories() {
 	const [selectedEventId, setSelectedEventId] = useState("");
 	const [hoveredEventId, setHoveredEventId] = useState("");
-
+	// todo properly integrate loading
-	const events = useMemo(
+	const { data, error, isLoading } = useSWR("/api/earthquakes", fetcher);
-		() => [
-			{
-				id: "1234",
-				title: "Earthquake - Berlin Observatory",
-				text1: "Logged by ",
-				text2: "30 minutes ago",
-				longitude: 10.4515, // Near Berlin, Germany
-				latitude: 52.52,
-			},
-			{
-				id: "2134",
-				title: "New Observatory - Phuket, Thailand",
-				text1: "Dr. Neil Armstrong",
-				text2: "2 weeks ago",
-				longitude: -122.4194,
-				latitude: 37.7749,
-			},
-			{
-				id: "2314",
-				title: "Observatory Scientist Change",
-				text1: "Dr. Samantha Green new lead scientist",
-				text2: "1 month ago",
-				longitude: 139.6917,
-				latitude: 35.6762,
-			},
-		],
-		[]
-	);
 
 	return (
 		<div className="h-full flex overflow-hidden">
 			<div className="flex-grow">
 				<Map
-					events={events}
+					events={data ? data.observatories : []}
 					selectedEventId={selectedEventId}
 					setSelectedEventId={setSelectedEventId}
 					hoveredEventId={hoveredEventId}
@@ -54,7 +29,7 @@ export default function Observatories() {
 				logTitle="Observatory Mapping"
 				logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
 				recentsTitle="Observatory Events"
-				events={events}
+				events={data ? data.observatories : []}
 				selectedEventId={selectedEventId}
 				setSelectedEventId={setSelectedEventId}
 				hoveredEventId={hoveredEventId}

src/utils/fetcher.ts

@@ -0,0 +1,3 @@
+import axios from 'axios';
+
+export const fetcher = (url: string) => axios.get(url).then((res) => res.data);