we have a search modal it just doesnt work yet

2025-05-28 22:11:39 +01:00 · 2025-05-28 22:11:39 +01:00 · 1f005295b4
commit 1f005295b4
parent c1d686b012
4 changed files with 253 additions and 99 deletions
--- a/src/app/earthquakes/page.tsx
+++ b/src/app/earthquakes/page.tsx
@ -2,20 +2,100 @@

 import { useMemo, useState } from "react";
 import useSWR from "swr";
-
 import Map from "@components/Map";
 import Sidebar from "@components/Sidebar";
 import { createPoster } from "@utils/axiosHelpers";
 import { Earthquake } from "@prismaclient";
 import { getRelativeDate } from "@utils/formatters";
 import GeologicalEvent from "@appTypes/Event";
+import axios from "axios";

+// --- SEARCH MODAL COMPONENT ---
+function EarthquakeSearchModal({ open, onClose, onSelect }) {
+  const [search, setSearch] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setResults([]);
+    try {
+      const res = await axios.post("/api/earthquakes/search", { query: search });
+      setResults(res.data.earthquakes || []);
+    } catch (e) {
+      alert("Failed to search.");
+    }
+    setLoading(false);
+  };
+
+  if (!open) return null;
+  return (
+    <div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
+      <div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full relative">
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
+        >
+          &times;
+        </button>
+        <h2 className="font-bold text-xl mb-4">Search Earthquakes</h2>
+        <form onSubmit={handleSearch} className="flex gap-2 mb-4">
+          <input
+            type="text"
+            placeholder="e.g. Mexico, EV-7.4-Mexico-00035"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            className="flex-grow px-3 py-2 border rounded"
+            required
+          />
+          <button
+            type="submit"
+            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+          >
+            {loading ? "Searching..." : "Search"}
+          </button>
+        </form>
+        <div>
+          {results.length === 0 && !loading && search !== "" && (
+            <p className="text-gray-400 text-sm">No results found.</p>
+          )}
+          <ul>
+            {results.map(eq => (
+              <li
+                key={eq.id}
+                className="border-b py-2 cursor-pointer hover:bg-gray-50 flex items-center justify-between"
+                onClick={() => { onSelect(eq); onClose(); }}
+                tabIndex={0}
+              >
+                <div>
+                  <strong>{eq.code}</strong> {" "}
+                  <span>{eq.location}</span> <span className="text-xs text-gray-500">{new Date(eq.date).toLocaleDateString()}</span>
+                </div>
+                <div className={`rounded-full px-2 py-1 ml-2 text-white font-semibold ${eq.magnitude >= 7 ? "bg-red-500" : eq.magnitude >= 6 ? "bg-orange-400" : "bg-yellow-400"}`}>
+                  {eq.magnitude}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- MAIN PAGE COMPONENT ---
 export default function Earthquakes() {
  const [selectedEventId, setSelectedEventId] = useState("");
  const [hoveredEventId, setHoveredEventId] = useState("");
-	// todo properly integrate loading
+
+  // Search modal state
+  const [searchModalOpen, setSearchModalOpen] = useState(false);
+
+  // Fetch recent earthquakes as before
  const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 5 }));

+  // Prepare events for maps/sidebar
  const earthquakeEvents = useMemo(
    () =>
      data && data.earthquakes
@ -32,11 +112,14 @@ export default function Earthquakes() {
                date: x.date,
              })
            )
-						.sort((a: GeologicalEvent, b: GeologicalEvent) => new Date(b.date).getTime() - new Date(a.date).getTime()) // Remove Date conversion
+            .sort((a: GeologicalEvent, b: GeologicalEvent) => new Date(b.date).getTime() - new Date(a.date).getTime())
        : [],
    [data]
  );

