@luomus/laji-form 15.1.65 → 15.1.67

package/lib/components/fields/ImageArrayField.d.ts

@@ -99,7 +99,7 @@ export declare function MediaArrayField<LFC extends Constructor<React.Component<
         processFile: (file: File) => Promise<ProcessedFile>;
         onMediaMetadataUpdate: ({ formData }: {
             formData: any;
-        }) => void;
+        }) => Promise<void>;
         getMetadataPromise: () => Promise<MediaMetadataSchema>;
         getMaxFileSizeAsString: () => string;
         getAllowedMediaFormatsTranslationKey: () => "AllowedFileFormat" | "AllowedFileFormats";
@@ -139,6 +139,7 @@ export declare function MediaArrayField<LFC extends Constructor<React.Component<
                 autoOpenMetadataModal: PropTypes.Requireable<boolean>;
                 sideEffects: PropTypes.Requireable<object>;
                 exifParsers: PropTypes.Requireable<(object | null | undefined)[]>;
+                metadataFormId: PropTypes.Requireable<string>;
             }>>;
         }>>;
         schema: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
@@ -169,7 +170,7 @@ export declare class Thumbnail extends React.PureComponent<ThumbnailProps, Thumb
     componentDidMount(): void;
     componentWillUnmount(): void;
     UNSAFE_componentWillReceiveProps(props: ThumbnailProps): void;
-    updateURL: ({ id, apiClient, apiEndpoint }: ThumbnailProps) => void;
+    updateURL: ({ id, apiClient, apiEndpoint }: ThumbnailProps) => Promise<void>;
     render(): JSX.Element | null;
 }
 export {};

package/lib/components/fields/ImageArrayField.js

