You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
import { Layer } from "react-map-gl";
|
|
import { cancelledPointLayer } from "./layers-config";
|
|
import { useLayersVisibility } from "../../stores/useLayersVisibility";
|
|
import { MODES, STATUSES } from "../../config";
|
|
import { useRegionFilterExpression } from "./useRegionFilterExpression";
|
|
import { LAYER_IDS } from "./constants";
|
|
import { useMode } from "../../stores/useMode";
|
|
import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
|
|
import { getSourceLayerName } from "../../api.js";
|
|
|
|
const statusExpression = ["==", ["get", "status"], STATUSES.cancelled];
|
|
|
|
export const CancelledPoints = () => {
|
|
const { isVisible } = useLayersVisibility();
|
|
const {
|
|
filters: { region },
|
|
} = useOnApprovalPointsFilters();
|
|
const regionFilterExpression = useRegionFilterExpression(region);
|
|
|
|
const { mode } = useMode();
|
|
|
|
const getFilter = () => {
|
|
if (mode === MODES.ON_APPROVAL) {
|
|
return regionFilterExpression
|
|
? ["all", statusExpression, regionFilterExpression]
|
|
: statusExpression;
|
|
}
|
|
|
|
return statusExpression;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Layer
|
|
{...cancelledPointLayer}
|
|
id={LAYER_IDS.cancelled}
|
|
source={"points"}
|
|
source-layer={getSourceLayerName()}
|
|
layout={{
|
|
visibility: isVisible[LAYER_IDS.cancelled] ? "visible" : "none",
|
|
}}
|
|
filter={getFilter()}
|
|
/>
|
|
</>
|
|
);
|
|
};
|