@luomus/laji-form 15.1.65 → 15.1.67

package/lib/ApiClient.d.ts

@@ -1,47 +1,90 @@
 import { Translations } from "./components/LajiForm";
 import { Lang } from "./types";
+import type { paths } from "generated/api";
+export declare class LajiApiError extends Error {
+    statusCode: number;
+    constructor(message: string, statusCode: number);
+}
 interface Query {
     [param: string]: any;
 }
-interface Options {
-    failSilently?: boolean;
-    [option: string]: any;
-}
 export interface ApiClientImplementation {
-    fetch: (path: string, query: Query, options: any) => Promise<any>;
+    fetch: (path: string, query: Query, options: any) => Promise<Response>;
 }
+type RelaxQuery<P, K extends string> = P extends {
+    query: infer Q;
+} ? Omit<P, "query"> & (Record<string, unknown> extends Omit<Q, Extract<keyof Q, K>> ? {
+    query?: Omit<Q, Extract<keyof Q, K>> & Partial<Pick<Q, Extract<keyof Q, K>>>;
+} : {
+    query: Omit<Q, Extract<keyof Q, K>> & Partial<Pick<Q, Extract<keyof Q, K>>>;
+}) : P;
+type MiddlewareInjectedKeys = "collectionID" | "formID" | "personToken";
+type Parameters<T> = "parameters" extends keyof T ? T["parameters"] : never;
+type ExtractContentIfExists<R> = R extends {
+    content: infer C;
+} ? C[keyof C] : null;
+type ExtractRequestBodyIfExists<R> = R extends {
+    requestBody: {
+        content: infer C;
+    };
+} | {
+    requestBody?: {
+        content: infer C;
+    };
+} ? C[keyof C] : never;
+type HttpSuccessCodes = 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 226;
+type IntersectUnionTypes<A, B> = A extends B ? A : never;
+type WithResponses<T> = T & {
+    responses: unknown;
+};
+type Path = keyof paths & string;
+type PathWithMethod<M extends string> = keyof {
+    [P in keyof paths as paths[P] extends Record<M, any> ? P : never]: paths[P];
+};
+type Method<P extends Path> = Exclude<keyof {
+    [K in keyof paths[P] as paths[P][K] extends undefined | never ? never : K]: paths[P][K];
+}, "parameters">;
+type Responses<P extends Path, M extends Method<P>> = WithResponses<paths[P][M]>["responses"];
+type CacheNode = {
+    branches: Map<string, CacheNode>;
+    queries: Map<string, Promise<any>>;
+    path: string;
+};
 /**
- * ApiClient "interface". Wraps the given apiClient as a singleton object.
- * Given apiClient must implement fetch().
+ * ApiClient with automatically generated typings for laji-api. An `ApiClientImplementation` must be provided, that will
+ * perform the actual requests. The implementation acts as a middleware for injecting access token and person token.
+ *
+ * Get requests are automatically cached, and they will flush if the resource receives a POST/PUT/DELETE request.
  */
 export default class ApiClient {
     apiClient: ApiClientImplementation;
     lang: Lang;
     translations: Translations;
-    cache: {
-        [path: string]: {
-            [cacheKey: string]: Promise<any>;
-        };
-    };
+    cacheTree: CacheNode;
     on: {
         [path: string]: (() => void)[];
     };
     constructor(apiClient: ApiClientImplementation, lang: Lang | undefined, translations: Translations);
+    private flush;
+    private getCacheNode;
+    /** The response is cached until the resource receives a POST/PUT/DELETE request. */
+    get<P extends PathWithMethod<"get">, R extends Responses<P, "get" extends Method<P> ? "get" : never>>(path: P, params?: RelaxQuery<Parameters<paths[P]["get"]>, MiddlewareInjectedKeys>, useCache?: boolean): Promise<ExtractContentIfExists<R[IntersectUnionTypes<keyof R, HttpSuccessCodes>]>>;
+    /** Subscribe to a GET request. It re-emits when the resource receives a POST/PUT/DELETE request. */
+    subscribe<P extends PathWithMethod<"get">, R extends Responses<P, "get" extends Method<P> ? "get" : never>>(path: P, params: RelaxQuery<Parameters<paths[P]["get"]>, MiddlewareInjectedKeys> | undefined, onFulfilled: (response: ExtractContentIfExists<R[IntersectUnionTypes<keyof R, HttpSuccessCodes>]>) => void, onError?: () => void, 
+    /**
+     * Store doesn't sync it's search indices right away after data is changed, so delaying the request can be useful
+     */
+    delay?: number): () => void;
+    put<P extends PathWithMethod<"put">, R extends Responses<P, "put" extends Method<P> ? "put" : never>>(path: P, params?: RelaxQuery<Parameters<paths[P]["put"]>, MiddlewareInjectedKeys>, body?: ExtractRequestBodyIfExists<paths[P]["put"]>): Promise<ExtractContentIfExists<R[IntersectUnionTypes<keyof R, HttpSuccessCodes>]>>;
+    post<P extends PathWithMethod<"post">, R extends Responses<P, "post" extends Method<P> ? "post" : never>>(path: P, params?: RelaxQuery<Parameters<paths[P]["post"]>, MiddlewareInjectedKeys>, body?: ExtractRequestBodyIfExists<paths[P]["post"]>): Promise<ExtractContentIfExists<R[IntersectUnionTypes<keyof R, HttpSuccessCodes>]>>;
+    delete<P extends PathWithMethod<"delete">, R extends Responses<P, "delete" extends Method<P> ? "delete" : never>>(path: P, params?: RelaxQuery<Parameters<paths[P]["delete"]>, MiddlewareInjectedKeys>): Promise<ExtractContentIfExists<R[IntersectUnionTypes<keyof R, HttpSuccessCodes>]>>;
     /**
      * Implementing apiClient must return a promise that passes the raw response as 1st arg.
      * @param path URL for GET.
      * @param query Object, where keys are param names and values are param values.
      * @returns a Promise.
      */
-    fetchRaw(path: string, query?: Query, options?: any): Promise<any>;
-    fetch<T>(path: string, query?: Query, options?: Options): Promise<T>;
-    getCacheKey(query?: Query, options?: Options): string;
-    fetchCached<T>(path: string, query?: Query, options?: Options): Promise<T>;
-    invalidateCachePath(path: string): void;
-    invalidateCachePathQuery(path: string, query: string): void;
-    flushCache: () => void;
-    onCachePathInvalidation(path: string, callback: () => void): void;
-    removeOnCachePathInvalidation(path: string, callback: () => void): void;
+    fetch<P extends Path, M extends Method<P>, R extends Responses<P, M>>(path: P, method: M, params?: Parameters<paths[P][M]>, body?: ExtractRequestBodyIfExists<paths[P][M]>, options?: any): Promise<ExtractContentIfExists<R[IntersectUnionTypes<keyof R, HttpSuccessCodes>]>>;
     setLang(lang: Lang): void;
 }
 export {};

