Merge pull request #1801 from hmhealey/plt1602

PLT-1602 Fix ViewImageModal incorrectly assuming it has a file's info in certain cases

web/react/components/view_image.jsx

@@ -31,19 +31,12 @@ export default class ViewImageModal extends React.Component {
         this.onMouseEnterImage = this.onMouseEnterImage.bind(this);
         this.onMouseLeaveImage = this.onMouseLeaveImage.bind(this);
 
-        const loaded = [];
-        const progress = [];
-        for (var i = 0; i < this.props.filenames.length; i++) {
-            loaded.push(false);
-            progress.push(0);
-        }
-
         this.state = {
             imgId: this.props.startId,
-            fileInfo: new Map(),
+            fileInfo: null,
             imgHeight: '100%',
-            loaded,
-            progress,
+            loaded: Utils.fillArray(false, this.props.filenames.length),
+            progress: Utils.fillArray(0, this.props.filenames.length),
             showFooter: false
         };
     }
@@ -104,17 +97,28 @@ export default class ViewImageModal extends React.Component {
         } else if (nextProps.show === false && this.props.show === true) {
             this.onModalHidden();
         }
+
+        if (!Utils.areObjectsEqual(this.props.filenames, nextProps.filenames)) {
+            this.setState({
+                loaded: Utils.fillArray(false, nextProps.filenames.length),
+                progress: Utils.fillArray(0, nextProps.filenames.length)
+            });
+        }
     }
 
     onFileStoreChange(filename) {
         const id = this.props.filenames.indexOf(filename);
 
-        if (id !== -1 && !this.state.loaded[id]) {
-            const fileInfo = this.state.fileInfo;
-            fileInfo.set(filename, FileStore.getInfo(filename));
-            this.setState({fileInfo});
+        if (id !== -1) {
+            if (id === this.state.imgId) {
+                this.setState({
+                    fileInfo: FileStore.getInfo(filename)
+                });
+            }
 
-            this.loadImage(id, filename);
+            if (!this.state.loaded[id]) {
+                this.loadImage(id, filename);
+            }
         }
     }
 
@@ -132,6 +136,10 @@ export default class ViewImageModal extends React.Component {
             return;
         }
 
+        this.setState({
+            fileInfo: FileStore.getInfo(filename)
+        });
+
         if (!this.state.loaded[id]) {
             this.loadImage(id, filename);
         }
@@ -227,8 +235,8 @@ export default class ViewImageModal extends React.Component {
 
         var content;
         if (this.state.loaded[this.state.imgId]) {
-            // if a file has been loaded, we also have its info
-            const fileInfo = this.state.fileInfo.get(filename);
+            // this.state.fileInfo is for the current image and we shoudl have it before we load the image
+            const fileInfo = this.state.fileInfo;
 
             const extension = Utils.splitFileLocation(filename).ext;
             const fileType = Utils.getFileType(extension);

web/react/utils/utils.jsx

@@ -1261,3 +1261,13 @@ export function isFeatureEnabled(feature) {
 export function isSystemMessage(post) {
     return post.type && (post.type.lastIndexOf(Constants.SYSTEM_MESSAGE_PREFIX) === 0);
 }
+
+export function fillArray(value, length) {
+    const arr = [];
+
+    for (let i = 0; i < length; i++) {
+        arr.push(value);
+    }
+
+    return arr;
+}