@integration-app/react 0.2.0 → 0.3.1

package/src/hooks/useElement.tsx

@@ -1,169 +1,175 @@
-import {
-  IntegrationAppClient,
-  ElementAccessor,
-  ElementInstanceAccessor,
-} from '@integration-app/sdk'
-import { useEffect, useState } from 'react'
-import { useIntegrationApp } from '../contexts/integration-app-context'
-
-interface ElementHookResult<
-  ElementInterface,
-  ElementAccessor,
-  CreateRequest,
-  UpdateRequest,
-> {
-  data: ElementInterface | undefined
-  loading: boolean
-  error?: Error
-  create: (data: CreateRequest) => Promise<ElementInterface>
-  patch: (data: UpdateRequest) => Promise<ElementInterface>
-  put: (data: CreateRequest) => Promise<ElementInterface>
-  archive: () => Promise<void>
-  refresh: () => void
-  accessor: ElementAccessor
+import { IntegrationAppClient } from '@integration-app/sdk'
+import AwesomeDebouncePromise from 'awesome-debounce-promise'
+import { useIntegrationApp } from 'contexts/integration-app-context'
+import useSWR from 'swr'
+
+interface ElementState {
+  debouncedPut: (data) => Promise<void>
+  updatedLocally: boolean
+  savingToServer: boolean
 }
 
-type ElementAccessorGetter<SelectorInterface, ElementAccessor> = (
-  params: SelectorInterface | string,
-) => ElementAccessor
+const elementStateCache = new Map<string, ElementState>()
+
+interface BaseElementAccessor<Element, UpdateRequest, CreateRequest> {
+  get(): Promise<Element>
 
-export type ElementAccessorGenerator<SelectorInterface, ElementAccessor> = (
-  integrationApp: IntegrationAppClient,
-) => ElementAccessorGetter<SelectorInterface, ElementAccessor>
+  patch?(data: Partial<UpdateRequest>): Promise<Element>
+
+  put?(data: UpdateRequest): Promise<Element>
 
-interface BaseElementAccessor<ElementInterface, CreateRequest, UpdateRequest> {
-  get(): Promise<ElementInterface>
-  create?: (data: CreateRequest) => Promise<ElementInterface>
-  patch?(data: UpdateRequest): Promise<ElementInterface>
-  put?(data: CreateRequest): Promise<ElementInterface>
   archive?(): Promise<void>
-}
 
-type ExtractElementGenerics<T, Interface> = T extends ElementAccessor<
-  infer _InterfaceType,
-  infer CreateRequestType,
-  infer UpdateRequestType
->
-  ? { CreateRequest: CreateRequestType; UpdateRequest: UpdateRequestType }
-  : T extends ElementInstanceAccessor<
-      infer _ElementInstanceType,
-      infer _SelectorType,
-      infer CreateRequestType,
-      infer UpdateRequestType
-    >
-  ? { CreateRequest: CreateRequestType; UpdateRequest: UpdateRequestType }
-  : { CreateRequest: Partial<Interface>; UpdateRequest: Partial<Interface> }
+  create?(data: CreateRequest): Promise<Element>
+}
 
 export function useElement<
-  ElementInterface,
-  SelectorInterface,
+  Element,
+  UpdateRequest,
+  CreateRequest,
   ElementAccessor extends BaseElementAccessor<
-    ElementInterface,
-    CreateRequest,
-    UpdateRequest
+    Element,
+    UpdateRequest,
+    CreateRequest
   >,
-  CreateRequest extends Partial<ElementInterface> = ExtractElementGenerics<
-    ElementAccessor,
-    ElementInterface
-  >['CreateRequest'],
-  UpdateRequest extends Partial<ElementInterface> = ExtractElementGenerics<
-    ElementAccessor,
-    ElementInterface
-  >['UpdateRequest'],
 >(
-  props: SelectorInterface | { id: string },
-  accessorGenerator: ElementAccessorGenerator<
-    SelectorInterface,
-    ElementAccessor
-  >,
-): ElementHookResult<
-  ElementInterface,
-  ElementAccessor,
-  CreateRequest,
-  UpdateRequest
-> {
+  selector: any,
+  accessorGenerator: (
+    integrationAppClient: IntegrationAppClient,
+  ) => ElementAccessor,
+) {
   const integrationApp = useIntegrationApp()
-  const [data, setData] = useState<ElementInterface>()
-  const [loading, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error>(null)
-  const [refreshCounter, setRefreshCounter] = useState(0)
-
-  const selector = (props as any)?.id
-    ? (props as { id: string }).id
-    : (props as SelectorInterface)
-
-  const accessor = integrationApp
-    ? accessorGenerator(integrationApp)(selector)
-    : null
-
-  useEffect(() => {
-    setLoading(true)
-    setError(null)
-    if (integrationApp) {
-      accessor
-        .get()
-        .then(setData)
-        .catch(setError)
-        .finally(() => setLoading(false))
-    } else {
-      setError(
-        new Error(
-          'IntegrationApp not found. Was this component wrapped in <IntegrationAppProvider>?',
-        ),
+
+  // To make sure all instances of useElement with the same IntegrationAppClient and selector
+  // are synchronized, we cache them using selector and token as a key
+  const elementKeyData: any = {
+    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?.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 {
+          elementState.savingToServer = false
+        }
+      }, 500),
+    })
+  }
+
+  const elementState = elementStateCache.get(elementKey)
+
+  const accessor = integrationApp ? accessorGenerator(integrationApp) : null
+
+  const swrKey = accessor && selector ? `element:${elementKey}` : null // do not fetch anything if selector or accessor is not defined
+
+  const {
+    data: item,
+    mutate,
+    error,
+    isLoading,
+    isValidating,
+  } = useSWR(swrKey, () => accessor?.get(), {
+    // pause revalidation if update is in progress to not overwrite local changes
+    isPaused: () => elementState.updatedLocally || elementState.savingToServer,
+  })
+
+  const loading = isLoading
+  const refreshing = isValidating
+
+  async function refresh(): Promise<Element> {
+    return await mutate()
+  }
+
+  async function put(data: UpdateRequest) {
+    if (!accessor?.put) {
+      throw new Error(
+        `"put method is not supported for accessor ${accessor.constructor.name}`,
       )
     }
-  }, [integrationApp, JSON.stringify(props), refreshCounter])
-
-  async function create(createData: CreateRequest) {
-    if (data !== undefined) {
-      setData({
-        ...data,
-        ...createData,
-      })
+
+    elementState.updatedLocally = true
+
+    // 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 = {
+      ...item,
+      ...data,
     }
-    return accessorGenerator(integrationApp)(selector).create(createData)
+
+    await mutate(newLocalData, false)
+
+    await elementState.debouncedPut(data)
   }
 
-  function refresh() {
-    setRefreshCounter(refreshCounter + 1)
+  async function patch(data: Partial<UpdateRequest>) {
+    const newData = {
+      ...item,
+      ...data,
+    } as UpdateRequest
+
+    return put(newData)
   }
 
-  async function patch(patch: UpdateRequest) {
-    if (typeof patch === 'object') {
-      setData({
-        ...data,
-        ...(patch ?? {}),
-      })
-      return accessorGenerator(integrationApp)(selector).patch(patch)
-    } else {
-      return data
+  async function archive() {
+    if (!accessor?.archive) {
+      return
     }
+
+    await mutate({ ...item, archivedAt: new Date().toISOString() }, false)
+    await accessor?.archive()
+    await mutate()
   }
 
-  async function put(putData: CreateRequest) {
-    if (data !== undefined) {
-      setData({
-        ...data,
-        ...putData,
-      })
+  async function create(data: CreateRequest) {
+    if (!accessor?.create) {
+      throw new Error(
+        `"create method is not supported for accessor ${accessor.constructor.name}`,
+      )
     }
-    return accessorGenerator(integrationApp)(selector).put(putData)
-  }
 
-  async function archive() {
-    setData(null)
-    return accessorGenerator(integrationApp)(selector).archive()
+    const result = await 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,
   }
 }

package/src/hooks/useElements.tsx

@@ -1,98 +1,69 @@
 import { useIntegrationApp } from '../contexts/integration-app-context'
-import { useEffect, useRef, useState } from 'react'
-import { IntegrationAppClient } from '@integration-app/sdk'
-import { PaginationQuery, PaginationResponse } from '@integration-app/sdk'
-
-export interface ElementsHookResult<Element> {
-  items: Element[]
-  loading: boolean
-  error?: Error
-  refresh(): Promise<void>
-  loadMore(): Promise<void>
-}
-
-interface ElementsAccessor<Element, FindQuery> {
-  find(query: FindQuery): Promise<PaginationResponse<Element>>
-}
+import { useState } from 'react'
+import { PaginationResponse } from '@integration-app/sdk'
+import useSWRInfinite from 'swr/infinite'
+import qs from 'query-string'
 
-type InstanceAccessorGenerator<Element, FindQuery> = (
-  integrationApp: IntegrationAppClient,
-) => ElementsAccessor<Element, FindQuery>
+const LIMIT = 25
 
-export function useElements<Element, FindQuery extends PaginationQuery>(
-  initialQuery: FindQuery,
-  accessorGenerator: InstanceAccessorGenerator<Element, FindQuery>,
-): ElementsHookResult<Element> {
+export function useElements<Item>(route: string, query = {}) {
   const integrationApp = useIntegrationApp()
 
-  const refreshId = useRef<number>(0)
-  const [items, setItems] = useState<Element[]>([])
-  const [nextCursor, setNextCursor] = useState<any>(undefined)
-  const [loading, setLoading] = useState<boolean>(false)
-  const [error, setError] = useState<Error>(null)
+  function getKey(
+    page: number,
+    previousPageData: PaginationResponse<Item> | null,
+  ) {
+    // first page, we don't have `previousPageData`
+    if (page === 0)
+      return `/${route}?${qs.stringify({
+        ...query,
+        limit: LIMIT,
+      })}`
+
+    // reached the end
+    if (previousPageData.items?.length < LIMIT) return null
+
+    return `/${route}?${qs.stringify({
+      ...query,
+      limit: LIMIT,
+      cursor: previousPageData.cursor,
+    })}`
+  }
 
-  async function loadMore() {
-    const startingRefreshId = refreshId.current
-    const isFirstPage = !nextCursor
-
-    function setStateIfCurrentRefresh(stateSetter, valueGetter: (arg) => any) {
-      // If the refreshId has changed since the beginning of this function,
-      // it means refresh() was called while we were loading more results.
-      // Don't change the state in that case - the latest refresh will take care of that.
-      stateSetter((value) =>
-        startingRefreshId === refreshId.current ? valueGetter(value) : value,
-      )
-    }
+  const [loadingMore, setIsLoadingMore] = useState(false)
 
-    setStateIfCurrentRefresh(setError, () => null)
-    setStateIfCurrentRefresh(setLoading, () => true)
+  const { data, size, setSize, isLoading, error, mutate, isValidating } =
+    useSWRInfinite<PaginationResponse<Item>>(getKey, (url) =>
+      integrationApp.get(url),
+    )
 
-    const queryParams = {
-      ...initialQuery,
-    }
+  const items = data ? data.map((page) => page.items).flat() : []
 
-    if (nextCursor) queryParams.cursor = nextCursor
+  const loading = isLoading
+  const refreshing = isValidating
 
-    try {
-      const data = await accessorGenerator(integrationApp).find(queryParams)
+  async function loadMore() {
+    const hasMoreToLoad = data[size - 1]?.items?.length === LIMIT
 
-      setStateIfCurrentRefresh(setNextCursor, () => data.cursor)
-      setStateIfCurrentRefresh(setItems, (items) =>
-        isFirstPage ? data.items : [...items, ...data.items],
-      )
-    } catch (e) {
-      setStateIfCurrentRefresh(setError, () => e)
-    } finally {
-      setStateIfCurrentRefresh(setLoading, () => false)
+    if (hasMoreToLoad) {
+      setIsLoadingMore(true)
+      await setSize(size + 1)
+      setIsLoadingMore(false)
     }
   }
 
-  // refresh on initialQuery change
-  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,
 

package/src/hooks/useIntegrationAppSWR.tsx

@@ -0,0 +1,13 @@
+import useSWR from 'swr'
+import { useIntegrationApp } from '../contexts/integration-app-context'
+
+export function useIntegrationAppSWR(path: string, options?: any) {
+  const client = useIntegrationApp()
+
+  const fetcher = async () => {
+    const response = await client.get(path, options)
+    return response
+  }
+
+  return useSWR(client ? path : undefined, fetcher, options)
+}

package/src/index.tsx

@@ -1,32 +1,31 @@
-export {
-  useIntegrationApp,
-  IntegrationAppProvider,
-} from './contexts/integration-app-context.js'
+export * from './contexts/index.js'
+
+export { useIntegrationAppSWR } from './hooks/useIntegrationAppSWR.js'
 
-export { useConnectorSpec } from './integrations/useConnectionSpec.js'
-export { useIntegration } from './integrations/useIntegration.js'
-export { useIntegrations } from './integrations/useIntegrations.js'
 export { useConnection } from './integrations/useConnection.js'
 export { useConnections } from './integrations/useConnections.js'
+export { useConnectorSpec } from './integrations/useConnectorSpec.js'
+export { useIntegration } from './integrations/useIntegration.js'
+export { useIntegrations } from './integrations/useIntegrations.js'
 
 export { useFieldMapping } from './field-mappings/useFieldMapping.js'
-export { useFieldMappings } from './field-mappings/useFieldMappings.js'
-
 export { useFieldMappingInstance } from './field-mappings/useFieldMappingInstance.js'
 export { useFieldMappingInstances } from './field-mappings/useFieldMappingInstances.js'
+export { useFieldMappings } from './field-mappings/useFieldMappings.js'
 
 export { useDataSource } from './data-sources/useDataSource.js'
-export { useDataSources } from './data-sources/useDataSources.js'
-export { useDataSourceInstance } from './data-sources/useDataSourceInstance.js'
-export { useDataSourceInstanceCollection as useDataSourceCollection } from './data-sources/useDataSourceInstanceCollection.js'
-export { useDataSourceInstanceLocations as useDataSourceLocations } from './data-sources/useDataSourceInstanceLocations.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'
 
-export { useAppEvents } from './app-events/useAppEvents.js'
-export { useAppEventType } from './app-events/useAppEventType.js'
-export { useAppEventTypes } from './app-events/useAppEventTypes.js'
 export { useAppEventSubscription } from './app-events/useAppEventSubscription.js'
 export { useAppEventSubscriptions } from './app-events/useAppEventSubscriptions.js'
+export { useAppEventType } from './app-events/useAppEventType.js'
+export { useAppEventTypes } from './app-events/useAppEventTypes.js'
+export { useAppEvents } from './app-events/useAppEvents.js'
 
 export { useFlow } from './flows/useFlow.js'
 export { useFlows } from './flows/useFlows.js'
@@ -37,4 +36,18 @@ export { useFlowInstances } from './flows/useFlowInstances.js'
 export { useFlowRun } from './flows/useFlowRun.js'
 export { useFlowRuns } from './flows/useFlowRuns.js'
 
+export { useDataLinkTable } from './data-links/useDataLinkTable.js'
+export { useDataLinkTableInstance } from './data-links/useDataLinkTableInstance.js'
+export { useDataLinkTableInstances } from './data-links/useDataLinkTableInstances.js'
+export { useDataLinkTables } from './data-links/useDataLinkTables.js'
+
+export { useAction } from './actions/useAction.js'
+export { useActionInstance } from './actions/useActionInstance.js'
+export { useActionInstances } from './actions/useActionInstances.js'
+export { useActions } from './actions/useActions.js'
+
+export { useScreen } from './screens/useScreen.js'
+
+export { useDataCollectionSpec } from './data-collections/useDataCollectionSpec.js'
+
 export { DataForm } from '@integration-app/sdk'

package/src/integrations/useConnection.ts

@@ -1,12 +1,21 @@
-import { Connection, ConnectionAccessor } from '@integration-app/sdk'
+import {
+  Connection,
+  ConnectionAccessor,
+  CreateConnectionRequest,
+  UpdateConnectionRequest,
+} from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
 export function useConnection(id: string) {
-  const { data: connection, ...rest } = useElement<
+  const { item: connection, ...rest } = useElement<
     Connection,
-    string,
+    UpdateConnectionRequest,
+    CreateConnectionRequest,
     ConnectionAccessor
-  >(id, (integrationApp) => integrationApp.connection.bind(integrationApp))
+  >(id, (integrationApp) => integrationApp.connection(id))
 
-  return { connection, ...rest }
+  return {
+    connection,
+    ...rest,
+  }
 }

package/src/integrations/useConnections.ts

@@ -2,12 +2,11 @@ import { Connection, FindConnectionsQuery } from '@integration-app/sdk'
 import { useElements } from '../hooks/useElements'
 
 export function useConnections(query?: FindConnectionsQuery) {
-  const { ...rest } = useElements<Connection, FindConnectionsQuery>(
-    query,
-    (integrationApp) => integrationApp.connections,
-  )
+  const { ...rest } = useElements<Connection>('connections', query)
 
   return {
+    connections: rest.items,
+
     ...rest,
   }
 }

package/src/integrations/useConnectorSpec.ts

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

package/src/integrations/useIntegration.ts

@@ -1,14 +1,18 @@
-import { Integration, IntegrationAccessor } from '@integration-app/sdk'
+import {
+  CreateIntegrationRequest,
+  Integration,
+  IntegrationAccessor,
+  UpdateIntegrationRequest,
+} from '@integration-app/sdk'
 import { useElement } from '../hooks/useElement'
 
-export function useIntegration(idOrKey: string) {
-  const { data: integration, ...rest } = useElement<
+export function useIntegration(id: string) {
+  const { item: integration, ...rest } = useElement<
     Integration,
-    string,
+    UpdateIntegrationRequest,
+    CreateIntegrationRequest,
     IntegrationAccessor
-  >(idOrKey, (integrationApp) =>
-    integrationApp.integration.bind(integrationApp),
-  )
+  >(id, (integrationApp) => integrationApp.integration(id))
 
   return { integration, ...rest }
 }

package/src/integrations/useIntegrations.ts

@@ -2,12 +2,11 @@ import { FindIntegrationsQuery, Integration } from '@integration-app/sdk'
 import { useElements } from '../hooks/useElements'
 
 export function useIntegrations(query?: FindIntegrationsQuery) {
-  const { ...rest } = useElements<Integration, FindIntegrationsQuery>(
-    query,
-    (integrationApp) => integrationApp.integrations,
-  )
+  const { ...rest } = useElements<Integration>('integrations', query)
 
   return {
+    integrations: rest.items,
+
     ...rest,
   }
 }

package/src/screens/useScreen.ts

@@ -0,0 +1,19 @@
+import {
+  CreateScreenRequest,
+  Screen,
+  ScreenAccessor,
+  ScreenSelector,
+  UpdateScreenRequest,
+} from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useScreen(selector: ScreenSelector | string) {
+  const { item: screen, ...rest } = useElement<
+    Screen,
+    UpdateScreenRequest,
+    CreateScreenRequest,
+    ScreenAccessor
+  >(selector, (integrationApp) => integrationApp.screen(selector))
+
+  return { screen, ...rest }
+}