1 import React from 'react';

     2 import PropTypes from 'prop-types';

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

     4 

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

     6 

     7 import './Document.scss';

     8 

     9 const Document = ({

    10   document,

    11   stats,

    12   viaBaseUrl,

    13   intl,

    14 }) => {

    15   const docStats = stats

    16     || {

    17       users: 0,

    18       annotations: 0,

    19       comments: 0,

    20       calls: 0,

    21     };

    22 

    23   const nbUsersTitle = intl.formatMessage({ id: 'ui.document.nbUsersTitle', defaultMessage: 'Nb. utilisateurs' });

    24   const nbAnnotationsTitle = intl.formatMessage({ id: 'ui.document.nbAnnotationsTitle', defaultMessage: 'Nb. annotations' });

    25   const nbCommentsTitle = intl.formatMessage({ id: 'ui.document.nbCommentsTitle', defaultMessage: 'Nb. commentaires' });

    26   const nbCallsTitle = intl.formatMessage({ id: 'ui.document.nbCallsTitle', defaultMessage: "Nb. d'appels" });

    27 

    28   /* eslint-disable react/no-danger */

    29   return (

    30     <div className="card w-100 document-card">

    31 

    32       <div className="card-body">

    33         <h4 className="card-title">{ document.name }</h4>

    34         <h6 className="card-subtitle mb-2 text-muted">{ document.author }</h6>

    35 

    36         <p className="card-text small" dangerouslySetInnerHTML={{ __html: document.description }} />

    37 

    38         <a href={viaBaseUrl + document.uri} className="card-link" target="_blank" rel="noopener noreferrer"><FormattedMessage id="ui.document.annotator_link" defaultMessage="Open with annotator" /></a>

    39       </div>

    40 

    41       <div className="card-footer">

    42         <div className="stats text-muted small">

    43           <span title={nbUsersTitle}>

    44             <FontAwesomeIcon icon="user" />

    45             {' '}

    46             <span>{ docStats.users }</span>

    47           </span>

    48           <span title={nbAnnotationsTitle}>

    49             <FontAwesomeIcon icon="pencil-alt" />

    50             {' '}

    51             <span>{ docStats.annotations }</span>

    52           </span>

    53           <span title={nbCommentsTitle}>

    54             <FontAwesomeIcon icon="comment" />

    55             {' '}

    56             <span>{ docStats.comments }</span>

    57           </span>

    58           <span title={nbCallsTitle}>

    59             <FontAwesomeIcon icon="bell" />

    60             {' '}

    61             <span>{ docStats.calls }</span>

    62           </span>

    63         </div>

    64       </div>

    65 

    66     </div>

    67   );

    68   /* eslint-enable react/no-danger */

    69 };

    70 

    71 Document.propTypes = {

    72   document: PropTypes.object.isRequired,

    73   stats: PropTypes.object,

    74   viaBaseUrl: PropTypes.string.isRequired,

    75   intl: intlShape.isRequired,

    76 };

    77 

    78 Document.defaultProps = {

    79   stats: {

    80     users: 0,

    81     annotations: 0,

    82     comments: 0,

    83     calls: 0,

    84   },

    85 };

    86 

    87 export default injectIntl(Document);