@luomus/laji-form 15.1.67 → 15.1.69

package/lib/components/fields/ImageArrayField.js

@@ -38,15 +38,6 @@ 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)
@@ -171,7 +162,7 @@ function MediaArrayField(ComposedComponent) {
                 const item = this.props.formData[i];
                 this.setState({ metadataModalOpen: i });
                 this.fetching = item;
-                this.apiClient.get(`/${this.ENDPOINT}/{id}`, { path: { id: item } }).then((response) => {
+                this.apiClient.fetch(`/${this.ENDPOINT}/${item}`).then((response) => {
                     if (response.id !== this.fetching)
                         return;
                     this._context.metadatas[item] = response;
@@ -181,11 +172,10 @@ 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]] }));
-                try {
-                    this.apiClient.delete(`/${this.ENDPOINT}/{id}`, { path: { id } });
-                }
-                catch (e) {
-                }
+                this.apiClient.fetch(`/${this.ENDPOINT}/${id}`, undefined, {
+                    method: "DELETE",
+                    failSilently: true
+                });
             };
             this.hideMetadataModal = () => this.setState({ metadataModalOpen: false, metadataSaveSuccess: undefined });
             this.onMetadataFormChange = (formData) => this.setState({ modalMetadata: formData });
@@ -195,7 +185,7 @@ function MediaArrayField(ComposedComponent) {
                 const metadataForm = this.state.metadataForm || {};
                 if (typeof metadataModalOpen === "number" && !this.state.metadataForm) {
                     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" } })
+                    this.apiClient.fetchCached(`/forms/${metadataFormId}`, { lang, format: "schema" })
                         .then(metadataForm => {
                         if (this.mounted) {
                             this.setState({ metadataForm });
@@ -432,10 +422,16 @@ function MediaArrayField(ComposedComponent) {
                     reader.readAsDataURL(file);
                 });
             };
-            this.onMediaMetadataUpdate = (_a) => __awaiter(this, [_a], void 0, function* ({ formData }) {
+            this.onMediaMetadataUpdate = ({ formData }) => {
                 this.props.formContext.services.blocker.push();
-                try {
-                    yield this.apiClient.put(`/${this.ENDPOINT}/{id}`, { path: { id: formData.id } }, formData);
+                this.apiClient.fetch(`/${this.ENDPOINT}/${formData.id}`, undefined, {
+                    method: "PUT",
+                    headers: {
+                        "accept": "application/json",
+                        "content-type": "application/json"
+                    },
+                    body: JSON.stringify(formData)
+                }).then(() => {
                     this.props.formContext.services.blocker.pop();
                     const notify = () => this.props.formContext.notifier.success(this.props.formContext.translations.SaveSuccess);
                     if (this.mounted) {
@@ -444,12 +440,11 @@ function MediaArrayField(ComposedComponent) {
                     else {
                         notify();
                     }
-                }
-                catch (e) {
+                }).catch(() => {
                     this.props.formContext.services.blocker.pop();
                     this.mounted && this.setState({ metadataSaveSuccess: false });
-                }
-            });
+                });
+            };
             this.getMetadataPromise = () => {
                 let mediaMetadata = this.props.formContext.mediaMetadata
                     || { intellectualRights: "MZ.intellectualRightsARR" };
@@ -457,7 +452,7 @@ function MediaArrayField(ComposedComponent) {
                 return ("capturerVerbatim" in mediaMetadata)
                     ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: [mediaMetadata.capturerVerbatim] }))
                     : MACode
-                        ? 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))
+                        ? 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))
                         : mediaMetadata;
             };
             this.getMaxFileSizeAsString = () => {
@@ -572,67 +567,105 @@ function MediaArrayField(ComposedComponent) {
                         this.renderMediaAddModal()))));
         }
         saveMedias(files) {
-            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] = {};
+            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;
                     }
-                    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 if (file.size > this.MAX_FILE_SIZE) {
+                        fileTooLarge = true;
                     }
-                    else if (noValidData && fileTooLarge) {
-                        fail("AllowedFileSize", this.getMaxFileSizeAsString() + ".");
-                        return;
+                    else {
+                        body.append("data", file);
+                        noValidData = false;
                     }
-                    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];
+                    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
                     });
