44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import useSWR from "swr";
|
|
|
|
import Sidebar from "@/components/Sidebar";
|
|
import Map from "@components/Map";
|
|
import { fetcher } from "@utils/axiosHelpers";
|
|
|
|
export default function Observatories() {
|
|
const [selectedEventId, setSelectedEventId] = useState("");
|
|
const [hoveredEventId, setHoveredEventId] = useState("");
|
|
// todo properly integrate loading
|
|
const { data, error, isLoading } = useSWR("/api/observatories", fetcher);
|
|
|
|
return (
|
|
<div className="h-full flex overflow-hidden">
|
|
<div className="flex-grow">
|
|
<Map
|
|
events={data ? data.observatories : []}
|
|
selectedEventId={selectedEventId}
|
|
setSelectedEventId={setSelectedEventId}
|
|
hoveredEventId={hoveredEventId}
|
|
setHoveredEventId={setHoveredEventId}
|
|
mapType="observatories"
|
|
></Map>
|
|
</div>
|
|
<Sidebar
|
|
logTitle="Observatory Mapping"
|
|
logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
|
|
recentsTitle="Observatory Events"
|
|
events={data ? data.observatories : []}
|
|
selectedEventId={selectedEventId}
|
|
setSelectedEventId={setSelectedEventId}
|
|
hoveredEventId={hoveredEventId}
|
|
setHoveredEventId={setHoveredEventId}
|
|
button1Name="Log a New Observatory"
|
|
button2Name="Search Observatories"
|
|
></Sidebar>
|
|
{/* <SidebarTest></SidebarTest> */}
|
|
</div>
|
|
);
|
|
}
|