1 import React from 'react';

     2 import PropTypes from 'prop-types';

     3 

     4 import DocumentAnnotation from './DocumentAnnotation';

     5 

     6 const AnnotationsList = ({ document, metacategories, categories }) => {

     7   const { annotations } = document;

     8 

     9   return annotations.map(

    10     annotation => (

    11       <DocumentAnnotation

    12         key={annotation.id}

    13         annotation={annotation}

    14         metacategories={metacategories}

    15         categories={categories}

    16       />

    17     ),

    18   );

    19 };

    20 

    21 AnnotationsList.propTypes = {

    22   document: PropTypes.object.isRequired,

    23   metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,

    24   categories: PropTypes.arrayOf(PropTypes.string).isRequired,

    25 };

    26 

    27 

    28 const DocumentAnnotations = ({

    29   document,

    30   metacategories,

    31   categories,

    32   viaBaseUrl,

    33 }) => (

    34   <div className="card">

    35     <div className="card-header">

    36       <a href={viaBaseUrl + document.uri} target="_blank" rel="noopener noreferrer">{ document.title }</a>

    37     </div>

    38 

    39     <ul className="list-group list-group-flush small">

    40       <AnnotationsList

    41         document={document}

    42         metacategories={metacategories}

    43         categories={categories}

    44       />

    45     </ul>

    46   </div>

    47 );

    48 

    49 DocumentAnnotations.propTypes = {

    50   document: PropTypes.object.isRequired,

    51   metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,

    52   categories: PropTypes.arrayOf(PropTypes.string).isRequired,

    53   viaBaseUrl: PropTypes.string.isRequired,

    54 };

    55 

    56 export default DocumentAnnotations;