@integration-app/react 0.2.1 → 0.3.1

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@integration-app/sdk'), require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@integration-app/sdk', 'react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.integrationAppReact = {}, global.jsxRuntime, global.sdk, global.react));
-})(this, (function (exports, jsxRuntime, sdk, react) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@integration-app/sdk'), require('react'), require('swr'), require('awesome-debounce-promise'), require('swr/infinite'), require('query-string')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@integration-app/sdk', 'react', 'swr', 'awesome-debounce-promise', 'swr/infinite', 'query-string'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.integrationAppReact = {}, global.jsxRuntime, global.sdk, global.react, global.useSWR, global.AwesomeDebouncePromise, global.useSWRInfinite, global.qs));
+})(this, (function (exports, jsxRuntime, sdk, react, useSWR, AwesomeDebouncePromise, useSWRInfinite, qs) { 'use strict';
 
     const IntegrationAppContext = react.createContext(null);
     IntegrationAppContext.displayName = 'IntegrationAppClientContext';
@@ -21,373 +21,634 @@
         return react.useContext(IntegrationAppContext);
     }
 
-    function useConnectorSpec(integrationKey) {
-        const integrationApp = useIntegrationApp();
-        const [data, setData] = react.useState(null);
-        const [loading, setLoading] = react.useState(true);
-        const [error, setError] = react.useState(null);
-        react.useEffect(() => {
-            if (!integrationApp) {
-                return;
-            }
-            integrationApp
-                .integration(integrationKey)
-                .getConnectorSpec()
-                .then(setData)
-                .catch(setError)
-                .finally(() => setLoading(false));
-        }, [integrationApp, integrationKey]);
-        return { data, loading, error };
+    function useIntegrationAppSWR(path, options) {
+        const client = useIntegrationApp();
+        const fetcher = async () => {
+            const response = await client.get(path, options);
+            return response;
+        };
+        return useSWR(client ? path : undefined, fetcher, options);
     }
 
-    function useElement(props, accessorGenerator) {
+    const elementStateCache = new Map();
+    function useElement(selector, accessorGenerator) {
         const integrationApp = useIntegrationApp();
-        const [data, setData] = react.useState();
-        const [loading, setLoading] = react.useState(true);
-        const [error, setError] = react.useState(null);
-        const [refreshCounter, setRefreshCounter] = react.useState(0);
-        function updateDataWith(newData) {
-            if (data !== undefined) {
-                setData({
-                    ...data,
-                    ...newData,
-                });
-            }
+        const elementKeyData = {
+            token: integrationApp.token,
+            selector,
+        };
+        const elementKey = JSON.stringify(elementKeyData);
+        if (!elementStateCache.has(elementKey)) {
+            elementStateCache.set(elementKey, {
+                updatedLocally: false,
+                savingToServer: false,
+                debouncedPut: AwesomeDebouncePromise(async (data) => {
+                    elementState.updatedLocally = false;
+                    elementState.savingToServer = true;
+                    try {
+                        const result = await (accessor === null || accessor === void 0 ? void 0 : accessor.put(data));
+                        if (!elementState.updatedLocally) {
+                            elementState.savingToServer = false;
+                            await mutate(result, false);
+                        }
+                    }
+                    catch (e) {
+                        elementState.updatedLocally = true;
+                        throw e;
+                    }
+                    finally {
+                        elementState.savingToServer = false;
+                    }
+                }, 500),
+            });
         }
-        function replaceDataWith(newData) {
-            setData(newData);
-        }
-        const selector = (props === null || props === void 0 ? void 0 : props.id)
-            ? props.id
-            : props;
-        const accessor = integrationApp
-            ? accessorGenerator(integrationApp)(selector)
-            : null;
-        react.useEffect(() => {
-            setLoading(true);
-            setError(null);
-            if (integrationApp && selector) {
-                accessor
-                    .get()
-                    .then(setData)
-                    .catch(setError)
-                    .finally(() => setLoading(false));
-            }
-            else {
-                setError(new Error('IntegrationApp not found. Was this component wrapped in <IntegrationAppProvider>?'));
-            }
-        }, [
-            integrationApp,
-            JSON.stringify(selector),
-            JSON.stringify(props),
-            refreshCounter,
-        ]);
-        async function create(createData) {
-            const returnedData = await accessor.create(createData);
-            replaceDataWith(returnedData);
-            return returnedData;
-        }
-        function refresh() {
-            setRefreshCounter(refreshCounter + 1);
-        }
-        async function patch(patch) {
-            if (typeof patch === 'object') {
-                updateDataWith(patch !== null && patch !== void 0 ? patch : {});
-                return accessor.patch(patch);
-            }
-            else {
-                return data;
+        const elementState = elementStateCache.get(elementKey);
+        const accessor = integrationApp ? accessorGenerator(integrationApp) : null;
+        const swrKey = accessor && selector ? `element:${elementKey}` : null;
+        const { data: item, mutate, error, isLoading, isValidating, } = useSWR(swrKey, () => accessor === null || accessor === void 0 ? void 0 : accessor.get(), {
+            isPaused: () => elementState.updatedLocally || elementState.savingToServer,
+        });
+        const loading = isLoading;
+        const refreshing = isValidating;
+        async function refresh() {
+            return await mutate();
+        }
+        async function put(data) {
+            if (!(accessor === null || accessor === void 0 ? void 0 : accessor.put)) {
+                throw new Error(`"put method is not supported for accessor ${accessor.constructor.name}`);
             }
+            elementState.updatedLocally = true;
+            const newLocalData = {
+                ...item,
+                ...data,
+            };
+            await mutate(newLocalData, false);
+            await elementState.debouncedPut(data);
         }
-        async function put(putData) {
-            updateDataWith(putData);
-            return await accessor.put(putData);
+        async function patch(data) {
+            const newData = {
+                ...item,
+                ...data,
+            };
+            return put(newData);
         }
         async function archive() {
-            setData(null);
-            return accessor.archive();
+            if (!(accessor === null || accessor === void 0 ? void 0 : accessor.archive)) {
+                return;
+            }
+            await mutate({ ...item, archivedAt: new Date().toISOString() }, false);
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.archive());
+            await mutate();
+        }
+        async function create(data) {
+            if (!(accessor === null || accessor === void 0 ? void 0 : accessor.create)) {
+                throw new Error(`"create method is not supported for accessor ${accessor.constructor.name}`);
+            }
+            const result = await (accessor === null || accessor === void 0 ? void 0 : accessor.create(data));
+            return await mutate(result);
         }
         return {
-            data,
+            accessor,
+            item,
+            loading,
+            saving: elementState.updatedLocally || elementState.savingToServer,
+            error,
+            refresh,
+            refreshing,
             create,
             patch,
             put,
             archive,
-            refresh,
-            loading,
-            error,
-            accessor,
         };
     }
 
-    function useIntegration(idOrKey) {
-        const { data: integration, ...rest } = useElement(idOrKey, (integrationApp) => integrationApp.integration.bind(integrationApp));
-        return { integration, ...rest };
+    function useConnection(id) {
+        const { item: connection, ...rest } = useElement(id, (integrationApp) => integrationApp.connection(id));
+        return {
+            connection,
+            ...rest,
+        };
     }
 
-    function useElements(initialQuery, accessorGenerator) {
+    const LIMIT = 25;
+    function useElements(route, query = {}) {
         const integrationApp = useIntegrationApp();
-        const refreshId = react.useRef(0);
-        const [items, setItems] = react.useState([]);
-        const [nextCursor, setNextCursor] = react.useState(undefined);
-        const [loading, setLoading] = react.useState(false);
-        const [error, setError] = react.useState(null);
+        function getKey(page, previousPageData) {
+            var _a;
+            if (page === 0)
+                return `/${route}?${qs.stringify({
+                ...query,
+                limit: LIMIT,
+            })}`;
+            if (((_a = previousPageData.items) === null || _a === void 0 ? void 0 : _a.length) < LIMIT)
+                return null;
+            return `/${route}?${qs.stringify({
+            ...query,
+            limit: LIMIT,
+            cursor: previousPageData.cursor,
+        })}`;
+        }
+        const [loadingMore, setIsLoadingMore] = react.useState(false);
+        const { data, size, setSize, isLoading, error, mutate, isValidating } = useSWRInfinite(getKey, (url) => integrationApp.get(url));
+        const items = data ? data.map((page) => page.items).flat() : [];
+        const loading = isLoading;
+        const refreshing = isValidating;
         async function loadMore() {
-            const startingRefreshId = refreshId.current;
-            const isFirstPage = !nextCursor;
-            function setStateIfCurrentRefresh(stateSetter, valueGetter) {
-                stateSetter((value) => startingRefreshId === refreshId.current ? valueGetter(value) : value);
-            }
-            setStateIfCurrentRefresh(setError, () => null);
-            setStateIfCurrentRefresh(setLoading, () => true);
-            const queryParams = {
-                ...initialQuery,
-            };
-            if (nextCursor)
-                queryParams.cursor = nextCursor;
-            try {
-                const data = await accessorGenerator(integrationApp).find(queryParams);
-                setStateIfCurrentRefresh(setNextCursor, () => data.cursor);
-                setStateIfCurrentRefresh(setItems, (items) => isFirstPage ? data.items : [...items, ...data.items]);
-            }
-            catch (e) {
-                setStateIfCurrentRefresh(setError, () => e);
-            }
-            finally {
-                setStateIfCurrentRefresh(setLoading, () => false);
+            var _a, _b;
+            const hasMoreToLoad = ((_b = (_a = data[size - 1]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) === LIMIT;
+            if (hasMoreToLoad) {
+                setIsLoadingMore(true);
+                await setSize(size + 1);
+                setIsLoadingMore(false);
             }
         }
-        react.useEffect(() => {
-            if (!integrationApp) {
-                setError(new Error('IntegrationApp not found. Was this component wrapped in <IntegrationAppProvider>?'));
-                return;
-            }
-            refresh();
-        }, [integrationApp, JSON.stringify(initialQuery)]);
         async function refresh() {
-            refreshId.current += 1;
-            setNextCursor(undefined);
-            await loadMore();
+            await mutate();
         }
         return {
             items,
             refresh,
+            refreshing,
             loadMore,
+            loadingMore,
             loading,
             error,
         };
     }
 
-    function useIntegrations(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.integrations);
+    function useConnections(query) {
+        const { ...rest } = useElements('connections', query);
         return {
+            connections: rest.items,
             ...rest,
         };
     }
 
-    function useConnection(id) {
-        const { data: connection, ...rest } = useElement(id, (integrationApp) => integrationApp.connection.bind(integrationApp));
-        return { connection, ...rest };
+    function useConnectorSpec(integrationIdOrKey) {
+        const integrationApp = useIntegrationApp();
+        const { data, isLoading, error } = useSWR(`/integrations/${integrationIdOrKey}/connector-spec`, () => integrationApp.integration(integrationIdOrKey).getConnectorSpec());
+        return { data, loading: isLoading, error };
     }
 
-    function useConnections(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.connections);
+    function useIntegration(id) {
+        const { item: integration, ...rest } = useElement(id, (integrationApp) => integrationApp.integration(id));
+        return { integration, ...rest };
+    }
+
+    function useIntegrations(query) {
+        const { ...rest } = useElements('integrations', query);
         return {
+            integrations: rest.items,
             ...rest,
         };
     }
 
-    function useFieldMapping(idOrKey) {
-        const { data: fieldMapping, ...rest } = useElement(idOrKey, (integrationApp) => integrationApp.fieldMapping.bind(integrationApp));
-        return { fieldMapping, ...rest };
+    function useFieldMapping(selector) {
+        const { item: fieldMapping, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.fieldMapping(selector));
+        async function apply(integrationKeys) {
+            const result = await (accessor === null || accessor === void 0 ? void 0 : accessor.apply(integrationKeys));
+            await refresh();
+            return result;
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            await refresh();
+        }
+        return { fieldMapping, apply, reset, refresh, accessor, ...rest };
     }
 
-    function useFieldMappings(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.fieldMappings);
+    function useFieldMappingInstance(selector) {
+        const { item: fieldMappingInstance, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.fieldMappingInstance(selector));
+        async function setup() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.setup());
+            await refresh();
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            await refresh();
+        }
+        async function openConfiguration(options) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.openConfiguration(options);
+        }
         return {
+            fieldMappingInstance,
+            accessor,
+            refresh,
+            setup,
+            reset,
+            openConfiguration,
             ...rest,
         };
     }
 
-    function useFieldMappingInstance(selector) {
-        const { data: fieldMappingInstance, ...rest } = useElement(selector, (integrationApp) => integrationApp.fieldMappingInstance.bind(integrationApp));
-        const accessor = rest.accessor;
+    function useFieldMappingInstances(query) {
+        const { ...rest } = useElements('field-mapping-instances', query);
         return {
-            fieldMappingInstance,
-            setup: () => accessor.setup(),
-            reset: () => accessor.reset(),
-            openConfiguration: (options) => accessor.openConfiguration(options),
+            fieldMappingInstances: rest.items,
             ...rest,
         };
     }
 
-    function useFieldMappingInstances(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.fieldMappingInstances);
+    function useFieldMappings(query) {
+        const { ...rest } = useElements('field-mappings', query);
         return {
+            fieldMappings: rest.items,
             ...rest,
         };
     }
 
-    function useDataSource(idOrKey) {
-        const { data: dataSource, ...rest } = useElement(idOrKey, (integrationApp) => integrationApp.dataSource.bind(integrationApp));
-        return { dataSource, ...rest };
+    function useDataSource(selector) {
+        const { item: dataSource, refresh, accessor, ...rest } = useElement(selector, (integrationApp) => integrationApp.dataSource(selector));
+        async function apply(integrationKeys) {
+            const result = await (accessor === null || accessor === void 0 ? void 0 : accessor.apply(integrationKeys));
+            await refresh();
+            return result;
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            await refresh();
+        }
+        return { dataSource, apply, reset, refresh, accessor, ...rest };
     }
 
-    function useDataSources(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.dataSources);
+    function useDataSourceEvents(query) {
+        const { ...rest } = useElements('data-source-events', query);
         return {
+            dataSourceEvents: rest,
             ...rest,
         };
     }
 
     function useDataSourceInstance(selector) {
-        const { data: dataSourceInstance, ...rest } = useElement(selector, (integrationApp) => integrationApp.dataSourceInstance.bind(integrationApp));
-        const accessor = rest.accessor;
+        const { item: dataSourceInstance, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.dataSourceInstance(selector));
+        async function setup() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.setup());
+            await refresh();
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            await refresh();
+        }
+        async function subscribe(eventType) {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.subscribe(eventType));
+            await refresh();
+        }
+        async function resubscribe(eventType) {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.resubscribe(eventType));
+            await refresh();
+        }
+        async function unsubscribe(eventType) {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.unsubscribe(eventType));
+            await refresh();
+        }
+        async function pullUpdates() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.pullUpdates());
+            await refresh();
+        }
+        async function fullSync() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.fullSync());
+            await refresh();
+        }
+        async function getSyncsList() {
+            return await (accessor === null || accessor === void 0 ? void 0 : accessor.getSyncsList());
+        }
+        async function openConfiguration(options) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.openConfiguration(options);
+        }
+        async function listRecords(request) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.listRecords(request);
+        }
+        async function findRecords(request) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.findRecords(request);
+        }
+        async function findRecordById(id) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.findRecordById(id);
+        }
+        async function createRecord(request) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.createRecord(request);
+        }
+        async function updateRecord(request) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.updateRecord(request);
+        }
+        async function deleteRecord(id) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.deleteRecord(id);
+        }
+        async function unifiedFieldsToNative(unifiedFields) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.unifiedFieldsToNative(unifiedFields);
+        }
+        async function getCollection() {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.getCollection();
+        }
+        async function getLocations(request) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.getLocations(request);
+        }
         return {
             dataSourceInstance,
-            setup: () => accessor.setup(),
-            subscribe: (eventType) => accessor.subscribe(eventType),
-            resubscribe: (eventType) => accessor.resubscribe(eventType),
-            unsubscribe: (eventType) => accessor.unsubscribe(eventType),
-            pullUpdates: () => accessor.pullUpdates(),
-            fullSync: () => accessor.fullSync(),
-            reset: () => accessor.reset(),
-            openConfiguration: (options) => accessor.openConfiguration(options),
-            findRecords: (request) => accessor.findRecords(request),
-            findRecordById: (id) => accessor.findRecordById(id),
-            createRecord: (request) => accessor.createRecord(request),
-            updateRecord: (request) => accessor.updateRecord(request),
-            deleteRecord: (id) => accessor.deleteRecord(id),
-            unifiedFieldsToNative: (unifiedFields) => accessor.unifiedFieldsToNative(unifiedFields),
-            ...rest,
-        };
-    }
-
-    function useDataSourceInstances(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.dataSourceInstances);
-        return {
+            accessor,
+            refresh,
+            setup,
+            reset,
+            subscribe,
+            resubscribe,
+            unsubscribe,
+            pullUpdates,
+            fullSync,
+            getSyncsList,
+            openConfiguration,
+            listRecords,
+            findRecords,
+            findRecordById,
+            createRecord,
+            updateRecord,
+            deleteRecord,
+            unifiedFieldsToNative,
+            getLocations,
+            getCollection,
             ...rest,
         };
     }
 
