@selkirk-systems/fetch 1.5.2 → 1.7.0

package/lib/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;
@@ -17,8 +15,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.
@@ -44,20 +40,6 @@ export function applyMiddleware( 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;
 }
@@ -338,7 +320,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" )
@@ -550,438 +532,5 @@ 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/lib/index.js

@@ -1,5 +1,6 @@
 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";