package/lib/ApiClient.js

@@ -1,96 +1,200 @@
 "use strict";
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+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());
+    });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LajiApiError = void 0;
+class LajiApiError extends Error {
+    constructor(message, statusCode) {
+        super(message);
+        this.statusCode = statusCode;
+    }
+}
+exports.LajiApiError = LajiApiError;
+const splitAndResolvePath = (path, params) => {
+    // parse path into segments based on path parameters
+    // eg. "/person/{personToken}/profile" -> ["/person", "/{personToken}", "/profile"]
+    const segments = path.split(/(\/\{[^}]+\})/).filter(Boolean);
+    if (!params) {
+        return segments;
+    }
+    // resolve path parameters (eg. replace '/{personToken}' with params.path.personToken)
+    for (let i = 1; i < segments.length; i++) {
+        const segment = segments[i];
+        segments[i] = segment.replace(/\{([^}]+)\}/, (match, p1) => { var _a; return (_a = params["path"][p1]) !== null && _a !== void 0 ? _a : ""; });
+    }
+    return segments;
+};
 /**
- * ApiClient "interface". Wraps the given apiClient as a singleton object.
- * Given apiClient must implement fetch().
+ * ApiClient with automatically generated typings for laji-api. An `ApiClientImplementation` must be provided, that will
+ * perform the actual requests. The implementation acts as a middleware for injecting access token and person token.
+ *
+ * Get requests are automatically cached, and they will flush if the resource receives a POST/PUT/DELETE request.
  */
 class ApiClient {
     constructor(apiClient, lang = "en", translations) {
-        this.cache = {};
+        this.lang = "en";
+        this.cacheTree = { branches: new Map(), queries: new Map(), path: "" };
         this.on = {};
-        this.flushCache = () => {
-            this.cache = {};
-        };
         this.apiClient = apiClient;
         this.lang = lang;
         this.translations = translations;
     }
-    /**
-     * Implementing apiClient must return a promise that passes the raw response as 1st arg.
-     * @param path URL for GET.
-     * @param query Object, where keys are param names and values are param values.
-     * @returns a Promise.
-     */
-    fetchRaw(path, query, options) {
-        const _query = Object.assign({ lang: this.lang }, (query || {}));
-        if (!_query.lang) {
-            delete _query.lang;
+    flush(path, params) {
+        var _a;
+        const segments = splitAndResolvePath(path, params);
+        let node = this.cacheTree;
+        const nodesToFlush = [];
+        for (let i = 0; i < segments.length; i++) {
+            const segment = segments[i];
+            if (node.branches.has(segment)) {
+                node = node.branches.get(segment);
+                nodesToFlush.push(node);
+            }
+            else {
+                break;
+            }
+        }
+        for (let i = 0; i < nodesToFlush.length; i++) {
+            const node = nodesToFlush[i];
+            node.queries = new Map();
+            (_a = this.on[node.path]) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
         }
-        return this.apiClient.fetch(path, _query, options).catch(() => {
-            throw new Error(this.translations[this.lang].RequestFailed);
-        });
     }
-    fetch(path, query, options = {}) {
-        const { failSilently = false } = options, fetchOptions = __rest(options, ["failSilently"]);
-        return this.fetchRaw(path, query, fetchOptions).then(response => {
-            if (!failSilently && response.status >= 400) {
-                throw new Error("Request failed");
+    getCacheNode(path, params) {
+        const segments = splitAndResolvePath(path, params);
+        const serializedQuery = hashRecord((params === null || params === void 0 ? void 0 : params.query) || {});
+        let node = this.cacheTree;
+        for (let i = 0; i < segments.length; i++) {
+            const segment = segments[i];
+            if (node.branches.has(segment)) {
+                node = node.branches.get(segment);
             }
-            if (response.status === 204) {
-                return undefined;
+            else {
+                const newNode = { branches: new Map(), queries: new Map(), path: segments.join("") };
+                node.branches.set(segment, newNode);
+                node = newNode;
+            }
+            if (i === segments.length - 1) {
+                continue;
+            }
+            if (node.queries.has(serializedQuery)) {
+                return node;
             }
-            return response.json();
-        }).catch(() => {
-            if (this.cache[path])
-                delete this.cache[path][this.getCacheKey(query, options)];
-            throw new Error(this.translations[this.lang].RequestFailed);
-        });
-    }
-    getCacheKey(query, options) {
-        return JSON.stringify(query) + JSON.stringify(options);
-    }
-    fetchCached(path, query, options) {
-        const cacheKey = this.getCacheKey(query, options);
-        if (!this.cache[path])
-            this.cache[path] = {};
-        this.cache[path][cacheKey] = cacheKey in this.cache[path] ? this.cache[path][cacheKey] : this.fetch(path, query, options);
-        return this.cache[path][cacheKey];
-    }
-    invalidateCachePath(path) {
-        delete this.cache[path];
-        if (this.on[path]) {
-            this.on[path].forEach(callback => callback());
         }
+        return node;
     }
-    //TODO on invalidation callbacks
-    invalidateCachePathQuery(path, query) {
-        if (this.cache[path])
-            delete this.cache[path][query];
+    ;
+    /** The response is cached until the resource receives a POST/PUT/DELETE request. */
+    get(path_1, params_1) {
+        return __awaiter(this, arguments, void 0, function* (path, params, useCache = true) {
+            let cacheNode;
+            let serializedQuery;
+            if (useCache) {
+                serializedQuery = hashRecord(params === null || params === void 0 ? void 0 : params.query);
+                cacheNode = this.getCacheNode(path, params);
+                if (cacheNode.queries.has(serializedQuery)) {
+                    return cacheNode.queries.get(serializedQuery);
+                }
+            }
+            const result = this.fetch(path, "get", params);
+            if (useCache) {
+                cacheNode.queries = cacheNode.queries;
+                cacheNode.queries.set(serializedQuery, result);
+            }
+            return result;
+        });
     }
-    onCachePathInvalidation(path, callback) {
+    /** Subscribe to a GET request. It re-emits when the resource receives a POST/PUT/DELETE request. */
+    subscribe(path, params, onFulfilled, onError, 
+    /**
+     * Store doesn't sync it's search indices right away after data is changed, so delaying the request can be useful
+     */
+    delay) {
         if (!this.on[path])
             this.on[path] = [];
-        this.on[path].push(callback);
+        const fn = delay
+            ? () => { setTimeout(() => this.get(path, params).then(onFulfilled, onError), delay); }
+            : () => { this.get(path, params).then(onFulfilled, onError); };
+        this.on[path].push(fn);
+        this.get(path, params).then(onFulfilled, onError);
+        return () => {
+            this.on[path] = this.on[path].filter(_fn => _fn !== fn);
+        };
     }
-    removeOnCachePathInvalidation(path, callback) {
-        if (this.on[path]) {
-            this.on[path] = this.on[path].filter(fn => fn !== callback);
-        }
+    put(path, params, body) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.fetch(path, "put", params, body);
+            this.flush(path, params);
+            return result;
+        });
+    }
+    post(path, params, body) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = this.fetch(path, "post", params, body);
+            this.flush(path, params);
+            return result;
+        });
+    }
+    delete(path, params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = this.fetch(path, "delete", params);
+            this.flush(path, params);
+            return result;
+        });
+    }
+    /**
+     * Implementing apiClient must return a promise that passes the raw response as 1st arg.
+     * @param path URL for GET.
+     * @param query Object, where keys are param names and values are param values.
+     * @returns a Promise.
+     */
+    fetch(path_1, method_1, params_1, body_1) {
+        return __awaiter(this, arguments, void 0, function* (path, method, params, body, options = {}) {
+            const _query = Object.assign({ lang: this.lang }, ((params === null || params === void 0 ? void 0 : params.query) || {}));
+            if (!_query.lang) {
+                delete _query.lang;
+            }
+            const pathSegments = splitAndResolvePath(path, params);
+            options = Object.assign(Object.assign({}, options), { headers: Object.assign(Object.assign({}, (options.header || {})), { "API-Version": 1, "Accept-Language": this.lang }) });
+            if (body && !otherThanJSON(body)) {
+                options = Object.assign(Object.assign({}, options), { headers: Object.assign(Object.assign({}, (options.header || {})), { "Content-Type": "application/json", "Accept": "application/json" }) });
+                body = JSON.stringify(body);
+            }
+            const response = yield this.apiClient.fetch(pathSegments.join(""), _query, Object.assign({ method, body }, options));
+            if (response.status >= 400) {
+                const error = yield response.json();
+                throw new LajiApiError(error === null || error === void 0 ? void 0 : error.message, response.status);
+            }
+            return (response.headers.get("Content-Type") || "").includes("application/json")
+                ? response.json()
+                : response.text();
+        });
     }
     setLang(lang) {
         this.lang = lang;
-        this.flushCache();
+        this.cacheTree = { branches: new Map(), queries: new Map(), path: "" };
     }
 }
 exports.default = ApiClient;
+const otherThanJSON = (body) => body instanceof FormData ||
+    body instanceof Blob ||
+    body instanceof ArrayBuffer ||
+    body instanceof URLSearchParams ||
+    body instanceof ReadableStream;
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+const sortRecordRecursively = (record) => (Object.entries(record)
+    .sort(([aKey, aVal], [bKey, bVal]) => aKey > bKey ? 1 : aKey < bKey ? -1 : 0)
+    .reduce((acc, [key, value]) => {
+    acc[key] = isRecord(value) ? sortRecordRecursively(value) : value;
+    return acc;
+}, Object.create(null)));
+const hashRecord = (record) => JSON.stringify(sortRecordRecursively(record || {}));

package/lib/components/LajiForm.js

@@ -510,7 +510,7 @@ class LajiForm extends React.Component {
         this.state = this.getStateFromProps(props);
     }
     UNSAFE_componentWillReceiveProps(props) {
-        if (props.apiClient && props.apiClient !== this.apiClient) {
+        if (props.apiClient && props.apiClient !== this.apiClient.apiClient) {
             this.apiClient = new ApiClient_1.default(props.apiClient, props.lang, this.translations);
         }
         if (this.apiClient && "lang" in props && this.props.lang !== props.lang) {

package/lib/components/components/DeleteButton.d.ts

@@ -24,6 +24,7 @@ export declare class DeleteButton extends React.Component<Props, State> {
     onButtonKeyDown: ({ key }: React.KeyboardEvent) => void;
     onHideConfirm: () => void;
     onShowConfirm: (e: React.MouseEvent) => void;
+    onCancelClick: (e: React.MouseEvent) => void;
     onConfirmedClick: (e?: React.KeyboardEvent | React.MouseEvent) => void;
     onClick: (e: React.MouseEvent) => void;
     setConfirmAutofocus: (elem?: React.ReactInstance) => void;

package/lib/components/components/DeleteButton.js

@@ -74,6 +74,11 @@ class DeleteButton extends React.Component {
                 }
             });
         };
+        this.onCancelClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.onHideConfirm();
+        };
         this.onConfirmedClick = (e) => {
             e && e.preventDefault();
             e && e.stopPropagation();
@@ -130,7 +135,7 @@ class DeleteButton extends React.Component {
                 React.createElement("span", null, translations.ConfirmRemove),
                 React.createElement(ButtonGroup, null,
                     React.createElement(components_1.Button, { variant: "danger", onClick: this.onConfirmedClick, ref: this.setConfirmAutofocus, id: `${this.props.id}-delete-confirm-yes` }, translations.Remove),
-                    React.createElement(components_1.Button, { variant: "default", onClick: this.onHideConfirm, id: `${this.props.id}-delete-confirm-no` }, translations.Cancel)))));
+                    React.createElement(components_1.Button, { variant: "default", onClick: this.onCancelClick, id: `${this.props.id}-delete-confirm-no` }, translations.Cancel)))));
     }
     browserConfirm() {
         const choice = confirm(this.props.translations.ConfirmRemove);

package/lib/components/fields/AnnotationField.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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -134,29 +143,24 @@ exports.default = AnnotationField;
 class AnnotationBox extends React.Component {
     constructor(props) {
         super(props);
-        this.onAnnotationSubmit = ({ formData }) => {
+        this.onAnnotationSubmit = (_a) => __awaiter(this, [_a], void 0, function* ({ formData }) {
             const { type } = this.getAddOptions();
             const rootID = this.props.formContext.services.rootInstance.getFormData().id;
             this.props.formContext.services.blocker.push();
-            this.props.formContext.apiClient.fetchRaw("/annotations", undefined, {
-                method: "POST",
-                body: JSON.stringify(Object.assign(Object.assign({}, formData), { targetID: this.props.id, rootID, type, byRole: "MMAN.formAdmin" }))
-            }).then(response => {
-                if (response.status >= 400) {
-                    throw new Error("Request failed");
-                }
-                return response.json();
-            }).then(annotation => {
+            const body = Object.assign(Object.assign({}, formData), { targetID: this.props.id, rootID, type, byRole: "MMAN.formAdmin" });
+            try {
+                const annotation = yield this.props.formContext.apiClient.post("/annotations", undefined, body);
                 this.props.formContext.services.blocker.pop();
                 const annotationContext = (0, Context_1.default)(`${this.props.formContext.contextId}_ANNOTATIONS`);
                 const annotations = [annotation];
                 annotationContext[this.props.id] = annotations;
                 this.setState({ annotations: annotations, fail: false });
-            }).catch(() => {
+            }
+            catch (e) {
                 this.props.formContext.services.blocker.pop();
                 this.setState({ fail: true });
-            });
-        };
+            }
+        });
         this.onAnnotationChange = (formData) => {
             let state = {};
             if (this.state.fail !== undefined) {
@@ -213,30 +217,30 @@ class AnnotationBox extends React.Component {
             return add && addSchema ? (React.createElement(LajiForm_1.default, Object.assign({}, metadataForm, { schema: addSchema, uiSchema: addUiSchema || _uiSchema, onSubmit: this.onAnnotationSubmit, onChange: this.onAnnotationChange, renderSubmit: renderSubmit, formData: addFormData, lang: lang, apiClient: this.props.formContext.apiClient.apiClient, uiSchemaContext: this.props.formContext.uiSchemaContext }), React.createElement("div", null,
                 this.state.fail !== undefined &&
                     React.createElement(Alert, { variant: this.state.fail ? "danger" : "success" }, translations[this.state.fail ? "SaveFail" : "SaveSuccess"]),
-                renderSubmit && React.createElement(components_1.Button, { id: "submit", type: "submit" }, translations.Submit)))) : null;
+                renderSubmit && React.createElement(components_1.Button, { id: "submit", type: "submit", onClick: this.onAnnotationSubmit }, translations.Submit)))) : null;
         };
         this.getUiSchema = () => {
             const { uiSchema } = this.props;
             const { metadataForm = {} } = this.state;
             return uiSchema || Object.assign(Object.assign({}, metadataForm.uiSchema), { "ui:shortcuts": Object.assign(Object.assign({}, ((metadataForm.uiSchema || {})["ui:shorcuts"] || {})), (this.props.formContext.services.keyHandler.shortcuts)), "ui:showShortcutsButton": false });
         };
-        this.onDelete = (id) => () => {
-            this.props.formContext.apiClient.fetchRaw(`/annotations/${id}`, undefined, {
-                method: "DELETE"
-            }).then(() => {
+        this.onDelete = (id) => () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.props.formContext.apiClient.delete("/annotations/{id}", { path: { id } });
                 const annotationContext = (0, Context_1.default)(`${this.props.formContext.contextId}_ANNOTATIONS`);
                 const annotations = this.state.annotations.filter(({ id: _id }) => _id !== id);
                 annotationContext[this.props.id] = annotations;
                 this.setState({ deleteFail: false, annotations });
-            }).catch(() => {
+            }
+            catch (e) {
                 this.setState({ deleteFail: true });
-            });
-        };
+            }
+        });
         this.state = { annotations: props.annotations || [] };
     }
     componentDidMount() {
         this.mounted = true;
-        this.props.formContext.apiClient.fetchCached(`/forms/${this.props.formId}`, { lang: this.props.lang, format: "schema" })
+        this.props.formContext.apiClient.get(`/forms/${this.props.formId}`, { query: { format: "schema" } })
             .then(metadataForm => {
             if (!this.mounted)
                 return;

package/lib/components/fields/AudioArrayField.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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -118,14 +127,18 @@ const LajiAudio = React.forwardRef((props, ref) => {
     const [mp3Url, setMp3Url] = useState(null);
     const [wavUrl, setWavUrl] = useState(null);
     const [flacUrl, setFlacUrl] = useState(null);
-    useEffect(() => {
-        props.apiClient.fetchCached(`/audio/${props.id}`, undefined, { failSilently: true }).then(response => {
+    useEffect(() => __awaiter(void 0, void 0, void 0, function* () {
+        let response;
+        try {
+            response = yield props.apiClient.get(`/audio/${props.id}`);
             setMp3Url(response.mp3URL);
             setWavUrl(response.wavURL);
             setFlacUrl(response.flacURL);
-            props.onLoaded && props.onLoaded(true);
-        });
-    });
+        }
+        catch (e) {
+        }
+        props.onLoaded && props.onLoaded(true);
+    }));
     return !mp3Url ? React.createElement(react_spinner_1.default, { style: props.style }) : (React.createElement("div", null,
         React.createElement("audio", { controls: true, style: props.style, ref: ref, onPause: props.onStop },
             React.createElement("source", { src: mp3Url })),

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

@@ -7,8 +7,8 @@
  *  suggestionValueField: <fieldName> (the field which the value for autosuggest is pulled from)
  *  suggestionReceivers: {
  *    <fieldName>: <suggestion path>,     (when an autosuggestion is selected, these fields receive the autosuggestions value defined by suggestion path.
- *    <fieldName2>: <suggestion path 2>,   Example: autosuggestion = {key: "MLV.2", value: "kalalokki", payload: {informalGroups: ["linnut"]}}
- *   }                                              suggestionReceivers: {someFieldName: "key", someFieldName2: "/payload/informalgroups/0"}
+ *    <fieldName2>: <suggestion path 2>,   Example: autosuggestion = {key: "MLV.2", value: "kalalokki", informalGroups: ["linnut"]}
+ *   }                                              suggestionReceivers: {someFieldName: "key", someFieldName2: "/informalgroups/0"}
  *                                         If fieldName start  with '$', then a function from autosuggestFieldSettings parses the suggestion. Example: $taxonGroup
  *                                         If fieldName start  with '/', it is handled as a JSON pointer.
  *  uiSchema: <uiSchema> (uiSchema which is passed to inner SchemaField)

package/lib/components/fields/AutosuggestField.js

@@ -43,7 +43,7 @@ const Context_1 = __importDefault(require("../../Context"));
 const deepmerge_1 = __importDefault(require("deepmerge"));
 const suggestionParsers = {
     taxonGroup: suggestion => {
-        return suggestion.payload ? suggestion.payload.informalTaxonGroups.map(item => typeof item === "string" ? item : item.id) : [];
+        return (suggestion.informalGroups || []).map(item => typeof item === "string" ? item : item.id);
     }
 };
 const parseQuery = (query, props, taxonGroups) => {
@@ -70,8 +70,8 @@ const parseQuery = (query, props, taxonGroups) => {
  *  suggestionValueField: <fieldName> (the field which the value for autosuggest is pulled from)
  *  suggestionReceivers: {
  *    <fieldName>: <suggestion path>,     (when an autosuggestion is selected, these fields receive the autosuggestions value defined by suggestion path.
- *    <fieldName2>: <suggestion path 2>,   Example: autosuggestion = {key: "MLV.2", value: "kalalokki", payload: {informalGroups: ["linnut"]}}
- *   }                                              suggestionReceivers: {someFieldName: "key", someFieldName2: "/payload/informalgroups/0"}
+ *    <fieldName2>: <suggestion path 2>,   Example: autosuggestion = {key: "MLV.2", value: "kalalokki", informalGroups: ["linnut"]}
+ *   }                                              suggestionReceivers: {someFieldName: "key", someFieldName2: "/informalgroups/0"}
  *                                         If fieldName start  with '$', then a function from autosuggestFieldSettings parses the suggestion. Example: $taxonGroup
  *                                         If fieldName start  with '/', it is handled as a JSON pointer.
  *  uiSchema: <uiSchema> (uiSchema which is passed to inner SchemaField)
@@ -168,7 +168,7 @@ class AutosuggestField extends React.Component {
                 return formData;
             };
             if (autosuggestField === "unit") {
-                let { unit } = suggestion.payload;
+                let { unit } = suggestion;
                 if (unit.unitType) {
                     unit.informalTaxonGroups = unit.unitType;
                     delete unit.unitType;

package/lib/components/fields/EnumRangeArrayField.js

@@ -60,7 +60,7 @@ function EnumRangeArrayField(props) {
         propsOnChange(value);
     }, [propsOnChange]);
     const getEnumOptionsAsync = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
-        const enums = yield props.formContext.apiClient.fetchCached(`/metadata/ranges/${range}`);
+        const enums = yield props.formContext.apiClient.get(`/metadata/ranges/${range}`);
         return enums.map(({ value }) => ({ value, label: value }));
     }), [props.formContext.apiClient, range]);
     const { Label } = props.formContext;

package/lib/components/fields/GeocoderField.js

@@ -292,15 +292,8 @@ let GeocoderField = class GeocoderField extends React.Component {
                     }, 30 * 1000);
                     !bounds.overlaps(globals_1.FINLAND_BOUNDS)
                         ? fetchForeign()
-                        : this.props.formContext.apiClient.fetchRaw("/coordinates/location", undefined, {
-                            method: "POST",
-                            headers: {
-                                "accept": "application/json",
-                                "content-type": "application/json"
-                            },
-                            body: JSON.stringify(geometry)
-                        }).then(response => response.json()).then(handleResponse(props.formContext.translations.Finland, "municipality", "biologicalProvince", "biogeographicalProvince")).catch((e) => {
-                            fail(e.message);
+                        : this.props.formContext.apiClient.post("/coordinates/location", undefined, geometry).then().then(handleResponse(props.formContext.translations.Finland, "municipality", "biologicalProvince", "biogeographicalProvince")).catch((e) => {
+                            fail(typeof e === "string" ? e : e.message);
                         });
                 }));
             };