From d51d9dddede4f051fbf8e48ef45162a74e4ae447 Mon Sep 17 00:00:00 2001
From: Sam Bhagwat <calcsam@gmail.com>
Date: Wed, 27 Sep 2017 11:23:35 -0700
Subject: [PATCH] DOC-426 photo viewer doesn't update when you change the URL
 of the asset (#44)

---
 README.md                                     |  2 +-
 package.json                                  |  2 +-
 .../drivers/photo-viewer-wrapper.jsx          |  8 +++++
 src/components/drivers/photo-viewer.jsx       | 30 ++++++++++++----
 src/components/fetch-wrapper.jsx              | 35 ++++++++++---------
 5 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index c756c134..ccc91f1c 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ purposes. It is by default served via webpack-dev-server.
 
 ### To start demo app
 
-`make start` will start the demo app served by webpack-dev-server
+`make start` will start the demo app served by webpack-dev-server at localhost:8081
 
 ### Testing
 
diff --git a/package.json b/package.json
index b15b3b93..b0e592f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-file-viewer",
-  "version": "0.3.47",
+  "version": "0.3.48",
   "description": "Extendable file viewer for web",
   "main": "src/components/file-viewer.jsx",
   "module": "dist/index.js",
diff --git a/src/components/drivers/photo-viewer-wrapper.jsx b/src/components/drivers/photo-viewer-wrapper.jsx
index 7998393e..df67fb16 100644
--- a/src/components/drivers/photo-viewer-wrapper.jsx
+++ b/src/components/drivers/photo-viewer-wrapper.jsx
@@ -24,6 +24,14 @@ export default class PhotoViewerWrapper extends Component {
   }
 
   componentDidMount() {
+    this.loadFile();
+  }
+
+  componentDidUpdate() {
+    this.loadFile();
+  }
+
+  loadFile() {
     // spike on using promises and a different loader or adding three js loading manager
     const loader = new THREE.TextureLoader();
     loader.crossOrigin = '';
diff --git a/src/components/drivers/photo-viewer.jsx b/src/components/drivers/photo-viewer.jsx
index 5f147b0f..5da84f5c 100644
--- a/src/components/drivers/photo-viewer.jsx
+++ b/src/components/drivers/photo-viewer.jsx
@@ -3,14 +3,22 @@ import React, { Component } from 'react';
 import 'styles/photo-viewer.scss';
 
 export default class PhotoViewer extends Component {
+
+
   componentDidMount() {
-    const { originalWidth, originalHeight } = this.props;
-    const imageDimensions = this.getImageDimensions.call(this, originalWidth, originalHeight);
+    this.insertImage();
+  }
 
-    this.props.texture.image.style.width = `${imageDimensions.width}px`;
-    this.props.texture.image.style.height = `${imageDimensions.height}px`;
-    this.props.texture.image.setAttribute('class', 'photo');
-    document.getElementById('pg-photo-container').appendChild(this.props.texture.image);
+  componentDidUpdate() {
+    const removeCurrentImage = () => {
+      const node = document.getElementById('pg-photo-container');
+      while (node.hasChildNodes()) {
+        node.removeChild(node.lastChild);
+      }
+    };
+
+    removeCurrentImage();
+    this.insertImage();
   }
 
   getImageDimensions(originalWidth, originalHeight) {
@@ -37,6 +45,16 @@ export default class PhotoViewer extends Component {
     return { height: imgHeight, width: imgWidth };
   }
 
+  insertImage() {
+    const { originalWidth, originalHeight } = this.props;
+    const imageDimensions = this.getImageDimensions.call(this, originalWidth, originalHeight);
+
+    this.props.texture.image.style.width = `${imageDimensions.width}px`;
+    this.props.texture.image.style.height = `${imageDimensions.height}px`;
+    this.props.texture.image.setAttribute('class', 'photo');
+    document.getElementById('pg-photo-container').appendChild(this.props.texture.image);
+  }
+
   render() {
     const containerStyles = {
       width: `${this.props.width}px`,
diff --git a/src/components/fetch-wrapper.jsx b/src/components/fetch-wrapper.jsx
index 63315021..60784546 100644
--- a/src/components/fetch-wrapper.jsx
+++ b/src/components/fetch-wrapper.jsx
@@ -26,21 +26,10 @@ function withFetching(WrappedComponent, props) {
       this.abort();
     }
 
-    render() {
-      if (!this.xhr) {
-        return <h1>CORS not supported..</h1>;
-      }
-
-      if (this.state.error) {
-        return <Error {...this.props} error={this.state.error} />;
-      }
-
-      if (this.state.data) {
-        return <WrappedComponent data={this.state.data} {...this.props} />;
+    abort() {
+      if (this.xhr) {
+        this.xhr.abort();
       }
-      return (
-        <Loading />
-      );
     }
 
     createRequest(path) {
@@ -79,11 +68,23 @@ function withFetching(WrappedComponent, props) {
       this.xhr.send();
     }
 
-    abort() {
-      if (this.xhr) {
-        this.xhr.abort();
+    render() {
+      if (!this.xhr) {
+        return <h1>CORS not supported..</h1>;
+      }
+
+      if (this.state.error) {
+        return <Error {...this.props} error={this.state.error} />;
       }
+
+      if (this.state.data) {
+        return <WrappedComponent data={this.state.data} {...this.props} />;
+      }
+      return (
+        <Loading />
+      );
     }
+
   };
 }