@selkirk-systems/fetch 1.7.0 → 1.8.0

package/dist/middleware/CacheAPI.js

@@ -1,6 +1,11 @@
 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;
@@ -22,6 +27,7 @@ const CacheAPI = Fetch => (url, options = {}) => {
 
   //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];
@@ -126,6 +132,7 @@ const CacheAPI = Fetch => (url, options = {}) => {
         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));
@@ -140,6 +147,7 @@ const CacheAPI = Fetch => (url, options = {}) => {
             }
           }, false]);
         }
+        logCacheMiss(url);
         return Fetch(url, options).then(cacheResponse);
       });
     }
@@ -147,10 +155,12 @@ const CacheAPI = Fetch => (url, options = {}) => {
       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,
@@ -164,6 +174,7 @@ const CacheAPI = Fetch => (url, options = {}) => {
           }, false]);
         });
       }
+      logCacheMiss(url);
       return Fetch(url, options).then(cacheResponse);
     });
   }
@@ -291,7 +302,7 @@ function getUUID(str) {
   };
 }
 function getCacheNameFromUrl(url) {
-  const API_REG_EXP = /p\/.+com\/(.*?)\//;
+  const API_REG_EXP = /\/.+com\/(.*?)\//;
   const matchArray = url.toString().match(API_REG_EXP);
   return matchArray && matchArray.length >= 1 ? matchArray[1] : null;
 }
@@ -299,4 +310,22 @@ 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;

package/lib/middleware/CacheAPI.js

@@ -2,6 +2,12 @@ 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;
 
@@ -29,6 +35,7 @@ const CacheAPI = ( Fetch ) => ( url, options = {} ) => {
 
     //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 );
     }
 
@@ -157,7 +164,7 @@ const CacheAPI = ( Fetch ) => ( url, options = {} ) => {
             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 );
 
@@ -175,6 +182,7 @@ const CacheAPI = ( Fetch ) => ( url, options = {} ) => {
                     }, false] )
                 }
 
+                logCacheMiss(url);
 
                 return Fetch( url, options ).then( cacheResponse );
 
@@ -191,13 +199,19 @@ const CacheAPI = ( Fetch ) => ( url, options = {} ) => {
 
                 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,
@@ -213,6 +227,8 @@ const CacheAPI = ( Fetch ) => ( url, options = {} ) => {
 
             }
 
+            logCacheMiss(url);
+
             return Fetch( url, options ).then( cacheResponse );
         } )
     }
@@ -232,6 +248,7 @@ const CacheAPI = ( Fetch ) => ( url, options = {} ) => {
 }
 
 
+
 function deleteFromCache( _cache, url, response ) {
 
     _cache.delete( url );
@@ -403,7 +420,7 @@ function getUUID( str ) {
 
 function getCacheNameFromUrl( url ) {
 
-    const API_REG_EXP = /p\/.+com\/(.*?)\//;
+    const API_REG_EXP = /\/.+com\/(.*?)\//;
     const matchArray = url.toString().match( API_REG_EXP );
 
     return matchArray && matchArray.length >= 1 ? matchArray[1] : null;
@@ -418,5 +435,35 @@ function expiredCache( timeCached ) {
 
 }
 
+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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkirk-systems/fetch",
-  "version": "1.7.0",
+  "version": "1.8.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": "66fcf1754a7a7feaece908c6368ae08efbf8d63b"
+  "gitHead": "ad61a2964c2561d8b0efa3858189319523415a29"
 }