@selkirk-systems/fetch 1.0.11 → 1.2.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,10 @@ export function OnOKResponse(fn) {
     return fn([network, isAbort]);
   };
 }
+function isServiceWorker() {
+  return self;
+}
+
 /**
 * Make the fetch request with the given configuration options.
 * 
@@ -59,7 +69,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",
@@ -104,9 +114,11 @@ export default function Fetch(url, options = {}) {
       // For form data posts, we want the browser to build the Content-
       // Type for us so that it puts in both the "multipart/form-data" plus the
       // correct, auto-generated field delimiter.
-      delete finalHeaders["content-type"];
-      finalMethod = "POST";
-      finalBody = buildFormData(config.form);
+      //delete ( finalHeaders["content-type"] );
+
+      //finalMethod = "POST";
+      //finalBody = buildFormData( config.form );
+      finalBody = config.form;
     } else if (config.json) {
       finalHeaders["content-type"] = config.contentType || "application/x-json";
       finalBody = JSON.stringify(config.json);
@@ -115,7 +127,7 @@ export default function Fetch(url, options = {}) {
     } else {
       finalHeaders["content-type"] = config.contentType;
     }
-    request = new window.Request(finalUrl, {
+    request = new Request(finalUrl, {
       headers: finalHeaders,
       method: finalMethod,
       body: finalBody,
@@ -129,7 +141,7 @@ export default function Fetch(url, options = {}) {
 
     //Cache requests abort signal by url
     cacheRequestSignal(finalUrl, finalSignal);
-    config._promiseChain = Promise.resolve(window.fetch(request)).then(async response => {
+    config._promiseChain = Promise.resolve(fetch(request)).then(async response => {
       deleteCachedRequestSignal(finalUrl);
       const data = await unwrapResponseData(response);
       if (response.ok) {
@@ -287,7 +299,12 @@ function buildFormData(form) {
 function buildURL(url, templateData, params) {
   if (url.href) return url;
   const formattedUrl = buildURLTemplate(url, templateData);
-  const finalUrl = new URL(formattedUrl, `${window.location.origin}${window.baseUrl || ""}`);
+  let finalUrl;
+  if (self) {
+    finalUrl = new URL(formattedUrl);
+  } else {
+    finalUrl = new URL(formattedUrl, `${window.location.origin}${window.baseUrl || ""}`);
+  }
   const searchParams = new URLSearchParams();
   Object.entries(params).forEach(([key, value]) => {
     if (Array.isArray(value)) {
@@ -403,4 +420,110 @@ 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 = {}) => {
+  if (self) {
+    return 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);
@@ -8,30 +8,33 @@ const handler = err => response => options => next => {
   return next(null, response);
 };
 
-// NOTE: event name is all lower case as per DOM convention
-window.addEventListener("unhandledrejection", function (e) {
-  // NOTE: e.preventDefault() must be manually called to prevent the default
-  // action which is currently to log the stack trace to console.warn
-  e.preventDefault();
-  // NOTE: parameters are properties of the event detail property
-  var reason = e.reason || e.detail.reason;
-  //var promise = e.detail.promise;
-  // See Promise.onPossiblyUnhandledRejection for parameter documentation
-  console.groupEnd();
-  console.groupEnd();
-  console.groupEnd();
-  throw reason;
-});
+//HANDLE: Not being called from a service worker
+if (!self) {
+  // NOTE: event name is all lower case as per DOM convention
+  window.addEventListener("unhandledrejection", function (e) {
+    // NOTE: e.preventDefault() must be manually called to prevent the default
+    // action which is currently to log the stack trace to console.warn
+    e.preventDefault();
+    // NOTE: parameters are properties of the event detail property
+    var reason = e.reason || e.detail.reason;
+    //var promise = e.detail.promise;
+    // See Promise.onPossiblyUnhandledRejection for parameter documentation
+    console.groupEnd();
+    console.groupEnd();
+    console.groupEnd();
+    throw reason;
+  });
 
-// NOTE: event name is all lower case as per DOM convention
-window.addEventListener("rejectionhandled", function (e) {
-  // NOTE: e.preventDefault() must be manually called prevent the default
-  // action which is currently unset (but might be set to something in the future)
-  e.preventDefault();
-  // NOTE: parameters are properties of the event detail property
-  var promise = e.reason || e.detail.promise;
-  // See Promise.onUnhandledRejectionHandled for parameter documentation
-  console.groupEnd();
-  console.log("REJECTION HANDLED", promise);
-});
+  // NOTE: event name is all lower case as per DOM convention
+  window.addEventListener("rejectionhandled", function (e) {
+    // NOTE: e.preventDefault() must be manually called prevent the default
+    // action which is currently unset (but might be set to something in the future)
+    e.preventDefault();
+    // NOTE: parameters are properties of the event detail property
+    var promise = e.reason || e.detail.promise;
+    // See Promise.onUnhandledRejectionHandled for parameter documentation
+    console.groupEnd();
+    console.log("REJECTION HANDLED", promise);
+  });
+}
 export default handler;

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,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;
@@ -51,6 +57,12 @@ export function OnOKResponse( fn ) {
         return fn( [network, isAbort] );
     }
 }
+
+function isServiceWorker() {
+    return self;
+}
+
+
 /**
 * Make the fetch request with the given configuration options.
 * 
@@ -66,7 +78,7 @@ export function OnOKResponse( fn ) {
 * - status.text
 * - status.isAbort
 */
