@integration-app/react 0.1.25 → 0.2.0

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

@@ -0,0 +1,46 @@
+import { IntegrationAppClient } from '@integration-app/sdk'
+import { createContext, ReactNode, useContext, useMemo } from 'react'
+
+const IntegrationAppContext = createContext<IntegrationAppClient>(null)
+
+IntegrationAppContext.displayName = 'IntegrationAppClientContext'
+
+/**
+ * @interface
+ */
+interface IntegrationAppProviderProps {
+  token: string
+  apiUri?: string
+  uiUri?: string
+  children: ReactNode
+}
+
+/**
+ * Provides an IntegrationAppClient instance to the React tree.
+ */
+export const IntegrationAppProvider = ({
+  token,
+  apiUri = null,
+  uiUri = null,
+  children,
+}: IntegrationAppProviderProps) => {
+  const client = useMemo(
+    () =>
+      new IntegrationAppClient({
+        token,
+        apiUri,
+        uiUri,
+      }),
+    [token, apiUri, uiUri],
+  )
+
+  return (
+    <IntegrationAppContext.Provider value={client}>
+      {children}
+    </IntegrationAppContext.Provider>
+  )
+}
+
+export function useIntegrationApp(): IntegrationAppClient {
+  return useContext(IntegrationAppContext)
+}

package/src/data-form/index.tsx

@@ -0,0 +1,3 @@
+export default function DataForm() {
+  return <p>Data Form</p>
+}

package/src/data-sources/useDataSource.ts

@@ -0,0 +1,12 @@
+import { DataSource, DataSourceAccessor } from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useDataSource(idOrKey: string) {
+  const { data: dataSource, ...rest } = useElement<
+    DataSource,
+    string,
+    DataSourceAccessor
+  >(idOrKey, (integrationApp) => integrationApp.dataSource.bind(integrationApp))
+
+  return { dataSource, ...rest }
+}

package/src/data-sources/useDataSourceEvents.ts

@@ -0,0 +1,16 @@
+import {
+  DataSourceEvent,
+  FindDataSourceEventsQuery,
+} from '@integration-app/sdk'
+import { useElements } from '../hooks/useElements'
+
+export function useDataSourceEvents(query?: FindDataSourceEventsQuery) {
+  const { ...rest } = useElements<DataSourceEvent, FindDataSourceEventsQuery>(
+    query,
+    (integrationApp) => integrationApp.dataSourceEvents,
+  )
+
+  return {
+    ...rest,
+  }
+}

package/src/data-sources/useDataSourceInstance.ts

@@ -0,0 +1,48 @@
+import {
+  DataCollectionCreateRequest,
+  DataCollectionFindRequest,
+  DataCollectionUpdateRequest,
+  DataSourceInstanceAccessor,
+  DataSourceInstanceSelector,
+  OpenDataSourceConfigurationOptions,
+  DataSourceInstance,
+} from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useDataSourceInstance(
+  selector: DataSourceInstanceSelector | { id: string },
+) {
+  const { data: dataSourceInstance, ...rest } = useElement<
+    DataSourceInstance,
+    DataSourceInstanceSelector,
+    DataSourceInstanceAccessor
+  >(selector, (integrationApp) =>
+    integrationApp.dataSourceInstance.bind(integrationApp),
+  )
+
+  const accessor = rest.accessor
+
+  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?: OpenDataSourceConfigurationOptions) =>
+      accessor.openConfiguration(options),
+    findRecords: (request?: DataCollectionFindRequest) =>
+      accessor.findRecords(request),
+    findRecordById: (id: string) => accessor.findRecordById(id),
+    createRecord: (request?: DataCollectionCreateRequest) =>
+      accessor.createRecord(request),
+    updateRecord: (request?: DataCollectionUpdateRequest) =>
+      accessor.updateRecord(request),
+    deleteRecord: (id?: string) => accessor.deleteRecord(id),
+    unifiedFieldsToNative: (unifiedFields: any) =>
+      accessor.unifiedFieldsToNative(unifiedFields),
+    ...rest,
+  }
+}

package/src/data-sources/useDataSourceInstanceCollection.ts

@@ -0,0 +1,19 @@
+import { DataCollectionSpec, DataSourceInstance } from '@integration-app/sdk'
+import { useIntegrationApp } from '../contexts/integration-app-context'
+import useGetter from '../hooks/useGetter'
+
+export function useDataSourceInstanceCollection(
+  dataSourceInstance: DataSourceInstance,
+) {
+  const integrationApp = useIntegrationApp()
+  const { data: collection, ...rest } = useGetter<DataCollectionSpec>(
+    dataSourceInstance?.id,
+    () =>
+      integrationApp.dataSourceInstance(dataSourceInstance.id).getCollection(),
+  )
+
+  return {
+    collection,
+    ...rest,
+  }
+}

package/src/data-sources/useDataSourceInstanceLocations.ts

