@selkirk-systems/fetch 1.0.11 → 1.1.0

package/dist/Fetch.js

@@ -1,7 +1,9 @@
 //Inspired by https://www.bennadel.com/blog/4180-canceling-api-requests-using-fetch-and-abortcontroller-in-javascript.htm
 
 import Download from './Download';
+import { DELETE_FROM_CACHE, UPDATE_CACHE } from './constants/FetchConstants';
 import FetchErrorHandler from './middleware/FetchErrorHandler';
+import { dispatch, serializeData } from "@selkirk-systems/state-management";
 
 // Regular expression patterns for testing content-type response headers.
 const RE_CONTENT_TYPE_JSON = /^application\/(x-)?json/i;
@@ -12,6 +14,10 @@ const CONTENT_TYPE_DOWNLOADS = {
   'application/pdf': true,
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': true
 };
+
+//30 minutes
+const CACHED_EXPIRY_TIMESTAMP = 30 * 60000;
+
 //We store the original promise.catch so we can override it in some
 //scenarios when we want to swallow errors vs bubble them up.
 const ORIGINAL_CATCH_FN = Promise.prototype.catch;
@@ -44,6 +50,7 @@ export function OnOKResponse(fn) {
     return fn([network, isAbort]);
   };
 }
+
 /**
 * Make the fetch request with the given configuration options.
 * 
@@ -59,7 +66,7 @@ export function OnOKResponse(fn) {
 * - status.text
 * - status.isAbort
 */
-export default function Fetch(url, options = {}) {
+function Fetch(url, options = {}) {
   const config = {
     downloadFileName: null,
     contentType: "application/json",
@@ -403,4 +410,107 @@ function normalizeTransportError(transportError, request, config) {
       isAbort: isAbort
     }
   };
-}
+}
+const responseObjectJson = {
+  status: 200,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+};
+export const getCacheByName = async name => {
+  try {
+    return caches.open(name);
+  } catch (err) {
+    throw err;
+  }
+};
+export const putJsonInCache = (cache, url, json) => {
+  const response = new Response(JSON.stringify(json), responseObjectJson);
+  return cache.put(url, response);
+};
+let _cache = null;
+const DATA_METHODS = {
+  "GET": null,
+  "PATCH": null,
+  "POST": null,
+  "PUT": null
+};
+const fetch = (url, options = {}) => {
+  function cacheResponse([response, isAbort]) {
+    const status = response.status.code;
+    const headers = response.request.headers;
+    const method = response.request.method;
+    if (status >= 200 && status < 400 && headers.get('content-type') === "application/json") {
+      if (DATA_METHODS.hasOwnProperty(method) || method === "GET") {
+        const data = serializeData(response.data);
+        if (data.page && !data.items || data.items && data.items.length === 0) {
+          deleteFromCache(_cache, url, response);
+          return [response, isAbort];
+        }
+        const finalOptions = {
+          ...responseObjectJson
+        };
+        finalOptions.headers['Time-Cached'] = new Date().getTime();
+        const responseObj = new Response(JSON.stringify(response), finalOptions);
+        _cache.put(url, responseObj);
+        dispatch(UPDATE_CACHE, {
+          url: url,
+          response: response
+        });
+        return [response, isAbort];
+      }
+      if (method === "DELETE") {
+        deleteFromCache(_cache, url, response);
+        return [response, isAbort];
+      }
+    }
+    return [response, isAbort];
+  }
+  function cacheMatch() {
+    //HANDLE: Data updates, always return fresh data
+    if (options.method && DATA_METHODS.hasOwnProperty(options.method)) {
+      return Fetch(url, options).then(cacheResponse);
+    }
+    return _cache.match(url).then(response => {
+      if (response) {
+        const timeCached = response.headers.get('Time-Cached');
+        if (expiredCache(timeCached)) {
+          _cache.delete(url);
+          return Fetch(url, options).then(cacheResponse);
+        }
+        Fetch(url, options).then(cacheResponse);
+        return unwrapResponseData(response).then(obj => {
+          return Promise.resolve([{
+            request: null,
+            response: response,
+            data: obj.data,
+            status: {
+              code: response.status,
+              text: response.statusText,
+              isAbort: false
+            }
+          }, false]);
+        });
+      }
+      return Fetch(url, options).then(cacheResponse);
+    });
+  }
+  if (_cache) {
+    return cacheMatch();
+  }
+  return caches.open('fetch').then(cache => {
+    _cache = cache;
+  }).then(cacheMatch);
+};
+function deleteFromCache(_cache, url, response) {
+  _cache.delete(url);
+  dispatch(DELETE_FROM_CACHE, {
+    url: url,
+    response: response
+  });
+}
+function expiredCache(timeCached) {
+  const now = new Date().getTime();
+  return Math.abs(now - timeCached) >= CACHED_EXPIRY_TIMESTAMP;
+}
+export default fetch;

