1 import React from 'react';

     2 import PropTypes from 'prop-types';

     3 import { FormattedRelative } from 'react-intl';

     4 import ReactMarkdown from 'react-markdown';

     5 

     6 import AnnotationQuote from './AnnotationQuote';

     7 import Tag from './Tag';

     8 

     9 import './DocumentAnnotation.scss';

    10 

    11 const User = ({ annotation }) => {

    12   const [userName, instanceName] = annotation.user.replace('acct:', '').split('@');

    13   return (

    14     <strong>

    15       { userName }

    16       <span className="text-muted">{`@${instanceName}`}</span>

    17     </strong>

    18   );

    19 };

    20 

    21 User.propTypes = {

    22   annotation: PropTypes.object.isRequired,

    23 };

    24 

    25 const TagList = ({ annotation, metacategories, categories }) => annotation.tags.map(

    26   tag => <Tag tag={tag} metacategories={metacategories} categories={categories} key={`${annotation.uri}_${tag}`} />,

    27 );

    28 

    29 TagList.propTypes = {

    30   annotation: PropTypes.object.isRequired,

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

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

    33 };

    34 

    35 

    36 const DocumentAnnotation = ({ annotation, metacategories, categories }) => (

    37   <li className="highlight list-group-item d-block">

    38 

    39     <AnnotationQuote annotation={annotation} metacategories={metacategories} />

    40 

    41     <div className="comment-info">

    42       <User annotation={annotation} />

    43       {' - '}

    44       <FormattedRelative value={annotation.updated} />

    45       {' '}

    46       <a href={annotation.links.incontext} target="_blank" rel="noopener noreferrer">#</a>

    47     </div>

    48 

    49     { (annotation.text || annotation.text !== '') && (

    50       <div className="comment-body text-muted font-italic">

    51         <ReactMarkdown source={annotation.text} />

    52       </div>

    53     )}

    54 

    55     <div className="tags">

    56       <TagList annotation={annotation} metacategories={metacategories} categories={categories} />

    57     </div>

    58   </li>

    59 );

    60 

    61 DocumentAnnotation.propTypes = {

    62   annotation: PropTypes.object.isRequired,

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

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

    65 };

    66 

    67 export default DocumentAnnotation;