+  // Optional: show details of selected search result (not implemented here)
+  // const [selectedSearchResult, setSelectedSearchResult] = useState(null);
+
  return (
    <div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
      <div className="flex-grow h-full">
@ -60,6 +143,15 @@ export default function Earthquakes() {
        setHoveredEventId={setHoveredEventId}
        button1Name="Log an Earthquake"
        button2Name="Search Earthquakes"
+        onButton2Click={() => setSearchModalOpen(true)} // <-- important!
+      />
+      <EarthquakeSearchModal
+        open={searchModalOpen}
+        onClose={() => setSearchModalOpen(false)}
+        onSelect={eq => {
+          setSelectedEventId(eq.code); // select on map/sidebar
+          // setSelectedSearchResult(eq); // you can use this if you want to show detail modal
+        }}
      />
    </div>
  );
--- a/src/app/earthquakes/search/route.ts
+++ b/src/app/earthquakes/search/route.ts
@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@utils/prisma";
+
+export async function POST(req: Request) {
+  try {
+    const { query } = await req.json();
+
+    // Find earthquakes where either code or location matches (case-insensitive)
+    const earthquakes = await prisma.earthquake.findMany({
+      where: {
+        OR: [
+          { code: { contains: query, mode: "insensitive" } },
+          { location: { contains: query, mode: "insensitive" } }
+        ],
+      },
+      orderBy: { date: "desc" },
+      take: 20, // limit results
+    });
+
+    return NextResponse.json({ earthquakes, message: "Success" });
+  } catch (error) {
+    console.error("Error in earthquake search", error);
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@ -16,6 +16,7 @@ interface SidebarProps {
 	setHoveredEventId: Dispatch<SetStateAction<string>>;
 	button1Name: string;
 	button2Name: string;
+    onButton2Click?: () => void;
 }

 function MagnitudeNumber({ magnitude }: { magnitude: number }) {
@ -47,6 +48,7 @@ export default function Sidebar({
 	setHoveredEventId,
 	button1Name,
 	button2Name,
+    onButton2Click, 
 }: SidebarProps) {
 	const eventsContainerRef = useRef<HTMLDivElement>(null);

@ -68,16 +70,20 @@ export default function Sidebar({
 				<div className="px-6 pb-8 border-b border-neutral-200">
 					<h2 className="text-2xl font-bold text-neutral-800 mb-2">{logTitle}</h2>
 					<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
+		
                    <Link href="/">
                        <button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
                            {button1Name}
                        </button>
                </Link>
-					<Link href="/">
-						<button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
+                {/* "Search Earthquakes" should NOT be wrapped in a Link! */}
+                        <button
+                            className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium"
+                            onClick={onButton2Click}
+                            type="button"
+                        >
                             {button2Name}
                        </button>
-					</Link>
 				    </div>
 				<div className="px-6 pt-6">
 					<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
--- a/src/components/sidebar_e.tsx
+++ b/src/components/sidebar_e.tsx
@ -1,38 +1,69 @@
 import Link from "next/link";
 import React from "react";

-const Sidebar = () => {
+type SidebarProps = {
+  logTitle: string;
+  logSubtitle: string;
+  recentsTitle: string;
+  events: any[]; // Or type this better if desired
+  button1Name: string;
+  button2Name: string;
+  onButton1Click?: () => void;
+  onButton2Click?: () => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  logTitle,
+  logSubtitle,
+  recentsTitle,
+  events,
+  button1Name,
+  button2Name,
+  onButton1Click,
+  onButton2Click,
+}) => {
  return (
-		<div className="flex flex-col h-screen w-64 bg-neutral-400 text-white border-l border-neutral-700">
-			<div className="flex flex-col p-4 border-b border-neutral-700">
-				<h2 className="text-xl font-semibold mb-2">Log an Earthquake</h2>
-				<p className="text-sm text-neutral-700">
-					Record new earthquakes - time/date, location, magnitude, observatory and scientists
-				</p>
-				<button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
-					<Link href="/">Log Event</Link>
+    <div className="flex flex-col h-full w-80 bg-white border-l border-neutral-200 shadow-md">
+      <div className="flex flex-col p-4 border-b border-neutral-200">
+        <h2 className="text-xl font-semibold mb-2">{logTitle}</h2>
+        <p className="text-sm text-neutral-600">{logSubtitle}</p>
+        <button
+          className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded"
+          onClick={onButton1Click}
+        >
+          {button1Name}
+        </button>
+        <button
+          className="mt-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded"
+          onClick={onButton2Click}
+        >
+          {button2Name}
        </button>
      </div>
-
-			{/* Section: Recent Events - Will need to be replaced with a link to the database*/}
-			<div className="flex-1 p-4">
-				<h2 className="text-xl font-semibold mb-2">Recent Events</h2>
+      <div className="flex-1 p-4 overflow-y-auto">
+        <h2 className="text-xl font-semibold mb-2">{recentsTitle}</h2>
        <ul className="space-y-2">
-					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
-						<p className="text-sm">Earthquake in California</p>
-						<p className="text-xs text-neutral-300">Magnitude 5.3</p>
-						<p className="text-xs text-neutral-400">2 hours ago</p>
-					</li>
-					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
-						<p className="text-sm">Tremor in Japan</p>
-						<p className="text-xs text-neutral-300">Magnitude 4.7</p>
-						<p className="text-xs text-neutral-400">5 hours ago</p>
-					</li>
-					<li className="bg-neutral-700 p-3 rounded hover:bg-neutral-600">
-						<p className="text-sm">Tremor in Spain</p>
-						<p className="text-xs text-neutral-300">Magnitude 2.1</p>
-						<p className="text-xs text-neutral-400">10 hours ago</p>
+          {events.map((item, idx) => (
+            <li
+              className="bg-neutral-100 p-3 rounded hover:bg-neutral-200 flex items-center justify-between"
+              key={item.id || idx}
+            >
+              <div>
+                <p className="font-medium">{item.title}</p>
+                <p className="text-xs text-neutral-600">
+                  {item.text2}
+                </p>
+              </div>
+              <div className={`ml-3 rounded-full font-semibold px-2 py-1 ${item.magnitude >= 7
+                ? "bg-red-500 text-white"
+                : item.magnitude >= 6
+                ? "bg-orange-400 text-white"
+                : "bg-yellow-400 text-black"
+              }`}>
+                {item.magnitude}
+              </div>
            </li>
+          ))}
        </ul>
      </div>
    </div>