DOC-426 photo viewer doesn't update when you change the URL of the as…

…set (#44)

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
 

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",

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 = '';

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`,

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 />
+      );
     }
+
   };
 }