@@ -0,0 +1,30 @@
+import {
+  DataDirectoryListResponse,
+  DataSourceInstance,
+} from '@integration-app/sdk'
+import { useIntegrationApp } from '../contexts/integration-app-context'
+import useGetter from '../hooks/useGetter'
+
+export function useDataSourceInstanceLocations(
+  dataSourceInstance: DataSourceInstance,
+  args?: {
+    path?: string
+    cursor?: string
+  },
+) {
+  const integrationApp = useIntegrationApp()
+  const { data, ...rest } = useGetter<DataDirectoryListResponse>(
+    dataSourceInstance
+      ? `${dataSourceInstance.id}/${JSON.stringify(args)}`
+      : undefined,
+    () =>
+      integrationApp
+        .dataSourceInstance(dataSourceInstance.id)
+        .getLocations(args),
+  )
+
+  return {
+    locations: data?.locations ?? [],
+    ...rest,
+  }
+}

package/src/data-sources/useDataSources.ts

@@ -0,0 +1,13 @@
+import { DataSource, FindDataSourcesQuery } from '@integration-app/sdk'
+import { useElements } from '../hooks/useElements'
+
+export function useDataSources(query?: FindDataSourcesQuery) {
+  const { ...rest } = useElements<DataSource, FindDataSourcesQuery>(
+    query,
+    (integrationApp) => integrationApp.dataSources,
+  )
+
+  return {
+    ...rest,
+  }
+}

package/src/field-mappings/useFieldMapping.ts

@@ -0,0 +1,14 @@
+import { FieldMapping, FieldMappingAccessor } from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useFieldMapping(idOrKey: string) {
+  const { data: fieldMapping, ...rest } = useElement<
+    FieldMapping,
+    string,
+    FieldMappingAccessor
+  >(idOrKey, (integrationApp) =>
+    integrationApp.fieldMapping.bind(integrationApp),
+  )
+
+  return { fieldMapping, ...rest }
+}

package/src/field-mappings/useFieldMappingInstance.ts

@@ -0,0 +1,31 @@
+import {
+  FieldMappingInstanceAccessor,
+  FieldMappingInstanceSelector,
+  IFieldMappingInstance,
+  OpenFieldMappingInstanceConfigurationOptions,
+} from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useFieldMappingInstance(
+  selector: FieldMappingInstanceSelector | { id: string },
+) {
+  const { data: fieldMappingInstance, ...rest } = useElement<
+    IFieldMappingInstance,
+    FieldMappingInstanceSelector,
+    FieldMappingInstanceAccessor
+  >(selector, (integrationApp) =>
+    integrationApp.fieldMappingInstance.bind(integrationApp),
+  )
+
+  const accessor = rest.accessor
+
+  return {
+    fieldMappingInstance,
+    setup: () => accessor.setup(),
+    reset: () => accessor.reset(),
+    openConfiguration: (
+      options?: OpenFieldMappingInstanceConfigurationOptions,
+    ) => accessor.openConfiguration(options),
+    ...rest,
+  }
+}

package/src/field-mappings/useFieldMappingInstances.ts

@@ -0,0 +1,18 @@
+import {
+  FindFieldMappingInstancesQuery,
+  IFieldMappingInstance,
+} from '@integration-app/sdk'
+import { useElements } from '../hooks/useElements'
+
+export function useFieldMappingInstances(
+  query?: FindFieldMappingInstancesQuery,
+) {
+  const { ...rest } = useElements<
+    IFieldMappingInstance,
+    FindFieldMappingInstancesQuery
+  >(query, (integrationApp) => integrationApp.fieldMappingInstances)
+
+  return {
+    ...rest,
+  }
+}

package/src/field-mappings/useFieldMappings.ts

@@ -0,0 +1,13 @@
+import { FieldMapping, FindFieldMappingsQuery } from '@integration-app/sdk'
+import { useElements } from '../hooks/useElements'
+
+export function useFieldMappings(query?: FindFieldMappingsQuery) {
+  const { ...rest } = useElements<FieldMapping, FindFieldMappingsQuery>(
+    query,
+    (integrationApp) => integrationApp.fieldMappings,
+  )
+
+  return {
+    ...rest,
+  }
+}

package/src/flows/useFlow.ts

@@ -0,0 +1,11 @@
+import { Flow, FlowAccessor } from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useFlow(idOrKey: string) {
+  const { data: flow, ...rest } = useElement<Flow, string, FlowAccessor>(
+    idOrKey,
+    (integrationApp) => integrationApp.flow.bind(integrationApp),
+  )
+
+  return { flow, ...rest }
+}

package/src/flows/useFlowInstance.ts

@@ -0,0 +1,16 @@
+import {
+  FlowInstance,
+  FlowInstanceAccessor,
+  FlowInstanceSelector,
+} from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useFlowInstance(props: FlowInstanceSelector | { id: string }) {
+  const { data: flowInstance, ...rest } = useElement<
+    FlowInstance,
+    FlowInstanceSelector,
+    FlowInstanceAccessor
+  >(props, (integrationApp) => integrationApp.flowInstance.bind(integrationApp))
+
+  return { flowInstance, ...rest }
+}

package/src/flows/useFlowInstances.ts

