@based/react 0.6.1 → 0.7.2

package/src/clients.ts

@@ -0,0 +1,160 @@
+import React, {
+  createContext,
+  FunctionComponent,
+  ReactNode,
+  useContext,
+  useEffect,
+  useReducer,
+} from 'react'
+
+import based, { Based, BasedOpts } from '@based/client'
+
+import { genOptsId } from './genOptsId'
+
+export type CreateClient = (
+  selector: string | (BasedOpts & { key?: string })
+) => Based
+
+const newClientListeners: Set<() => void> = new Set()
+
+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) => {},
+})
+
+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)
+}
+
+function forceUpdate(state: number) {
+  return state + 1
+}
+
+export const useClients = (): Based[] => {
+  const ctx = useBasedContext()
+  const [, update] = useReducer(forceUpdate, 0)
+
+  useEffect(() => {
+    let timer
+    const fn = () => {
+      timer = setTimeout(update, 0)
+    }
+    newClientListeners.add(fn)
+    return () => {
+      newClientListeners.delete(fn)
+      clearTimeout(timer)
+    }
+  }, [])
+
+  return Object.values(ctx.clients)
+}
+
+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
+}

package/src/genOptsId.ts

@@ -0,0 +1,13 @@
+import { BasedOpts } from '@based/client'
+
+export 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 || ''
+  }`
+}

package/src/gql.ts

@@ -0,0 +1,210 @@
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import {
+  addSubscriber,
+  removeSubscriber,
+  handleGraphqlVariables,
+  BasedGraphQL,
+  generateSubscriptionId,
+  BasedOpts,
+} from '@based/client'
+import { Loading, Data } from './types'
+import { resultReducer } from './reducer'
+import { useClient } from './clients'
+import { genOptsId } from './genOptsId'
+import { updateMeta } from './meta'
+import { hashObjectIgnoreKeyOrder } from '@saulx/hash'
+
+const schemaSubId = generateSubscriptionId({ $subscribe_schema: 'default' })
+
+// step one make 1 useEffect
+//  - and the nessecary if
+
+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, fns: {} })
+  const selector = clientSelector || 'default'
+  const client = useClient(selector)
+
+  if (query) {
+    const [configState, updateConfigState] = useState(0)
+
+    useEffect(() => {
+      const [, subscriberId] = addSubscriber(
+        client.client,
+        // FIXME dont want too many updates plz this has to become 1 use effect
+        { $subscribe_schema: 'default' },
+        (d, checksum) => {
+          if (!client.client.configuration) {
+            client.client.configuration = { dbs: [], schema: {}, functions: {} }
+          }
+          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: {
+        [key: string]: { name: string; payload: any; key: string }
+      } = {}
+      const queryObj: any = {}
+      for (const key in op.ops) {
+        if (op.ops[key].fnObserve) {
+          const { name, payload } = op.ops[key].fnObserve
+          fns[key] = { name: <string>name, payload, key }
+          continue
+        }
+        queryObj[key] = op.ops[key].get
+      }
+
+      const fnHash = useMemo(() => {
+        return hashObjectIgnoreKeyOrder(fns)
+      }, [fns])
+
+      const subId = useMemo(() => {
+        // fn?
+        return generateSubscriptionId(queryObj)
+      }, [queryObj])
+
+      const clientKey =
+        typeof selector === 'string' ? selector : genOptsId(selector)
+
+      if (client) {
+        const subKey = clientKey + subId
+
+        useEffect(() => {
+          const subs = []
+
+          for (const key in fns) {
+            subs.push(
+              addSubscriber(
+                client.client,
+                fns[key].payload,
+                (d, checksum) => {
+                  updateMeta(subKey, false, false)
+                  if (r.current.fns[key] !== checksum) {
+                    r.current.fns[key] = checksum
+                    dispatch({
+                      merge: { [key]: d },
+                      checksum: hashObjectIgnoreKeyOrder(r.current),
+                    })
+                  }
+                },
+                (err) => {
+                  if (err) {
+                    console.error(err)
+                    dispatch({ error: err, loading: false })
+                  }
+                },
+                (err) => {
+                  console.error(err)
+                  updateMeta(subKey, false, err)
+                  dispatch({ error: err })
+                },
+                undefined,
+                fns[key].name
+              )
+            )
+          }
+
+          return () => {
+            for (const [subId, subscriberId] of subs) {
+              removeSubscriber(client.client, subId, subscriberId)
+            }
+          }
+        }, [fnHash])
+
+        useEffect(() => {
+          if (!configState) {
+            return
+          }
+          updateMeta(subKey, true, false)
+          const [, subscriberId] = addSubscriber(
+            client.client,
+            queryObj,
+            (d, checksum) => {
+              updateMeta(subKey, false, false)
+              if (r.current.checksum !== checksum) {
+                r.current.checksum = checksum
+                dispatch({
+                  merge: d,
+                  checksum: hashObjectIgnoreKeyOrder(r.current),
+                })
+              }
+            },
+            (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, [null])
+      useMemo(stubFn, [null])
+      useEffect(stubFn, [null])
+      useEffect(stubFn, [null, null, null])
+    }
+  } else {
+    useState(null)
+    useEffect(stubFn, [null])
+    useMemo(stubFn, [null])
+    useMemo(stubFn, [null])
+    useEffect(stubFn, [null])
+    useEffect(stubFn, [null, null, null])
+  }
+
+  return result
+}
+
+function stubFn() {}

package/src/index.ts

@@ -1,16 +1,6 @@
-import React, {
-  createContext,
-  FunctionComponent,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useReducer,
-  useState,
-} from 'react'
-import based, {
-  Based,
-  GenericObject,
+import { useEffect, useMemo, useReducer, useState } from 'react'
+
+import {
   Query,
   addSubscriber,
   removeSubscriber,
@@ -18,200 +8,19 @@ import based, {
   BasedOpts,
 } from '@based/client'
 
-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: {},
-  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)
-}
-
-function forceUpdate(state: number) {
-  return state + 1
-}
-
-export const useClients = (): Based[] => {
-  const ctx = useBasedContext()
-  const [, update] = useReducer(forceUpdate, 0)
-
-  useEffect(() => {
-    let timer
-    const fn = () => {
-      timer = setTimeout(update, 0)
-    }
-    newClientListeners.add(fn)
-    return () => {
-      newClientListeners.delete(fn)
-      clearTimeout(timer)
-    }
-  }, [])
-
-  return Object.values(ctx.clients)
-}
-
-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]
+import { resultReducer } from './reducer'
 
-  if (!client && basedCtx.createClient) {
-    client = basedCtx.createClient(selector)
+import { Loading, Data } from './types'
 
-    if (client) {
-      basedCtx.clients[key] = client
-      newClientListeners.forEach((fn) => fn())
-    }
-  }
+import { genOptsId } from './genOptsId'
 
-  return client
-}
+import { useClient } from './clients'
 
-type Data = GenericObject
+import { updateMeta } from './meta'
 
-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 })
@@ -219,7 +28,7 @@ export function useAuth(
   const client = useClient(clientSelector)
   const [token, setToken] = useState<false | string>(false)
   useEffect(() => {
-    const t = (v) => setToken(client.getToken())
+    const t = () => setToken(client.getToken())
     client.on('auth', t)
     return () => {
       client.removeListener('auth', t)
@@ -373,67 +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))
-  }
-}
-
 function stubFn() {}