@@ -38,6 +38,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -162,7 +171,7 @@ function MediaArrayField(ComposedComponent) {
                 const item = this.props.formData[i];
                 this.setState({ metadataModalOpen: i });
                 this.fetching = item;
-                this.apiClient.fetch(`/${this.ENDPOINT}/${item}`).then((response) => {
+                this.apiClient.get(`/${this.ENDPOINT}/{id}`, { path: { id: item } }).then((response) => {
                     if (response.id !== this.fetching)
                         return;
                     this._context.metadatas[item] = response;
@@ -172,10 +181,11 @@ function MediaArrayField(ComposedComponent) {
             this.onMediaRmClick = (i) => () => {
                 const id = this.props.formData[i];
                 this.props.onChange((0, immutability_helper_1.default)(this.props.formData, { $splice: [[i, 1]] }));
-                this.apiClient.fetch(`/${this.ENDPOINT}/${id}`, undefined, {
-                    method: "DELETE",
-                    failSilently: true
-                });
+                try {
+                    this.apiClient.delete(`/${this.ENDPOINT}/{id}`, { path: { id } });
+                }
+                catch (e) {
+                }
             };
             this.hideMetadataModal = () => this.setState({ metadataModalOpen: false, metadataSaveSuccess: undefined });
             this.onMetadataFormChange = (formData) => this.setState({ modalMetadata: formData });
@@ -184,7 +194,8 @@ function MediaArrayField(ComposedComponent) {
                 const { lang, translations } = this.props.registry.formContext;
                 const metadataForm = this.state.metadataForm || {};
                 if (typeof metadataModalOpen === "number" && !this.state.metadataForm) {
-                    this.apiClient.fetchCached(`/forms/${this.METADATA_FORM_ID}`, { lang, format: "schema" })
+                    const { metadataFormId = this.METADATA_FORM_ID } = (0, utils_1.getUiOptions)(this.props.uiSchema);
+                    this.apiClient.get("/forms/{id}", { path: { id: metadataFormId }, query: { lang, format: "schema" } })
                         .then(metadataForm => {
                         if (this.mounted) {
                             this.setState({ metadataForm });
@@ -421,16 +432,10 @@ function MediaArrayField(ComposedComponent) {
                     reader.readAsDataURL(file);
                 });
             };
-            this.onMediaMetadataUpdate = ({ formData }) => {
+            this.onMediaMetadataUpdate = (_a) => __awaiter(this, [_a], void 0, function* ({ formData }) {
                 this.props.formContext.services.blocker.push();
-                this.apiClient.fetch(`/${this.ENDPOINT}/${formData.id}`, undefined, {
-                    method: "PUT",
-                    headers: {
-                        "accept": "application/json",
-                        "content-type": "application/json"
-                    },
-                    body: JSON.stringify(formData)
-                }).then(() => {
+                try {
+                    yield this.apiClient.put(`/${this.ENDPOINT}/{id}`, { path: { id: formData.id } }, formData);
                     this.props.formContext.services.blocker.pop();
                     const notify = () => this.props.formContext.notifier.success(this.props.formContext.translations.SaveSuccess);
                     if (this.mounted) {
@@ -439,11 +444,12 @@ function MediaArrayField(ComposedComponent) {
                     else {
                         notify();
                     }
-                }).catch(() => {
+                }
+                catch (e) {
                     this.props.formContext.services.blocker.pop();
                     this.mounted && this.setState({ metadataSaveSuccess: false });
-                });
-            };
+                }
+            });
             this.getMetadataPromise = () => {
                 let mediaMetadata = this.props.formContext.mediaMetadata
                     || { intellectualRights: "MZ.intellectualRightsARR" };
@@ -451,7 +457,7 @@ function MediaArrayField(ComposedComponent) {
                 return ("capturerVerbatim" in mediaMetadata)
                     ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: [mediaMetadata.capturerVerbatim] }))
                     : MACode
-                        ? this.apiClient.fetchCached(`/person/by-id/${MACode}`).then(({ fullName = MACode }) => (Object.assign(Object.assign({ capturerVerbatim: Array.isArray(fullName) ? fullName : [fullName] }, mediaMetadata), { intellectualOwner: fullName }))).catch(() => Promise.resolve(mediaMetadata))
+                        ? this.apiClient.get("/person/by-id/{personId}", { path: { personId: MACode } }).then(({ fullName = MACode }) => (Object.assign(Object.assign({ capturerVerbatim: Array.isArray(fullName) ? fullName : [fullName] }, mediaMetadata), { intellectualOwner: fullName }))).catch(() => Promise.resolve(mediaMetadata))
                         : mediaMetadata;
             };
             this.getMaxFileSizeAsString = () => {
@@ -566,105 +572,67 @@ function MediaArrayField(ComposedComponent) {
                         this.renderMediaAddModal()))));
         }
         saveMedias(files) {
-            const containerId = this.getContainerId();
-            let tmpMedias;
-            const fail = (translationKey, additionalInfo = "") => {
-                const translation = (Array.isArray(translationKey) ? translationKey : [translationKey])
-                    .map((key) => this.props.formContext.translations[key])
-                    .join(". ");
-                throw `${translation} ${additionalInfo}`;
-            };
-            return this.processFiles(files).then(processedFiles => {
-                let invalidFile = (files.length <= 0);
-                let fileTooLarge = false;
-                let noValidData = true;
-                if (!this._context.tmpMedias[containerId]) {
-                    this._context.tmpMedias[containerId] = {};
-                }
-                tmpMedias = processedFiles.map(f => {
-                    mediaUuid++;
-                    this._context.tmpMedias[containerId][mediaUuid] = f.dataURL;
-                    return mediaUuid;
-                });
-                this.mounted && this.setState({ tmpMedias: [...(this.state.tmpMedias || []), ...tmpMedias] });
-                const formDataBody = files.reduce((body, file) => {
-                    if (!this.ALLOWED_FILE_TYPES.includes(file.type)) {
-                        invalidFile = true;
+            return __awaiter(this, void 0, void 0, function* () {
+                const containerId = this.getContainerId();
+                let tmpMedias = [];
+                const fail = (translationKey, additionalInfo = "") => {
+                    const translation = (Array.isArray(translationKey) ? translationKey : [translationKey])
+                        .map((key) => this.props.formContext.translations[key])
+                        .join(". ");
+                    throw `${translation} ${additionalInfo}`;
+                };
+                try {
+                    const processedFiles = yield this.processFiles(files);
+                    let invalidFile = (files.length <= 0);
+                    let fileTooLarge = false;
+                    let noValidData = true;
+                    if (!this._context.tmpMedias[containerId]) {
+                        this._context.tmpMedias[containerId] = {};
                     }
-                    else if (file.size > this.MAX_FILE_SIZE) {
-                        fileTooLarge = true;
+                    tmpMedias = processedFiles.map(f => {
+                        mediaUuid++;
+                        this._context.tmpMedias[containerId][mediaUuid] = f.dataURL;
+                        return mediaUuid;
+                    });
+                    this.mounted && this.setState({ tmpMedias: [...(this.state.tmpMedias || []), ...tmpMedias] });
+                    const formData = files.reduce((body, file) => {
+                        if (!this.ALLOWED_FILE_TYPES.includes(file.type)) {
+                            invalidFile = true;
+                        }
+                        else if (file.size > this.MAX_FILE_SIZE) {
+                            fileTooLarge = true;
+                        }
+                        else {
+                            body.append("data", file);
+                            noValidData = false;
+                        }
+                        return body;
+                    }, new FormData());
+                    if (noValidData && invalidFile) {
+                        fail(this.getAllowedMediaFormatsTranslationKey(), this.getAllowedMediaFormatsAsString() + ".");
+                        return;
                     }
-                    else {
-                        body.append("data", file);
-                        noValidData = false;
+                    else if (noValidData && fileTooLarge) {
+                        fail("AllowedFileSize", this.getMaxFileSizeAsString() + ".");
+                        return;
                     }
-                    return body;
-                }, new FormData());
-                if (noValidData && invalidFile) {
-                    fail(this.getAllowedMediaFormatsTranslationKey(), this.getAllowedMediaFormatsAsString() + ".");
-                    return;
-                }
-                else if (noValidData && fileTooLarge) {
-                    fail("AllowedFileSize", this.getMaxFileSizeAsString() + ".");
-                    return;
-                }
-                else {
-                    return this.apiClient.fetchRaw(`/${this.ENDPOINT}`, undefined, {
-                        method: "POST",
-                        body: formDataBody
+                    const tmpMediaEntities = yield this.apiClient.post(`/${this.ENDPOINT}`, undefined, formData);
+                    const mediaMetadata = yield this.getMetadataPromise();
+                    const mediaEntities = yield Promise.all(tmpMediaEntities.map((item) => this.apiClient.post(`/${this.ENDPOINT}/{id}`, { path: { id: item.id } }, mediaMetadata)));
+                    const ids = mediaEntities.map((item) => item ? item.id : undefined).filter(item => item !== undefined);
+                    tmpMedias.forEach(id => {
+                        delete this._context.tmpMedias[containerId][id];
                     });
+                    this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
+                    return ids;
                 }
-            }).then(response => {
-                if (!response)
-                    return;
-                if (response.status < 400) {
-                    return response.json();
-                }
-                else if (response.status === 400) {
-                    fail("InvalidFile");
-                }
-                else if (response.status === 503) {
-                    fail("InsufficientSpace");
-                }
-                else {
-                    fail(["SomethingWentWrong", "TryAgainLater"]);
-                }
-            }).then(response => {
-                if (!response)
-                    return;
-                return this.getMetadataPromise().then(mediaMetadata => {
-                    return Promise.all(response.map((item) => {
-                        return this.apiClient.fetchRaw(`/${this.ENDPOINT}/${item.id}`, undefined, {
-                            method: "POST",
-                            headers: {
-                                "accept": "application/json",
-                                "content-type": "application/json"
-                            },
-                            body: JSON.stringify(mediaMetadata)
-                        }).then(response => {
-                            if (response.status < 400) {
-                                return response.json();
-                            }
-                        });
-                    }));
-                });
-            }).then(response => {
-                if (!response)
-                    return;
-                const ids = response.map((item) => item ? item.id : undefined).filter(item => item !== undefined);
-                tmpMedias.forEach(id => {
-                    delete this._context.tmpMedias[containerId][id];
-                });
-                this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
-                return ids;
-            }).catch((e) => {
-                if (tmpMedias) {
+                catch (e) {
                     tmpMedias.forEach(id => {
                         delete this._context.tmpMedias[containerId][id];
                     });
                     this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
+                    throw e;
                 }
-                throw e;
             });
         }
     };
@@ -684,7 +652,8 @@ function MediaArrayField(ComposedComponent) {
                 autoOpenAddModal: PropTypes.bool,
                 autoOpenMetadataModal: PropTypes.bool,
                 sideEffects: PropTypes.object,
-                exifParsers: PropTypes.arrayOf(PropTypes.object)
+                exifParsers: PropTypes.arrayOf(PropTypes.object),
+                metadataFormId: PropTypes.string
             })
         }),
         schema: PropTypes.shape({
@@ -704,15 +673,18 @@ function MediaArrayField(ComposedComponent) {
 class Thumbnail extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.updateURL = ({ id, apiClient, apiEndpoint = "images" }) => {
+        this.updateURL = (_a) => __awaiter(this, [_a], void 0, function* ({ id, apiClient, apiEndpoint = "images" }) {
             if (!id)
                 return;
-            apiClient.fetchCached(`/${apiEndpoint}/${id}`, undefined, { failSilently: true }).then((response) => {
+            try {
+                const response = yield apiClient.get(`/${apiEndpoint}/{id}`, { path: { id } });
                 if (!this.mounted)
                     return;
                 this.setState({ url: response.squareThumbnailURL, linkUrl: response.originalURL });
-            });
-        };
+            }
+            catch (e) {
+            }
+        });
         this.state = {};
         this.updateURL(props);
     }

package/lib/components/fields/MapArrayField.js

@@ -38,6 +38,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -1053,7 +1062,7 @@ function _MapArrayField(ComposedComponent) {
         constructor(props) {
             super(props);
             this.stretchContainerRef = React.createRef();
-            this.geocode = () => {
+            this.geocode = () => __awaiter(this, void 0, void 0, function* () {
                 // Zoom map to area. Area ID is accessed from schema field defined in options.areaField
                 const item = (this.props.formData || [])[this.state.activeIdx];
                 const { areaField } = (0, utils_2.getUiOptions)(this.props.uiSchema);
@@ -1066,11 +1075,10 @@ function _MapArrayField(ComposedComponent) {
                 }
                 const geometries = this.getGeometries();
                 if (geometries.length === 0 && area && area.length > 0) {
-                    this.props.formContext.apiClient.fetch(`/areas/${area}`, undefined, undefined).then((result) => {
-                        this.map.geocode(result.name, undefined, 8);
-                    });
+                    const { name } = yield this.props.formContext.apiClient.get(`/areas/${area}`);
+                    this.map.geocode(name, undefined, 8);
                 }
-            };
+            });
             this.computeArea = () => {
                 const { activeIdx } = this.state;
                 if (activeIdx === undefined)

package/lib/components/fields/MapField.d.ts

@@ -36,7 +36,7 @@ export default class MapField extends React.Component<any, any, any> {
     componentDidUpdate(prevProps: any): void;
     _lastFormData: any;
     _zoomToDataOnNextTick: boolean | undefined;
-    geocode: (prevProps: any) => void;
+    geocode: (prevProps: any) => Promise<void>;
     zoomIfExternalEdit: (props: any) => void;
     setMapRef: (mapComponent: any) => void;
     map: any;

package/lib/components/fields/MapField.js

@@ -32,6 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -107,7 +116,7 @@ class MapField extends React.Component {
                 this.setState({ locateOn: true });
             }
         };
-        this.geocode = (prevProps) => {
+        this.geocode = (prevProps) => __awaiter(this, void 0, void 0, function* () {
             let { area } = (0, utils_1.getUiOptions)(this.props.uiSchema);
             if (area instanceof Array) {
                 area = area[0];
@@ -120,11 +129,10 @@ class MapField extends React.Component {
                     || (geoData.type === "FeatureCollection" && geoData.features.length === 0);
             });
             if (isEmptyAndWasEmpty && area && area.length > 0) {
-                this.props.formContext.apiClient.fetch(`/areas/${area}`, undefined, undefined).then((result) => {
-                    this.map.geocode(result.name, undefined, 8);
-                });
+                const { name } = yield this.props.formContext.apiClient.get(`/areas/${area}`);
+                this.map.geocode(name, undefined, 8);
             }
-        };
+        });
         this.zoomIfExternalEdit = (props) => {
             if (!equals(this._lastFormData, props.formData)) {
                 this.map.zoomToData();

package/lib/components/fields/NamedPlaceChooserField/NamedPlaceChooser.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { ByLang, FormContext } from "../../LajiForm";
-import { NamedPlace } from "@luomus/laji-schema";
 import memoize from "memoizee";
+import type { components } from "generated/api.d";
+type NamedPlace = components["schemas"]["namedPlace"];
 type Props = {
     places: NamedPlace[];
     failed?: boolean;

package/lib/components/fields/NamedPlaceChooserField/NamedPlaceChooserField.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { FieldProps, JSONSchemaArray, JSONSchemaObject } from "../../../types";
-import { NamedPlace } from "@luomus/laji-schema";
+import type { components } from "generated/api.d";
+type NamedPlace = components["schemas"]["namedPlace"];
 type Props = FieldProps<NamedPlace, JSONSchemaObject | JSONSchemaArray<JSONSchemaObject>>;
 type State = {
     show?: boolean;
@@ -11,7 +12,6 @@ type State = {
 /** Compatible only with gatherings array and gathering object */
 export default class NamedPlaceChooserField extends React.Component<Props, State> {
     static contextType: React.Context<import("../../../ReactContext").ContextProps>;
-    removeIds: Record<string, boolean>;
     mounted: boolean;
     state: State;
     getUiSchema: (props: Props, buttonDefinition: any) => import("../../../types").UiSchema<any> | {
@@ -60,9 +60,14 @@ export default class NamedPlaceChooserField extends React.Component<Props, State
     };
     isGatheringsArray: (schema: JSONSchemaObject | JSONSchemaArray<JSONSchemaObject>) => schema is JSONSchemaArray<JSONSchemaObject>;
     onPlaceSelected: (place: NamedPlace) => void;
-    onPlaceDeleted: (place: NamedPlace, success: () => void) => void;
+    onPlaceDeleted: (place: NamedPlace & {
+        id: string;
+    }, end: () => void) => Promise<void>;
     onButtonClick: () => () => void;
-    updatePlaces: () => void;
+    updatePlaces: (response: {
+        results: NamedPlace[];
+    }) => void;
+    getNamedPlacesUnsubscribe: () => void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     onHide: () => void;

package/lib/components/fields/NamedPlaceChooserField/NamedPlaceChooserField.js

@@ -32,6 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,6 +48,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const ReactContext_1 = __importDefault(require("../../../ReactContext"));
 const utils_1 = require("../../../utils");
+// import { NamedPlace } from "@luomus/laji-schema";
 const Context_1 = __importDefault(require("../../../Context"));
 const NamedPlaceChooser_1 = require("./NamedPlaceChooser");
 const PLACE_WHITELIST = [
@@ -59,7 +69,6 @@ const PLACE_DELETE_FAIL = "PLACE_DELETE_FAIL";
 class NamedPlaceChooserField extends React.Component {
     constructor() {
         super(...arguments);
-        this.removeIds = {};
         this.mounted = false;
         this.state = {};
         this.getUiSchema = (props, buttonDefinition) => {
@@ -122,69 +131,61 @@ class NamedPlaceChooserField extends React.Component {
                 this.setState({ failed: PLACE_USE_FAIL });
             }
         };
-        this.onPlaceDeleted = (place, success) => {
-            this.props.formContext.apiClient.fetchRaw(`/named-places/${place.id}`, undefined, { method: "DELETE" }).then(response => {
-                if (response.status < 400) {
-                    // It takes a while for API to remove the place, so we remove it locally and then invalidate again after some time.
-                    this.removeIds[place.id] = true;
-                    this.props.formContext.apiClient.invalidateCachePath("/named-places");
-                    setTimeout(() => this.props.formContext.apiClient.invalidateCachePath("/named-places"), 2000);
-                    success();
-                }
-            }).catch(() => {
+        this.onPlaceDeleted = (place, end) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.props.formContext.apiClient.delete("/named-places/{id}", { path: { id: place.id } });
+                end();
+            }
+            catch (e) {
                 this.setState({ failed: PLACE_DELETE_FAIL });
                 this.props.formContext.notifier.error(this.props.formContext.translations.PlaceRemovalFailed);
-            });
-        };
+                end();
+            }
+        });
         this.onButtonClick = () => () => {
             this.setState({ show: true });
         };
-        this.updatePlaces = () => {
-            this.props.formContext.apiClient.fetchCached("/named-places", { includePublic: false, pageSize: 100000 }).then(response => {
-                var _a;
-                if (!this.mounted)
-                    return;
-                const state = { places: response.results.filter(p => !this.removeIds[p.id]).sort((a, b) => {
-                        if (a.name < b.name)
-                            return -1;
-                        if (a.name > b.name)
-                            return 1;
-                        return 0;
-                    }) };
-                if (!((_a = response.results) === null || _a === void 0 ? void 0 : _a.length)) {
-                    return;
-                }
-                const buttonDefinition = {
-                    fn: this.onButtonClick,
-                    fnName: "addNamedPlace",
-                    glyph: "map-marker",
-                    label: this.props.formContext.translations.ChooseFromNamedPlace,
-                    id: this.props.idSchema.$id,
-                    changesFormData: true,
-                    variant: "primary"
-                };
-                if (this.isGatheringsArray(this.props.schema)) {
-                    buttonDefinition.rules = { canAdd: true };
-                }
-                else {
-                    buttonDefinition.position = "top";
-                }
-                state.buttonDefinition = buttonDefinition;
-                this.setState(state);
-            }).catch(() => {
-                this.setState({ failed: PLACES_FETCH_FAIL });
-            });
+        this.updatePlaces = (response) => {
+            var _a;
+            if (!this.mounted)
+                return;
+            const state = { places: response.results.sort((a, b) => {
+                    if (a.name < b.name)
+                        return -1;
+                    if (a.name > b.name)
+                        return 1;
+                    return 0;
+                }) };
+            if (!((_a = response.results) === null || _a === void 0 ? void 0 : _a.length)) {
+                return;
+            }
+            const buttonDefinition = {
+                fn: this.onButtonClick,
+                fnName: "addNamedPlace",
+                glyph: "map-marker",
+                label: this.props.formContext.translations.ChooseFromNamedPlace,
+                id: this.props.idSchema.$id,
+                changesFormData: true,
+                variant: "primary"
+            };
+            if (this.isGatheringsArray(this.props.schema)) {
+                buttonDefinition.rules = { canAdd: true };
+            }
+            else {
+                buttonDefinition.position = "top";
+            }
+            state.buttonDefinition = buttonDefinition;
+            this.setState(state);
         };
         this.onHide = () => this.setState({ show: false });
     }
     componentDidMount() {
         this.mounted = true;
-        this.updatePlaces();
-        this.props.formContext.apiClient.onCachePathInvalidation("/named-places", this.updatePlaces);
+        this.getNamedPlacesUnsubscribe = this.props.formContext.apiClient.subscribe("/named-places", { query: { includePublic: false, pageSize: 100000 } }, this.updatePlaces, () => this.setState({ failed: PLACES_FETCH_FAIL }), 1000);
     }
     componentWillUnmount() {
         this.mounted = false;
-        this.props.formContext.apiClient.removeOnCachePathInvalidation("/named-places", this.updatePlaces);
+        this.getNamedPlacesUnsubscribe();
     }
     render() {
         const { registry: { fields: { SchemaField } }, formContext } = this.props;

package/lib/components/fields/NamedPlaceChooserField/Popup.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { NamedPlace } from "@luomus/laji-schema";
 import { FormContext } from "src/components/LajiForm";
+import type { components } from "generated/api.d";
+type NamedPlace = components["schemas"]["namedPlace"];
 type Props = {
     onPlaceSelected: (place: NamedPlace) => void;
     onPlaceDeleted: (place: NamedPlace) => void;