diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js index a702eeafa84f20f8e960c14aaca18f19df982897..16266e59003bab8f59620f905564bdd6a59695df 100644 --- a/__tests__/src/components/ThumbnailNavigation.test.js +++ b/__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, diff --git a/__tests__/src/selectors/index.test.js b/__tests__/src/selectors/index.test.js index 6340113a7657a0a4dc5490453f3dc5a96b00821b..3eb2acd6278fce17389e0f2d6234f1cc0279bae8 100644 --- a/__tests__/src/selectors/index.test.js +++ b/__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'); + }); +}); diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js index edf65753bb3dbbb2cd800af11e63a49aefeabbee..e7de786093b5c7dda810350049406ffb3dda4dda 100644 --- a/src/components/ThumbnailNavigation.js +++ b/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 }; diff --git a/src/containers/ThumbnailNavigation.js b/src/containers/ThumbnailNavigation.js index 9ff864133eef034210f54e973b0e812d9b9f41a1..0f7b5658f41d6a193347fe3cc898b18d54668eb4 100644 --- a/src/containers/ThumbnailNavigation.js +++ b/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, }); diff --git a/src/state/selectors/index.js b/src/state/selectors/index.js index 67cb226d861aee449ca914531e1aa0d1b8e782e0..67664ed65caa203d8680cc7578c07a335fcfc37e 100644 --- a/src/state/selectors/index.js +++ b/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(); +}