@rpcbase/client 0.123.0 → 0.126.0

package/auth/SignIn/index.js

@@ -9,7 +9,7 @@ import debug from "debug"
 import post from "../../helpers/post"
 import {reconnect as rts_reconnect} from "../../rts"
 
-import {set_is_signed_in, set_uid, set_tenant_id} from "../index"
+import {set_is_signed_in, setUid, set_tenant_id} from "../index"
 import Footer from "../Footer"
 
 import "./sign-in.scss"
@@ -55,7 +55,7 @@ const SignIn = ({
       const {user_id} = res
       assert(res.user_id, "missing user_id")
 
-      set_uid(user_id)
+      setUid(user_id)
       set_tenant_id(user_id.slice(0, 8))
       set_is_signed_in(true)
 

package/auth/SignUp/index.js

@@ -4,7 +4,7 @@ import page from "page"
 
 import {reconnect as rts_reconnect} from "../../rts"
 
-import {set_is_signed_in, set_uid, set_tenant_id} from "../index"
+import {set_is_signed_in, setUid, set_tenant_id} from "../index"
 import post from "../../helpers/post"
 import Footer from "../Footer"
 
@@ -31,7 +31,7 @@ const SignUp = ({
 
     if (res.status === "ok") {
       const {user_id} = res
-      set_uid(user_id)
+      setUid(user_id)
       set_tenant_id(user_id.slice(0, 8))
       set_is_signed_in(true)
 

package/auth/index.js

@@ -111,7 +111,7 @@ export const session_restrict = (ctx, next) => {
 
 
 export const getUid = () => __user_id
-export const set_uid = (val) => {
+export const setUid = (val) => {
   __user_id = val
 
   if (typeof val === "string") {

package/auth/sign_out.js

@@ -1,9 +1,9 @@
 /* @flow */
 
-import {set_is_signed_in, set_uid, set_tenant_id} from "./index"
+import {set_is_signed_in, setUid, set_tenant_id} from "./index"
 
 export const sign_out = () => {
-  set_uid(null)
+  setUid(null)
   set_tenant_id(null)
   set_is_signed_in(false)
   localStorage.clear()

package/helpers/createBatcher/index.js

@@ -0,0 +1,36 @@
+/* @flow */
+
+const createBatcher = (func, delay) => {
+  let queue = []
+  let timeout = null
+
+  function processBatch() {
+    const batch = [...queue]
+    queue = []
+    timeout = null
+
+    func(batch.map((item) => item.args))
+      .then((results) => {
+        for (let i = 0; i < batch.length; i++) {
+          batch[i].resolve(results[i])
+        }
+      })
+      .catch((err) => {
+        for (let item of batch) {
+          item.reject(err)
+        }
+      })
+  }
+
+  return (...args) => {
+    return new Promise((resolve, reject) => {
+      queue.push({args, resolve, reject})
+
+      if (!timeout) {
+        timeout = setTimeout(processBatch, delay)
+      }
+    })
+  }
+}
+
+export default createBatcher

package/helpers/useStoredValue/batchedGetStoredValues.js

@@ -0,0 +1,30 @@
+/* @flow */
+import assert from "assert"
+import debug from "debug"
+
+import post from "../post"
+import createBatcher from "../createBatcher"
+
+const log = debug("useStoredValue:get")
+
+// we keep it just above the react rendering time, but it could even be a request animation frame
+const BATCH_TIMEOUT_MS = 4
+
+const batchedGetStoredValues = async(args) => {
+  log("batched call to args", args)
+
+  const keys = args.map((arg) => arg[0])
+
+  const res = await post("/api/v1/stored-values/get", keys)
+  assert(res.status === "ok")
+
+  if (debug.enabled) {
+    for (let i = 0; i < args.length; i++) {
+      log(args[i][0], res.values[i])
+    }
+  }
+
+  return res.values
+}
+
+export default createBatcher(batchedGetStoredValues, BATCH_TIMEOUT_MS)

package/helpers/useStoredValue/index.js

@@ -0,0 +1,107 @@
+/* @flow */
+import {useEffect, useState, useRef, useCallback} from "react"
+import _throttle from "lodash/throttle"
+import isEqual from "fast-deep-equal/react"
+
+import {getUid} from "../../auth"
+import storage from "../../storage"
+
+import batchedGetStoredValues from "./batchedGetStoredValues"
+import setStoredValues from "./setStoredValues"
+
+
+const DEFAULT_REMOTE = true
+const UPDATE_THROTTLE_DELAY = 300
+
+const useStoredValue = (_key, defaultValueOrFn = null, options = {}) => {
+  const uid = getUid()
+  const key = `${uid}.${_key}`
+
+  const hasRemote = typeof options.remote === "boolean" ? options.remote : DEFAULT_REMOTE
+
+  const previousKey = useRef()
+
+  const getInitialState = () => {
+    const defaultValue =
+      typeof defaultValueOrFn === "function" ? defaultValueOrFn() : defaultValueOrFn
+
+    if (!_key) return defaultValue
+
+    const val = storage.getItem(key)
+
+    return typeof val !== "undefined" && val !== null ? val : defaultValue
+  }
+
+  const [value, setValue] = useState(getInitialState())
+
+  // reload initial state when key changes
+  useEffect(() => {
+    const initialStateForKey = getInitialState()
+    if (!isEqual(initialStateForKey, value)) {
+      setValue(initialStateForKey)
+    }
+  }, [key])
+
+
+  const refresh = useCallback(async() => {
+    const nextVal = await batchedGetStoredValues(key)
+
+    // TODO: we check against null here because localStorage of a non existing key returns null, but this is wrong, it should be returning undefined, in case we want to be able to store a null value
+    if (typeof nextVal !== "undefined" && nextVal !== null && !isEqual(nextVal, value)) {
+      setValue(nextVal)
+      // add the value to local storage in case it wasn't present
+      storage.setItem(key, nextVal)
+    }
+  }, [key])
+
+
+  useEffect(() => {
+    if (!hasRemote) return
+    if (!key) return
+    // skip when value is still undefined -> it hasnt loaded from cache / default value
+    if (typeof value === "undefined") return
+
+    if (previousKey.current !== key) {
+      refresh()
+      previousKey.current = key
+    }
+  }, [hasRemote, key, value, setValue])
+
+  // TODO: are there several instances of this function that run for differents keys ?
+  const throttledUpdateRemote = useCallback(
+    _throttle(
+      async(newVal) => {
+        await setStoredValues({
+          values: [
+            {
+              key,
+              value: newVal,
+            },
+          ],
+        })
+      },
+      UPDATE_THROTTLE_DELAY,
+      {leading: false, trailing: true},
+    ),
+    [key],
+  )
+
+  const updateValue = async(newValOrFn) => {
+    const newVal = typeof newValOrFn === "function" ? newValOrFn(value) : newValOrFn
+
+    if (newVal !== value) {
+      setValue(newVal)
+    }
+    if (!_key) return
+
+    storage.setItem(key, newVal)
+
+    if (hasRemote) {
+      throttledUpdateRemote(newVal)
+    }
+  }
+
+  return [value, updateValue]
+}
+
+export default useStoredValue

package/helpers/useStoredValue/setStoredValues.js

@@ -0,0 +1,14 @@
+/* @flow */
+import assert from "assert"
+
+import post from "../post"
+
+
+const setStoredValue = async(payload) => {
+  const res = await post("/api/v1/stored-values/set", payload)
+
+  assert(res.status === "ok")
+  return res
+}
+
+export default setStoredValue

package/index.js

@@ -1,4 +1,5 @@
 /* @flow */
 import useRPC from "./helpers/useRPC"
+import useStoredValue from "./helpers/useStoredValue"
 
-export {useRPC}
+export {useRPC, useStoredValue}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.123.0",
+  "version": "0.126.0",
   "scripts": {
     "build-firebase": "webpack -c firebase/webpack.config.js",
     "build": "yarn build-firebase",