@botonic/react 0.20.6 → 0.20.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.20.6",
+  "version": "0.20.7",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "src/index.js",
@@ -43,7 +43,6 @@
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.1",
     "react-textarea-autosize": "^7.1.2",
-    "react-use-storage": "^0.5.1",
     "reconnecting-websocket": "^4.4.0",
     "simplebar-react": "^2.3.3",
     "styled-components": "^5.3.0",

package/src/webchat/use-storage-state-hook.js

@@ -1,9 +1,44 @@
-import { useLocalStorage, useSessionStorage } from 'react-use-storage'
-
-export function useStorageState(storage, storageKey) {
-  const [botonicLocalState, saveLocalState] = useLocalStorage(storageKey)
-  const [botonicSessionState, saveSessionState] = useSessionStorage(storageKey)
-  if (storage === null) return [undefined, undefined]
-  if (storage === sessionStorage) return [botonicSessionState, saveSessionState]
-  return [botonicLocalState, saveLocalState]
+import { useCallback, useEffect, useState } from 'react'
+
+//Code taken from https://github.com/leny/react-use-storage
+const evtTarget = new EventTarget()
+
+export function useStorageState(storage, key, defaultValue) {
+  const raw = storage?.getItem(key)
+
+  const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue)
+
+  const updater = useCallback(
+    (updatedValue, remove = false) => {
+      setValue(updatedValue)
+      storage[remove ? 'removeItem' : 'setItem'](
+        key,
+        JSON.stringify(updatedValue)
+      )
+      evtTarget.dispatchEvent(
+        new CustomEvent('storage_change', { detail: { key } })
+      )
+    },
+    [key]
+  )
+
+  defaultValue != null && !raw && updater(defaultValue)
+
+  useEffect(() => {
+    const listener = ({ detail }) => {
+      if (detail.key === key) {
+        const lraw = storage?.getItem(key)
+
+        lraw !== raw && setValue(JSON.parse(lraw))
+      }
+    }
+
+    evtTarget.addEventListener('storage_change', listener)
+    return () => evtTarget.removeEventListener('storage_change', listener)
+  })
+
+  if (storage === null) {
+    return [undefined, undefined]
+  }
+  return [value, updater, () => updater(null, true)]
 }