feat(examples): add async storage example

Akurganow · Jun 14, 2020 · 5377681 · 5377681
1 parent 9a8640b
commit 5377681
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 2 deletions.
diff --git a/examples/async-storage/index.html b/examples/async-storage/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>usePersistedState async storage example</title>
+  <script defer src="./index.jsx"></script>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>
diff --git a/examples/async-storage/index.jsx b/examples/async-storage/index.jsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import { render } from 'react-dom'
+
+import createPersistedState from '../../lib'
+
+let listeners = []
+
+function fireStorageEvent(changes) {
+  listeners.forEach(listener => {
+    listener(changes)
+  })
+}
+
+window.addEventListener('storage', event => {
+  if (event.key) {
+    const changes = {
+      [event.key]: {
+        newValue: event.newValue,
+        oldValue: event.oldValue,
+      },
+    }
+
+    fireStorageEvent(changes)
+  }
+})
+
+const storage = {
+  get: keys => new Promise(resolve => {
+    const result = {}
+
+    if (Array.isArray(keys)) {
+      keys.forEach(key => {
+        const item = localStorage.getItem(key)
+
+        if (item) result[key] = item
+      })
+    } else {
+      const item = localStorage.getItem(keys)
+
+      if (item) result[keys] = item
+    }
+
+    resolve(result)
+  }),
+  set: items => new Promise(resolve => {
+    const changes = {}
+
+    Object.entries(items).forEach(([key, value]) => {
+      const oldValue = localStorage.getItem(key)
+
+      localStorage.setItem(key, value)
+
+      changes[key] = {
+        oldValue,
+        newValue: value,
+      }
+    })
+
+    fireStorageEvent(changes)
+
+    resolve()
+  }),
+  remove: keys => new Promise(resolve => {
+    const changes = {}
+
+    if (Array.isArray(keys)) {
+      keys.forEach(key => {
+        const oldValue = localStorage.getItem(key)
+
+        localStorage.removeItem(key)
+
+        changes[key] = {
+          oldValue,
+          newValue: null,
+        }
+      })
+    } else {
+      const oldValue = localStorage.getItem(keys)
+
+      localStorage.removeItem(keys)
+
+      changes[keys] = {
+        oldValue,
+        newValue: null,
+      }
+    }
+
+    fireStorageEvent(changes)
+
+    resolve()
+  }),
+  onChanged: {
+    addListener(listener) {
+      listeners.push(listener)
+    },
+    removeListener(listener) {
+      listeners = listeners.filter(l => l === listener)
+    },
+    hasListener(listener) {
+      return listeners.includes(listener)
+    },
+  },
+}
+
+const [usePersistedState, clear] = createPersistedState('simple_example', storage)
+const initialValue = 0
+
+function Actions() {
+  const [, setCount] = usePersistedState('count', initialValue)
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setCount(prevCount => prevCount - 1)
+        }}>
+        -
+      </button>
+      <button onClick={() => { clear() }}>Clear</button>
+      <button onClick={() => { setCount(initialValue) }}>Initial</button>
+      <button
+        onClick={() => {
+          setCount(prevCount => prevCount + 1)
+        }}>
+        +
+      </button>
+    </div>
+  )
+}
+
+function Count() {
+  const [count] = usePersistedState('count', initialValue)
+
+  return (
+    <div>{count}</div>
+  )
+
+}
+
+function App() {
+  return (
+    <div>
+      <Count />
+      <Actions />
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+render(<App />, root)
diff --git a/examples/index.html b/examples/index.html
@@ -10,6 +10,7 @@
   <ul>
     <li><a href="./local-storage/index.html">Local Storage</a></li>
     <li><a href="./session-storage/index.html">Session Storage</a></li>
+    <li><a href="./async-storage/index.html">Async Storage</a></li>
   </ul>
 </body>
 </html>
diff --git a/examples/local-storage/index.jsx b/examples/local-storage/index.jsx
@@ -2,8 +2,9 @@ import React from 'react'
 import { render } from 'react-dom'
 
 import createPersistedState from '../../lib'
+import storage from '../../lib/storages/local-storage'
 
-const [usePersistedState, clear] = createPersistedState('simple_example')
+const [usePersistedState, clear] = createPersistedState('simple_example', storage)
 const initialValue = 0
 
 function Actions() {

diff --git a/examples/session-storage/index.jsx b/examples/session-storage/index.jsx
@@ -2,8 +2,9 @@ import React from 'react'
 import { render } from 'react-dom'
 
 import createPersistedState from '../../lib'
+import storage from '../../lib/storages/session-storage'
 
-const [usePersistedState, clear] = createPersistedState('simple_example', window.sessionStorage)
+const [usePersistedState, clear] = createPersistedState('simple_example', storage)
 const initialValue = 0
 
 function Actions() {