@based/react 4.3.1 → 4.5.0

package/src/Ctx.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+import { BasedClient } from '@based/client'
+
+export const Ctx = createContext<BasedClient>(null)

package/src/Provider.ts

@@ -0,0 +1,10 @@
+import { createElement, FC, ReactNode } from 'react'
+import { BasedClient } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const Provider: FC<{
+  client: BasedClient
+  children: ReactNode
+}> = ({ client, children }) => {
+  return createElement(Ctx.Provider, { value: client }, children)
+}

package/src/index.ts

@@ -1,161 +1,8 @@
-import {
-  useContext,
-  createContext,
-  createElement,
-  useState,
-  useEffect,
-  FC,
-  ReactNode,
-} from 'react'
-import { BasedClient, AuthState } from '@based/client'
-import { BasedError } from '@based/client'
-
-const Ctx = createContext<BasedClient>(null)
-
-export const Provider: FC<{
-  client: BasedClient
-  children: ReactNode
-}> = ({ client, children }) => {
-  return createElement(Ctx.Provider, { value: client }, children)
-}
-
-export const useAuthState = (): AuthState => {
-  const client: BasedClient = useContext(Ctx)
-  const [state, setState] = useState<AuthState>(client?.authState || {})
-
-  useEffect(() => {
-    if (client) {
-      setState(client.authState)
-      const listener = (authState) => {
-        setState(authState)
-      }
-      client.on('authstate-change', listener)
-      return () => client.off('authstate-change', listener)
-    }
-  }, [client])
-
-  return state
-}
-
-const useLoadingListeners: Set<Function> = new Set()
-const hooksLoading: Set<number> = new Set()
-
-export const useLoading = () => {
-  const [isLoading, setLoading] = useState(hooksLoading.size > 0)
-  useEffect(() => {
-    useLoadingListeners.add(setLoading)
-    return () => {
-      useLoadingListeners.delete(setLoading)
-    }
-  }, [])
-  return isLoading
-}
-
-export const useConnected = () => {
-  const client: BasedClient = useContext(Ctx)
-  const [connected, setConnected] = useState(client.connected)
-
-  useEffect(() => {
-    if (client) {
-      setConnected(client.connected)
-      const listener = () => {
-        setConnected(client.connected)
-      }
-      client.on('disconnect', listener)
-      client.on('reconnect', listener)
-      client.on('connect', listener)
-      return () => {
-        client.off('disconnect', listener)
-        client.off('reconnect', listener)
-        client.off('connect', listener)
-      }
-    }
-  }, [client])
-
-  return { connected }
-}
-
-export const useQuery = <T = any>(
-  name?: string,
-  payload?: any,
-  opts?: {
-    persistent: boolean
-  }
-): {
-  loading: boolean
-  data?: T
-  error?: BasedError
-  checksum?: number
-} => {
-  const client: BasedClient = useContext(Ctx)
-
-  if (client && name) {
-    const q = client.query(name, payload, opts)
-    const { id, cache } = q
-    const [checksumOrError, update] = useState<number | BasedError>(
-      cache?.checksum
-    )
-
-    useEffect(() => {
-      const unsubscribe = q.subscribe(
-        (_, checksum) => {
-          update(checksum)
-        },
-        (err) => {
-          update(err)
-        }
-      )
-      return () => {
-        const isLoading = hooksLoading.size > 0
-        if (hooksLoading.delete(id) && !(hooksLoading.size > 0) && isLoading) {
-          useLoadingListeners.forEach((fn) => {
-            fn(false)
-          })
-        }
-        unsubscribe()
-        update(0)
-      }
-    }, [id])
-
-    if (checksumOrError) {
-      const isLoading = hooksLoading.size > 0
-      if (hooksLoading.delete(id)) {
-        if (!(hooksLoading.size > 0) && isLoading) {
-          useLoadingListeners.forEach((fn) => {
-            fn(false)
-          })
-        }
-      }
-
-      if (typeof checksumOrError === 'number') {
-        if (!cache) {
-          return { loading: true }
-        }
-
-        return { loading: false, data: cache.value, checksum: checksumOrError }
-      }
-
-      return { loading: false, error: checksumOrError }
-    }
-
-    const isLoading = hooksLoading.size > 0
-    if (hooksLoading.add(id)) {
-      if (!isLoading) {
-        useLoadingListeners.forEach((fn) => {
-          fn(true)
-        })
-      }
-    }
-
-    return { loading: true }
-  }
-
-  useState()
-  useEffect(() => {}, [null])
-
-  return { loading: true }
-}
-
-export const useClient = (): BasedClient => {
-  return useContext(Ctx)
-}
+export * from './Ctx'
+export * from './Provider'
+export * from './useAuthState'
+export * from './useClient'
+export * from './useConnected'
+export * from './useLoading'
+export * from './useQuery'
+export * from './useWindow'

