@selkirk-systems/fetch 1.5.2 → 1.8.0

package/dist/Fetch.js

@@ -1,9 +1,7 @@
 //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;
@@ -15,9 +13,6 @@ const CONTENT_TYPE_DOWNLOADS = {
   '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;
@@ -39,17 +34,6 @@ export function applyMiddleware(middleware = []) {
   _middlewares = middleware;
   _middlewares.push(FetchErrorHandler);
 }
-export function OnOKResponse(fn) {
-  return ([network, isAbort]) => {
-    //Is any status is outside 200 - 299 it is not ok
-    if (network.status.code < 200 || network.status.code >= 300 || isAbort) {
-      return [network, isAbort];
-    }
-
-    //Run the function since its all ok
-    return fn([network, isAbort]);
-  };
-}
 function isServiceWorker() {
   return self;
 }
@@ -265,7 +249,7 @@ function _applyMiddleware(err, response, options) {
 * Unwrap the response payload from the given response based on the reported
 * content-type.
 */
-async function unwrapResponseData(response) {
+export async function unwrapResponseData(response) {
   var contentType = response.headers.has("content-type") ? response.headers.get("content-type") : "";
   if (RE_CONTENT_TYPE_JSON.test(contentType)) {
     return response.json();
@@ -421,311 +405,4 @@ 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);
-};
-const _caches = {};
-const _updatingCache = {};
-const DATA_METHODS = {
-  "GET": null,
-  "PATCH": null,
-  "POST": null,
-  "PUT": null
-};
-const _fetch = (url, options = {}) => {
-  const cacheName = getCacheNameFromUrl(url);
-
-  //HANDLE: Service worker BS, environment is different don't cache if were in a service worker.
-  if (!self || !cacheName) {
-    return Fetch(url, options);
-  }
-  let _cache = _caches[cacheName];
-  async 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)) {
-        const data = serializeData(response.data);
-
-        //HANDLE: List/Array like responses
-        if (data.page && !data.items || data.items && data.items.length === 0) {
-          deleteFromCache(_cache, url, response);
-          return [response, isAbort];
-        }
-
-        //HANDLE: Record like response
-        if (data.id) {
-          let uuid = getUUID(url.toString());
-          let matchOptions = {};
-          if (method === "POST") {
-            uuid = {
-              id: data.id,
-              shortPath: url.toString()
-            };
-          }
-
-          /**
-           * POST new records are hard, what cached list do we put the new record in? what about sort? blag. Don't have a good answer yet
-           * For now, new records will be put in the first cached entry that matches at the 0 index, this 'should' be page=0 cached entries
-           * and the records should all show  up in UI at the top. This is the most common UX for adding records to a list, 
-           * one day some how figure out a less fragile robust method.
-           * 
-           * Perhaps we should just refetch all the matched cache urls... but this could be huge and slow and network heavy...
-           */
-          await cacheFindAllLike({
-            cache: _cache,
-            url: uuid.shortPath,
-            property: "id",
-            value: data.id,
-            method: method
-          }).then(async matches => {
-            if (matches.length) {
-              const finalOptions = {
-                ...responseObjectJson
-              };
-              finalOptions.headers['Time-Cached'] = new Date().getTime();
-              await matches.forEach(async match => {
-                const items = extractDataArray(match.data);
-
-                //This is where we put the new record on the top of the cached list, even if a new network request would place it somewhere
-                // else based on sort etc.
-                if (method === "POST") {
-                  items.unshift(data);
-                } else {
-                  items[match.matchIndex] = data;
-                }
-                const responseObj = new Response(JSON.stringify(match.data), finalOptions);
-                dispatch(UPDATE_CACHE, {
-                  url: new URL(match.request.url),
-                  response: match.response
-                });
-                return _cache.put(match.request.url, responseObj);
-              });
-            }
-          });
-          return [response, isAbort];
-        }
-        const finalOptions = {
-          ...responseObjectJson
-        };
-        finalOptions.headers['Time-Cached'] = new Date().getTime();
-        const responseObj = new Response(JSON.stringify(response.data), 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.skipCache || options.method && DATA_METHODS.hasOwnProperty(options.method)) {
-      return Fetch(url, options).then(cacheResponse);
-    }
-    const uuid = getUUID(url.toString());
-
-    //HANDLE: individual records, if we are looking for a record check cache for any array or search results with this record
-    if (uuid.id) {
-      return cacheFindLike({
-        cache: _cache,
-        url: uuid.shortPath,
-        property: "id",
-        value: uuid.id
-      }).then(match => {
-        if (match) {
-          //Behind the scenes still fetch the record and update the cache but don't make the user wait for it.
-          Fetch(url, options).then(cacheResponse);
-          const responseObj = new Response(JSON.stringify(match.match));
-          return Promise.resolve([{
-            request: null,
-            response: responseObj,
-            data: match.match,
-            status: {
-              code: 200,
-              text: '',
-              isAbort: false
-            }
-          }, false]);
-        }
-        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);
-        }
-        return unwrapResponseData(response).then(obj => {
-          Fetch(url, options).then(cacheResponse);
-          return Promise.resolve([{
-            request: null,
-            response: response,
-            data: obj,
-            status: {
-              code: response.status,
-              text: response.statusText,
-              isAbort: false
-            }
-          }, false]);
-        });
-      }
-      return Fetch(url, options).then(cacheResponse);
-    });
-  }
-  if (_cache) {
-    return cacheMatch();
-  }
-  return caches.open(cacheName).then(cache => {
-    _caches[cacheName] = cache;
-    _cache = cache;
-  }).then(cacheMatch);
-};
-function deleteFromCache(_cache, url, response) {
-  _cache.delete(url);
-  dispatch(DELETE_FROM_CACHE, {
-    url: url,
-    response: response
-  });
-}
-function cacheFindAllLike(options) {
-  const finalOptions = {
-    ...options,
-    findAll: true
-  };
-  return cacheFindLike(finalOptions);
-}
-function cacheFindLike(options) {
-  const cache = options.cache;
-  const url = options.url;
-  const property = options.property;
-  const value = options.value;
-  const findAll = options.findAll;
-  const matchOptions = options.matchOptions;
-  const method = options.method || "GET";
-  return cache.keys().then(keys => {
-    const matchingRequests = [];
-    for (let i = 0; i < keys.length; i++) {
-      const request = keys[i];
-      if (looksLikeResultListUrl(request.url, url)) {
-        matchingRequests.push(cache.match(request, matchOptions).then(match => {
-          match._request = request;
-          return match;
-        }));
-      }
-    }
-    return Promise.all(matchingRequests).then(responses => {
-      let count = 0;
-      const ret = [];
-      const checkCache = async index => {
-        if (index >= responses.length) return ret;
-        return serializeResponse(responses[index]).then(json => {
-          const items = extractDataArray(json);
-          const response = responses[count];
-          const retObj = {
-            request: response._request,
-            response: response,
-            data: json,
-            match: json,
-            matchIndex: -1,
-            status: {
-              code: response.status,
-              text: response.statusText,
-              isAbort: false
-            }
-          };
-          if (method === "POST") {
-            return findAll ? [retObj] : retObj;
-          }
-          const matchIndex = items.findIndex(item => item[property] === value);
-          count++;
-          if (matchIndex >= 0) {
-            retObj.match = items[matchIndex];
-            retObj.matchIndex = matchIndex;
-            if (!findAll) {
-              return retObj;
-            } else {
-              ret.push(retObj);
-            }
-            return checkCache(count);
-          }
-          if (count >= responses.length) {
-            return findAll ? ret : null;
-          }
-          return checkCache(count);
-        });
-      };
-      if (!responses || !responses.length) return findAll ? ret : null;
-      return checkCache(count);
-    });
-  });
-}
-
-/**
- * Check if request.url looks like a list result type url, if it contains a UUID it is likely not.
- * @param {*} requestURL 
- * @param {*} matchURL 
- * @returns 
- */
-function looksLikeResultListUrl(requestURL, matchURL) {
-  const uuid = getUUID(requestURL.toString());
-  return !uuid.id && requestURL.indexOf(matchURL) >= 0;
-}
-function extractDataArray(obj) {
-  for (var prop in obj._embedded) {
-    if (!obj._embedded.hasOwnProperty(prop)) continue;
-    return obj._embedded[prop];
-  }
-  return [obj];
-}
-async function serializeResponse(response) {
-  return response.text().then(data => {
-    return JSON.parse(data);
-  });
-}
-function getUUID(str) {
-  const UUID_REG_EXP = /.+([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}).*?/;
-  const match = UUID_REG_EXP.exec(str);
-  let id, shortPath;
-  if (match && match[1]) {
-    id = match[1];
-    shortPath = str.split(`/${id}`)[0];
-  }
-  return {
-    id: id,
-    shortPath: shortPath
-  };
-}
-function getCacheNameFromUrl(url) {
-  const API_REG_EXP = /p\/.+com\/(.*?)\//;
-  const matchArray = url.toString().match(API_REG_EXP);
-  return matchArray && matchArray.length >= 1 ? matchArray[1] : null;
-}
-function expiredCache(timeCached) {
-  const now = new Date().getTime();
-  return Math.abs(now - timeCached) >= CACHED_EXPIRY_TIMESTAMP;
-}
-export default _fetch;
+export default Fetch;

