@integration-app/react 0.3.2 → 0.3.4

package/src/app-events/useAppEventSubscription.ts

@@ -2,19 +2,21 @@ import {
   AppEventSubscription,
   AppEventSubscriptionAccessor,
   AppEventSubscriptionSelector,
-  IAppEventSubscriptionUpdate,
+  AppEventSubscriptionUpdateRequest,
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
 export function useAppEventSubscription(
-  selector: string | AppEventSubscriptionSelector,
+  selector: string | AppEventSubscriptionSelector | undefined,
 ) {
   const { item: appEventSubscription, ...rest } = useElement<
     AppEventSubscription,
-    IAppEventSubscriptionUpdate,
-    IAppEventSubscriptionUpdate,
+    AppEventSubscriptionUpdateRequest,
+    AppEventSubscriptionUpdateRequest,
     AppEventSubscriptionAccessor
-  >(selector, (integrationApp) => integrationApp.appEventSubscription(selector))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.appEventSubscription(selector) : undefined,
+  )
 
   return { appEventSubscription, ...rest }
 }

package/src/app-events/useAppEventType.ts

@@ -6,13 +6,15 @@ import {
 import { AppEventTypeAccessor } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useAppEventType(id: string) {
+export function useAppEventType(selector: string | undefined) {
   const { item: appEventType, ...rest } = useElement<
     AppEventType,
     UpdateAppEventTypeRequest,
     CreateAppEventTypeRequest,
     AppEventTypeAccessor
-  >(id, (integrationApp) => integrationApp.appEventType(id))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.appEventType(selector) : undefined,
+  )
 
   return { appEventType, ...rest }
 }

package/src/contexts/integration-app-context.tsx

@@ -1,6 +1,8 @@
 import { IntegrationAppClient } from '@integration-app/sdk'
 import { createContext, ReactNode, useContext, useMemo } from 'react'
 
+/* FIXME: strictNullCheck temporary fix */
+// @ts-expect-error TS(2345): Argument of type 'null' is not assignable to param... Remove this comment to see the full error message
 const IntegrationAppContext = createContext<IntegrationAppClient>(null)
 
 IntegrationAppContext.displayName = 'IntegrationAppClientContext'
@@ -26,7 +28,11 @@ export const IntegrationAppProvider = ({
   fetchToken,
   credentials,
   fetchCredentials,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
   apiUri = null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
   uiUri = null,
   children,
 }: IntegrationAppProviderProps) => {

package/src/customers/useCustomer.ts

@@ -7,13 +7,13 @@ import {
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useCustomer(selector: UserSelector | string) {
+export function useCustomer(selector: UserSelector | string | undefined) {
   const { item: customer, ...rest } = useElement<
     User,
     UpdateUserRequest,
     CreateUserRequest,
     UserAccessor
-  >(selector, (c) => c.customer(selector))
+  >(selector, (c) => (selector ? c.customer(selector) : undefined))
 
   return { customer, ...rest }
 }

package/src/data-collections/useDataCollectionSpec.ts

@@ -1,5 +1,5 @@
-import { useIntegrationApp } from 'contexts/integration-app-context'
 import { DataCollectionSpec, parseDataLocationPath } from '@integration-app/sdk'
+import { useIntegrationApp } from 'contexts/integration-app-context'
 import useSWR from 'swr'
 
 export function useDataCollectionSpec({
@@ -19,7 +19,10 @@ export function useDataCollectionSpec({
     dataCollectionKey && integrationId
       ? `/integrations/${integrationId}/data/${dataCollectionKey}`
       : null,
-    () => client.integration(integrationId).getDataLocation(dataCollectionKey),
+    () =>
+      /* FIXME: strictNullCheck temporary fix */
+      // @ts-expect-error TS(2345): Argument of type 'string | undefined' is not assig... Remove this comment to see the full error message
+      client.integration(integrationId).getDataCollection(dataCollectionKey),
   )
 
   return dataCollectionSpec

package/src/data-links/useDataLinkTable.ts

@@ -6,13 +6,15 @@ import {
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useDataLinkTable(selector: string) {
+export function useDataLinkTable(selector: string | undefined) {
   const { item: dataLinkTable, ...rest } = useElement<
     DataLinkTable,
     UpdateDataLinkTableRequest,
     CreateDataLinkTableRequest,
     DataLinkTableAccessor
-  >(selector, (integrationApp) => integrationApp.dataLinkTable(selector))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.dataLinkTable(selector) : undefined,
+  )
 
   return { dataLinkTable, ...rest }
 }

package/src/data-links/useDataLinkTableInstance.ts

@@ -8,7 +8,7 @@ import {
 import { useElement } from '../hooks/useElement'
 
 export function useDataLinkTableInstance(
-  selector: string | DataLinkTableInstanceSelector,
+  selector: string | DataLinkTableInstanceSelector | undefined,
 ) {
   const {
     item: dataLinkTableInstance,
@@ -21,7 +21,7 @@ export function useDataLinkTableInstance(
     CreateDataLinkTableInstanceRequest,
     DataLinkTableInstanceAccessor
   >(selector, (integrationApp) =>
-    integrationApp.dataLinkTableInstance(selector),
+    selector ? integrationApp.dataLinkTableInstance(selector) : undefined,
   )
 
   return {

package/src/data-sources/useDataSource.ts

@@ -7,7 +7,9 @@ import {
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useDataSource(selector: string | DataSourceSelector) {
+export function useDataSource(
+  selector: string | DataSourceSelector | undefined,
+) {
   const {
     item: dataSource,
     refresh,
@@ -18,7 +20,9 @@ export function useDataSource(selector: string | DataSourceSelector) {
     UpdateDataSourceRequest,
     CreateDataSourceRequest,
     DataSourceAccessor
-  >(selector, (integrationApp) => integrationApp.dataSource(selector))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.dataSource(selector) : undefined,
+  )
 
   async function apply(integrationKeys: string[]) {
     const result = await accessor?.apply(integrationKeys)

package/src/data-sources/useDataSourceInstance.ts

@@ -7,14 +7,13 @@ import {
   OpenDataSourceConfigurationOptions,
   DataSourceInstance,
   UpdateDataSourceInstanceRequest,
-  DataDirectoryListRequest,
   DataCollectionListRequest,
   CreateDataSourceInstanceRequest,
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
 export function useDataSourceInstance(
-  selector: string | DataSourceInstanceSelector,
+  selector: string | DataSourceInstanceSelector | undefined,
 ) {
   const {
     item: dataSourceInstance,
@@ -26,7 +25,9 @@ export function useDataSourceInstance(
     UpdateDataSourceInstanceRequest,
     CreateDataSourceInstanceRequest,
     DataSourceInstanceAccessor
-  >(selector, (integrationApp) => integrationApp.dataSourceInstance(selector))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.dataSourceInstance(selector) : undefined,
+  )
 
   async function setup() {
     await accessor?.setup()
@@ -86,14 +87,20 @@ export function useDataSourceInstance(
   }
 
   async function createRecord(request?: DataCollectionCreateRequest) {
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2345): Argument of type 'DataCollectionCreateRequest | un... Remove this comment to see the full error message
     return accessor?.createRecord(request)
   }
 
   async function updateRecord(request?: DataCollectionUpdateRequest) {
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2345): Argument of type 'DataCollectionUpdateRequest | un... Remove this comment to see the full error message
     return accessor?.updateRecord(request)
   }
 
   async function deleteRecord(id?: string) {
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2345): Argument of type 'string | undefined' is not assig... Remove this comment to see the full error message
     return accessor?.deleteRecord(id)
   }
 
@@ -105,14 +112,6 @@ export function useDataSourceInstance(
     return accessor?.getCollection()
   }
 
-  async function getLocations(
-    request: DataDirectoryListRequest & {
-      path?: string
-    },
-  ) {
-    return accessor?.getLocations(request)
-  }
-
   return {
     dataSourceInstance,
     accessor,
@@ -134,7 +133,6 @@ export function useDataSourceInstance(
     updateRecord,
     deleteRecord,
     unifiedFieldsToNative,
-    getLocations,
     getCollection,
 
     ...rest,

package/src/field-mappings/useFieldMapping.ts

@@ -7,7 +7,9 @@ import {
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useFieldMapping(selector: FieldMappingSelector | string) {
+export function useFieldMapping(
+  selector: FieldMappingSelector | string | undefined,
+) {
   const {
     item: fieldMapping,
     accessor,
@@ -18,11 +20,15 @@ export function useFieldMapping(selector: FieldMappingSelector | string) {
     UpdateFieldMappingRequest,
     CreateFieldMappingRequest,
     FieldMappingAccessor
-  >(selector, (integrationApp) => integrationApp.fieldMapping(selector))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.fieldMapping(selector) : undefined,
+  )
 
   async function apply(integrationKeys: string[]): Promise<FieldMapping[]> {
     const result = await accessor?.apply(integrationKeys)
     await refresh()
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2322): Type 'FieldMapping[] | undefined' is not assignabl... Remove this comment to see the full error message
     return result
   }
 

package/src/field-mappings/useFieldMappingInstance.ts

@@ -9,7 +9,7 @@ import {
 import { useElement } from '../hooks/useElement'
 
 export function useFieldMappingInstance(
-  selector: string | FieldMappingInstanceSelector,
+  selector: string | FieldMappingInstanceSelector | undefined,
 ) {
   const {
     item: fieldMappingInstance,
@@ -21,7 +21,9 @@ export function useFieldMappingInstance(
     UpdateFieldMappingInstanceRequest,
     CreateFieldMappingInstanceRequest,
     FieldMappingInstanceAccessor
-  >(selector, (integrationApp) => integrationApp.fieldMappingInstance(selector))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.fieldMappingInstance(selector) : undefined,
+  )
 
   async function setup() {
     await accessor?.setup()

package/src/flows/useFlow.ts

@@ -7,7 +7,7 @@ import {
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useFlow(selector: string | FlowSelector) {
+export function useFlow(selector: string | FlowSelector | undefined) {
   const {
     item: flow,
     accessor,
@@ -15,12 +15,14 @@ export function useFlow(selector: string | FlowSelector) {
     ...rest
   } = useElement<Flow, UpdateFlowRequest, CreateFlowRequest, FlowAccessor>(
     selector,
-    (integrationApp) => integrationApp.flow(selector),
+    (integrationApp) => (selector ? integrationApp.flow(selector) : undefined),
   )
 
   async function apply(integrationKeys: string[]): Promise<Flow[]> {
     const result = await accessor?.apply(integrationKeys)
     await refresh()
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2322): Type 'Flow[] | undefined' is not assignable to typ... Remove this comment to see the full error message
     return result
   }
 

package/src/flows/useFlowInstance.ts

@@ -5,10 +5,13 @@ import {
   OpenFlowInstanceConfigurationOptions,
   RunFlowOptions,
   UpdateFlowInstanceRequest,
+  CreateFlowInstanceRequest,
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useFlowInstance(selector: string | FlowInstanceSelector) {
+export function useFlowInstance(
+  selector: string | FlowInstanceSelector | undefined,
+) {
   const {
     item: flowInstance,
     accessor,
@@ -17,9 +20,11 @@ export function useFlowInstance(selector: string | FlowInstanceSelector) {
   } = useElement<
     FlowInstance,
     UpdateFlowInstanceRequest,
-    UpdateFlowInstanceRequest,
+    CreateFlowInstanceRequest,
     FlowInstanceAccessor
-  >(selector, (integrationApp) => integrationApp.flowInstance(selector))
+  >(selector, (integrationApp) =>
+    selector ? integrationApp.flowInstance(selector) : undefined,
+  )
 
   async function enable() {
     await accessor?.enable()

package/src/flows/useFlowRun.ts

@@ -1,7 +1,7 @@
 import { FlowRun, FlowRunAccessor } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useFlowRun(id: string) {
+export function useFlowRun(id: string | undefined) {
   const {
     item: flowRun,
     archive,
@@ -9,7 +9,7 @@ export function useFlowRun(id: string) {
     error,
     loading,
   } = useElement<FlowRun, never, never, FlowRunAccessor>(id, (integrationApp) =>
-    integrationApp.flowRun(id),
+    id ? integrationApp.flowRun(id) : undefined,
   )
 
   return {

package/src/hooks/useElement.tsx

@@ -1,5 +1,5 @@
 import { IntegrationAppClient } from '@integration-app/sdk'
-import AwesomeDebouncePromise from 'awesome-debounce-promise'
+import AwesomeDebouncePromise from '_modules/awesome-debounce-promise'
 import { useIntegrationApp } from 'contexts/integration-app-context'
 import useSWR from 'swr'
 
@@ -36,7 +36,7 @@ export function useElement<
   selector: any,
   accessorGenerator: (
     integrationAppClient: IntegrationAppClient,
-  ) => ElementAccessor,
+  ) => ElementAccessor | undefined,
 ) {
   const integrationApp = useIntegrationApp()
 
@@ -48,40 +48,44 @@ export function useElement<
   }
   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?.put(data)
-          if (!elementState.updatedLocally) {
-            // Update savingToSever so that cached versions in each hook are updated when they react to 'mutate' below
-            // Yes, this duplicates the one in `finally`, but but the time that one is called it's too late since `mutate` already did its job.
-            elementState.savingToServer = false
-            // When we received updated state of the element,
-            // apply it to the context as long as we didn't make any other changes locally
-            // meanwhile.
-            await mutate(result, false)
-          }
-        } catch (e) {
-          elementState.updatedLocally = true
-          throw e
-        } finally {
+  const elementState: ElementState = elementStateCache.get(elementKey) ?? {
+    updatedLocally: false,
+    savingToServer: false,
+    debouncedPut: AwesomeDebouncePromise(async (data) => {
+      elementState.updatedLocally = false
+      elementState.savingToServer = true
+
+      try {
+        /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2722): Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
+        const result = await accessor?.put(data)
+        if (!elementState.updatedLocally) {
+          // Update savingToSever so that cached versions in each hook are updated when they react to 'mutate' below
+          // Yes, this duplicates the one in `finally`, but by the time that one is called it's too late since `mutate` already did its job.
           elementState.savingToServer = false
+          // When we received updated state of the element,
+          // apply it to the context as long as we didn't make any other changes locally
+          // meanwhile.
+          await mutate(result, false)
         }
-      }, 500),
-    })
+      } catch (e) {
+        elementState.updatedLocally = true
+        throw e
+      } finally {
+        elementState.savingToServer = false
+      }
+    }, 500),
   }
 
-  const elementState = elementStateCache.get(elementKey)
+  if (!elementStateCache.has(elementKey)) {
+    elementStateCache.set(elementKey, elementState)
+  }
 
-  const accessor = integrationApp ? accessorGenerator(integrationApp) : null
+  const accessor = integrationApp
+    ? accessorGenerator(integrationApp)
+    : undefined
 
-  const swrKey = accessor && selector ? `element:${elementKey}` : null // do not fetch anything if selector or accessor is not defined
+  const swrKey = accessor && selector ? `element:${elementKey}` : undefined // do not fetch anything if selector or accessor is not defined
 
   const {
     data: item,
@@ -98,12 +102,16 @@ export function useElement<
   const refreshing = isValidating
 
   async function refresh(): Promise<Element> {
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2322): Type 'Awaited<Element> | undefined' is not assigna... Remove this comment to see the full error message
     return await mutate()
   }
 
   async function put(data: UpdateRequest) {
     if (!accessor?.put) {
       throw new Error(
+        /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         `"put method is not supported for accessor ${accessor.constructor.name}`,
       )
     }
@@ -113,7 +121,7 @@ export function useElement<
     // We don't know which fields are "innate" for the element and should stay
     // and which should be removed by put, so we'll do a simple patch.
     // We'll update data with actual value from the server after put is done.
-    const newLocalData = {
+    const newLocalData: any = {
       ...item,
       ...data,
     }
@@ -137,6 +145,8 @@ export function useElement<
       return
     }
 
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2345): Argument of type '{ archivedAt: string; }' is not ... Remove this comment to see the full error message
     await mutate({ ...item, archivedAt: new Date().toISOString() }, false)
     await accessor?.archive()
     await mutate()
@@ -145,7 +155,7 @@ export function useElement<
   async function create(data: CreateRequest) {
     if (!accessor?.create) {
       throw new Error(
-        `"create method is not supported for accessor ${accessor.constructor.name}`,
+        `"create method is not supported for accessor ${accessor?.constructor.name}`,
       )
     }
 
@@ -160,6 +170,7 @@ export function useElement<
     item,
 
     loading,
+
     saving: elementState.updatedLocally || elementState.savingToServer,
 
     error,

package/src/hooks/useElements.tsx

@@ -21,11 +21,15 @@ export function useElements<Item>(route: string, query = {}) {
       })}`
 
     // reached the end
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
     if (previousPageData.items?.length < LIMIT) return null
 
     return `/${route}?${qs.stringify({
       ...query,
       limit: LIMIT,
+      /* FIXME: strictNullCheck temporary fix */
+      // @ts-expect-error TS(2531): Object is possibly 'null'.
       cursor: previousPageData.cursor,
     })}`
   }
@@ -43,6 +47,8 @@ export function useElements<Item>(route: string, query = {}) {
   const refreshing = isValidating
 
   async function loadMore() {
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2532): Object is possibly 'undefined'.
     const hasMoreToLoad = data[size - 1]?.items?.length === LIMIT
 
     if (hasMoreToLoad) {

package/src/index.tsx

@@ -17,7 +17,6 @@ export { useDataSource } from './data-sources/useDataSource.js'
 export { useDataSourceEvents } from './data-sources/useDataSourceEvents.js'
 export { useDataSourceInstance } from './data-sources/useDataSourceInstance.js'
 export { useDataSourceInstanceCollection } from './data-sources/useDataSourceInstanceCollection.js'
-export { useDataSourceInstanceLocations } from './data-sources/useDataSourceInstanceLocations.js'
 export { useDataSourceInstances } from './data-sources/useDataSourceInstances.js'
 export { useDataSources } from './data-sources/useDataSources.js'
 
@@ -27,6 +26,11 @@ export { useAppEventType } from './app-events/useAppEventType.js'
 export { useAppEventTypes } from './app-events/useAppEventTypes.js'
 export { useAppEvents } from './app-events/useAppEvents.js'
 
+export { useAppDataSchema } from './app-data-schemas/useAppDataSchema.js'
+export { useAppDataSchemas } from './app-data-schemas/useAppDataSchemas.js'
+export { useAppDataSchemaInstance } from './app-data-schemas/useAppDataSchemaInstance.js'
+export { useAppDataSchemaInstances } from './app-data-schemas/useAppDataSchemaInstances.js'
+
 export { useFlow } from './flows/useFlow.js'
 export { useFlows } from './flows/useFlows.js'
 

package/src/integrations/useIntegration.ts

@@ -6,13 +6,15 @@ import {
 } from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useIntegration(id: string) {
+export function useIntegration(idOrKey: string | undefined) {
   const { item: integration, ...rest } = useElement<
     Integration,
     UpdateIntegrationRequest,
     CreateIntegrationRequest,
     IntegrationAccessor
-  >(id, (integrationApp) => integrationApp.integration(id))
+  >(idOrKey, (integrationApp) =>
+    idOrKey ? integrationApp.integration(idOrKey) : undefined,
+  )
 
   return { integration, ...rest }
 }

package/tsconfig.json

@@ -2,12 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "es2018",
-    "lib": ["es2019", "DOM"],
+    "lib": ["es2019", "dom", "dom.iterable"],
     "strict": true,
+    "strictNullChecks": true,
     "outDir": "./dist",
     "baseUrl": "./src",
     "jsx": "react-jsx",
-
     "declaration": true,
     "declarationDir": "./dist/dts"
   },

package/rollup.dts.config.mjs

@@ -1,21 +0,0 @@
-// Flat dts files into one
-import dts from 'rollup-plugin-dts'
-
-const config = [
-  // Generate dts files for each bundle from *.d.ts files
-  {
-    input: './dist/dts/index.d.ts',
-    output: [
-      { file: 'dist/index.d.ts', format: 'commonjs' },
-      { file: 'dist/index.module.d.ts', format: 'es' },
-      {
-        file: 'dist/index.umd.d.ts',
-        format: 'umd',
-        name: 'integrationAppReact',
-      },
-    ],
-    plugins: [dts()],
-  },
-]
-
-export default config

package/src/data-sources/useDataSourceInstanceLocations.ts

@@ -1,41 +0,0 @@
-import {
-  DataDirectoryListResponse,
-  DataSourceInstance,
-} from '@integration-app/sdk'
-import { useIntegrationApp } from '../contexts/integration-app-context'
-import useSWR from 'swr'
-import qs from 'query-string'
-
-export function useDataSourceInstanceLocations(
-  dataSourceInstance: DataSourceInstance,
-  args?: {
-    path?: string
-    cursor?: string
-  },
-) {
-  const integrationApp = useIntegrationApp()
-
-  const { data, error, isLoading, mutate } = useSWR<DataDirectoryListResponse>(
-    dataSourceInstance
-      ? `${dataSourceInstance.id}/locations?${qs.stringify(args)}`
-      : null,
-    () =>
-      integrationApp
-        .dataSourceInstance(dataSourceInstance.id)
-        .getLocations(args),
-  )
-
-  async function refresh() {
-    return await mutate()
-  }
-
-  const locations = data?.locations ?? []
-
-  return {
-    locations,
-
-    refresh,
-    error,
-    loading: isLoading,
-  }
-}