Merge pull request #1845 from ProjectMirador/1734-thumb-canvases

Refactor ThumbnailNavigation to receive a list of canvases; fixes #1734

__tests__/src/components/ThumbnailNavigation.test.js

@@ -19,11 +19,9 @@ describe('ThumbnailNavigation', () => {
     );
     wrapper = shallow(
       <ThumbnailNavigation
-        manifest={{
-          id: 'http://foo',
-          manifestation: manifesto.create(manifestJson),
-          isFetching: false,
-        }}
+        canvases={
+          manifesto.create(manifestJson).getSequences()[0].getCanvases()
+        }
         window={{
           id: 'foobar',
           canvasIndex: 1,

__tests__/src/selectors/index.test.js

@@ -3,6 +3,7 @@ import manifestFixture from '../../fixtures/version-2/001.json';
 import {
   getWindowManifest,
   getManifestLogo,
+  getManifestCanvases,
 } from '../../../src/state/selectors';
 
 
@@ -53,3 +54,18 @@ describe('getManifestLogo()', () => {
     expect(received).toBeNull();
   });
 });
+
+describe('getManifestCanvases', () => {
+  it('returns an empty array if the manifestation is not loaded', () => {
+    const manifest = {};
+    const received = getManifestCanvases(manifest);
+    expect(received).toEqual([]);
+  });
+
+  it('returns canvases from the manifest', () => {
+    const manifest = { manifestation: manifesto.create(manifestFixture) };
+    const received = getManifestCanvases(manifest);
+    expect(received.length).toBe(1);
+    expect(received[0].id).toBe('https://iiif.bodleian.ox.ac.uk/iiif/canvas/9cca8fdd-4a61-4429-8ac1-f648764b4d6d.json');
+  });
+});

src/components/ThumbnailNavigation.js

@@ -15,28 +15,10 @@ class ThumbnailNavigation extends Component {
   constructor(props) {
     super(props);
 
-    const canvases = (props.manifest.manifestation)
-      ? props.manifest.manifestation.getSequences()[0].getCanvases() : [];
-    this.state = { canvases, manifest: props.manifest };
-
     this.cellRenderer = this.cellRenderer.bind(this);
     this.calculateScaledWidth = this.calculateScaledWidth.bind(this);
   }
 
-  /**
-   */
-  static getDerivedStateFromProps(props, state) {
-    // Any time the manifest changes,
-    // Reset any parts of state that are tied to that manifest (canvases).
-    if (props.manifest !== state.manifest) {
-      return {
-        canvases: props.manifest.manifestation.getSequences()[0].getCanvases(),
-        manifest: props.manifest,
-      };
-    }
-    return null;
-  }
-
   /**
    * Determines whether the current index is the rendered canvas, providing
    * a useful class.
@@ -57,9 +39,8 @@ class ThumbnailNavigation extends Component {
       columnIndex, key, style,
     } = options;
     const {
-      window, setCanvas, config,
+      window, setCanvas, config, canvases,
     } = this.props;
-    const { canvases } = this.state;
     const canvas = canvases[columnIndex];
     return (
       <div
@@ -90,8 +71,7 @@ class ThumbnailNavigation extends Component {
    * in this simple case, a column == canvas.
    */
   calculateScaledWidth(options) {
-    const { config } = this.props;
-    const { canvases } = this.state;
+    const { config, canvases } = this.props;
     const canvas = new ManifestoCanvas(canvases[options.index]);
     return Math.floor(config.thumbnailNavigation.height * canvas.aspectRatio) + 8;
   }
@@ -100,8 +80,7 @@ class ThumbnailNavigation extends Component {
    * Renders things
    */
   render() {
-    const { config, window } = this.props;
-    const { canvases } = this.state;
+    const { config, window, canvases } = this.props;
     if (window.thumbnailNavigationPosition === 'off') {
       return <></>;
     }
@@ -136,7 +115,7 @@ class ThumbnailNavigation extends Component {
 
 ThumbnailNavigation.propTypes = {
   config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  manifest: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   setCanvas: PropTypes.func.isRequired,
   window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };

src/containers/ThumbnailNavigation.js

@@ -3,13 +3,14 @@ import { connect } from 'react-redux';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import * as actions from '../state/actions';
 import ThumbnailNavigation from '../components/ThumbnailNavigation';
-
+import { getManifestCanvases } from '../state/selectors';
 /**
  * mapStateToProps - used to hook up state to props
  * @memberof ThumbnailNavigation
  * @private
  */
-const mapStateToProps = ({ config }) => ({
+const mapStateToProps = ({ config }, { manifest }) => ({
+  canvases: getManifestCanvases(manifest),
   config,
 });
 

src/state/selectors/index.js

@@ -20,3 +20,16 @@ export function getManifestLogo(manifest) {
   return manifest.manifestation
     && manifest.manifestation.getLogo();
 }
+
+/**
+* Return the logo of a manifest or null
+* @param {object} manifest
+* @return {String|null}
+*/
+export function getManifestCanvases(manifest) {
+  if (!manifest.manifestation) {
+    return [];
+  }
+
+  return manifest.manifestation.getSequences()[0].getCanvases();
+}