package/src/useAuthState.ts

@@ -0,0 +1,21 @@
+import { useContext, useState, useEffect } from 'react'
+import { BasedClient, AuthState } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const useAuthState = (): AuthState => {
+  const client: BasedClient = useContext(Ctx)
+  const [state, setState] = useState<AuthState>(client?.authState || {})
+
+  useEffect(() => {
+    if (client) {
+      setState(client.authState)
+      const listener = (authState) => {
+        setState(authState)
+      }
+      client.on('authstate-change', listener)
+      return () => client.off('authstate-change', listener)
+    }
+  }, [client])
+
+  return state
+}

package/src/useClient.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { BasedClient } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const useClient = (): BasedClient => {
+  return useContext(Ctx)
+}

package/src/useConnected.ts

@@ -0,0 +1,27 @@
+import { useContext, useState, useEffect } from 'react'
+import { BasedClient } from '@based/client'
+import { Ctx } from './Ctx'
+
+export const useConnected = () => {
+  const client: BasedClient = useContext(Ctx)
+  const [connected, setConnected] = useState(client.connected)
+
+  useEffect(() => {
+    if (client) {
+      setConnected(client.connected)
+      const listener = () => {
+        setConnected(client.connected)
+      }
+      client.on('disconnect', listener)
+      client.on('reconnect', listener)
+      client.on('connect', listener)
+      return () => {
+        client.off('disconnect', listener)
+        client.off('reconnect', listener)
+        client.off('connect', listener)
+      }
+    }
+  }, [client])
+
+  return { connected }
+}

package/src/useLoading.ts

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+
+export const useLoadingListeners: Set<Function> = new Set()
+export const hooksLoading: Set<number> = new Set()
+export const useLoading = () => {
+  const [isLoading, setLoading] = useState(hooksLoading.size > 0)
+  useEffect(() => {
+    useLoadingListeners.add(setLoading)
+    return () => {
+      useLoadingListeners.delete(setLoading)
+    }
+  }, [])
+  return isLoading
+}

package/src/useQuery.ts

@@ -0,0 +1,156 @@
+import { useContext, useState, useEffect } from 'react'
+import { BasedClient, BasedError } from '@based/client'
+import { Ctx } from './Ctx'
+import { hooksLoading, useLoadingListeners } from './useLoading'
+
+export const useQueries = <T = any>(
+  name?: string,
+  payloads?: any[],
+  opts?: {
+    persistent: boolean
+  }
+): {
+  loading: boolean
+  data?: T
+  error?: BasedError
+  checksum?: string
+}[] => {
+  // TODO add error handling
+  const client: BasedClient = useContext(Ctx)
+  let key = ''
+  let sum = ''
+
+  if (client && name) {
+    const queries = Array(payloads.length)
+    const result = payloads.map((payload, i) => {
+      const q = client.query(name, payload, opts)
+      const { id, cache } = q
+      queries[i] = q
+      key += id
+
+      if (cache) {
+        sum += cache.checksum
+        return { loading: false, data: cache.value, checksum: cache.checksum }
+      }
+
+      return { loading: true }
+    })
+
+    const [, update] = useState(sum)
+
+    useEffect(() => {
+      let raf
+      const listener = () => {
+        if (!raf) {
+          raf = requestAnimationFrame(() => {
+            raf = null
+            update(
+              queries.reduce((sum, { cache }) => {
+                return cache ? sum + cache.checksum : sum
+              }, '')
+            )
+          })
+        }
+      }
+
+      const unsubs = queries.map((q) => {
+        return q.subscribe(listener)
+      })
+
+      return () => {
+        unsubs.forEach((unsubscribe) => unsubscribe())
+        if (raf) {
+          cancelAnimationFrame(raf)
+        }
+      }
+    }, [key])
+
+    return result
+  }
+
+  useState(sum)
+  useEffect(() => {}, [key])
+
+  return Array(payloads.length).fill({ loading: true })
+}
+
+export const useQuery = <T = any>(
+  name?: string,
+  payload?: any,
+  opts?: {
+    persistent: boolean
+  }
+): {
+  loading: boolean
+  data?: T
+  error?: BasedError
+  checksum?: number
+} => {
+  const client: BasedClient = useContext(Ctx)
+
+  if (client && name) {
+    const q = client.query(name, payload, opts)
+    const { id, cache } = q
+    const [checksumOrError, update] = useState<number | BasedError>(
+      cache?.checksum
+    )
+
+    useEffect(() => {
+      const unsubscribe = q.subscribe(
+        (_, checksum) => {
+          update(checksum)
+        },
+        (err) => {
+          update(err)
+        }
+      )
+      return () => {
+        const isLoading = hooksLoading.size > 0
+        if (hooksLoading.delete(id) && !(hooksLoading.size > 0) && isLoading) {
+          useLoadingListeners.forEach((fn) => {
+            fn(false)
+          })
+        }
+        unsubscribe()
+        update(0)
+      }
+    }, [id])
+
+    if (checksumOrError) {
+      const isLoading = hooksLoading.size > 0
+      if (hooksLoading.delete(id)) {
+        if (!(hooksLoading.size > 0) && isLoading) {
+          useLoadingListeners.forEach((fn) => {
+            fn(false)
+          })
+        }
+      }
+
+      if (typeof checksumOrError === 'number') {
+        if (!cache) {
+          return { loading: true }
+        }
+
+        return { loading: false, data: cache.value, checksum: checksumOrError }
+      }
+
+      return { loading: false, error: checksumOrError }
+    }
+
+    const isLoading = hooksLoading.size > 0
+    if (hooksLoading.add(id)) {
+      if (!isLoading) {
+        useLoadingListeners.forEach((fn) => {
+          fn(true)
+        })
+      }
+    }
+
+    return { loading: true }
+  }
+
+  useState()
+  useEffect(() => {}, [null])
+
+  return { loading: true }
+}