-                    this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
-                    return ids;
                 }
-                catch (e) {
+            }).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) {
                     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;
             });
         }
     };
@@ -673,18 +706,15 @@ function MediaArrayField(ComposedComponent) {
 class Thumbnail extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.updateURL = (_a) => __awaiter(this, [_a], void 0, function* ({ id, apiClient, apiEndpoint = "images" }) {
+        this.updateURL = ({ id, apiClient, apiEndpoint = "images" }) => {
             if (!id)
                 return;
-            try {
-                const response = yield apiClient.get(`/${apiEndpoint}/{id}`, { path: { id } });
+            apiClient.fetchCached(`/${apiEndpoint}/${id}`, undefined, { failSilently: true }).then((response) => {
                 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,15 +38,6 @@ 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)
@@ -1062,7 +1053,7 @@ function _MapArrayField(ComposedComponent) {
         constructor(props) {
             super(props);
             this.stretchContainerRef = React.createRef();
-            this.geocode = () => __awaiter(this, void 0, void 0, function* () {
+            this.geocode = () => {
                 // 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);
@@ -1075,10 +1066,11 @@ function _MapArrayField(ComposedComponent) {
                 }
                 const geometries = this.getGeometries();
                 if (geometries.length === 0 && area && area.length > 0) {
-                    const { name } = yield this.props.formContext.apiClient.get(`/areas/${area}`);
-                    this.map.geocode(name, undefined, 8);
+                    this.props.formContext.apiClient.fetch(`/areas/${area}`, undefined, undefined).then((result) => {
+                        this.map.geocode(result.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) => Promise<void>;
+    geocode: (prevProps: any) => void;
     zoomIfExternalEdit: (props: any) => void;
     setMapRef: (mapComponent: any) => void;
     map: any;

package/lib/components/fields/MapField.js

@@ -32,15 +32,6 @@ 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)
@@ -116,7 +107,7 @@ class MapField extends React.Component {
                 this.setState({ locateOn: true });
             }
         };
-        this.geocode = (prevProps) => __awaiter(this, void 0, void 0, function* () {
+        this.geocode = (prevProps) => {
             let { area } = (0, utils_1.getUiOptions)(this.props.uiSchema);
             if (area instanceof Array) {
                 area = area[0];
@@ -129,10 +120,11 @@ class MapField extends React.Component {
                     || (geoData.type === "FeatureCollection" && geoData.features.length === 0);
             });
             if (isEmptyAndWasEmpty && area && area.length > 0) {
-                const { name } = yield this.props.formContext.apiClient.get(`/areas/${area}`);
-                this.map.geocode(name, undefined, 8);
+                this.props.formContext.apiClient.fetch(`/areas/${area}`, undefined, undefined).then((result) => {
+                    this.map.geocode(result.name, undefined, 8);
+                });
             }
-        });
+        };
         this.zoomIfExternalEdit = (props) => {
             if (!equals(this._lastFormData, props.formData)) {
                 this.map.zoomToData();

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

@@ -1,8 +1,7 @@
 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,7 +1,6 @@
 import * as React from "react";
 import { FieldProps, JSONSchemaArray, JSONSchemaObject } from "../../../types";
-import type { components } from "generated/api.d";
-type NamedPlace = components["schemas"]["namedPlace"];
+import { NamedPlace } from "@luomus/laji-schema";
 type Props = FieldProps<NamedPlace, JSONSchemaObject | JSONSchemaArray<JSONSchemaObject>>;
 type State = {
     show?: boolean;
@@ -12,6 +11,7 @@ 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,14 +60,9 @@ 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 & {
-        id: string;
-    }, end: () => void) => Promise<void>;
+    onPlaceDeleted: (place: NamedPlace, success: () => void) => void;
     onButtonClick: () => () => void;
-    updatePlaces: (response: {
-        results: NamedPlace[];
-    }) => void;
-    getNamedPlacesUnsubscribe: () => void;
+    updatePlaces: () => void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     onHide: () => void;

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

@@ -32,15 +32,6 @@ 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 };
 };
@@ -48,7 +39,6 @@ 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 = [
@@ -69,6 +59,7 @@ 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) => {
@@ -131,61 +122,69 @@ class NamedPlaceChooserField extends React.Component {
                 this.setState({ failed: PLACE_USE_FAIL });
             }
         };
-        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.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.setState({ failed: PLACE_DELETE_FAIL });
                 this.props.formContext.notifier.error(this.props.formContext.translations.PlaceRemovalFailed);
-                end();
-            }
-        });
+            });
+        };
         this.onButtonClick = () => () => {
             this.setState({ show: true });
         };
-        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.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.onHide = () => this.setState({ show: false });
     }
     componentDidMount() {
         this.mounted = true;
-        this.getNamedPlacesUnsubscribe = this.props.formContext.apiClient.subscribe("/named-places", { query: { includePublic: false, pageSize: 100000 } }, this.updatePlaces, () => this.setState({ failed: PLACES_FETCH_FAIL }), 1000);
+        this.updatePlaces();
+        this.props.formContext.apiClient.onCachePathInvalidation("/named-places", this.updatePlaces);
     }
     componentWillUnmount() {
         this.mounted = false;
-        this.getNamedPlacesUnsubscribe();
+        this.props.formContext.apiClient.removeOnCachePathInvalidation("/named-places", this.updatePlaces);
     }
     render() {
         const { registry: { fields: { SchemaField } }, formContext } = this.props;

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

@@ -1,7 +1,6 @@
 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;

package/lib/components/fields/NamedPlaceSaverField.js

@@ -38,15 +38,6 @@ 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)
@@ -191,7 +182,7 @@ class PlaceSaverDialog extends React.Component {
     }
     componentDidMount() {
         this.mounted = true;
-        this.apiClient.get("/named-places", { query: { includePublic: false, pageSize: 100000 } }).then(response => {
+        this.apiClient.fetchCached("/named-places", { includePublic: false, pageSize: 1000 }).then(response => {
             if (!this.mounted)
                 return;
             const state = {
@@ -222,18 +213,23 @@ class PlaceSaverDialog extends React.Component {
         });
     }
     onSave(place) {
-        return __awaiter(this, void 0, void 0, function* () {
-            place = Object.assign(Object.assign({}, place), { geometry: place.prepopulatedDocument.gatherings[0].geometry });
-            this.props.formContext.services.blocker.push();
-            try {
-                const savedPlace = yield this.apiClient[place.id ? "put" : "post"](`/named-places${place.id ? "/{id}" : ""}`, place.id ? { path: { id: place.id } } : undefined, place);
-                this.props.formContext.services.blocker.pop();
-                yield this.props.onSave(savedPlace);
-            }
-            catch (e) {
-                this.props.formContext.services.blocker.pop();
-                this.setState({ failed: SAVE });
-            }
+        place = Object.assign(Object.assign({}, place), { geometry: place.prepopulatedDocument.gatherings[0].geometry });
+        this.props.formContext.services.blocker.push();
+        this.apiClient.fetchRaw(`/named-places${place.id ? `/${place.id}` : ""}`, undefined, {
+            method: place.id ? "PUT" : "POST",
+            headers: {
+                "accept": "application/json",
+                "content-type": "application/json"
+            },
+            body: JSON.stringify(place)
+        }).then(response => {
+            this.props.formContext.services.blocker.pop();
+            this.apiClient.invalidateCachePath("/named-places");
+            return response.json();
+        }).then(this.props.onSave)
+            .catch(() => {
+            this.props.formContext.services.blocker.pop();
+            this.setState({ failed: SAVE });
         });
     }
     render() {

package/lib/components/fields/ScopeField.js

@@ -50,7 +50,7 @@ const utils_2 = require("@rjsf/utils");
 const scopeFieldSettings = {
     taxonGroups: {
         translate: (props, taxonGroup) => {
-            return props.formContext.apiClient.get("/informal-taxon-groups/" + taxonGroup).then((response) => {
+            return props.formContext.apiClient.fetchCached("/informal-taxon-groups/" + taxonGroup).then((response) => {
                 return response.name;
             }).catch(() => {
                 return "";