@selkirk-systems/fetch 1.5.2 → 1.7.0

package/lib/middleware/CacheAPI.js

@@ -0,0 +1,422 @@
+import { unwrapResponseData } from '../Fetch';
+import { DELETE_FROM_CACHE, UPDATE_CACHE } from '../constants/FetchConstants';
+import { dispatch, serializeData } from "@selkirk-systems/state-management";
+
+//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 ) {
+        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 CacheAPI

package/lib/utils/FetchUtils.js

@@ -1,6 +1,35 @@
-import Fetch from '../Fetch';
 
 
+export const 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] );
+    }
+}
+
+
+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 )
+
+}
 
 export const createUrlParams = ( params, existingParams ) => {
 
@@ -52,7 +81,7 @@ export const createUrlParams = ( params, existingParams ) => {
 }
 
 
-export async function fetchPagedURL( url, callback, options ) {
+export const fetchPagedURL = ( Fetch ) => async ( url, callback, options ) => {
 
     const finalOptions = {
         skipCache: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkirk-systems/fetch",
-  "version": "1.5.2",
+  "version": "1.7.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": "97254eb48b612c80120c1285278c8bda7c5b8874"
+  "gitHead": "66fcf1754a7a7feaece908c6368ae08efbf8d63b"
 }