Move LocalStorage plugin to a configurable plugin that is an adapter

demo/src/index.js

 
 import mirador from 'mirador/dist/es/src/index';
 
-import { miradorAnnotationPlugin, localStorageAnnotationPlugin } from '../../src';
+import { miradorAnnotationPlugin, externalStorageAnnotationPlugin } from '../../src';
+import LocalStorageAdapter from '../../src/LocalStorageAdapter';
 
 const config = {
+  annotation: {
+    adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
+  },
   id: 'demo',
   windows: [{
-    loadedManifest: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
+    loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
   }],
 };
 
-const miradorInstance = mirador.viewer(config, [
+mirador.viewer(config, [
   miradorAnnotationPlugin,
-  localStorageAnnotationPlugin,
+  externalStorageAnnotationPlugin,
 ]);

package.json

@@ -20,7 +20,9 @@
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch"
   },
-  "dependencies": {},
+  "dependencies": {
+    "uuid": "^8.0.0"
+  },
   "peerDependencies": {
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",

src/AnnotationCreation.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import { v4 as uuid } from 'uuid';
 
 /** */
 class AnnotationCreation extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+    this.state = { annoBody: '' };
+
+    this.submitForm = this.submitForm.bind(this);
+    this.updateBody = this.updateBody.bind(this);
+  }
+
+  /** */
+  submitForm(e) {
+    e.preventDefault();
+    const { canvases, receiveAnnotation, config } = this.props;
+    const { annoBody } = this.state;
+
+    canvases.forEach((canvas) => {
+      const localStorageAdapter = config.annotation.adapter(canvas.id);
+      const anno = {
+        body: {
+          language: 'en',
+          type: 'TextualBody',
+          value: annoBody,
+        },
+        id: `https://example.org/iiif/book1/page/manifest/${uuid()}`,
+        motivation: 'commenting',
+        target: `${canvas.id}#xywh=200,500,1000,1000`,
+        type: 'Annotation',
+      };
+      const newAnnoPage = localStorageAdapter.create(anno);
+      receiveAnnotation(canvas.id, localStorageAdapter.annotationPageId, newAnnoPage);
+    });
+  }
+
+  /** */
+  updateBody(e) {
+    this.setState({ annoBody: e.target.value });
+  }
+
   /** */
   render() {
+    const { annoBody } = this.state;
+
     return (
       <div>
-        Annotation creation
+        <form onSubmit={this.submitForm}>
+          <TextField
+            multiline
+            rows={6}
+            value={annoBody}
+            onChange={this.updateBody}
+          />
+          <Button>
+            Cancel
+          </Button>
+          <Button variant="contained" color="primary" type="submit">
+            Save
+          </Button>
+        </form>
       </div>
     );
   }
 }
 
+AnnotationCreation.propTypes = {
+  canvases: PropTypes.arrayOf(
+    PropTypes.shape({ id: PropTypes.string, index: PropTypes.number }),
+  ),
+  config: PropTypes.shape({
+    annotation: PropTypes.shape({
+      adapter: PropTypes.func,
+    }),
+  }).isRequired,
+  receiveAnnotation: PropTypes.func.isRequired,
+};
+
+AnnotationCreation.defaultProps = {
+  canvases: [],
+};
+
+
 export default AnnotationCreation;

src/LocalStorageAdapter.js

+/** */
+export default class LocalStorageAdapter {
+  /** */
+  constructor(annotationPageId) {
+    this.annotationPageId = annotationPageId;
+  }
+
+  /** */
+  create(annotation) {
+    const emptyAnnoPage = {
+      id: this.annotationPageId,
+      items: [],
+      type: 'AnnotationPage',
+    };
+    const annotationPage = this.all() || emptyAnnoPage;
+    annotationPage.items.push(annotation);
+    localStorage.setItem(this.annotationPageId, JSON.stringify(annotationPage));
+    return annotationPage;
+  }
+
+  /** */
+  // update(annoId) {
+  //   // todo
+  // }
+
+  /** */
+  delete(annoId) {
+    const annotationPage = this.all();
+    if (annotationPage) {
+      annotationPage.items = annotationPage.items.filter((item) => item.id !== annoId);
+    }
+    localStorage.setItem(this.annotationPageId, JSON.stringify(annotationPage));
+    return annotationPage;
+  }
+
+  /** */
+  all() {
+    return JSON.parse(localStorage.getItem(this.annotationPageId));
+  }
+}

src/index.js

 export miradorAnnotationPlugin from './plugins/miradorAnnotationPlugin';
-export localStorageAnnotationPlugin from './plugins/localStorageAnnotationPlugin';
+export externalStorageAnnotationPlugin from './plugins/externalStorageAnnotationPlugin';

src/plugins/localStorageAnnotationPlugin.js → src/plugins/externalStorageAnnotationPlugin.js

@@ -5,7 +5,7 @@ import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases
 import isEqual from 'lodash/isEqual';
 
 /** */