package/dist/index.js

@@ -1,4 +1,5 @@
 export { default as Download } from './Download';
-export { default as fetch, applyMiddleware, OnOKResponse } from './Fetch';
+export { default as fetch, applyMiddleware } from './Fetch';
+export { default as CacheAPI } from './middleware/CacheAPI';
 export * from "./utils/FetchUtils";
 export * from "./constants/FetchConstants";

package/dist/middleware/CacheAPI.js

@@ -0,0 +1,331 @@
+import { unwrapResponseData } from '../Fetch';
+import { DELETE_FROM_CACHE, UPDATE_CACHE } from '../constants/FetchConstants';
+import { dispatch, serializeData } from "@selkirk-systems/state-management";
+const grayCSS = "color:gray;font-weight:lighter";
+const blueCSS = "color:#87A7DB;font-weight:lighter";
+const bodyCSS = "font-weight:bold";
+const prevCSS = "color:gray;font-weight:bold";
+const nextCSS = "color:#6bc679;font-weight:bold";
+
+//30 minutes
+const CACHED_EXPIRY_TIMESTAMP = 30 * 60000;
+const _caches = {};
+const DATA_METHODS = {
+  "GET": null,
+  "PATCH": null,
+  "POST": null,
+  "PUT": null
+};
+const responseObjectJson = {
+  status: 200,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+};
+const CacheAPI = Fetch => (url, options = {}) => {
+  const cacheName = getCacheNameFromUrl(url);
+
+  //HANDLE: Service worker BS, environment is different don't cache if were in a service worker.
+  if (!self || !cacheName) {
+    console.log(`CacheAPI.getCacheNameFromUrl: No cacheName found in - ${url.toString()} `);
+    return Fetch(url, options);
+  }
+  let _cache = _caches[cacheName];
+  async 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)) {
+        const data = serializeData(response.data);
+
+        //HANDLE: List/Array like responses
+        if (data.page && !data.items || data.items && data.items.length === 0) {
+          deleteFromCache(_cache, url, response);
+          return [response, isAbort];
+        }
+
+        //HANDLE: Record like response
+        if (data.id) {
+          let uuid = getUUID(url.toString());
+          let matchOptions = {};
+          if (method === "POST") {
+            uuid = {
+              id: data.id,
+              shortPath: url.toString()
+            };
+          }
+
+          /**
+           * POST new records are hard, what cached list do we put the new record in? what about sort? blag. Don't have a good answer yet
+           * For now, new records will be put in the first cached entry that matches at the 0 index, this 'should' be page=0 cached entries
+           * and the records should all show  up in UI at the top. This is the most common UX for adding records to a list, 
+           * one day some how figure out a less fragile robust method.
+           * 
+           * Perhaps we should just refetch all the matched cache urls... but this could be huge and slow and network heavy...
+           */
+          await cacheFindAllLike({
+            cache: _cache,
+            url: uuid.shortPath,
+            property: "id",
+            value: data.id,
+            method: method
+          }).then(async matches => {
+            if (matches.length) {
+              const finalOptions = {
+                ...responseObjectJson
+              };
+              finalOptions.headers['Time-Cached'] = new Date().getTime();
+              await matches.forEach(async match => {
+                const items = extractDataArray(match.data);
+
+                //This is where we put the new record on the top of the cached list, even if a new network request would place it somewhere
+                // else based on sort etc.
+                if (method === "POST") {
+                  items.unshift(data);
+                } else {
+                  items[match.matchIndex] = data;
+                }
+                const responseObj = new Response(JSON.stringify(match.data), finalOptions);
+                dispatch(UPDATE_CACHE, {
+                  url: new URL(match.request.url),
+                  response: match.response
+                });
+                return _cache.put(match.request.url, responseObj);
+              });
+            }
+          });
+          return [response, isAbort];
+        }
+        const finalOptions = {
+          ...responseObjectJson
+        };
+        finalOptions.headers['Time-Cached'] = new Date().getTime();
+        const responseObj = new Response(JSON.stringify(response.data), 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.skipCache || options.method && DATA_METHODS.hasOwnProperty(options.method)) {
+      return Fetch(url, options).then(cacheResponse);
+    }
+    const uuid = getUUID(url.toString());
+
+    //HANDLE: individual records, if we are looking for a record check cache for any array or search results with this record
+    if (uuid.id) {
+      return cacheFindLike({
+        cache: _cache,
+        url: uuid.shortPath,
+        property: "id",
+        value: uuid.id
+      }).then(match => {
+        if (match) {
+          logCacheHit(url, match.match);
+          //Behind the scenes still fetch the record and update the cache but don't make the user wait for it.
+          Fetch(url, options).then(cacheResponse);
+          const responseObj = new Response(JSON.stringify(match.match));
+          return Promise.resolve([{
+            request: null,
+            response: responseObj,
+            data: match.match,
+            status: {
+              code: 200,
+              text: '',
+              isAbort: false
+            }
+          }, false]);
+        }
+        logCacheMiss(url);
+        return Fetch(url, options).then(cacheResponse);
+      });
+    }
+    return _cache.match(url).then(response => {
+      if (response) {
+        const timeCached = response.headers.get('Time-Cached');
+        if (expiredCache(timeCached)) {
+          logCacheExpired(url, response);
+          _cache.delete(url);
+          return Fetch(url, options).then(cacheResponse);
+        }
+        return unwrapResponseData(response).then(obj => {
+          logCacheHit(url, obj, timeCached);
+          Fetch(url, options).then(cacheResponse);
+          return Promise.resolve([{
+            request: null,
+            response: response,
+            data: obj,
+            status: {
+              code: response.status,
+              text: response.statusText,
+              isAbort: false
+            }
+          }, false]);
+        });
+      }
+      logCacheMiss(url);
+      return Fetch(url, options).then(cacheResponse);
+    });
+  }
+  if (_cache) {
+    return cacheMatch();
+  }
+  return caches.open(cacheName).then(cache => {
+    _caches[cacheName] = cache;
+    _cache = cache;
+  }).then(cacheMatch);
+};
+function deleteFromCache(_cache, url, response) {
+  _cache.delete(url);
+  dispatch(DELETE_FROM_CACHE, {
+    url: url,
+    response: response
+  });
+}
+function cacheFindAllLike(options) {
+  const finalOptions = {
+    ...options,
+    findAll: true
+  };
+  return cacheFindLike(finalOptions);
+}
+function cacheFindLike(options) {
+  const cache = options.cache;
+  const url = options.url;
+  const property = options.property;
+  const value = options.value;
+  const findAll = options.findAll;
+  const matchOptions = options.matchOptions;
+  const method = options.method || "GET";
+  return cache.keys().then(keys => {
+    const matchingRequests = [];
+    for (let i = 0; i < keys.length; i++) {
+      const request = keys[i];
+      if (looksLikeResultListUrl(request.url, url)) {
+        matchingRequests.push(cache.match(request, matchOptions).then(match => {
+          match._request = request;
+          return match;
+        }));
+      }
+    }
+    return Promise.all(matchingRequests).then(responses => {
+      let count = 0;
+      const ret = [];
+      const checkCache = async index => {
+        if (index >= responses.length) return ret;
+        return serializeResponse(responses[index]).then(json => {
+          const items = extractDataArray(json);
+          const response = responses[count];
+          const retObj = {
+            request: response._request,
+            response: response,
+            data: json,
+            match: json,
+            matchIndex: -1,
+            status: {
+              code: response.status,
+              text: response.statusText,
+              isAbort: false
+            }
+          };
+          if (method === "POST") {
+            return findAll ? [retObj] : retObj;
+          }
+          const matchIndex = items.findIndex(item => item[property] === value);
+          count++;
+          if (matchIndex >= 0) {
+            retObj.match = items[matchIndex];
+            retObj.matchIndex = matchIndex;
+            if (!findAll) {
+              return retObj;
+            } else {
+              ret.push(retObj);
+            }
+            return checkCache(count);
+          }
+          if (count >= responses.length) {
+            return findAll ? ret : null;
+          }
+          return checkCache(count);
+        });
+      };
+      if (!responses || !responses.length) return findAll ? ret : null;
+      return checkCache(count);
+    });
+  });
+}
+
+/**
+ * Check if request.url looks like a list result type url, if it contains a UUID it is likely not.
+ * @param {*} requestURL 
+ * @param {*} matchURL 
+ * @returns 
+ */
+function looksLikeResultListUrl(requestURL, matchURL) {
+  const uuid = getUUID(requestURL.toString());
+  return !uuid.id && requestURL.indexOf(matchURL) >= 0;
+}
+function extractDataArray(obj) {
+  for (var prop in obj._embedded) {
+    if (!obj._embedded.hasOwnProperty(prop)) continue;
+    return obj._embedded[prop];
+  }
+  return [obj];
+}
+async function serializeResponse(response) {
+  return response.text().then(data => {
+    return JSON.parse(data);
+  });
+}
+function getUUID(str) {
+  const UUID_REG_EXP = /.+([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}).*?/;
+  const match = UUID_REG_EXP.exec(str);
+  let id, shortPath;
+  if (match && match[1]) {
+    id = match[1];
+    shortPath = str.split(`/${id}`)[0];
+  }
+  return {
+    id: id,
+    shortPath: shortPath
+  };
+}
+function getCacheNameFromUrl(url) {
+  const API_REG_EXP = /\/.+com\/(.*?)\//;
+  const matchArray = url.toString().match(API_REG_EXP);
+  return matchArray && matchArray.length >= 1 ? matchArray[1] : null;
+}
+function expiredCache(timeCached) {
+  const now = new Date().getTime();
+  return Math.abs(now - timeCached) >= CACHED_EXPIRY_TIMESTAMP;
+}
+function logCacheHit(url, cache, timeCached) {
+  console.groupCollapsed(`%ccache %cHIT %c${url}`, blueCSS, bodyCSS, grayCSS);
+  console.log(`Cached at: ${new Date(parseInt(timeCached, 10))}`);
+  console.log(`Data`, cache);
+  console.log(`URL`, url);
+  console.groupEnd();
+}
+function logCacheExpired(url, cache) {
+  console.groupCollapsed(`%ccache %cEXPIRED %c${url}`, blueCSS, bodyCSS, grayCSS);
+  console.log(`URL`, url);
+  console.log(`Cache`, cache);
+  console.groupEnd();
+}
+function logCacheMiss(url) {
+  console.groupCollapsed(`%ccache %cMISS %c${url}`, blueCSS, bodyCSS, grayCSS);
+  console.log(`URL`, url);
+  console.groupEnd();
+}
+export default CacheAPI;