@based/react 0.7.0 → 0.7.3

package/src/index.ts

@@ -1,223 +1,26 @@
-import React, {
-  createContext,
-  FunctionComponent,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-} from 'react'
-import based, {
-  Based,
-  GenericObject,
+import { useEffect, useMemo, useReducer, useState } from 'react'
+
+import {
   Query,
   addSubscriber,
   removeSubscriber,
-  handleGraphqlVariables,
-  BasedGraphQL,
   generateSubscriptionId,
   BasedOpts,
 } from '@based/client'
 
-const schemaSubId = generateSubscriptionId({ $subscribe_schema: 'default' })
-
-const genOptsId = (opts: BasedOpts & { key?: string }): string => {
-  if (!opts) {
-    return
-  }
-
-  if (opts.key) {
-    return opts.key
-  }
-
-  return `${opts.env}_${opts.project}_${opts.org}_${opts.cluster || ''}_${
-    opts.name || ''
-  }`
-}
-
-export type CreateClient = (
-  selector: string | (BasedOpts & { key?: string })
-) => Based
-
-interface BasedContextType {
-  clients: { [key: string]: Based }
-  createClient?: CreateClient
-  removeClient: (
-    selector: string | (BasedOpts & { key?: string }) | Based
-  ) => void
-}
-
-export const BasedContext = createContext<BasedContextType>({
-  clients: {},
-  // eslint-disable-next-line
-  removeClient: (...args: any) => {},
-})
-
-const errors = {}
-const errorListeners = new Set()
-const loadings = new Set()
-const loadingListeners = new Set()
-const newClientListeners: Set<() => void> = new Set()
-
-let isLoading = false
-let lastError = ''
-let errorCnt = 0
-let errorKey = errorCnt + lastError
-
-export const defaultCreateClient: CreateClient = (selector) => {
-  if (typeof selector === 'object') {
-    if (
-      process.env.CLUSTER &&
-      process.env.CLUSTER.startsWith('local') &&
-      !selector.cluster
-    ) {
-      selector.cluster = process.env.CLUSTER
-    }
-    return based(selector)
-  } else {
-    // default
-    console.error('Cannot create client from ' + selector)
-  }
-}
-
-export const Provider: FunctionComponent<{
-  client?: Based
-  clients?: { [key: string]: Based }
-  children: ReactNode
-  createClient?: CreateClient
-}> = ({ client, children, clients, createClient }) => {
-  if (!clients && client) {
-    clients = {
-      default: client,
-    }
-  } else if (clients && client) {
-    clients.default = client
-  }
-
-  const ctx = React.createElement(
-    BasedContext.Provider,
-    {
-      value: {
-        clients,
-        createClient: createClient || defaultCreateClient,
-        removeClient: (selector) => {
-          if (selector instanceof Based) {
-            for (const cl in clients) {
-              if (clients[cl] === selector) {
-                selector = cl
-                break
-              }
-            }
-            if (typeof selector !== 'string') {
-              console.error('Cannot find client to remove from ctx', selector)
-              return
-            }
-          } else if (typeof selector !== 'string') {
-            selector = genOptsId(selector)
-          }
-          // @ts-ignore
-          if (clients[selector]) {
-            // @ts-ignore
-            clients[selector].disconnect()
-            // @ts-ignore
-            delete clients[selector]
-            newClientListeners.forEach((fn) => fn())
-          }
-        },
-      },
-    },
-    children
-  )
-
-  return ctx
-}
-
-export const useBasedContext = () => {
-  return useContext(BasedContext)
-}
+import { resultReducer } from './reducer'
 
-function forceUpdate(state: number) {
-  return state + 1
-}
+import { Loading, Data } from './types'
 
-export const useClients = (): Based[] => {
-  const ctx = useBasedContext()
-  const [, update] = useReducer(forceUpdate, 0)
+import { genOptsId } from './genOptsId'
 
-  useEffect(() => {
-    let timer
-    const fn = () => {
-      timer = setTimeout(update, 0)
-    }
-    newClientListeners.add(fn)
-    return () => {
-      newClientListeners.delete(fn)
-      clearTimeout(timer)
-    }
-  }, [])
+import { useClient } from './clients'
 
-  return Object.values(ctx.clients)
-}
+import { updateMeta } from './meta'
 
-export const useClient = (
-  selector: string | (BasedOpts & { key?: string }) = 'default'
-) => {
-  const basedCtx = useContext(BasedContext)
-
-  if (typeof selector === 'object') {
-    if (!(selector.env && selector.project && selector.org)) {
-      return
-    }
-  }
-
-  let key: string
-
-  if (typeof selector === 'string') {
-    key = selector
-  } else {
-    key = selector.key || genOptsId(selector)
-  }
-
-  let client: Based = basedCtx.clients[key]
-
-  if (!client && basedCtx.createClient) {
-    client = basedCtx.createClient(selector)
-
-    if (client) {
-      basedCtx.clients[key] = client
-      newClientListeners.forEach((fn) => fn())
-    }
-  }
-
-  return client
-}
-
-type Data = GenericObject
-
-type Loading = boolean
-
-function resultReducer(
-  state: { data: Data; error?: Error; loading: Loading; checksum: number },
-  action: { data?: Data; error?: Error; loading?: Loading; checksum?: number }
-) {
-  if (action.error) {
-    state.error = action.error
-  }
-  if (action.data) {
-    state.checksum = action.checksum || 0
-    state.data = action.data
-    state.loading = false
-    if (state.error) {
-      delete state.error
-    }
-  }
-  if (action.loading) {
-    state.loading = action.loading
-  }
-  return { ...state }
-}
+export * from './meta'
+export * from './clients'
+export * from './gql'
 
 export function useAuth(
   clientSelector?: string | (BasedOpts & { key?: string })
@@ -379,222 +182,4 @@ export function useData(
   return result
 }
 
-export function useLoading() {
-  const [, setLoading] = useState(isLoading)
-
-  loadingListeners.add(setLoading)
-
-  useEffect(() => {
-    return () => {
-      loadingListeners.delete(setLoading)
-    }
-  }, [])
-
-  return { loading: isLoading }
-}
-
-export function useError() {
-  const [, setError] = useState(errorKey)
-
-  errorListeners.add(setError)
-
-  useEffect(() => {
-    return () => {
-      errorListeners.delete(setError)
-    }
-  }, [])
-
-  return { error: errorCnt ? lastError : null, errors: Object.values(errors) }
-}
-
-function updateMeta(subKey, loading, error) {
-  if (error) {
-    lastError = error
-    if (subKey in errors) {
-      errors[subKey] = error
-    } else {
-      errors[subKey] = error
-      errorCnt++
-    }
-  } else {
-    if (subKey in errors) {
-      errorCnt--
-      delete errors[subKey]
-    }
-  }
-
-  const newErrorKey = errorCnt + lastError
-  if (newErrorKey !== errorKey) {
-    errorKey = newErrorKey
-    errorListeners.forEach((fn: Function) => fn(errorKey))
-  }
-
-  if (loading) {
-    loadings.add(subKey)
-  } else {
-    loadings.delete(subKey)
-  }
-
-  const newLoading = !!loadings.size
-  if (newLoading !== isLoading) {
-    isLoading = newLoading
-    loadingListeners.forEach((fn: Function) => fn(isLoading))
-  }
-}
-
-export function useQuery(
-  query?: string | BasedGraphQL,
-  variables: Record<string, any> = {},
-  clientSelector?: string | (BasedOpts & { key?: string })
-): {
-  data: Data
-  error?: Error
-  loading: Loading
-} {
-  const [result, dispatch] = useReducer(resultReducer, {
-    loading: true,
-    data: {},
-    checksum: 0,
-  })
-
-  const r = useRef({ checksum: 0, schemaChecksum: 0 })
-
-  if (query) {
-    const selector = clientSelector || 'default'
-
-    const client = useClient(selector)
-
-    const [configState, updateConfigState] = useState(0)
-
-    useEffect(() => {
-      const [, subscriberId] = addSubscriber(
-        client.client,
-        // FIXME
-        { $subscribe_schema: 'default' },
-        (d, checksum) => {
-          console.info('snurp', 'flx', checksum)
-          if (!client.client.configuration) {
-            client.client.configuration = { dbs: [], schema: {} }
-          }
-          client.client.configuration.schema.default = d
-          updateConfigState(checksum)
-        },
-        (err) => {
-          if (err) {
-            console.error(err)
-          }
-        },
-        (err) => {
-          console.error(err)
-        },
-        schemaSubId
-      )
-      return () => {
-        removeSubscriber(client.client, schemaSubId, subscriberId)
-      }
-      return () => {}
-    }, [])
-
-    if (configState) {
-      let op: BasedGraphQL
-      if (typeof query === 'string') {
-        op = client.gql(query)
-      } else {
-        op = query
-      }
-
-      op = handleGraphqlVariables(op, op, variables)
-
-      const fns: { name: string; payload: any }[] = []
-      const queryObj: any = {}
-      for (const key in op.ops) {
-        if (op.ops[key].fnObserve) {
-          const { name, payload } = op.ops[key].fnObserve
-          fns.push({ name: <string>name, payload })
-          continue
-        }
-        queryObj[key] = op.ops[key].get
-      }
-
-      // if (fns?.length) {
-      //   console.log('HELLO OBSERVABLE FUNCTIONS', JSON.stringify(fns, null, 2))
-
-      //   // TODO: create observables for these fns and combine with below
-      //   return new Observable(this.client, { $db: op.db, data: queryObj })
-      // }
-
-      // return new Observable(this.client, { $db: op.db, data: queryObj })
-      // }
-
-      // op
-
-      const subId = useMemo(() => {
-        // fn?
-        return generateSubscriptionId(queryObj)
-      }, [queryObj])
-
-      const clientKey =
-        typeof selector === 'string' ? selector : genOptsId(selector)
-
-      if (client) {
-        const subKey = clientKey + subId
-
-        useEffect(() => {
-          if (!configState) {
-            return
-          }
-          updateMeta(subKey, true, false)
-          // dispatch({ error: null, loading: true, data: {} })
-          const [, subscriberId] = addSubscriber(
-            client.client,
-            queryObj,
-            (d, checksum) => {
-              // updateMeta(subKey, false, false)
-
-              console.info(r.current.checksum)
-
-              if (r.current.checksum !== checksum) {
-                r.current.checksum = checksum
-                dispatch({ data: d, checksum })
-              }
-            },
-            (err) => {
-              if (err) {
-                console.error(err)
-                // updateMeta(subKey, false, err)
-                dispatch({ error: err, loading: false })
-              }
-            },
-            (err) => {
-              console.error(err)
-              // updateMeta(subKey, false, err)
-              dispatch({ error: err })
-            },
-            subId
-          )
-          return () => {
-            // updateMeta(subKey, false, false)
-            removeSubscriber(client.client, subId, subscriberId)
-          }
-        }, [subId, clientKey, configState])
-      } else {
-        useEffect(stubFn, [null, null])
-      }
-    } else {
-      useMemo(stubFn, [query])
-      useEffect(stubFn, [null, null, null])
-    }
-  } else {
-    useClient(clientSelector)
-    useState(null)
-    useEffect(stubFn, [null])
-
-    useMemo(stubFn, [query])
-
-    useEffect(stubFn, [null, null, null])
-  }
-
-  return result
-}
-
 function stubFn() {}

package/src/meta.ts

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+
+const errors = {}
+const errorListeners = new Set()
+const loadings = new Set()
+const loadingListeners = new Set()
+
+let isLoading = false
+let lastError = ''
+let errorCnt = 0
+let errorKey = errorCnt + lastError
+
+export function updateMeta(subKey, loading, error) {
+  if (error) {
+    lastError = error
+    if (subKey in errors) {
+      errors[subKey] = error
+    } else {
+      errors[subKey] = error
+      errorCnt++
+    }
+  } else {
+    if (subKey in errors) {
+      errorCnt--
+      delete errors[subKey]
+    }
+  }
+
+  const newErrorKey = errorCnt + lastError
+  if (newErrorKey !== errorKey) {
+    errorKey = newErrorKey
+    errorListeners.forEach((fn: Function) => fn(errorKey))
+  }
+
+  if (loading) {
+    loadings.add(subKey)
+  } else {
+    loadings.delete(subKey)
+  }
+
+  const newLoading = !!loadings.size
+  if (newLoading !== isLoading) {
+    isLoading = newLoading
+    loadingListeners.forEach((fn: Function) => fn(isLoading))
+  }
+}
+
+export function useLoading() {
+  const [, setLoading] = useState(isLoading)
+
+  loadingListeners.add(setLoading)
+
+  useEffect(() => {
+    return () => {
+      loadingListeners.delete(setLoading)
+    }
+  }, [])
+
+  return { loading: isLoading }
+}
+
+export function useError() {
+  const [, setError] = useState(errorKey)
+
+  errorListeners.add(setError)
+
+  useEffect(() => {
+    return () => {
+      errorListeners.delete(setError)
+    }
+  }, [])
+
+  return { error: errorCnt ? lastError : null, errors: Object.values(errors) }
+}

package/src/reducer.ts

@@ -0,0 +1,42 @@
+import { Data, Loading } from './types'
+
+export function resultReducer(
+  state: { data: Data; error?: Error; loading: Loading; checksum: number },
+  action: {
+    merge?: Data
+    data?: Data
+    error?: Error
+    loading?: Loading
+    checksum?: number
+  }
+) {
+  if (action.error) {
+    state.error = action.error
+  }
+  if (action.data) {
+    state.checksum = action.checksum || 0
+    state.data = action.data
+    state.loading = false
+    if (state.error) {
+      delete state.error
+    }
+  }
+
+  if (action.merge) {
+    state.checksum = action.checksum || 0
+    if (!state.data) {
+      state.data = action.merge
+    } else {
+      Object.assign(state.data, action.merge)
+    }
+    state.loading = false
+    if (state.error) {
+      delete state.error
+    }
+  }
+
+  if (action.loading) {
+    state.loading = action.loading
+  }
+  return { ...state }
+}

package/src/types.ts

@@ -0,0 +1,5 @@
+import { GenericObject } from '@based/client'
+
+export type Data = GenericObject
+
+export type Loading = boolean