1 import React from 'react';

     2 import PropTypes from 'prop-types';

     3 import { NavLink } from 'react-router-dom';

     4 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';

     5 import md5 from 'md5';

     6 

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

     8 

     9 import './TermEntry.scss';

    10 

    11 

    12 function getTermDefinition(annotation) {

    13   if (annotation.text) {

    14     return annotation.text;

    15   }

    16 

    17   let selector;

    18 

    19   if (annotation.target[0].selector) {

    20     selector = annotation.target[0].selector.find(s => s.type === 'TextQuoteSelector');

    21   }

    22 

    23   if (selector) {

    24     return selector.exact;

    25   }

    26   return '';

    27 }

    28 

    29 const TermEntry = ({ term, termDef, intl }) => {

    30   const key = `${md5(term)}-term-entry`;

    31 

    32   let firstDefinition = '';

    33 

    34   if (termDef.definitions.length > 0) {

    35     firstDefinition = getTermDefinition(termDef.definitions[0]);

    36   }

    37   if (!firstDefinition) {

    38     firstDefinition = <span className="text-muted font-italic"><FormattedMessage id="ui.termEntry.noDefinition" defaultMessage="No definition yet" /></span>;

    39   }

    40 

    41   const definitionsTitle = intl.formatMessage({ id: 'ui.termEntry.nbDefinitions', defaultMessage: 'Nb. definitions' });

    42   const referencesTitle = intl.formatMessage({ id: 'ui.termEntry.nbReferences', defaultMessage: 'Nb. references' });

    43   const commentsTitle = intl.formatMessage({ id: 'ui.termEntry.nbComments', defaultMessage: 'Nb. comments' });

    44 

    45   return (

    46     <tr id={key}>

    47       <th scope="row" className="term-entry-term"><NavLink to={`/term/${encodeURIComponent(term)}`} className="term-entry-term-link">{term}</NavLink></th>

    48       <td className="term-entry-def">

    49         <p>{firstDefinition}</p>

    50         <p className="glossary-table-counts align-text-bottom text-right text-muted small">

    51           <span title={definitionsTitle}>

    52             <NavLink to={`/term/${encodeURIComponent(term)}`} className="term-entry-term-link">

    53               <FontAwesomeIcon icon="file-alt" />

    54               {' '}

    55               <span>{ termDef.definitions.length }</span>

    56             </NavLink>

    57           </span>

    58           <span title={referencesTitle}>

    59             <NavLink to={`/term/${encodeURIComponent(term)}/1`} className="term-entry-term-link">

    60               <FontAwesomeIcon icon="share-alt" />

    61               {' '}

    62               <span>{ termDef.references.length }</span>

    63             </NavLink>

    64           </span>

    65           <span title={commentsTitle}>

    66             <NavLink to={`/term/${encodeURIComponent(term)}/2`} className="term-entry-term-link">

    67               <FontAwesomeIcon icon="comments" />

    68               {' '}

    69               <span>{ termDef.messagesCount || 0 }</span>

    70             </NavLink>

    71           </span>

    72         </p>

    73       </td>

    74     </tr>

    75   );

    76 };

    77 

    78 TermEntry.propTypes = {

    79   term: PropTypes.string.isRequired,

    80   termDef: PropTypes.object.isRequired,

    81   intl: intlShape.isRequired,

    82 };

    83 

    84 export default injectIntl(TermEntry);