@integration-app/react 0.2.1 → 0.3.1

package/dist/index.js

@@ -3,6 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var sdk = require('@integration-app/sdk');
 var react = require('react');
+var useSWR = require('swr');
+var AwesomeDebouncePromise = require('awesome-debounce-promise');
+var useSWRInfinite = require('swr/infinite');
+var qs = require('query-string');
 
 const IntegrationAppContext = react.createContext(null);
 IntegrationAppContext.displayName = 'IntegrationAppClientContext';
@@ -21,373 +25,634 @@ function useIntegrationApp() {
     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 +660,10 @@ Object.defineProperty(exports, 'DataForm', {
     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 +672,17 @@ exports.useAppEvents = useAppEvents;
 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,5 +696,7 @@ exports.useFlowRuns = useFlowRuns;
 exports.useFlows = useFlows;
 exports.useIntegration = useIntegration;
 exports.useIntegrationApp = useIntegrationApp;
+exports.useIntegrationAppSWR = useIntegrationAppSWR;
 exports.useIntegrations = useIntegrations;
+exports.useScreen = useScreen;
 //# sourceMappingURL=index.js.map