package/dist/constants/FetchConstants.js

@@ -0,0 +1,3 @@
+export const ADD_ERROR = "ADD_ERROR";
+export const UPDATE_CACHE = "UPDATE_CACHE";
+export const DELETE_FROM_CACHE = "DELETE_FROM_CACHE";

package/dist/index.js

@@ -1,3 +1,3 @@
 export { default as Download } from './Download';
 export { default as fetch, applyMiddleware, OnOKResponse } from './Fetch';
-export { ADD_ERROR } from "./constants/ErrorConstants";
+export * from "./constants/FetchConstants";

package/dist/middleware/FetchErrorHandler.js

@@ -1,5 +1,5 @@
 import { dispatch } from "@selkirk-systems/state-management";
-import { ADD_ERROR } from "../constants/ErrorConstants";
+import { ADD_ERROR } from "../constants/FetchConstants";
 const handler = err => response => options => next => {
   if (err) {
     dispatch(ADD_ERROR, err);

package/lib/Fetch.js

@@ -1,7 +1,9 @@
 //Inspired by https://www.bennadel.com/blog/4180-canceling-api-requests-using-fetch-and-abortcontroller-in-javascript.htm
 
 import Download from './Download';
+import { DELETE_FROM_CACHE, UPDATE_CACHE } from './constants/FetchConstants';
 import FetchErrorHandler from './middleware/FetchErrorHandler';
+import { dispatch, serializeData } from "@selkirk-systems/state-management";
 
 // Regular expression patterns for testing content-type response headers.
 const RE_CONTENT_TYPE_JSON = /^application\/(x-)?json/i;
@@ -14,6 +16,11 @@ const CONTENT_TYPE_DOWNLOADS = {
     'application/pdf': true,
     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': true
 }
+
+
+//30 minutes
+const CACHED_EXPIRY_TIMESTAMP = 30 * 60000;
+
 //We store the original promise.catch so we can override it in some
 //scenarios when we want to swallow errors vs bubble them up.
 const ORIGINAL_CATCH_FN = Promise.prototype.catch;
@@ -51,6 +58,8 @@ export function OnOKResponse( fn ) {
         return fn( [network, isAbort] );
     }
 }
+
+
 /**
 * Make the fetch request with the given configuration options.
 * 
@@ -66,7 +75,7 @@ export function OnOKResponse( fn ) {
 * - status.text
 * - status.isAbort
 */
-export default function Fetch( url, options = {} ) {
+function Fetch( url, options = {} ) {
 
     const config = {
         downloadFileName: null,
@@ -529,4 +538,156 @@ function normalizeTransportError( transportError, request, config ) {
         }
     } );
 
-}
+}
+
+const responseObjectJson = {
+    status: 200,
+    headers: {
+        'Content-Type': 'application/json'
+    }
+}
+
+export const getCacheByName = async ( name ) => {
+    try {
+        return caches.open( name );
+    } catch ( err ) {
+        throw ( err );
+    }
+}
+
+
+export const putJsonInCache = ( cache, url, json ) => {
+
+    const response = new Response( JSON.stringify( json ), responseObjectJson );
+
+    return cache.put( url, response )
+
+}
+
+let _cache = null;
+const DATA_METHODS = {
+    "GET": null,
+    "PATCH": null,
+    "POST": null,
+    "PUT": null
+}
+
+const fetch = ( url, options = {} ) => {
+
+
+    function cacheResponse( [response, isAbort] ) {
+
+        const status = response.status.code;
+        const headers = response.request.headers;
+        const method = response.request.method;
+
+
+        if ( status >= 200 && status < 400 && headers.get( 'content-type' ) === "application/json" ) {
+
+            if ( DATA_METHODS.hasOwnProperty( method ) || method === "GET" ) {
+
+                const data = serializeData( response.data );
+
+                if ( data.page && !data.items || data.items && data.items.length === 0 ) {
+
+                    deleteFromCache( _cache, url, response );
+
+                    return [response, isAbort];
+
+                }
+
+                const finalOptions = { ...responseObjectJson };
+                finalOptions.headers['Time-Cached'] = new Date().getTime();
+
+                const responseObj = new Response( JSON.stringify( response ), finalOptions );
+                _cache.put( url, responseObj );
+
+                dispatch( UPDATE_CACHE, { url: url, response: response } );
+
+                return [response, isAbort];
+            }
+
+            if ( method === "DELETE" ) {
+
+                deleteFromCache( _cache, url, response );
+                return [response, isAbort];
+
+            }
+
+
+        }
+
+        return [response, isAbort];
+
+    }
+
+    function cacheMatch() {
+
+        //HANDLE: Data updates, always return fresh data
+        if ( options.method && DATA_METHODS.hasOwnProperty( options.method ) ) {
+
+            return Fetch( url, options ).then( cacheResponse );
+
+        }
+
+
+        return _cache.match( url ).then( ( response ) => {
+
+            if ( response ) {
+
+                const timeCached = response.headers.get( 'Time-Cached' );
+
+                if ( expiredCache( timeCached ) ) {
+
+                    _cache.delete( url );
+                    return Fetch( url, options ).then( cacheResponse );
+
+                }
+
+                Fetch( url, options ).then( cacheResponse )
+
+                return unwrapResponseData( response ).then( ( obj ) => {
+                    return Promise.resolve( [{
+                        request: null,
+                        response: response,
+                        data: obj.data,
+                        status: {
+                            code: response.status,
+                            text: response.statusText,
+                            isAbort: false
+                        },
+                    }, false] )
+                } )
+
+
+            }
+
+            return Fetch( url, options ).then( cacheResponse );
+        } )
+    }
+
+    if ( _cache ) {
+
+        return cacheMatch()
+    }
+
+    return caches.open( 'fetch' ).then( ( cache ) => {
+        _cache = cache;
+    } ).then( cacheMatch )
+
+}
+
+function deleteFromCache( _cache, url, response ) {
+
+    _cache.delete( url );
+    dispatch( DELETE_FROM_CACHE, { url: url, response: response } );
+
+}
+
+function expiredCache( timeCached ) {
+    const now = new Date().getTime();
+
+    return Math.abs( now - timeCached ) >= CACHED_EXPIRY_TIMESTAMP;
+}
+
+export default fetch;