-class LocalStorageAnnotation extends Component {
+class ExternalStorageAnnotation extends Component {
   /** */
   constructor(props) {
     super(props);
@@ -15,10 +15,6 @@ class LocalStorageAnnotation extends Component {
   /** */
   componentDidMount() {
     const { canvases } = this.props;
-
-    const anno = [{"@context":"http://iiif.io/api/presentation/2/context.json","@type":"oa:Annotation","motivation":["oa:commenting"],"resource":[{"@type":"dctypes:Text","format":"text/html","chars":"<p>stuff is here</p>"}],"on":[{"@type":"oa:SpecificResource","full":"https://purl.stanford.edu/sn904cj3429/iiif/canvas/sn904cj3429_1","selector":{"@type":"oa:Choice","default":{"@type":"oa:FragmentSelector","value":"xywh=2321,4718,1604,1435"},"item":{"@type":"oa:SvgSelector","value":"<svg xmlns='http://www.w3.org/2000/svg'><path xmlns=\"http://www.w3.org/2000/svg\" d=\"M2321.22749,4717.73662h802.13042v0h802.13042v717.39547v717.39547h-802.13042h-802.13042v-717.39547z\" data-paper-data=\"{&quot;strokeWidth&quot;:1,&quot;rotation&quot;:0,&quot;deleteIcon&quot;:null,&quot;rotationIcon&quot;:null,&quot;group&quot;:null,&quot;editable&quot;:true,&quot;annotation&quot;:null}\" id=\"rectangle_934e692c-1773-4528-832e-f5c440c9f52c\" fill-opacity=\"0\" fill=\"#00bfff\" fill-rule=\"nonzero\" stroke=\"#00bfff\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"/></svg>"}},"within":{"@id":"https://purl.stanford.edu/sn904cj3429/iiif/manifest","@type":"sc:Manifest"}}],"@id":"f0229551-4d8a-4f2e-a891-dcb2149268bb"}]
-    localStorage.setItem('https://purl.stanford.edu/sn904cj3429/iiif/canvas/sn904cj3429_1', JSON.stringify(anno));
-
     this.retrieveAnnotations(canvases);
   }
 
@@ -34,18 +30,13 @@ class LocalStorageAnnotation extends Component {
 
   /** */
   retrieveAnnotations(canvases) {
-    const { receiveAnnotation } = this.props;
-    console.log('retrieve');
+    const { config, receiveAnnotation } = this.props;
+
     canvases.forEach((canvas) => {
-      const annos = JSON.parse(localStorage.getItem(canvas.id));
-      if (annos) {
-        const annoListId = `${canvas.id}/localStorage/annoList`;
-        const annoList = {
-          '@id': annoListId,
-          '@type': 'sc:AnnotationList',
-          resources: annos,
-        };
-        receiveAnnotation(canvas.id, annoListId, annoList);
+      const storageAdapter = config.annotation.adapter(canvas.id);
+      const annoPage = storageAdapter.all();
+      if (annoPage) {
+        receiveAnnotation(canvas.id, storageAdapter.annotationPageId, annoPage);
       }
     });
   }
@@ -61,10 +52,15 @@ class LocalStorageAnnotation extends Component {
   }
 }
 
-LocalStorageAnnotation.propTypes = {
+ExternalStorageAnnotation.propTypes = {
   canvases: PropTypes.arrayOf(
     PropTypes.shape({ id: PropTypes.string, index: PropTypes.number }),
   ),
+  config: PropTypes.shape({
+    annotation: PropTypes.shape({
+      adapter: PropTypes.func,
+    }),
+  }).isRequired,
   receiveAnnotation: PropTypes.func.isRequired,
   TargetComponent: PropTypes.oneOfType([
     PropTypes.func,
@@ -73,7 +69,7 @@ LocalStorageAnnotation.propTypes = {
   targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-LocalStorageAnnotation.defaultProps = {
+ExternalStorageAnnotation.defaultProps = {
   canvases: [],
 };
 
@@ -91,7 +87,7 @@ function mapStateToProps(state, { targetProps }) {
 }
 
 export default {
-  component: LocalStorageAnnotation,
+  component: ExternalStorageAnnotation,
   mapDispatchToProps,
   mapStateToProps,
   mode: 'wrap',

src/plugins/miradorAnnotationPlugin.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as actions from 'mirador/dist/es/src/state/actions';
 import Button from '@material-ui/core/Button';
+import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
 import AnnotationCreation from '../AnnotationCreation';
 
 /** */
@@ -14,10 +15,16 @@ class MiradorAnnotation extends Component {
 
   /** */
   openCreateAnnotationCompanionWindow(e) {
-    const { addCompanionWindow } = this.props;
+    const {
+      addCompanionWindow, canvases, receiveAnnotation, config,
+    } = this.props;
     addCompanionWindow('custom', {
       children: (
-        <AnnotationCreation />
+        <AnnotationCreation
+          canvases={canvases}
+          receiveAnnotation={receiveAnnotation}
+          config={config}
+        />
       ),
       position: 'right',
       title: 'New annotation',
@@ -44,6 +51,15 @@ class MiradorAnnotation extends Component {
 
 MiradorAnnotation.propTypes = {
   addCompanionWindow: PropTypes.func.isRequired,
+  canvases: PropTypes.arrayOf(
+    PropTypes.shape({ id: PropTypes.string, index: PropTypes.number }),
+  ),
+  config: PropTypes.shape({
+    annotation: PropTypes.shape({
+      adapter: PropTypes.func,
+    }),
+  }).isRequired,
+  receiveAnnotation: PropTypes.func.isRequired,
   TargetComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node,
@@ -51,16 +67,33 @@ MiradorAnnotation.propTypes = {
   targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
+MiradorAnnotation.defaultProps = {
+  canvases: [],
+};
+
 /** */
 const mapDispatchToProps = (dispatch, props) => ({
   addCompanionWindow: (content, additionalProps) => dispatch(
     actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }),
   ),
+  receiveAnnotation: (targetId, id, annotation) => dispatch(
+    actions.receiveAnnotation(targetId, id, annotation),
+  ),
 });
 
+/** */
+function mapStateToProps(state, { targetProps }) {
+  return {
+    canvases: getVisibleCanvases(state, { windowId: targetProps.windowId }),
+    config: state.config,
+  };
+}
+
+
 export default {
   component: MiradorAnnotation,
   mapDispatchToProps,
+  mapStateToProps,
   mode: 'wrap',
   target: 'AnnotationSettings',
 };