closes ProjectMirador#68

handles prop updates in Window
replaces binds with arrow functions
excludes console in eslint
adds build to .gitignore
adds lerna.json

.gitignore

@@ -8,6 +8,7 @@ node_modules/
 
 # production
 lib
+build
 
 # misc
 .DS_Store

README.md

@@ -4,3 +4,4 @@ Proofs of concept for Mirador 3
 1. git clone the repository
 2. Navigate to the relevant POC, for example, `cd minimal_redux_poc`
 3. Follow the README for that POC.
+

lerna.json

@@ -0,0 +1,6 @@
+{
+  "packages": [
+    "packages/*"
+  ],
+  "version": "independent"
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "name": "root",
+  "private": true,
+  "devDependencies": {
+    "lerna": "^3.4.3"
+  }
+}

packages/mirador3-app/.eslintrc

@@ -10,6 +10,7 @@
   "parser": "babel-eslint",
   "plugins": ["jest"],
   "rules": {
+    "no-console": "off",
     "global-require": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "require-jsdoc": ["error", {

packages/mirador3-app/src/components/App.js

@@ -21,16 +21,14 @@ class App extends Component {
     this.state = {
       lastRequested: '',
     };
-
-    this.setLastRequested = this.setLastRequested.bind(this);
   }
 
   /**
    * setLastRequested - Sets the state lastRequested
    *
    * @private
    */
-  setLastRequested(requested) {
+  setLastRequested = (requested) => {
     this.setState({
       lastRequested: requested,
     });

packages/mirador3-app/src/components/ManifestForm.js

@@ -17,17 +17,14 @@ class ManifestForm extends Component {
     this.state = {
       formValue: '',
     };
-
-    this.formSubmit = this.formSubmit.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
   }
 
   /**
    * formSubmit - triggers manifest update and sets lastRequested
    * @param  {Event} event
    * @private
    */
-  formSubmit(event) {
+  formSubmit = (event) => {
     event.preventDefault();
     this.props.fetchManifest(this.state.formValue);
     this.props.setLastRequested(this.state.formValue);
@@ -38,7 +35,7 @@ class ManifestForm extends Component {
    * @param  {Event} event
    * @private
    */
-  handleInputChange(event) {
+  handleInputChange = (event) => {
     const that = this;
     event.preventDefault();
     that.setState({

packages/mirador3-app/src/components/Window.js

@@ -22,38 +22,65 @@ class Window extends Component {
    * React lifecycle event
    */
   componentDidMount() {
-    if (!this.miradorInstanceRef.current) {
-      return false;
+    this.instantiateViewer();
+    this.fetchTileSource();
+    return true;
+  }
+
+  /**
+   * React lifecycle event
+   */
+  componentDidUpdate(prevProps) {
+    if (this.props.manifest.manifestation !== prevProps.manifest.manifestation) {
+      this.instantiateViewer();
+      this.fetchTileSource();
+    }
+  }
+
+  /**
+   * instantiateViewer
+   */
+  instantiateViewer() {
+    if (this.miradorInstanceRef.current) {
+      this.viewer = OpenSeaDragon({
+        id: this.miradorInstanceRef.current.id,
+        showNavigationControl: false,
+      });
     }
-    const viewer = OpenSeaDragon({
-      id: this.miradorInstanceRef.current.id,
-      showNavigationControl: false,
-    });
-    const that = this;
-    fetch(`${this.props.manifest.manifestation.getSequences()[0].getCanvases()[0].getImages()[0].getResource().getServices()[0].id}/info.json`)
-      .then(response => response.json())
-      .then((json) => {
-        viewer.addTiledImage({
-          tileSource: json,
-          success: (event) => {
-            const tiledImage = event.item;
+  }
+
+  /**
+   * fetchTileSource
+   */
+  fetchTileSource() {
+    const { manifest } = this.props;
+    if (manifest.manifestation) {
+      fetch(
+        `${manifest.manifestation.getSequences()[0].getCanvases()[0].getImages()[0].getResource().getServices()[0].id}/info.json`,
+      )
+        .then(response => response.json())
+        .then((json) => {
+          this.viewer.addTiledImage({
+            tileSource: json,
+            success: (event) => {
+              const tiledImage = event.item;
 
-            /**
-             * A callback for the tile after its drawn
-             * @param  {[type]} e event object
-             */
-            const tileDrawnHandler = (e) => {
-              if (e.tiledImage === tiledImage) {
-                viewer.removeHandler('tile-drawn', tileDrawnHandler);
-                that.miradorInstanceRef.current.style.display = 'block';
-              }
-            };
-            viewer.addHandler('tile-drawn', tileDrawnHandler);
-          },
-        });
-      })
-      .catch(error => console.log(error));
-    return false;
+              /**
+               * A callback for the tile after its drawn
+               * @param  {[type]} e event object
+               */
+              const tileDrawnHandler = (e) => {
+                if (e.tiledImage === tiledImage) {
+                  this.viewer.removeHandler('tile-drawn', tileDrawnHandler);
+                  this.miradorInstanceRef.current.style.display = 'block';
+                }
+              };
+              this.viewer.addHandler('tile-drawn', tileDrawnHandler);
+            },
+          });
+        })
+        .catch(error => console.log(error));
+    }
   }
 
   /**
@@ -76,20 +103,24 @@ class Window extends Component {
    * @param {object} props (from react/redux)
    */
   render() {
-    return (
-      <div className={ns('window')} style={this.styleAttributes()}>
-        <div className={ns('window-heading')}>
-          <h3>{this.props.manifest.manifestation.getLabel().map(label => label.value)[0]}</h3>
+    const { manifest, window } = this.props;
+    if (manifest.manifestation) {
+      return (
+        <div className={ns('window')} style={this.styleAttributes()}>
+          <div className={ns('window-heading')}>
+            <h3>{manifest.manifestation.getLabel().map(label => label.value)[0]}</h3>
+          </div>
+          <img src={this.thumbnail()} alt="" />
+          <div
+            className={ns('osd-container')}
+            style={{ display: 'none' }}
+            id={`${window.id}-osd`}
+            ref={this.miradorInstanceRef}
+          />
         </div>
-        <img src={this.thumbnail()} alt="" />
-        <div
-          className={ns('osd-container')}
-          style={{ display: 'none' }}
-          id={`${this.props.window.id}-osd`}
-          ref={this.miradorInstanceRef}
-        />
-      </div>
-    );
+      );
+    }
+    return null;
   }
 }
 

packages/mirador3-app/src/components/test/Window.test.js

@@ -13,7 +13,7 @@ describe('Window', () => {
     [window] = store.getState().windows;
     wrapper = mount(
       <Window store={store} id={window.id} />,
-      { attachTo: document.body }
+      { attachTo: document.body },
     );
   });
 

packages/mirador3-core/.eslintrc

@@ -9,6 +9,7 @@
   },
   "plugins": ["jest"],
   "rules": {
+    "no-console": "off",
     "global-require": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "require-jsdoc": ["error", {

packages/mirador3-core/package.json

@@ -13,7 +13,6 @@
     "build:watch": "node_modules/.bin/webpack --watch"
   },
   "dependencies": {
-    "jest-fetch-mock": "^2.0.1",
     "manifesto.js": "^3.0.9",
     "node-fetch": "2.1.1",
     "redux-thunk": "2.2.0",
@@ -37,6 +36,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "jest": "23.6.0",
+    "jest-fetch-mock": "^2.0.1",
     "jest-pnp-resolver": "1.0.1",
     "jest-resolve": "23.6.0",
     "jsdom": "^13.0.0",