package/lib/constants/FetchConstants.js

@@ -0,0 +1,3 @@
+export const ADD_ERROR = "ADD_ERROR";
+export const UPDATE_CACHE = "UPDATE_CACHE";
+export const DELETE_FROM_CACHE = "DELETE_FROM_CACHE";

package/lib/index.js

@@ -1,3 +1,3 @@
 export { default as Download } from './Download';
 export { default as fetch, applyMiddleware, OnOKResponse } from './Fetch';
-export { ADD_ERROR } from "./constants/ErrorConstants";
+export * from "./constants/FetchConstants";

package/lib/middleware/FetchErrorHandler.js

@@ -1,5 +1,5 @@
 import { dispatch } from "@selkirk-systems/state-management";
-import { ADD_ERROR } from "../constants/ErrorConstants";
+import { ADD_ERROR } from "../constants/FetchConstants";
 
 const handler = ( err ) => ( response ) => ( options ) => ( next ) => {
     if ( err ) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkirk-systems/fetch",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "Abortable fetch library",
   "keywords": [],
   "author": "Marcos Bernal <mbernal@selkirksystems.com>",
@@ -36,5 +36,5 @@
   "peerDependencies": {
     "@selkirk-systems/state-management": ">=1.0.0"
   },
-  "gitHead": "9bd782d38d100b8be6ca48a23bbf2532a6b8d584"
+  "gitHead": "4f7bf2bed7794dfe4651752033317e80386bb782"
 }

package/lib/constants/ErrorConstants.js

@@ -1 +0,0 @@
-export const ADD_ERROR = "ADD_ERROR";