package/src/useWindow.ts

@@ -0,0 +1,151 @@
+import { useState, useEffect, useContext, useRef } from 'react'
+import { Ctx } from './Ctx'
+import { BasedClient, BasedQuery } from '@based/client'
+import { hash } from '@saulx/hash'
+
+type UseWindowState = {
+  loading: boolean
+  items: any[]
+  checksum?: number
+}
+
+export const useWindow = (
+  name: string,
+  getPayload: ({ offset, limit }) => any,
+  opts: {
+    path: string[]
+    pages: number[]
+    size: number
+    persistent?: boolean
+  },
+  dependencies?: any
+): UseWindowState => {
+  const [checksum, setCheckum] = useState(0)
+  const cache = useRef<UseWindowState>()
+  const client: BasedClient = useContext(Ctx)
+  const queries = useRef<BasedQuery[]>()
+  const unsubs = useRef<{}>()
+  const raf = useRef<number>()
+  const currModifyHash = useRef<string>()
+  const currResetHash = useRef<number>()
+  const modifyHash = `${opts.size}.${opts.persistent}`
+
+  if (dependencies) {
+    // complete reset
+    const resetHash = hash(dependencies)
+    if (currResetHash.current !== resetHash) {
+      currResetHash.current = resetHash
+      currModifyHash.current = null
+      cache.current = null
+    }
+  }
+
+  if (currModifyHash.current !== modifyHash) {
+    // reset queries but keep cache
+    for (const n in unsubs.current) {
+      unsubs.current[n]()
+    }
+    if (raf.current) {
+      cancelAnimationFrame(raf.current)
+      raf.current = null
+    }
+    queries.current = []
+    unsubs.current = {}
+    currModifyHash.current = modifyHash
+
+    if (!cache.current) {
+      cache.current = { items: [], loading: true, checksum: 0 }
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      for (const n in unsubs.current) {
+        unsubs.current[n]()
+      }
+      if (raf.current) {
+        cancelAnimationFrame(raf.current)
+      }
+    }
+  }, [])
+
+  if (client && name) {
+    const { pages, size, persistent = false, path } = opts
+    const active = new Set()
+
+    // add new subs
+    pages.forEach((n) => {
+      // pages start at 1 => shift to 0
+      n -= 1
+      active.add(n)
+      if (!(n in queries.current)) {
+        const payload = getPayload({ offset: n * size, limit: size })
+        const q = client.query(name, payload, { persistent })
+        queries.current[n] = q
+      }
+      if (n in unsubs.current) return
+      unsubs.current[n] = queries.current[n].subscribe(() => {
+        if (raf.current) return
+        raf.current = requestAnimationFrame(() => {
+          raf.current = null
+          setCheckum(
+            queries.current.reduce((combined, { cache }) => {
+              const checksum = cache?.checksum
+              return checksum ? combined + checksum : combined
+            }, 0)
+          )
+        })
+      })
+    })
+
+    // remove inactive subs
+    queries.current.forEach((_, n) => {
+      if (n in unsubs.current && !active.has(n)) {
+        unsubs.current[n]()
+        delete unsubs.current[n]
+      }
+    })
+
+    if (cache.current.checksum === checksum) {
+      return cache.current
+    }
+
+    let l = queries.current.length
+    cache.current.items = []
+    cache.current.loading = false
+    cache.current.checksum = checksum
+
+    while (l--) {
+      let i = size * l
+      const q = queries.current[l]
+      const m = i + size
+
+      if (q) {
+        if (q.cache) {
+          let data = q.cache.value
+          for (const i of path) {
+            data = data?.[i]
+          }
+          if (data) {
+            for (let j = 0; i < m; i++) {
+              const item = data[j++]
+              if (!item) break
+              cache.current.items[i] = item
+            }
+          }
+        } else {
+          cache.current.loading = true
+        }
+      }
+
+      // // fill up empty items with null
+      // for (; i < m; i++) {
+      //   if (!(i in cache.current.items)) {
+      //     cache.current.items[i] = null
+      //   }
+      // }
+    }
+  }
+
+  return cache.current
+}

