FIX Save fetched files so details button works after pagination

client/src/containers/AssetAdmin/AssetAdmin.js

@@ -52,6 +52,10 @@ class AssetAdmin extends Component {
     this.handleUploadQueue = this.handleUploadQueue.bind(this);
     this.handleCreateFolder = this.handleCreateFolder.bind(this);
     this.handleMoveFilesSuccess = this.handleMoveFilesSuccess.bind(this);
+    // this is used as a fallback to the regular graphql query which is limited to
+    // current pagination limit this is used when we need to access previously fetched
+    // data after a second subsequent graphql query has updated props.files
+    this.fetchedFiles = {};
   }
 
   componentWillReceiveProps(props) {
@@ -60,6 +64,14 @@ class AssetAdmin extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    // Save file data in case we need to use it later after paginating the gallery
+    prevProps.files.forEach(file => {
+      this.fetchedFiles[file.id] = file;
+    });
+    return true;
+  }
+
   /**
    * Get logical folder ID to display
    */
@@ -524,8 +536,11 @@ class AssetAdmin extends Component {
    */
   findFile(fileId) {
     const allFiles = this.getFiles();
-
-    return allFiles.find((item) => item.id === parseInt(fileId, 10));
+    const file = allFiles.find((item) => item.id === parseInt(fileId, 10));
+    if (file) {
+      return file;
+    }
+    return this.fetchedFiles.hasOwnProperty(fileId) ? this.fetchedFiles[fileId] : undefined;
   }
 
   handleUpload() {

client/src/containers/AssetAdmin/tests/AssetAdmin-test.js

@@ -9,6 +9,10 @@ jest.mock('containers/BulkDeleteConfirmation/BulkDeleteConfirmation');
 import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import { Component as AssetAdmin } from '../AssetAdmin';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16/build/index';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 function getMockFile(id) {
   return {
@@ -274,6 +278,43 @@ describe('AssetAdmin', () => {
     });
   });
 
+  describe('findFiles', () => {
+    beforeEach(() => {
+      props.files = [];
+      props.queuedFiles = { items: [] };
+      props.folderId = 99;
+      props.onReplaceUrl = () => {};
+    });
+    it('saves files between updates', () => {
+      let fileProps = {
+        files: [
+          { id: 1, name: 'file one', type: 'image/jpeg', parent: { id: 99 } },
+          { id: 2, name: 'file two', type: 'image/jpeg', parent: { id: 99 } }
+        ]
+      };
+      let newProps = { ...props, ...fileProps };
+      const wrapper = shallow(<AssetAdmin {...newProps} />);
+      const wrapper2 = shallow(<AssetAdmin {...newProps} />);
+      expect(wrapper.instance().findFile(1).id).toEqual(1);
+      expect(wrapper.instance().findFile(3)).toBeFalsy();
+      expect(wrapper2.instance().findFile(1).id).toEqual(1);
+      expect(wrapper2.instance().findFile(3)).toBeFalsy();
+      fileProps = {
+        files: [
+          { id: 3, name: 'file three', type: 'image/jpeg', parent: { id: 99 } },
+          { id: 4, name: 'file four', type: 'image/jpeg', parent: { id: 99 } }
+        ]
+      };
+      newProps = { ...props, ...fileProps };
+      wrapper.setProps(newProps);
+      // (don't setProps on wrapper2)
+      expect(wrapper.instance().findFile(1).id).toEqual(1);
+      expect(wrapper.instance().findFile(3).id).toEqual(3);
+      expect(wrapper2.instance().findFile(1).id).toEqual(1);
+      expect(wrapper2.instance().findFile(3)).toBeFalsy();
+    });
+  });
+
   describe('getFiles', () => {
     const deriveFilesIDs = (_props) => {
       props = { ...props, ..._props };