Use ReplaySubject for the shared observables so we can notify subscribers of changes, requires test changes because the subscriptions will never complete

Author: mnightingale

src/FileSystem.tsx

@@ -12,7 +12,7 @@ import pathLib from 'path'
 import RNFS from 'react-native-fs'
 import sha1 from 'crypto-js/sha1'
 import URL from 'url-parse'
-import { from, Observable, of } from 'rxjs'
+import { from, Observable, of, ReplaySubject } from 'rxjs'
 import {
   switchMap,
   catchError,
@@ -24,6 +24,7 @@ import {
   filter,
   delayWhen,
   concatAll,
+  take,
 } from 'rxjs/operators'
 import uuid from 'react-native-uuid'
 import { CacheStrategy } from '.'
@@ -74,7 +75,7 @@ export class FileSystem {
     }
   } = {}
   static cacheObservables: {
-    [key: string]: Observable<CacheFileInfo>
+    [key: string]: ReplaySubject<CacheFileInfo>
   } = {}
   baseFilePath: string
   cachePruneTriggerLimit: number
@@ -204,7 +205,9 @@ export class FileSystem {
     try {
       FileSystem.lockCacheFile(fileName, requestId)
 
-      const { path } = await this.observable(url, requestId, 'immutable', fileName).toPromise()
+      const { path } = await this.observable(url, requestId, 'immutable', fileName)
+        .pipe(take(1))
+        .toPromise()
 
       return path
     } finally {
@@ -261,6 +264,14 @@ export class FileSystem {
       }
     }
 
+    // Publish to subscribers that the image for this url has been updated
+    if (FileSystem.cacheObservables[fileName]) {
+      FileSystem.cacheObservables[fileName].next({
+        path: 'file://' + path,
+        fileName,
+      })
+    }
+
     return {
       url,
       path,
@@ -429,9 +440,9 @@ export class FileSystem {
     if (!FileSystem.cacheObservables[fileName]) {
       this._validatePath(fileName)
 
-      return (FileSystem.cacheObservables[fileName] = from(
-        RNFS.stat(this.baseFilePath + fileName),
-      ).pipe(
+      const subject$ = new ReplaySubject<CacheFileInfo>()
+
+      const obs$ = from(RNFS.stat(this.baseFilePath + fileName)).pipe(
         catchError(() => of(null)),
         switchMap((stat) => {
           if (stat !== null) {
@@ -461,7 +472,12 @@ export class FileSystem {
         }),
         publishReplay(1),
         refCount(),
-      ))
+      )
+
+      // Subscribe
+      obs$.subscribe((v) => subject$.next(v))
+
+      return (FileSystem.cacheObservables[fileName] = subject$)
     }
 
     return FileSystem.cacheObservables[fileName]

tests/CacheableImage.test.tsx

@@ -1,12 +1,14 @@
 import 'should'
 import { mockData } from './mockData'
-import { imageCacheHoc, ReactNativeImageCacheHocOptions } from '../src/index'
+import { FileSystem, imageCacheHoc, ReactNativeImageCacheHocOptions } from '../src/index'
 import { Image, Text } from 'react-native'
 import 'should-sinon'
 import RNFS from 'react-native-fs'
 import { shallow } from 'enzyme'
 import React from 'react'
 import { mocked } from 'ts-jest/utils'
+import { ReplaySubject } from 'rxjs'
+import { CacheFileInfo } from '../src/FileSystem'
 
 describe('CacheableImage', function () {
   const originalWarn = console.warn
@@ -145,6 +147,30 @@ describe('CacheableImage', function () {
       expect(MockedRNFS.copyFile).not.toHaveBeenCalled()
       expect(MockedRNFS.moveFile).not.toHaveBeenCalled()
     })
+
+    it('When local file and observable exist, it should be notified of changes', async (done) => {
+      FileSystem.cacheObservables[
+        '90c1be491d18ff2a7280039e9b65749461a65403.png'
+      ] = new ReplaySubject<CacheFileInfo>(1)
+
+      const CacheableImage = imageCacheHoc(Image)
+
+      const local = '/exists.png'
+      const url = 'https://example.com/exists.png'
+
+      await CacheableImage.cacheLocalFile(local, url)
+
+      FileSystem.cacheObservables['90c1be491d18ff2a7280039e9b65749461a65403.png'].subscribe(
+        (value) => {
+          expect(value).toStrictEqual({
+            path:
+              'file:///base/file/path/react-native-image-cache-hoc/90c1be491d18ff2a7280039e9b65749461a65403.png',
+            fileName: '90c1be491d18ff2a7280039e9b65749461a65403.png',
+          })
+          done()
+        },
+      )
+    })
   })
 
   it('#flush static method should work as expected.', () => {

tests/FileSystem.test.tsx

@@ -237,12 +237,13 @@ describe('FileSystem', function () {
             fileName: 'cd7d2199cd8e088cdfd9c99fc6359666adc36289.png',
           })
         },
-        complete: () => {
-          expect(onNext).toBeCalledTimes(1)
-          expect(MockedRNFS.downloadFile).not.toHaveBeenCalled()
-          FileSystem.unlockCacheFile(fileName, requestId)
-          done()
-        },
+      })
+
+      setImmediate(() => {
+        expect(onNext).toBeCalledTimes(1)
+        expect(MockedRNFS.downloadFile).not.toHaveBeenCalled()
+        FileSystem.unlockCacheFile(fileName, requestId)
+        done()
       })
     })
 
@@ -268,12 +269,13 @@ describe('FileSystem', function () {
             fileName: 'cd7d2199cd8e088cdfd9c99fc6359666adc36289.png',
           })
         },
-        complete: () => {
-          expect(onNext).toBeCalledTimes(1)
-          expect(MockedRNFS.downloadFile).toHaveBeenCalled()
-          FileSystem.unlockCacheFile(fileName, requestId)
-          done()
-        },
+      })
+
+      setImmediate(() => {
+        expect(onNext).toBeCalledTimes(1)
+        expect(MockedRNFS.downloadFile).toHaveBeenCalled()
+        FileSystem.unlockCacheFile(fileName, requestId)
+        done()
       })
     })
 
@@ -325,12 +327,13 @@ describe('FileSystem', function () {
             fileName: 'cd7d2199cd8e088cdfd9c99fc6359666adc36289.png',
           })
         },
-        complete: () => {
-          expect(onNext).toBeCalledTimes(2)
-          expect(MockedRNFS.downloadFile).toHaveBeenCalled()
-          FileSystem.unlockCacheFile(fileName, requestId)
-          done()
-        },
+      })
+
+      setImmediate(() => {
+        expect(onNext).toBeCalledTimes(2)
+        expect(MockedRNFS.downloadFile).toHaveBeenCalled()
+        FileSystem.unlockCacheFile(fileName, requestId)
+        done()
       })
     })
 
@@ -385,12 +388,13 @@ describe('FileSystem', function () {
             fileName: 'cd7d2199cd8e088cdfd9c99fc6359666adc36289.png',
           })
         },
-        complete: () => {
-          expect(onNext).toBeCalledTimes(1)
-          expect(MockedRNFS.downloadFile).toHaveBeenCalled()
-          FileSystem.unlockCacheFile(fileName, requestId)
-          done()
-        },
+      })
+
+      setImmediate(() => {
+        expect(onNext).toBeCalledTimes(1)
+        expect(MockedRNFS.downloadFile).toHaveBeenCalled()
+        FileSystem.unlockCacheFile(fileName, requestId)
+        done()
       })
     })