@integration-app/react 0.3.1 → 0.3.3

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

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

package/src/customers/useCustomers.ts

@@ -0,0 +1,11 @@
+import { User, FindUsersQuery } from '@integration-app/sdk'
+import { useElements } from '../hooks/useElements'
+
+export function useCustomers(query?: FindUsersQuery) {
+  const { ...rest } = useElements<User>('users', query)
+
+  return {
+    customers: rest.items,
+    ...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

@@ -14,7 +14,7 @@ import {
 import { useElement } from '../hooks/useElement'
 
 export function useDataSourceInstance(
-  selector: string | DataSourceInstanceSelector,
+  selector: string | DataSourceInstanceSelector | undefined,
 ) {
   const {
     item: dataSourceInstance,
@@ -26,7 +26,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 +88,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)
   }
 

package/src/data-sources/useDataSourceInstanceLocations.ts

@@ -17,7 +17,9 @@ export function useDataSourceInstanceLocations(
 
   const { data, error, isLoading, mutate } = useSWR<DataDirectoryListResponse>(
     dataSourceInstance
-      ? `${dataSourceInstance.id}/locations?${qs.stringify(args)}`
+      ? /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2345): Argument of type '{ path?: string | undefined; cur... Remove this comment to see the full error message
+        `${dataSourceInstance.id}/locations?${qs.stringify(args)}`
       : null,
     () =>
       integrationApp

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

@@ -8,7 +8,9 @@ import {
 } 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,
@@ -19,7 +21,9 @@ export function useFlowInstance(selector: string | FlowInstanceSelector) {
     UpdateFlowInstanceRequest,
     UpdateFlowInstanceRequest,
     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 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)
         }
-      }, 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,6 +155,8 @@ export function useElement<
   async function create(data: CreateRequest) {
     if (!accessor?.create) {
       throw new Error(
+        /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         `"create method is not supported for accessor ${accessor.constructor.name}`,
       )
     }
@@ -160,6 +172,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

@@ -27,6 +27,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'
 
@@ -48,6 +53,9 @@ export { useActions } from './actions/useActions.js'
 
 export { useScreen } from './screens/useScreen.js'
 
+export { useCustomer } from './customers/useCustomer.js'
+export { useCustomers } from './customers/useCustomers.js'
+
 export { useDataCollectionSpec } from './data-collections/useDataCollectionSpec.js'
 
 export { DataForm } from '@integration-app/sdk'

package/src/integrations/useConnectorSpec.ts

@@ -1,12 +1,14 @@
 import { ConnectionSpec } from '@integration-app/sdk'
-import { useIntegrationApp } from '../contexts/integration-app-context'
 import useSWR from 'swr'
+import { useIntegrationApp } from '../contexts/integration-app-context'
 
 export function useConnectorSpec(integrationIdOrKey: string) {
   const integrationApp = useIntegrationApp()
 
   const { data, isLoading, error } = useSWR<ConnectionSpec>(
-    `/integrations/${integrationIdOrKey}/connector-spec`,
+    integrationIdOrKey
+      ? `/integrations/${integrationIdOrKey}/connector-spec`
+      : undefined,
     () => integrationApp.integration(integrationIdOrKey).getConnectorSpec(),
   )
 

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"
   },