Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 2x 2x 1x 1x 1x 1x 2x 2x 2x | import React, { useEffect, useRef } from "react";
import { Select, Space, Divider, Spin } from "antd";
import { LocationAPICaller } from "@/services/apis/location.api";
import { Location } from "../../../../types/Location";
import AddLocationButton from "./AddLocationButton";
import { useQuery } from "react-query";
interface LocationSelectorProps {
value?: number;
onChange?: (value: number) => void;
}
const LocationSelector: React.FC<LocationSelectorProps> = ({
value,
onChange,
}) => {
const dropdownRef = useRef<HTMLDivElement | null>(null);
const {
data: locations,
isLoading,
error,
refetch,
} = useQuery<Location[]>("locations", fetchLocations, {
refetchOnWindowFocus: false,
});
useEffect(() => {
Iif (locations && dropdownRef.current) {
dropdownRef.current.scrollTop = dropdownRef.current.scrollHeight;
}
}, [locations]);
async function fetchLocations(): Promise<Location[]> {
const response = await LocationAPICaller.getAllLocations();
return response.data.result;
}
const handleChange = (newValue: number) => {
Iif (onChange) {
onChange(newValue);
}
};
if (isLoading) return <Spin />;
Iif (error) {
console.error("Failed to fetch locations:", error);
return <div>Failed to load locations</div>;
}
Iif (!locations || !Array.isArray(locations)) {
return <div>No locations found</div>;
}
const defaultValue =
value ?? (locations.length > 0 ? locations[0].id : undefined);
return (
<Select
value={value}
onChange={handleChange}
defaultValue={defaultValue}
listItemHeight={999}
listHeight={9999}
loading={isLoading}
dropdownRender={(menu) => (
<>
<div ref={dropdownRef} style={{ maxHeight: 108, overflowY: "auto" }}>
{menu}
<Divider style={{ margin: "8px 0" }} />
</div>
<Space style={{ padding: "0 8px 4px" }}>
<div className="cursor-pointer mt-1">
<AddLocationButton items={locations} refetchLocations={refetch} />
</div>
</Space>
</>
)}
>
{locations.map((location) => (
<Select.Option key={location.id} value={location.id}>
{location.name}
</Select.Option>
))}
</Select>
);
};
export default LocationSelector;
|