[cache] Allow caching behaviour to be configurable

README.md

@@ -131,6 +131,60 @@ import Avatar, { ConfigProvider } from 'react-avatar';
 | `initials` | *function* | [defaultInitials][3] | A function that derives the initials from the component props, the method should have the signature `fn(name, props)`  |
 | `avatarRedirectUrl`  | *URL*          | `undefined`  | Base URL to a [Avatar Redirect](#avatar-redirect) instance |
 
+**Example**
+
+```html
+import Avatar, { ConfigProvider } from 'react-avatar';
+
+<ConfigProvider colors={['red', 'green', 'blue']}>
+    <YourApp>
+        ...
+        <Avatar name="Wim Mostmans" />
+        ...
+    </YourApp>
+</ConfigProvider>
+
+```
+
+### Cache
+
+This class represents the default implementation of the cache used by react-avatar.
+
+Looking to implement more complex [custom cache behaviour](#implementing-a-custom-cache)?
+
+|   Attribute   |      Options      | Default |                                              Description                                               |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `cachePrefix`   | *string*          | `react-avatar/`  | The prefix for `localStorage` keys used by the cache. |
+| `sourceTTL`   | *number*          | 604800000 (7 days)  | The amount of time a failed source is kept in cache. (in milliseconds) |
+| `sourceSize`  | *number*          | 20      | The maximum number of failed source entries to keep in cache at any time. |
+
+**usage**
+
+```html
+import Avatar, { Cache, ConfigProvider } from 'react-avatar';
+
+const cache = new Cache({
+
+    // Keep cached source failures for up to 7 days
+    sourceTTL: 7 * 24 * 3600 * 1000,
+
+    // Keep a maximum of 20 entries in the source cache
+    sourceSize: 20
+});
+
+// Apply cache globally
+<ConfigProvider cache={cache}>
+    <YourApp>
+        ...
+        <Avatar name="Wim Mostmans" />
+        ...
+    </YourApp>
+</ConfigProvider>
+
+// For specific instances
+<Avatar name="Wim Mostmans" cache={cache} />
+
+```
 
 ### Avatar Redirect
 
@@ -205,4 +259,4 @@ For detailed changelog, check [Releases](https://github.com/sitebase/react-avata
 
 [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/length
 [2]: https://github.com/JorgenEvens/avatar-redirect
-[3]: https://github.com/Sitebase/react-avatar/blob/master/src/utils.js
+[3]: https://github.com/Sitebase/react-avatar/blob/master/src/utils.js

src/cache.js

@@ -9,7 +9,21 @@ const _hasLocalStorage = (function isLocalStorageAvailable() {
     }
 }());
 
-export default {
+export
+class Cache {
+
+    constructor(options = {}) {
+        const {
+            cachePrefix = CACHE_PREFIX,
+            sourceTTL = 7 * 24 * 3600 * 1000,
+            sourceSize = 20
+        } = options;
+
+        this.cachePrefix = cachePrefix;
+        this.sourceTTL = sourceTTL;
+        this.sourceSize = sourceSize;
+    }
+
     set(key, value) {
         // cache not available
         if (!_hasLocalStorage)
@@ -18,42 +32,59 @@ export default {
         value = JSON.stringify(value);
 
         try {
-            localStorage.setItem(CACHE_PREFIX + key, value);
+            localStorage.setItem(this.cachePrefix + key, value);
         } catch(e) {
             // failsafe for mobile Safari private mode
             console.error(e); // eslint-disable-line no-console
         }
-    },
+    }
+
     get(key) {
         // cache not available
         if (!_hasLocalStorage)
             return null;
 
-        const value = localStorage.getItem(CACHE_PREFIX + key);
+        const value = localStorage.getItem(this.cachePrefix + key);
 
         if (value)
             return JSON.parse(value);
 
         return null;
-    },
+    }
 
     sourceFailed(source) {
         let cacheList = this.get(CACHE_KEY_FAILING) || [];
 
-        // already in cache
-        if(cacheList.indexOf(source) > -1)
-            return;
+        // Remove expired entries or previous instances of this source
+        cacheList = cacheList.filter(entry => {
+            const hasExpired = entry.expires > 0 && entry.expires < Date.now();
+            const isMatch = entry === source || entry.url == source;
+
+            return !hasExpired && !isMatch;
+        });
 
-        cacheList.push(source);
+        // Add the source to the end of the list
+        cacheList.unshift({
+            url: source,
+            expires: Date.now() + this.sourceTTL
+        });
 
-        // only keep the last 20 results so we don't fill up local storage
-        cacheList = cacheList.slice(-20);
+        // only keep the last X results so we don't fill up local storage
+        cacheList = cacheList.slice(0, this.sourceSize - 1);
 
         return this.set(CACHE_KEY_FAILING, cacheList);
-    },
+    }
 
     hasSourceFailedBefore(source) {
         const cacheList = this.get(CACHE_KEY_FAILING) || [];
-        return cacheList.indexOf(source) > -1;
+
+        return cacheList.some(entry => {
+            const hasExpired = entry.expires > 0 && entry.expires < Date.now();
+            const isMatch = entry === source || entry.url == source;
+
+            return isMatch && !hasExpired;
+        });
     }
-};
+}
+
+export default new Cache();

src/index.js

@@ -3,6 +3,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
+import { Cache } from './cache';
 import {withConfig, ConfigProvider} from './context';
 import {getRandomColor, parseSize, setGroupedTimeout} from './utils';
 import InternalState from './internal-state';
@@ -38,6 +39,7 @@ const sourcePropTypes = SOURCES.reduce((r, s) => Object.assign(r, s.propTypes),
 
 export {getRandomColor} from './utils';
 export {ConfigProvider} from './context';
+export {Cache} from './cache';
 
 function matchSource(Source, props, cb) {
     const { cache } = props;
@@ -137,6 +139,8 @@ class Avatar extends PureComponent {
     }
 
     static getRandomColor = getRandomColor
+
+    static Cache = Cache;
     static ConfigProvider = ConfigProvider
 
     _createFetcher = (internal) => (errEvent) => {
@@ -340,5 +344,6 @@ class Avatar extends PureComponent {
 
 export default Object.assign(withConfig(Avatar), {
     getRandomColor,
-    ConfigProvider
+    ConfigProvider,
+    Cache
 });