@@ -0,0 +1,13 @@
+import { FindFlowInstancesQuery, FlowInstance } from '@integration-app/sdk'
+import { useElements } from '../hooks/useElements'
+
+export function useFlowInstances(query?: FindFlowInstancesQuery) {
+  const { ...rest } = useElements<FlowInstance, FindFlowInstancesQuery>(
+    query,
+    (integrationApp) => integrationApp.flowInstances,
+  )
+
+  return {
+    ...rest,
+  }
+}

package/src/flows/useFlowRun.ts

@@ -0,0 +1,12 @@
+import { FlowRun, FlowRunAccessor } from '@integration-app/sdk'
+import { useElement } from '../hooks/useElement'
+
+export function useFlowRun(id: string) {
+  const { data: flowRun, ...rest } = useElement<
+    FlowRun,
+    string,
+    FlowRunAccessor
+  >(id, (integrationApp) => integrationApp.flowRun.bind(integrationApp))
+
+  return { flowRun, ...rest }
+}

package/src/flows/useFlowRuns.ts

@@ -0,0 +1,11 @@
+import { FindFlowRunsRequest, FlowRun } from '@integration-app/sdk'
+import { useElements } from '../hooks/useElements'
+
+export function useFlowRuns(query?: FindFlowRunsRequest) {
+  const { ...rest } = useElements<FlowRun, FindFlowRunsRequest>(
+    query,
+    (integrationApp) => integrationApp.flowRuns,
+  )
+
+  return { ...rest }
+}

package/src/flows/useFlows.ts

@@ -0,0 +1,11 @@
+import { useElements } from '../hooks/useElements'
+import { FindFlowsRequest, Flow } from '@integration-app/sdk'
+
+export function useFlows(query?: FindFlowsRequest) {
+  const { ...rest } = useElements<Flow, FindFlowsRequest>(
+    query,
+    (integrationApp) => integrationApp.flows,
+  )
+
+  return { ...rest }
+}

package/src/hooks/useElement.tsx

@@ -0,0 +1,169 @@
+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
+}
+
+type ElementAccessorGetter<SelectorInterface, ElementAccessor> = (
+  params: SelectorInterface | string,
+) => ElementAccessor
+
+export type ElementAccessorGenerator<SelectorInterface, ElementAccessor> = (
+  integrationApp: IntegrationAppClient,
+) => ElementAccessorGetter<SelectorInterface, ElementAccessor>
+
+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> }
+
+export function useElement<
+  ElementInterface,
+  SelectorInterface,
+  ElementAccessor extends BaseElementAccessor<
+    ElementInterface,
+    CreateRequest,
+    UpdateRequest
+  >,
+  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
+> {
+  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>?',
+        ),
+      )
+    }
+  }, [integrationApp, JSON.stringify(props), refreshCounter])
+
+  async function create(createData: CreateRequest) {
+    if (data !== undefined) {
+      setData({
+        ...data,
+        ...createData,
+      })
+    }
+    return accessorGenerator(integrationApp)(selector).create(createData)
+  }
+
+  function refresh() {
+    setRefreshCounter(refreshCounter + 1)
+  }
+
+  async function patch(patch: UpdateRequest) {
+    if (typeof patch === 'object') {
+      setData({
+        ...data,
+        ...(patch ?? {}),
+      })
+      return accessorGenerator(integrationApp)(selector).patch(patch)
+    } else {
+      return data
+    }
+  }
+
+  async function put(putData: CreateRequest) {
+    if (data !== undefined) {
+      setData({
+        ...data,
+        ...putData,
+      })
+    }
+    return accessorGenerator(integrationApp)(selector).put(putData)
+  }
+
+  async function archive() {
+    setData(null)
+    return accessorGenerator(integrationApp)(selector).archive()
+  }
+
+  return {
+    data,
+    create,
+    patch,
+    put,
+    archive,
+    refresh,
+    loading,
+    error,
+    accessor,
+  }
+}

package/src/hooks/useElements.tsx

@@ -0,0 +1,101 @@
+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>>
+}
+
+type InstanceAccessorGenerator<Element, FindQuery> = (
+  integrationApp: IntegrationAppClient,
+) => ElementsAccessor<Element, FindQuery>
+
+export function useElements<Element, FindQuery extends PaginationQuery>(
+  initialQuery: FindQuery,
+  accessorGenerator: InstanceAccessorGenerator<Element, FindQuery>,
+): ElementsHookResult<Element> {
+  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)
+
+  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,
+      )
+    }
+
+    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)
+    }
+  }
+
+  // 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()
+  }
+
+  return {
+    items,
+
+    refresh,
+    loadMore,
+
+    loading,
+
+    error,
+  }
+}

package/src/hooks/useGetter.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { useIntegrationApp } from '../contexts/integration-app-context'
+
+export default function useGetter<Type = any>(
+  key: string,
+  getter: () => Promise<Type>,
+) {
+  const integrationApp = useIntegrationApp()
+  const [data, setData] = useState<Type>()
+  const [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error>(null)
+  const [refreshCounter, setRefreshCounter] = useState<number>(0)
+
+  function refresh() {
+    setRefreshCounter(refreshCounter + 1)
+  }
+
+  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 }
+}