Misc fixes and features

package.json

@@ -28,7 +28,6 @@
     "start": "lerna run start --stream --parallel --concurrency 100",
     "build": "NODE_ENV=production lerna run build && lerna link",
     "build-all": "lerna run build",
-    "precommit": "lint-staged",
     "release": "fesk-release",
     "merge": "fesk-merge",
     "link": "lerna link",
@@ -55,5 +54,10 @@
       "packages/iiif-redux/__tests__/fixtures",
       "packages/iiif-redux/__tests__/api/3\\.x/[A-Za-z\\-]+/fixtures"
     ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   }
 }

packages/iiif-redux-cookbook/package.json

@@ -13,9 +13,10 @@
   },
   "dependencies": {
     "@reach/router": "1.2.1",
+    "@types/react": "^16.8.0",
     "iiif-redux": "1.0.0",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
+    "react": "16.8.0-alpha.1",
+    "react-dom": "16.8.0-alpha.1",
     "react-redux": "6.0.0",
     "redux": "4.0.1"
   },

packages/iiif-redux-cookbook/src/components/App/App.js

@@ -1,10 +1,15 @@
-import React, { Component } from 'react';
+import React, { Component, PureComponent } from 'react';
 import { Provider } from 'react-redux';
 import { Link, Router } from '@reach/router';
 import { createStore } from 'iiif-redux';
 import './App.css';
 import ManifestSimple from '../ManifestSimple/ManifestSimple';
 import CanvasList from '../CanvasList/CanvasList';
+import { Manifest, ManifestContext } from '../../context/manifest';
+import t from '../../utils/t';
+import TestManifestContext from '../ManifestWithContext/ManifestWithContext';
+import HooksExample from '../HooksExample/HooksExample';
+import HookViewer from '../HookViewer/HookViewer';
 
 const store = createStore();
 
@@ -23,16 +28,52 @@ const Home = () => (
       <li>
         <Link to="/canvases-simple-p3">Canvases simple (Presentation 3)</Link>
       </li>
+      <h3>React 16 Context</h3>
+      <li>
+        <Link to="/manifest-context">Manifest context (p2)</Link>
+      </li>
+      <li>
+        <Link to="/hooks/1">Hooks example 1</Link>
+      </li>
+      <li>
+        <Link to="/hooks/2">Hooks example 2</Link>
+      </li>
     </ul>
   </div>
 );
 
+const ContextTest = () => (
+  <div>
+    <Manifest id="https://wellcomelibrary.org/iiif/b18035723/manifest">
+      <TestManifestContext />
+    </Manifest>
+  </div>
+);
+
+const HooksTest = () => (
+  <div>
+    <Manifest id="https://wellcomelibrary.org/iiif/b18035723/manifest">
+      <HooksExample />
+    </Manifest>
+  </div>
+);
+
+const HooksViewerTest = () => (
+  <div>
+    <Manifest id="https://wellcomelibrary.org/iiif/b18035723/manifest">
+      <HookViewer />
+    </Manifest>
+  </div>
+);
+
 class App extends Component {
   render() {
     return (
       <Provider store={store}>
         <div className="app">
-          <h1>IIIF Redux demos</h1>
+          <Link to="/" as="h1">
+            <h1>IIIF Redux demos</h1>
+          </Link>
           <Router>
             <Home path="/" default />
             <ManifestSimple
@@ -51,6 +92,9 @@ class App extends Component {
               path="/canvases-simple-p3"
               id="https://raw.githubusercontent.com/digirati-co-uk/prezi2to3-js/master/tests/spec/fixtures/out/manifests.britishart.yale.edu__manifest__1474.json"
             />
+            <ContextTest path="/manifest-context" />
+            <HooksTest path="/hooks/1" />
+            <HooksViewerTest path="/hooks/2" />
           </Router>
         </div>
       </Provider>

packages/iiif-redux-cookbook/src/components/CanvasList/CanvasList.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import connect from '../../hoc/connect';
 import { manifestByIdSelector } from 'iiif-redux/es/api/manifest';
 import { canvases } from 'iiif-redux/es/api/canvas';
-import { iiifResourceRequestUnknown } from 'iiif-redux/es/spaces/iiif-resource';
-import withLoadingState from '../../hoc/withLoadingState';
 import t from '../../utils/t';
 
 class CanvasList extends Component {
@@ -30,6 +28,5 @@ export default connect(
     canvasList: canvases(currentManifest.getCanvases, canvas => ({
       label: canvas.getLabel,
     })),
-  })),
-  { iiifResourceRequestUnknown }
-)(withLoadingState(CanvasList));
+  }))
+)(CanvasList);

packages/iiif-redux-cookbook/src/components/HookViewer/HookViewer.js

