add storage class to handle gracefull degration (#61)

* add storage class to handle gracefull degration

* refactor storage to use IProxyStorage

* mock storage implementation for integration tests

* remove unused useRef from src/use-localstorage.ts

Co-authored-by: Pier-Luc Gendreau <[email protected]>

Co-authored-by: Pier-Luc Gendreau <[email protected]>

src/local-storage-events.ts

@@ -1,3 +1,4 @@
+import { storage  } from './storage'
 interface KVP<K, V> {
     key: K,
     value: V
@@ -49,7 +50,7 @@ export function isTypeOfLocalStorageChanged<TValue>(evt: any): evt is LocalStora
  */
 export function writeStorage<TValue>(key: string, value: TValue) {
     try {
-        localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : `${value}`);
+        storage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : `${value}`);
         window.dispatchEvent(new LocalStorageChanged({ key, value }));
     } catch (err) {
         if (err instanceof TypeError && err.message.includes('circular structure')) {
@@ -86,6 +87,6 @@ export function writeStorage<TValue>(key: string, value: TValue) {
  * @param {string} key The key of the item you wish to delete from localStorage.
  */
 export function deleteFromStorage(key: string) {
-    localStorage.removeItem(key);
+    storage.removeItem(key);
     window.dispatchEvent(new LocalStorageChanged({ key, value: null }))
 }

src/storage.ts

@@ -0,0 +1,70 @@
+/**
+ * Test if localStorage API is available
+ * From https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Feature-detecting_localStorage
+ * @returns {boolean}
+ */
+export function localStorageAvailable(): boolean {
+  try {
+    var x = '@rehooks/local-storage:' + new Date().toISOString();
+    localStorage.setItem(x, x);
+    localStorage.removeItem(x);
+    return true;
+  }
+  catch(e) {
+    return e instanceof DOMException && (
+      // everything except Firefox
+      e.code === 22 ||
+      // Firefox
+      e.code === 1014 ||
+      // test name field too, because code might not be present
+      // everything except Firefox
+      e.name === 'QuotaExceededError' ||
+      // Firefox
+      e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+      // acknowledge QuotaExceededError only if there's something already stored
+      (localStorage && localStorage.length !== 0);
+  }
+}
+
+
+interface IProxyStorage {
+  getItem(key: string): string | null
+  setItem(Key: string, value: string): void
+  removeItem(key: string): void
+}
+
+export class LocalStorageProxy implements IProxyStorage {
+  getItem(key: string): string | null {
+    return localStorage.getItem(key)
+  }
+
+  setItem(key: string, value: string): void {
+    localStorage.setItem(key, value)
+  }
+
+  removeItem(key: string): void {
+    localStorage.removeItem(key)
+  }
+}
+
+export class MemoryStorageProxy implements IProxyStorage {
+  private _memoryStorage = new Map<string, string>()
+
+  getItem(key: string): string | null {
+    return this._memoryStorage.get(key) ?? null
+  }
+
+  setItem(key: string, value: string): void {
+    this._memoryStorage.set(key, value)
+  }
+
+  removeItem(key: string): void {
+    this._memoryStorage.delete(key)
+  }
+}
+
+const proxyStorageFrom = (isAvailable: boolean) => isAvailable
+  ? new LocalStorageProxy()
+  : new MemoryStorageProxy()
+
+export const storage = proxyStorageFrom(localStorageAvailable())

src/use-localstorage.ts

@@ -4,6 +4,7 @@ import {
   LocalStorageChanged,
   isTypeOfLocalStorageChanged,
 } from './local-storage-events';
+import { storage  } from './storage'
 import { useEffect, useState, useCallback } from 'react';
 
 /**
@@ -54,9 +55,9 @@ export function useLocalStorage<TValue = string>(
   defaultValue: TValue | null = null,
 ) {
   const [localState, updateLocalState] = useState<TValue | null>(
-    localStorage.getItem(key) === null
+    storage.getItem(key) === null
       ? defaultValue
-      : tryParse(localStorage.getItem(key)!)
+      : tryParse(storage.getItem(key)!)
   );
 
   const onLocalStorageChange = (event: LocalStorageChanged<TValue> | StorageEvent) => {
@@ -84,7 +85,7 @@ export function useLocalStorage<TValue = string>(
 
     // Write default value to the local storage if there currently isn't any value there.
     // Don't however write a defaultValue that is null otherwise it'll trigger infinite updates.
-    if (localStorage.getItem(key) === null && defaultValue !== null) {
+    if (storage.getItem(key) === null && defaultValue !== null) {
       writeStorage(key, defaultValue);
     }
 

test/index.test.tsx

@@ -3,6 +3,8 @@ import { useLocalStorage, writeStorage, deleteFromStorage } from '../src';
 import { renderHook } from '@testing-library/react-hooks';
 import { render, fireEvent, act, cleanup } from '@testing-library/react';
 
+import { storage } from '../src/storage'
+
 
 afterEach(() => {
   cleanup();

test/storage.test.ts

@@ -0,0 +1,51 @@
+import { MemoryStorageProxy, LocalStorageProxy } from '../src/storage'
+
+describe('ProxyStorage', () => {
+    describe('when localStorage is available', () => {
+        // check assumption localStorage is available in tests
+        window.localStorage.setItem('hi', 'hi')
+        expect(window.localStorage.getItem('hi')).toEqual('hi')
+
+        const storage = new LocalStorageProxy()
+
+        it('calls localStorage.setItem', () => {
+            storage.setItem('key1', 'value2')
+            expect(localStorage.getItem('key1')).toEqual('value2')
+        })
+
+        it('calls localStorage.getItem', () => {
+            localStorage.setItem('key2', 'value1')
+            expect(storage.getItem('key2')).toEqual('value1')
+        })
+
+        it('calls localStorage.removeItem', () => {
+            localStorage.setItem('key3', 'value1')
+            expect(storage.removeItem('key3')).toEqual(undefined)
+            expect(localStorage.getItem('key3')).toEqual(null)
+        })
+    })
+
+    describe('when localStorage is not available', () => {
+        // check assumption localStorage is available in tests
+        window.localStorage.setItem('hi', 'hi')
+        expect(window.localStorage.getItem('hi')).toEqual('hi')
+
+        const storage = new MemoryStorageProxy()
+
+        it('returns default instead of calling localStorage.setItem', () => {
+            expect(storage.setItem('key4', 'value2')).toEqual(undefined)
+            expect(localStorage.getItem('key4')).toEqual(null)
+        })
+
+        it('returns default instead of calling localStorage.getItem', () => {
+            localStorage.setItem('key5', 'value1')
+            expect(storage.getItem('key5')).toEqual(null)
+        })
+
+        it('returns default instead of calling localStorage.getItem', () => {
+            localStorage.setItem('key6', 'value1')
+            expect(storage.removeItem('key6')).toEqual(undefined)
+            expect(localStorage.getItem('key6')).toEqual('value1')
+        })
+    })
+})