-export default function Fetch( url, options = {} ) {
+function Fetch( url, options = {} ) {
 
     const config = {
         downloadFileName: null,
@@ -121,10 +133,11 @@ export default function Fetch( url, options = {} ) {
             // For form data posts, we want the browser to build the Content-
             // Type for us so that it puts in both the "multipart/form-data" plus the
             // correct, auto-generated field delimiter.
-            delete ( finalHeaders["content-type"] );
+            //delete ( finalHeaders["content-type"] );
 
-            finalMethod = "POST";
-            finalBody = buildFormData( config.form );
+            //finalMethod = "POST";
+            //finalBody = buildFormData( config.form );
+            finalBody = config.form;
 
         } else if ( config.json ) {
 
@@ -140,7 +153,7 @@ export default function Fetch( url, options = {} ) {
             finalHeaders["content-type"] = config.contentType;
         }
 
-        request = new window.Request(
+        request = new Request(
             finalUrl,
             {
                 headers: finalHeaders,
@@ -158,7 +171,7 @@ export default function Fetch( url, options = {} ) {
         //Cache requests abort signal by url
         cacheRequestSignal( finalUrl, finalSignal );
 
-        config._promiseChain = Promise.resolve( window.fetch( request ) )
+        config._promiseChain = Promise.resolve( fetch( request ) )
             .then( async ( response ) => {
 
                 deleteCachedRequestSignal( finalUrl );
@@ -381,8 +394,14 @@ function buildURL( url, templateData, params ) {
     if ( url.href ) return url;
 
     const formattedUrl = buildURLTemplate( url, templateData );
+    let finalUrl;
 
-    const finalUrl = new URL( formattedUrl, `${window.location.origin}${window.baseUrl || ""}` );
+    if ( self ) {
+        finalUrl = new URL( formattedUrl );
+    }
+    else {
+        finalUrl = new URL( formattedUrl, `${window.location.origin}${window.baseUrl || ""}` );
+    }
 
     const searchParams = new URLSearchParams();
 
@@ -529,4 +548,159 @@ 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 = {} ) => {
+
+    if ( self ) {
+        return 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 ) {
@@ -11,32 +11,35 @@ const handler = ( err ) => ( response ) => ( options ) => ( next ) => {
     return next( null, response );
 };
 
-// NOTE: event name is all lower case as per DOM convention
-window.addEventListener( "unhandledrejection", function ( e ) {
-    // NOTE: e.preventDefault() must be manually called to prevent the default
-    // action which is currently to log the stack trace to console.warn
-    e.preventDefault();
-    // NOTE: parameters are properties of the event detail property
-    var reason = e.reason || e.detail.reason;
-    //var promise = e.detail.promise;
-    // See Promise.onPossiblyUnhandledRejection for parameter documentation
-    console.groupEnd();
-    console.groupEnd();
-    console.groupEnd();
-    throw reason;
-} );
+//HANDLE: Not being called from a service worker
+if ( !self ) {
+    // NOTE: event name is all lower case as per DOM convention
+    window.addEventListener( "unhandledrejection", function ( e ) {
+        // NOTE: e.preventDefault() must be manually called to prevent the default
+        // action which is currently to log the stack trace to console.warn
+        e.preventDefault();
+        // NOTE: parameters are properties of the event detail property
+        var reason = e.reason || e.detail.reason;
+        //var promise = e.detail.promise;
+        // See Promise.onPossiblyUnhandledRejection for parameter documentation
+        console.groupEnd();
+        console.groupEnd();
+        console.groupEnd();
+        throw reason;
+    } );
 
-// NOTE: event name is all lower case as per DOM convention
-window.addEventListener( "rejectionhandled", function ( e ) {
-    // NOTE: e.preventDefault() must be manually called prevent the default
-    // action which is currently unset (but might be set to something in the future)
-    e.preventDefault();
-    // NOTE: parameters are properties of the event detail property
-    var promise = e.reason || e.detail.promise;
-    // See Promise.onUnhandledRejectionHandled for parameter documentation
-    console.groupEnd();
-    console.log( "REJECTION HANDLED", promise );
-} );
+    // NOTE: event name is all lower case as per DOM convention
+    window.addEventListener( "rejectionhandled", function ( e ) {
+        // NOTE: e.preventDefault() must be manually called prevent the default
+        // action which is currently unset (but might be set to something in the future)
+        e.preventDefault();
+        // NOTE: parameters are properties of the event detail property
+        var promise = e.reason || e.detail.promise;
+        // See Promise.onUnhandledRejectionHandled for parameter documentation
+        console.groupEnd();
+        console.log( "REJECTION HANDLED", promise );
+    } );
+}
 
 export default handler;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkirk-systems/fetch",
-  "version": "1.0.11",
+  "version": "1.2.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": "5898e1276808bd3fe25d44f3935befe00c54513e"
 }

package/lib/constants/ErrorConstants.js

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