1 import React from 'react';

     2 import PropTypes from 'prop-types';

     3 

     4 import ReactMarkdown from 'react-markdown';

     5 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

     6 

     7 import AnnotationQuote from './AnnotationQuote';

     8 

     9 import './DefinitionBlock.scss';

    10 

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

    12   const annotationText = annotation.text || '';

    13   let faIconName;

    14 

    15   if (annotationText) {

    16     faIconName = 'user';

    17   } else if (/^https?:\/\/.+\.wikipedia\.org/.test(annotation.uri)) {

    18     faIconName = ['fab', 'wikipedia-w'];

    19   } else {

    20     faIconName = 'globe';

    21   }

    22 

    23   return <FontAwesomeIcon icon={faIconName} className="annotation-card-definition-icon" />;

    24 };

    25 

    26 DefinitionHeaderIcon.propTypes = {

    27   annotation: PropTypes.object.isRequired,

    28 };

    29 

    30 const DefinitionUser = ({ annotation }) => {

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

    32 

    33   return (

    34     <strong>

    35       { userName }

    36       {/* <span className="text-muted">@{ instanceName }</span> */}

    37     </strong>

    38   );

    39 };

    40 

    41 DefinitionUser.propTypes = {

    42   annotation: PropTypes.object.isRequired,

    43 };

    44 

    45 const DefinitionBody = ({ annotation, metacategories }) => {

    46   if (annotation.text) {

    47     return <ReactMarkdown source={annotation.text} />;

    48   }

    49   return <AnnotationQuote annotation={annotation} metacategories={metacategories} />;

    50 };

    51 

    52 DefinitionBody.propTypes = {

    53   annotation: PropTypes.object.isRequired,

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

    55 };

    56 

    57 

    58 const DefinitionBlock = ({ annotation, metacategories }) => {

    59   const { document } = annotation;

    60 

    61   return (

    62     <div className="card definition-card">

    63       <div className="card-header">

    64         <DefinitionHeaderIcon annotation={annotation} />

    65       </div>

    66       <div className="card-body small">

    67         <DefinitionBody annotation={annotation} metacategories={metacategories} />

    68       </div>

    69       <div className="card-footer">

    70         <a href={annotation.links.incontext} target="_blank" rel="noopener noreferrer">{ document.title }</a>

    71         <div>

    72           <DefinitionUser annotation={annotation} />

    73         </div>

    74       </div>

    75     </div>

    76   );

    77 };

    78 

    79 DefinitionBlock.propTypes = {

    80   annotation: PropTypes.object.isRequired,

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

    82 };

    83 

    84 export default DefinitionBlock;