-    function useGetter(key, getter) {
-        const integrationApp = useIntegrationApp();
-        const [data, setData] = react.useState();
-        const [loading, setLoading] = react.useState(true);
-        const [error, setError] = react.useState(null);
-        const [refreshCounter, setRefreshCounter] = react.useState(0);
-        function refresh() {
-            setRefreshCounter(refreshCounter + 1);
-        }
-        react.useEffect(() => {
-            if (key !== undefined) {
-                setLoading(true);
-                setError(null);
-                if (integrationApp) {
-                    getter()
-                        .then(setData)
-                        .catch(setError)
-                        .finally(() => setLoading(false));
-                }
-                else {
-                    setError(new Error('IntegrationApp not found. Was this component wrapped in <IntegrationAppProvider>?'));
-                }
-            }
-        }, [integrationApp, key, refreshCounter]);
-        return { data, loading, error, refresh };
-    }
-
     function useDataSourceInstanceCollection(dataSourceInstance) {
         const integrationApp = useIntegrationApp();
-        const { data: collection, ...rest } = useGetter(dataSourceInstance === null || dataSourceInstance === void 0 ? void 0 : dataSourceInstance.id, () => integrationApp.dataSourceInstance(dataSourceInstance.id).getCollection());
+        const { data, error, isLoading, mutate } = useSWR(dataSourceInstance ? `${dataSourceInstance.id}/collection` : null, () => integrationApp.dataSourceInstance(dataSourceInstance.id).getCollection());
+        async function refresh() {
+            return await mutate();
+        }
+        const collection = data;
         return {
             collection,
-            ...rest,
+            refresh,
+            error,
+            loading: isLoading,
         };
     }
 
     function useDataSourceInstanceLocations(dataSourceInstance, args) {
         var _a;
         const integrationApp = useIntegrationApp();
-        const { data, ...rest } = useGetter(dataSourceInstance
-            ? `${dataSourceInstance.id}/${JSON.stringify(args)}`
-            : undefined, () => integrationApp
+        const { data, error, isLoading, mutate } = useSWR(dataSourceInstance
+            ? `${dataSourceInstance.id}/locations?${qs.stringify(args)}`
+            : null, () => integrationApp
             .dataSourceInstance(dataSourceInstance.id)
             .getLocations(args));
+        async function refresh() {
+            return await mutate();
+        }
+        const locations = (_a = data === null || data === void 0 ? void 0 : data.locations) !== null && _a !== void 0 ? _a : [];
         return {
-            locations: (_a = data === null || data === void 0 ? void 0 : data.locations) !== null && _a !== void 0 ? _a : [],
+            locations,
+            refresh,
+            error,
+            loading: isLoading,
+        };
+    }
+
+    function useDataSourceInstances(query) {
+        const { ...rest } = useElements('data-source-instances', query);
+        return {
+            dataSourceInstances: rest.items,
             ...rest,
         };
     }
 
-    function useDataSourceEvents(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.dataSourceEvents);
+    function useDataSources(query) {
+        const { ...rest } = useElements('data-sources', query);
         return {
+            dataSources: rest.items,
             ...rest,
         };
     }
 
-    function useAppEvents(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.appEvents);
+    function useAppEventSubscription(selector) {
+        const { item: appEventSubscription, ...rest } = useElement(selector, (integrationApp) => integrationApp.appEventSubscription(selector));
+        return { appEventSubscription, ...rest };
+    }
+
+    function useAppEventSubscriptions(query) {
+        const { ...rest } = useElements('app-event-subscriptions', query);
         return {
+            appEventSubscriptions: rest.items,
             ...rest,
         };
     }
 
-    function useAppEventType(idOrKey) {
-        const { data: appEventType, ...rest } = useElement(idOrKey, (integrationApp) => integrationApp.appEventType.bind(integrationApp));
+    function useAppEventType(id) {
+        const { item: appEventType, ...rest } = useElement(id, (integrationApp) => integrationApp.appEventType(id));
         return { appEventType, ...rest };
     }
 
     function useAppEventTypes(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.appEventTypes);
+        const { ...rest } = useElements('app-event-types', query);
         return {
+            appEventTypes: rest.items,
             ...rest,
         };
     }
 
-    function useAppEventSubscription(selector) {
-        const { data: appEventSubscription, ...rest } = useElement(selector, (integrationApp) => integrationApp.appEventSubscription.bind(integrationApp));
-        return { appEventSubscription, ...rest };
-    }
-
-    function useAppEventSubscriptions(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.appEventSubscriptions);
+    function useAppEvents(query) {
+        const { ...rest } = useElements('app-events', query);
         return {
+            appEvents: rest.items,
             ...rest,
         };
     }
 
-    function useFlow(idOrSelector) {
-        const { data: flow, ...rest } = useElement(idOrSelector, (integrationApp) => integrationApp.flow.bind(integrationApp));
-        return { flow, ...rest };
+    function useFlow(selector) {
+        const { item: flow, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.flow(selector));
+        async function apply(integrationKeys) {
+            const result = await (accessor === null || accessor === void 0 ? void 0 : accessor.apply(integrationKeys));
+            await refresh();
+            return result;
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            return await refresh();
+        }
+        return { flow, apply, reset, refresh, accessor, ...rest };
     }
 
     function useFlows(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.flows);
-        return { ...rest };
+        const { ...rest } = useElements('flows', query);
+        return {
+            flows: rest.items,
+            ...rest,
+        };
     }
 
-    function useFlowInstance(props) {
-        const { data: flowInstance, ...rest } = useElement(props, (integrationApp) => integrationApp.flowInstance.bind(integrationApp));
-        return { flowInstance, ...rest };
+    function useFlowInstance(selector) {
+        const { item: flowInstance, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.flowInstance(selector));
+        async function enable() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.enable());
+            await refresh();
+        }
+        async function disable() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.disable());
+            await refresh();
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            await refresh();
+        }
+        async function setup() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.setup());
+            await refresh();
+        }
+        async function openConfiguration(options) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.openConfiguration(options);
+        }
+        async function run(options = {}) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.run(options);
+        }
+        async function startRun(options = {}) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.startRun(options);
+        }
+        return {
+            flowInstance,
+            accessor,
+            refresh,
+            enable,
+            disable,
+            reset,
+            setup,
+            openConfiguration,
+            run,
+            startRun,
+            ...rest,
+        };
     }
 
     function useFlowInstances(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.flowInstances);
