WIP thumbnail on accordion.

Ths way is impossible, Mirdor remove url after #

src/components/AnnotationManifestsAccordion.js

@@ -22,26 +22,6 @@ export class AnnotationManifestsAccordion extends Component {
     super(props);
     this.handleOpenManifestSideToSide = this.handleOpenManifestSideToSide.bind(this);
     this.handleOpenAccordion = this.handleOpenAccordion.bind(this);
-
-    /** Search if the annotation is a manifest. URL must be resolvable for the annotation. So the manifest url is added at the end of the id */
-    function searchManifestInID(id) {
-      const match = id.match(
-        /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)/gi,
-      );
-
-      return match ? match[0].split('#').slice(-1) : null;
-    }
-
-    const { annotation } = this.props;
-
-    annotation.manifests = searchManifestInID(annotation.id);
-    if (annotation.manifests) {
-      annotation.manifests = annotation.manifests.map(id => ({ id }));
-    } else {
-      annotation.manifests = [];
-    }
-
-    this.state = { annotation };
   }
 
 
@@ -57,7 +37,7 @@ export class AnnotationManifestsAccordion extends Component {
   handleOpenAccordion(e) {
     const { annotation } = this.state;
     /** */
-    async function load(manifests) {
+   /*  async function load(manifests) {
       return Promise.all(manifests.map((manifest) => fetch(manifest.id)
         .then((response) => response.json())
         .then((data) => {
@@ -75,20 +55,27 @@ export class AnnotationManifestsAccordion extends Component {
           this.setState({ annotation });
         }
       });
-    e.stopPropagation();
+    e.stopPropagation(); */
+
+    // We work onlu on the first manifest
+
+ /*    const {
+      fetchManifest
+    } = this.props;
+    fetchManifest(annotation.manifests[0]); */
+
   }
 
   /** */
   render() {
     const {
-      classes, t, i18n,
+      classes, t, i18n, manifests
     } = this.props;
 
     const language = i18n.language;
 
-    const { annotation } = this.state;
 
-    if (annotation.manifests === null || annotation.manifests.length === 0) {
+    if (manifests === null || manifests.length === 0) {
       return null;
     }
 
@@ -102,7 +89,7 @@ export class AnnotationManifestsAccordion extends Component {
             <Typography className={classes.heading}>{t('manifestFound')}</Typography>
           </AccordionSummary>
           <AccordionDetails className={classes.manifestContainer}>
-            {annotation.manifests.map(manifest => (
+            {manifests.map(manifest => (
               <Typography>
                 <Card className={classes.root}>
                   <CardActionArea>
@@ -142,15 +129,20 @@ AnnotationManifestsAccordion.propsTypes = {
     {
       content: PropTypes.string,
       id: PropTypes.string,
-      manifests: PropTypes.arrayOf(PropTypes.string),
+
     },
   ),
   classes: PropTypes.objectOf(PropTypes.string),
+  fetchManifest: PropTypes.func.isRequired,
+  manifests: PropTypes.arrayOf(PropTypes.string),
   t: PropTypes.func.isRequired,
+  thumbnail: PropTypes.string,
+  title: PropTypes.string,
 };
 
 AnnotationManifestsAccordion.defaultProps = {
   classes: {},
   htmlSanitizationRuleSet: 'iiif',
   listContainerComponent: 'li',
+  manifests: [],
 };

src/containers/AnnotationManifestsAccordion.js

@@ -5,12 +5,33 @@ import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import { AnnotationManifestsAccordion } from '../components/AnnotationManifestsAccordion';
 import * as actions from '../state/actions';
-import { getConfig } from '../state/selectors';
+import {
+  getConfig, getManifest,
+  getManifestTitle, getManifestThumbnail, getCanvases,
+  getManifestLogo, getManifestProvider, getWindowManifests,
+  getManifestoInstance, getSequenceBehaviors, getManifestDescription,
+} from '../state/selectors';
+
+/** Search if the annotation is a manifest. URL must be resolvable for the annotation. So the manifest url is added at the end of the id */
+function searchManifestInID(id) {
+  const match = id.match(
+    /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)/gi,
+  );
+
+  return match ? match[0].split('#').slice(-1) : null;
+}
 
 /** For connect */
-const mapStateToProps = (state, { canvasId, windowId }) => ({
+const mapStateToProps = (state, { annotation }) => {
+  const manifestId = searchManifestInID(annotation.id);
+
+  return {
     htmlSanitizationRuleSet: getConfig(state).annotations.htmlSanitizationRuleSet,
-});
+    manifests: new Array(manifestId),
+    thumbnail: getManifestThumbnail(state, { manifestId }),
+    title: getManifestTitle(state, { manifestId }),
+  };
+};
 
 /**
  * mapDispatchToProps - to hook up connect
@@ -20,6 +41,7 @@ const mapStateToProps = (state, { canvasId, windowId }) => ({
 const mapDispatchToProps = {
   addResource: actions.addResource,
   addWindow: actions.addWindow,
+
 };
 
 /** For withStyles */