Merge pull request #29 from nebarf/http-cache-store

Http cache store

Author: nebarf

README.md

@@ -121,7 +121,9 @@ Below the complete set of options you can provide to the `HttpClientConfigProvid
 |responseParser|A function that maps the native fetch response. The default parser transform the fetch response stream into a json (https://developer.mozilla.org/en-US/docs/Web/API/Response/json)|[httpResponseParser](src/config/response-parser.ts)
 |requestBodySerializer|A function used to serialize request body. The default serializer take into account a wide range of data types to figure out which type of serialization to perform|[serializeRequestBody](src/config/request-body-serializer.ts)
 |reqOptions|The default request option that will be carried by any request dispatched by the client. See [HttpRequestOptions](src/client/types.ts)|```{ headers: { 'Content-Type': 'application/json' } }```
-|cache|A service used to cache http responses. [HttpCache](src/cache/http-cache.ts) can be used as reference to provide your own implementation. By default it uses an in-memory cache.|[HttpInMemoryCacheService](src/cache/http-in-memory-cache.ts)
+|cacheStore|The store for cached http responses. By default an in-memory cache store is used.|[HttpInMemoryCacheService](src/cache/http-in-memory-cache.ts)
+|cacheStorePrefix|The prefix concatenated to any cached entry.|`rfh`
+|cacheStoreSeparator|Separates the store prefix and the cached entry identifier|`__`
 
 <br>
 
@@ -501,134 +503,90 @@ function App() {
 export default App;
 ```
 