+        const { ...rest } = useElements('flow-instances', query);
         return {
+            flowInstances: rest.items,
             ...rest,
         };
     }
 
     function useFlowRun(id) {
-        const { data: flowRun, ...rest } = useElement(id, (integrationApp) => integrationApp.flowRun.bind(integrationApp));
-        return { flowRun, ...rest };
+        const { item: flowRun, archive, refresh, error, loading, } = useElement(id, (integrationApp) => integrationApp.flowRun(id));
+        return {
+            flowRun,
+            error,
+            loading,
+            refresh,
+            archive,
+        };
     }
 
     function useFlowRuns(query) {
-        const { ...rest } = useElements(query, (integrationApp) => integrationApp.flowRuns);
-        return { ...rest };
+        const { ...rest } = useElements('flow-runs', query);
+        return {
+            flowRuns: rest.items,
+            ...rest,
+        };
+    }
+
+    function useDataLinkTable(selector) {
+        const { item: dataLinkTable, ...rest } = useElement(selector, (integrationApp) => integrationApp.dataLinkTable(selector));
+        return { dataLinkTable, ...rest };
+    }
+
+    function useDataLinkTableInstance(selector) {
+        const { item: dataLinkTableInstance, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.dataLinkTableInstance(selector));
+        return {
+            dataLinkTableInstance,
+            accessor,
+            refresh,
+            findLinks: accessor === null || accessor === void 0 ? void 0 : accessor.findLinks,
+            createLink: accessor === null || accessor === void 0 ? void 0 : accessor.createLink,
+            deleteLink: accessor === null || accessor === void 0 ? void 0 : accessor.deleteLink,
+            ...rest,
+        };
+    }
+
+    function useDataLinkTableInstances(query) {
+        const { ...rest } = useElements('data-link-table-instances', query);
+        return {
+            dataLinkTableInstances: rest.items,
+            ...rest,
+        };
+    }
+
+    function useDataLinkTables(query) {
+        const { ...rest } = useElements('data-link-tables', query);
+        return {
+            dataLinkTables: rest.items,
+            ...rest,
+        };
+    }
+
+    function useAction(selector) {
+        const { item: action, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.action(selector));
+        async function apply(integrationKeys) {
+            const result = await (accessor === null || accessor === void 0 ? void 0 : accessor.apply(integrationKeys));
+            await refresh();
+            return result;
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            await refresh();
+        }
+        return { action, apply, reset, refresh, accessor, ...rest };
+    }
+
+    function useActionInstance(selector) {
+        const { item: actionInstance, accessor, refresh, ...rest } = useElement(selector, (integrationApp) => integrationApp.actionInstance(selector));
+        async function run(input) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.run(input);
+        }
+        async function setup() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.setup());
+            await refresh();
+        }
+        async function reset() {
+            await (accessor === null || accessor === void 0 ? void 0 : accessor.reset());
+            await refresh();
+        }
+        async function openConfiguration(options) {
+            return accessor === null || accessor === void 0 ? void 0 : accessor.open(options);
+        }
+        return {
+            actionInstance,
+            accessor,
+            refresh,
+            setup,
+            reset,
+            openConfiguration,
+            run,
+            ...rest,
+        };
+    }
+
+    function useActionInstances(query) {
+        const { ...rest } = useElements('action-instances', query);
+        return {
+            actionInstances: rest.items,
+            ...rest,
+        };
+    }
+
+    function useActions(query) {
+        const { ...rest } = useElements('actions', query);
+        return {
+            actions: rest.items,
+            ...rest,
+        };
+    }
+
+    function useScreen(selector) {
+        const { item: screen, ...rest } = useElement(selector, (integrationApp) => integrationApp.screen(selector));
+        return { screen, ...rest };
+    }
+
+    function useDataCollectionSpec({ path, key, integrationId, }) {
+        var _a;
+        const client = useIntegrationApp();
+        const dataCollectionKey = key !== null && key !== void 0 ? key : (_a = sdk.parseDataLocationPath(path)) === null || _a === void 0 ? void 0 : _a.key;
+        const { data: dataCollectionSpec } = useSWR(dataCollectionKey && integrationId
+            ? `/integrations/${integrationId}/data/${dataCollectionKey}`
+            : null, () => client.integration(integrationId).getDataLocation(dataCollectionKey));
+        return dataCollectionSpec;
     }
 
     Object.defineProperty(exports, 'DataForm', {
@@ -395,6 +656,10 @@
         get: function () { return sdk.DataForm; }
     });
     exports.IntegrationAppProvider = IntegrationAppProvider;
