78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client";
|
|
import { useState, useMemo } from "react";
|
|
import useSWR from "swr";
|
|
import Sidebar from "@/components/Sidebar";
|
|
import Map from "@components/Map";
|
|
import LogObservatoryModal from "@/components/LogObservatoryModal"; // Adjust if your path is different
|
|
import { fetcher } from "@utils/axiosHelpers";
|
|
import { Observatory } from "@prismaclient";
|
|
import { getRelativeDate } from "@utils/formatters";
|
|
import GeologicalEvent from "@appTypes/Event";
|
|
|
|
export default function Observatories() {
|
|
const [selectedEventId, setSelectedEventId] = useState("");
|
|
const [hoveredEventId, setHoveredEventId] = useState("");
|
|
const [logModalOpen, setLogModalOpen] = useState(false);
|
|
|
|
const { data, error, isLoading, mutate } = useSWR(
|
|
"/api/observatories",
|
|
fetcher
|
|
);
|
|
|
|
const observatoryEvents = useMemo(
|
|
() =>
|
|
data && data.observatories
|
|
? data.observatories
|
|
.map(
|
|
(x: Observatory): GeologicalEvent => ({
|
|
id: x.id.toString(),
|
|
title: `New Observatory - ${x.name}`,
|
|
longitude: x.longitude,
|
|
latitude: x.latitude,
|
|
text1: "",
|
|
text2: getRelativeDate(x.dateEstablished),
|
|
date: x.dateEstablished,
|
|
})
|
|
)
|
|
.sort(
|
|
(a: GeologicalEvent, b: GeologicalEvent) =>
|
|
new Date(b.date).getTime() - new Date(a.date).getTime()
|
|
)
|
|
: [],
|
|
[data]
|
|
);
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
|
|
<div className="flex-grow h-full">
|
|
<Map
|
|
events={observatoryEvents}
|
|
selectedEventId={selectedEventId}
|
|
setSelectedEventId={setSelectedEventId}
|
|
hoveredEventId={hoveredEventId}
|
|
setHoveredEventId={setHoveredEventId}
|
|
mapType="observatories"
|
|
/>
|
|
</div>
|
|
<Sidebar
|
|
logTitle="Observatory Mapping"
|
|
logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
|
|
recentsTitle="New Observatories"
|
|
events={observatoryEvents}
|
|
selectedEventId={selectedEventId}
|
|
setSelectedEventId={setSelectedEventId}
|
|
hoveredEventId={hoveredEventId}
|
|
setHoveredEventId={setHoveredEventId}
|
|
button1Name="Log a New Observatory"
|
|
button2Name="Search Observatories"
|
|
onButton1Click={() => setLogModalOpen(true)}
|
|
/>
|
|
<LogObservatoryModal
|
|
open={logModalOpen}
|
|
onClose={() => setLogModalOpen(false)}
|
|
onSuccess={() => mutate()}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|