-By default the http client uses an in-memory cache, so it will be flushed everytime a full app refresh is performed. You can override the default caching strategy by providing your own cache. The example below shows a http cache based on session storage:
+By default the http client uses an in-memory cache, so it will be flushed everytime a full app refresh is performed. You can override the default caching strategy by providing your own cache store. The example below shows a http cache store based on session storage:
 
 ```js
 import React from 'react';
-import { HttpClientConfigProvider, HttpCache, useHttpRequest } from 'react-http-fetch';
+import { useHttpRequest, HttpClientConfigProvider } from 'react-http-fetch';
 
-export class HttpSessionStorageCacheService extends HttpCache {
+export class HttpSessionStorageCacheStore {
   /**
    * The local cache providing for a request identifier
-   * the corresponding parsed response.
+   * the corresponding cached entry.
    */
-  store = window.sessionStorage;
+  _store = window.sessionStorage;
 
   /**
-   * Gets the unique key used as idenitifier to store
-   * a cached response for the given http request.
+   * @inheritdoc
    */
-  _getRequestIdentifier(request) {
-    const fullUrl = request.urlWithParams;
-    return fullUrl;
-  }
-
-  /**
-   * Tells if a cached entry is expired.
-   */
-  _isEntryExpired(entry) {
-    const nowTime = new Date().getTime();
-    const cachedAt = entry.cachedAt instanceof Date ? entry.cachedAt : new Date(entry.cachedAt);
-    const cachedTime = cachedAt.getTime();
-    return cachedTime + entry.maxAge < nowTime;
-  }
-
-  /**
-   * Gets the cached entry associated with the request.
-   */
-  _getEntry(request) {
-    const reqIdentifier = this._getRequestIdentifier(request);
-    const storedEntry = this.store.getItem(reqIdentifier);
+  get(identifier) {
+    const stringifiedEntry = this._store.getItem(identifier);
+    if (!stringifiedEntry) {
+      return;
+    }
 
     try {
-      const parsedEntry = JSON.parse(storedEntry);
+      const parsedEntry = JSON.parse(stringifiedEntry);
       return parsedEntry;
-    } catch(err) {
-      return null;
+    } catch (err) {
+      return;
     }
   }
 
   /**
-   * Removes a cached entry.
+   * @inheritdoc
    */
-  _removeEntry(entry) {
-    this.store.removeItem(entry.identifier);
+  put(identifier, entry) {
+    try {
+      const stringifiedEntry = JSON.stringify(entry);
+      this._store.setItem(identifier, stringifiedEntry);
+
+      return () => this.delete(identifier);
+    } catch (err) {
+      return () => {};
+    }
   }
 
   /**
-   * Determines if for the given request is available a cached response.
+   * @inheritdoc
    */
-  _has(request) {
-    const key = this._getRequestIdentifier(request);
-    return this.store.hasOwnProperty(key);
+  has(identifier) {
+    return this._store.has(identifier);
   }
 
   /**
-   * Tells if the cached request is expired or not.
+   * @inheritdoc
    */
-  _isExpired(request) {
-    const cachedEntry = this._getEntry(request);
-    if (!cachedEntry) {
-      return true;
-    }
-
-    return this._isEntryExpired(cachedEntry);
+  delete(identifier) {
+    this._store.removeItem(identifier);
   }
 
   /**
-   * Gets the cached entry in the map for the given request.
+   * Gets all entry keys.
    */
-  get(request) {
-    const cachedEntry = this._getEntry(request);
-    if (!cachedEntry) {
-      return undefined;
-    }
-
-    const isExpired = this._isEntryExpired(cachedEntry);
-    return isExpired ? undefined : cachedEntry.response;
+  _keys() {
+    return Object.keys(this._store);
   }
 
   /**
-   * Puts a new cached response for the given request.
+   * Gets all stored entries.
    */
-  put(request, response) {
-    if (!request.maxAge) {
-      return;
-    }
-
-    const reqKey = this._getRequestIdentifier(request);
-    const entry = {
-      response,
-      identifier: reqKey,
-      cachedAt: new Date(),
-      maxAge: request.maxAge,
-    };
-
-    // Update and flush the cache.
-    this.store.setItem(reqKey, JSON.stringify(entry));
-
-    // Remove the entry from the cache once expired.
-    const timerRef = setTimeout(() => {
-      this._removeEntry(entry);
-      clearTimeout(timerRef);
-    }, request.maxAge);
+  entries() {
+    return this._keys()
+      .map(entryKey => this._store.getItem(entryKey));
   }
 
   /**
-   * Founds all expired entry and deletes them from the cache.
+   * @inheritdoc
    */
   flush() {
-    this.store.forEach((entry) => {
-      const isEntryExpired = this._isEntryExpired(entry);
-
-      if (isEntryExpired) {
-        this._removeEntry(entry);
-      }
+    this._keys().forEach((entry) => {
+      this.delete(entry.identifier);
     });
   }
 }
 
-const httpCache = new HttpSessionStorageCacheService();
+const httpCacheStore = new HttpSessionStorageCacheStore();
 
 function Child() {
   const [state, request] = useHttpRequest({
@@ -641,7 +599,7 @@ function Child() {
 
   const fetchTodo = () => {
     const { reqResult } = request();
-    reqResult.then(res => console.log('Request res: ', res))
+    reqResult.then(res => console.log('Request response: ', res))
   };
 
   return (
@@ -658,7 +616,13 @@ function Child() {
 
 
 function App() {
-  const httpReqConfig = { cache: httpCache };
+  const httpReqConfig = {
+    cacheStore: httpCacheStore,
+    // "prefix" and "separator" are not mandatory,
+    // if not provided the default ones will be used.
+    cacheStorePrefix: 'customPrefix',
+    cacheStoreSeparator: '-'
+  };
 
   return (
     <HttpClientConfigProvider config={httpReqConfig}>

src/cache/http-cache-store.ts

@@ -0,0 +1,33 @@
+import { HttpCacheEntry } from './types';
+
+export interface HttpCacheStore {
+  /**
+   * Gets the cached entry for the given identifier.
+   */
+  get<T>(identifier: string): HttpCacheEntry<T> | undefined;
+
+  /**
+   * Stores the entry.
+   */
+  put<T>(identifier: string, entry: HttpCacheEntry<T>): () => void;
+
+  /**
+   * Determines if the entry is in the store.
+   */
+  has(identifier: string): boolean;
+
+  /**
+   * Deletes the cached entry for the given identifier.
+   */
+  delete(identifier: string): void;
+
+  /**
+   * Gets all stored entries.
+   */
+  entries(): HttpCacheEntry<unknown>[];
+
+  /**
+   * Flushes the store by deleting all entries.
+   */
+  flush(): void;
+}

src/cache/http-cache.ts

@@ -1,13 +1,125 @@
 import { HttpRequest } from '../client';
+import { HttpCacheEntry } from './types';
+import { HttpCacheStorePrefixDecorator } from './prefix-decorator';
+
+export class HttpCacheService {
+  private prefixedStore: HttpCacheStorePrefixDecorator;
+
+  constructor(store: HttpCacheStorePrefixDecorator) {
+    this.prefixedStore = store;
+  }
+
+  /**
+   * Gets the unique key used as idenitifier to store
+   * a cached response for the given http request.
+   */
+  private getRequestIdentifier(request: HttpRequest): string {
+    const fullUrl = request.urlWithParams;
+    return fullUrl;
+  }
+
+  /**
+   * Tells if a cached entry is expired.
+   */
+  private isEntryExpired<T>(entry: HttpCacheEntry<T>): boolean {
+    const nowTime = new Date().getTime();
+    const cachedAtDate = entry.cachedAt instanceof Date ? entry.cachedAt : new Date(entry.cachedAt);
+    const cachedTime = cachedAtDate.getTime();
+    return cachedTime + entry.maxAge < nowTime;
+  }
+
+  /**
+   * Gets the cached entry associated with the request.
+   */
+  private getEntry<T>(request: HttpRequest): HttpCacheEntry<T> | undefined {
+    const reqIdentifier = this.getRequestIdentifier(request);
+    return this.prefixedStore.get(reqIdentifier) as HttpCacheEntry<T>;
+  }
+
+  /**
+   * Removes a cached entry.
+   */
+  private removeEntry<T>(entry: HttpCacheEntry<T>): void {
+    this.prefixedStore.delete(entry.identifier);
+  }
+
+  /**
+   * Determines if for the given request is available a cached response.
+   */
+  has(request: HttpRequest): boolean {
+    const key = this.getRequestIdentifier(request);
+    return this.prefixedStore.has(key);
+  }
+
+  /**
+   * Tells if the cached request is expired or not.
+   */
+  isExpired(request: HttpRequest): boolean {
+    const cachedEntry = this.getEntry(request);
+    if (!cachedEntry) {
+      return true;
+    }
+
+    return this.isEntryExpired(cachedEntry);
+  }
+
+  /**
+   * Gets the cached entry in the map for the given request.
+   */
+  get<T>(request: HttpRequest): T | undefined {
+    const cachedEntry = this.getEntry(request);
+    if (!cachedEntry) {
+      return undefined;
+    }
+
+    const isExpired = this.isEntryExpired(cachedEntry);
+    return isExpired ? undefined : (cachedEntry.response as T);
+  }
+
+  /**
+   * Puts a new cached response for the given request.
+   */
+  put<T>(request: HttpRequest, response: T): void {
+    if (!request.maxAge) {
+      return;
+    }
+
+    const reqKey = this.getRequestIdentifier(request);
+    const entry: HttpCacheEntry<T> = {
+      response,
+      identifier: reqKey,
+      cachedAt: new Date(),
+      maxAge: request.maxAge,
+    };
+
+    // Update the store.
+    this.prefixedStore.put(entry.identifier, entry);
+
+    // Remove the entry from the cache once expired.
+    const timerRef = setTimeout(() => {
+      this.removeEntry(entry);
+      clearTimeout(timerRef);
+    }, request.maxAge);
+  }
 
-export abstract class HttpCache {
   /**
-   * Gets the cached parsed response for the given request.
+   * Founds all expired entry and deletes them from the cache.
    */
-  abstract get<T>(request: HttpRequest): T | undefined;
+  prune(): void {
+    const entries = this.prefixedStore.entries();
+    entries.forEach((entry) => {
+      const isEntryExpired = this.isEntryExpired(entry);
+
+      if (isEntryExpired) {
+        this.removeEntry(entry);
+      }
+    });
+  }
 
   /**
-   * Caches the parsed response for the given request.
+   * Flush the cache by removing all entries.
    */
-  abstract put<T>(request: HttpRequest, response: T): void;
+  flush(): void {
+    this.prefixedStore.flush();
+  }
 }