package/test/based-server.ts

@@ -16,10 +16,37 @@ const counter: BasedQueryFunction<{ speed: number }, { cnt: number }> = (
   }
 }
 
+const fakeDb = (_based, { offset, limit }, update) => {
+  let i
+  let cnt = 0
+  const timer = setTimeout(() => {
+    const doit = () => {
+      cnt++
+      const things = Array.from(Array(limit)).map((_, i) => {
+        return {
+          id: `${i + offset} - ${cnt}`,
+        }
+      })
+      update({ things })
+    }
+
+    i = setInterval(doit, 1e3)
+    doit()
+  }, 100)
+  return () => {
+    clearTimeout(timer)
+    clearInterval(i)
+  }
+}
+
 const server = new BasedServer({
   port: 8081,
   functions: {
     configs: {
+      'fake-db': {
+        type: 'query',
+        fn: fakeDb,
+      },
       counter: {
         type: 'query',
         fn: counter,

package/test/browser.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import based from '@based/client'
 import { createRoot } from 'react-dom/client'
-import { Provider, useQuery, useLoading } from '../src'
+import { Provider, useQuery, useLoading, useWindow } from '../src'
 
 const client = based({
   url: 'ws://localhost:8081',
@@ -37,10 +37,11 @@ const Tester = () => {
             height: 50,
             background: somethingIsLoading ? 'red' : 'blue',
           }}
-        ></div>
-        {payloads.map((v) => {
+        />
+        {payloads.map((v, i) => {
           return (
             <div
+              key={i}
               style={{
                 border: '1px solid green',
                 padding: 5,
@@ -53,12 +54,68 @@ const Tester = () => {
           )
         })}
       </div>
-
-      <pre>{JSON.stringify(x, null, 2)}</pre>
     </div>
   )
 }
 
+const UseWindowTester = () => {
+  const [pages, setPages] = useState([1, 2])
+  const [size, setSize] = useState(4)
+  const { items, loading } = useWindow(
+    'fake-db',
+    ({ offset, limit }) => {
+      return {
+        offset,
+        limit,
+      }
+    },
+    {
+      path: ['things'], // where are the items in the response?
+      pages, // array of page numbers - starts at 1
+      size, // amount of items per page
+    }
+  )
+
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <pre>{JSON.stringify({ loading, items }, null, 2)}</pre>
+        <div>
+          {items.map((item, index) => {
+            return <div key={index}>{item?.id || '-'}</div>
+          })}
+        </div>
+      </div>
+      <button
+        style={{
+          background: 'lightgrey',
+          padding: 16,
+        }}
+        onClick={() => {
+          setPages(
+            pages.map((n) => {
+              return n + 3
+            })
+          )
+        }}
+      >
+        Move ({pages.join(',')})
+      </button>
+      <button
+        style={{
+          background: 'lightgrey',
+          padding: 16,
+        }}
+        onClick={() => {
+          setSize(size + 1)
+        }}
+      >
+        Resize ({size})
+      </button>
+    </>
+  )
+}
+
 function App() {
   return (
     <div
@@ -68,6 +125,7 @@ function App() {
     >
       <Provider client={client}>
         <Tester />
+        <UseWindowTester />
       </Provider>
     </div>
   )