+    exports.useAction = useAction;
+    exports.useActionInstance = useActionInstance;
+    exports.useActionInstances = useActionInstances;
+    exports.useActions = useActions;
     exports.useAppEventSubscription = useAppEventSubscription;
     exports.useAppEventSubscriptions = useAppEventSubscriptions;
     exports.useAppEventType = useAppEventType;
@@ -403,12 +668,17 @@
     exports.useConnection = useConnection;
     exports.useConnections = useConnections;
     exports.useConnectorSpec = useConnectorSpec;
+    exports.useDataCollectionSpec = useDataCollectionSpec;
+    exports.useDataLinkTable = useDataLinkTable;
+    exports.useDataLinkTableInstance = useDataLinkTableInstance;
+    exports.useDataLinkTableInstances = useDataLinkTableInstances;
+    exports.useDataLinkTables = useDataLinkTables;
     exports.useDataSource = useDataSource;
-    exports.useDataSourceCollection = useDataSourceInstanceCollection;
     exports.useDataSourceEvents = useDataSourceEvents;
     exports.useDataSourceInstance = useDataSourceInstance;
+    exports.useDataSourceInstanceCollection = useDataSourceInstanceCollection;
+    exports.useDataSourceInstanceLocations = useDataSourceInstanceLocations;
     exports.useDataSourceInstances = useDataSourceInstances;
-    exports.useDataSourceLocations = useDataSourceInstanceLocations;
     exports.useDataSources = useDataSources;
     exports.useFieldMapping = useFieldMapping;
     exports.useFieldMappingInstance = useFieldMappingInstance;
@@ -422,7 +692,9 @@
     exports.useFlows = useFlows;
     exports.useIntegration = useIntegration;
     exports.useIntegrationApp = useIntegrationApp;
+    exports.useIntegrationAppSWR = useIntegrationAppSWR;
     exports.useIntegrations = useIntegrations;
+    exports.useScreen = useScreen;
 
 }));
 //# sourceMappingURL=index.umd.js.map