62 lines
2.3 KiB
React
62 lines
2.3 KiB
React
|
import {useMemo, useEffect, useState} from "react";
|
||
|
|
import VdapApi from "@/hooks/useVdapApi.js";
|
||
|
|
import useBuildUrl from "@/hooks/useBuildUrl.js";
|
||
|
|
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||
|
|
import {Combobox, createListCollection, Portal} from "@chakra-ui/react";
|
||
|
|
|
||
|
|
export default function VaaMapSettings({widgetId, currentSettings}) {
|
||
|
|
const [inputValue, setInputValue] = useState("");
|
||
|
|
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||
|
|
|
||
|
|
const url = useBuildUrl("api/v2/comm_coor_vaa", currentSettings?.startDate, currentSettings?.endDate);
|
||
|
|
const {data, isLoading, error} = VdapApi(url);
|
||
|
|
|
||
|
|
const unique_data = useMemo(() => {
|
||
|
|
if (!data || !Array.isArray(data)) return [];
|
||
|
|
const key = 'volc_name';
|
||
|
|
return [...new Map(data.map(item => [item[key], item])).values()];
|
||
|
|
}, [data]);
|
||
|
|
|
||
|
|
const filteredItems = useMemo(() => {
|
||
|
|
if (!inputValue.trim()) return unique_data;
|
||
|
|
return unique_data.filter((item) => item.volc_name.toLowerCase().includes(inputValue.toLowerCase()));
|
||
|
|
}, [unique_data, inputValue]);
|
||
|
|
|
||
|
|
const collection = useMemo(() => {
|
||
|
|
return createListCollection({
|
||
|
|
items: filteredItems.sort((a, b) => a.volc_name.localeCompare(b.volc_name)),
|
||
|
|
itemToString: (item) => item.volc_name,
|
||
|
|
itemToValue: (item) => item.volc_name,
|
||
|
|
});
|
||
|
|
}, [filteredItems]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
updateSettings(widgetId, {data: unique_data, isLoading: isLoading, error: error, selected: inputValue});
|
||
|
|
}, [updateSettings, widgetId, unique_data, isLoading, error, inputValue]);
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Combobox.Root openOnClick collection={collection} onInputValueChange={(e) => setInputValue(e.inputValue)}>
|
||
|
|
<Combobox.Label>Select a Volcano</Combobox.Label>
|
||
|
|
<Combobox.Control>
|
||
|
|
<Combobox.Input placeholder="Search recent VAA's by volcano name"/>
|
||
|
|
<Combobox.IndicatorGroup>
|
||
|
|
<Combobox.ClearTrigger />
|
||
|
|
</Combobox.IndicatorGroup>
|
||
|
|
</Combobox.Control>
|
||
|
|
|
||
|
|
<Portal>
|
||
|
|
<Combobox.Positioner>
|
||
|
|
<Combobox.Content>
|
||
|
|
<Combobox.Empty>No VAA's found</Combobox.Empty>
|
||
|
|
{collection.items.map((vaa) =>
|
||
|
|
<Combobox.Item key={vaa?.volc_name} item={vaa}>
|
||
|
|
{vaa?.volc_name}
|
||
|
|
</Combobox.Item>
|
||
|
|
)}
|
||
|
|
</Combobox.Content>
|
||
|
|
</Combobox.Positioner>
|
||
|
|
</Portal>
|
||
|
|
</Combobox.Root>
|
||
|
|
)
|
||
|
|
}
|