@@ -0,0 +1,98 @@
+import React, { useContext, useState } from 'react';
+import {
+  Canvas,
+  ManifestContext,
+  useCanvas,
+  useManifest,
+} from '../../context/manifest';
+import t from '../../utils/t';
+import { canvases } from 'iiif-redux/src/api/canvas';
+
+// This is all the bits we need for the canvas listing page.
+const manifestSelector = manifest => ({
+  label: manifest.getLabel,
+  canvasList: canvases(manifest.getCanvases, canvas => ({
+    id: canvas.getId,
+    label: canvas.getLabel,
+  })),
+});
+
+// This is our image viewer, very very simple.
+function ImageViewer() {
+  const { id, label, thumbnailId } = useCanvas();
+
+  return (
+    <div>
+      <div>
+        {t(label)} ({id})
+      </div>
+      <img src={thumbnailId} alt={t(label)} />
+    </div>
+  );
+}
+
+// This is an abstraction to get the manifest loading state.
+function useManifestLoaded() {
+  const { manifest } = useContext(ManifestContext);
+  return manifest.fetched;
+}
+
+const styles = {
+  container: { display: 'flex' },
+  left: { width: 300, margin: 20 },
+  right: { flex: '1 0 0%', margin: 20 },
+  link: { cursor: 'pointer', margin: 4, background: '#eee', listStyle: 'none' },
+  list: { margin: 0, padding: 0, textAlign: 'center' },
+};
+
+// This is our viewer.
+function HookViewer() {
+  // Get the fetched status of our manifest
+  const fetched = useManifestLoaded();
+  // Grab the label and list
+  const { label, canvasList } = useManifest(manifestSelector);
+  // Create some state to manage the current manifest
+  const [currentCanvas, setCurrentCanvas] = useState();
+
+  // If we're fetching, return early.
+  if (fetched === false) {
+    return <div>Loading...</div>;
+  }
+
+  // Render our viewer.
+  return (
+    <div style={styles.container}>
+      <div style={styles.left}>
+        <h3>{t(label)}</h3>
+        <ul style={styles.list}>
+          {canvasList.map(canvas => (
+            // Here we are setting the canvas id for our viewer.
+            <li
+              style={styles.link}
+              key={canvas.id}
+              onClick={() => setCurrentCanvas(canvas.id)}
+            >
+              {t(canvas.label)}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div style={styles.right}>
+        {/*
+          Here we are creating a new "Context" for the select canvas.
+          This will be available to ALL children no matter how deep
+          using `useCanvas` hook.
+        */}
+        {currentCanvas ? (
+          <Canvas id={currentCanvas}>
+            <ImageViewer />
+          </Canvas>
+        ) : (
+          <div>Please Select a canvas</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default HookViewer;

packages/iiif-redux-cookbook/src/components/HooksExample/HooksExample.js

@@ -0,0 +1,107 @@
+import React, { useContext } from 'react';
+import { ManifestContext, useManifest } from '../../context/manifest';
+import t from '../../utils/t';
+import { externalResources } from 'iiif-redux/src/api/external-resource';
+
+function Example1() {
+  // Default selector.
+  const { label } = useManifest();
+
+  return (
+    <div>
+      <h3>Example 1</h3>
+      <b>Label:</b> {t(label)}
+    </div>
+  );
+}
+
+function Example2() {
+  // Single field, custom selector.
+  const license = useManifest(api => api.getLicense);
+
+  return (
+    <div>
+      <h3>Example 2</h3>
+      <b>License:</b> {license}
+    </div>
+  );
+}
+
+function Example3() {
+  // You can call useManifest more than once.
+  const label = useManifest(api => api.getLabel);
+  const license = useManifest(api => api.getLicense);
+
+  return (
+    <div>
+      <h3>Example 3</h3>
+      <b>Label:</b> {t(label)} <br />
+      <b>License:</b> {license}
+    </div>
+  );
+}
+
+function Example4() {
+  // Bigger example, 2 fields selected at once.
+  const { label, metadata } = useManifest(api => ({
+    label: api.getLabel,
+    metadata: api.getMetadata,
+  }));
+
+  // Also selecting the see also links (note you will be able to leave second)
+  //   argument blank to get sensible default selector.
+  const seeAlso = useManifest(manifest =>
+    // This could also have been combined into the selector above, but is
+    //  split out for clarity.
+    externalResources(manifest.getSeeAlso, resource => ({
+      id: resource.getId,
+      format: resource.getFormat,
+    }))
+  );
+
+  const linkStyle = { margin: 5, padding: 5, border: '2px solid #000' };
+
+  return (
+    <div>
+      <h3>Example 4</h3>
+      <b>Label:</b> {t(label)}
+      {metadata.map((pair, n) => (
+        <div key={n}>
+          <b>{t(pair.label)}</b>:{' '}
+          <span dangerouslySetInnerHTML={{ __html: t(pair.value) }} />
+        </div>
+      ))}
+      <div>
+        <h4>See also</h4>
+        {seeAlso.map(link => (
+          <div key={link.id} style={linkStyle}>
+            <b>Id:</b> {link.id} <br />
+            <b>format:</b> {link.format}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function HooksExample() {
+  // Pure hooks example.
+  const { manifest } = useContext(ManifestContext);
+
+  if (manifest.fetched === false) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Example1 />
+      <Example2 />
+      <Example3 />
+      <Example4 />
+    </div>
+  );
+
+  return <div>Hooks example {t(manifest.label)}</div>;
+}
+
+export default HooksExample;

packages/iiif-redux-cookbook/src/components/ManifestSimple/ManifestSimple.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
 import { manifestByIdSelector } from 'iiif-redux/es/api/manifest';
-import { iiifResourceRequestUnknown } from 'iiif-redux/es/spaces/iiif-resource';
-import withLoadingState from '../../hoc/withLoadingState';
+import connect from '../../hoc/connect';
 import t from '../../utils/t';
 
 class ManifestSimple extends Component {
@@ -51,6 +49,5 @@ export default connect(
     license: currentManifest.getLicense,
     logo: currentManifest.getLogo,
     metadata: currentManifest.getMetadata,
-  })),
-  { iiifResourceRequestUnknown }
-)(withLoadingState(ManifestSimple));
+  }))
+)(ManifestSimple);

packages/iiif-redux-cookbook/src/components/ManifestWithContext/ManifestWithContext.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import t from '../../utils/t';
+import { ManifestContext } from '../../context/manifest';
+
+class TestManifestContext extends Component {
+  static contextType = ManifestContext;
+
+  render() {
+    const { manifest } = this.context;
+
+    if (manifest.fetched === false) {
+      return <div>Loading...</div>;
+    }
+
+    return <div>Manifest label: {t(manifest.label)}</div>;
+  }
+}
+
+export default TestManifestContext;