Merge pull request billmalarky#17 from billmalarky/issue-16

Issue 16

Author: billmalarky

lib/imageCacheHoc.js

@@ -145,15 +145,61 @@ export default function imageCacheHoc(Image, options = {}) {
       // Track component mount status to avoid calling setState() on unmounted component.
       this._isMounted = true;
 
+      // Set url from source prop
+      const url = traverse(this.props).get(['source', 'uri']);
+
       // Add a cache lock to file with this name (prevents concurrent <CacheableImage> components from pruning a file with this name from cache).
-      const fileName = await this.fileSystem.getFileNameFromUrl(traverse(this.props).get(['source', 'uri']));
+      const fileName = await this.fileSystem.getFileNameFromUrl(url);
       FileSystem.lockCacheFile(fileName, this.componentId);
 
+      // Init the image cache logic
+      await this._loadImage(url);
+
+    }
+
+    /**
+     *
+     * Enables caching logic to work if component source prop is updated (that is, the image url changes without mounting a new component).
+     * See: https://github.com/billmalarky/react-native-image-cache-hoc/pull/15
+     *
+     * @param nextProps {Object} - Props that will be passed to component.
+     */
+    async componentWillReceiveProps(nextProps) {
+
+      // Set urls from source prop data
+      const url = traverse(this.props).get(['source', 'uri']);
+      const nextUrl = traverse(nextProps).get(['source', 'uri']);
+
+      // Do nothing if url has not changed.
+      if (url === nextUrl) return;
+
+      // Remove component cache lock on old image file, and add cache lock to new image file.
+      const fileName = await this.fileSystem.getFileNameFromUrl(url);
+      const nextFileName = await this.fileSystem.getFileNameFromUrl(nextUrl);
+
+      FileSystem.unlockCacheFile(fileName, this.componentId);
+      FileSystem.lockCacheFile(nextFileName, this.componentId);
+
+      // Init the image cache logic
+      await this._loadImage(nextUrl);
+
+    }
+
+    /**
+     *
+     * Executes the image download/cache logic and calls setState() with to re-render
+     * component using local file path on completion.
+     *
+     * @param url {String} - The remote image url.
+     * @private
+     */
+    async _loadImage(url) {
+
       // Check local fs for file, fallback to network and write file to disk if local file not found.
       const permanent = this.props.permanent ? true : false;
       let localFilePath = null;
       try {
-        localFilePath = await this.fileSystem.getLocalFilePathFromUrl(traverse(this.props).get(['source', 'uri']), permanent);
+        localFilePath = await this.fileSystem.getLocalFilePathFromUrl(url, permanent);
       } catch (error) {
         console.warn(error); // eslint-disable-line no-console
       }
@@ -207,4 +253,4 @@ export default function imageCacheHoc(Image, options = {}) {
 
   };
 
-}
+}

tests/CacheableImage.test.js

@@ -296,6 +296,56 @@ describe('CacheableImage', function() {
 
   });
 
+  it('#_loadImage should warn developer on error getting local file path.', () => {
+
+    const CacheableImage = imageCacheHoc(Image);
+
+    const imageUrl = 'https://img.wennermedia.com/5333a62d-07db-432a-92e2-198cafa38a14-326adb1a-d8ed-4a5d-b37e-5c88883e1989.png';
+
+    const cacheableImage = new CacheableImage({ // eslint-disable-line no-unused-vars
+      source: {
+        uri: imageUrl
+      }
+    });
+
+    const testError = new Error('Test error');
+
+    cacheableImage.fileSystem.getLocalFilePathFromUrl = () => {
+      throw testError;
+    };
+
+    // Cache console.warn
+    const consoleWarnCache = console.warn; // eslint-disable-line no-console
+
+    console.warn = sinon.spy(); // eslint-disable-line no-console
+
+    cacheableImage._loadImage(imageUrl);
+
+    console.warn.should.be.calledWithExactly(testError); // eslint-disable-line no-console
+
+    // Re-apply console.warn
+    console.warn = consoleWarnCache; // eslint-disable-line no-console
+
+  });
+
+  it('componentWillReceiveProps should not throw any uncaught errors.', () => {
+
+    const CacheableImage = imageCacheHoc(Image);
+
+    const cacheableImage = new CacheableImage({ // eslint-disable-line no-unused-vars
+      source: {
+        uri: 'https://img.wennermedia.com/5333a62d-07db-432a-92e2-198cafa38a14-326adb1a-d8ed-4a5d-b37e-5c88883e1989.png'
+      }
+    });
+
+    cacheableImage.componentWillReceiveProps({ // eslint-disable-line no-unused-vars
+      source: {
+        uri: 'https://img.wennermedia.com/wallpaper1-39bd413b-cb85-4af0-9f33-3507f272e562.jpg'
+      }
+    });
+
+  });
+
   it('#render with valid props does not throw an error.', () => {
 
     const CacheableImage = imageCacheHoc(Image);

tests/__snapshots__/imageCacheHoc.test.js.snap

@@ -62,6 +62,7 @@ exports[`CacheableImage renders correctly with placeholder option set 1`] = `
   <Image
     style={
       Object {
+        "backgroundColor": "#dc143c",
         "height": 204,
         "width": 150,
       }

tests/imageCacheHoc.test.js

@@ -184,7 +184,9 @@ describe('CacheableImage', function() {
       }
     };
 
-    const CacheableImage = imageCacheHoc(Image, optionPlaceholder);
+    const CacheableImage = imageCacheHoc(Image, {
+      defaultPlaceholder: optionPlaceholder
+    });
 
     const tree = renderer.create(
       <View style={styles.container}>