1 import React from 'react';

     2 import { FormattedMessage } from 'react-intl';

     3 import PropTypes from 'prop-types';

     4 

     5 import Tag from './Tag';

     6 

     7 import './Sidebar.scss';

     8 

     9 const TopicsList = ({ topics, metacategories }) => (

    10   <div>

    11     <h3 className="title-topics">

    12       <FormattedMessage

    13         id="sidebar.categories_title"

    14         defaultMessage="Categories"

    15       />

    16     </h3>

    17 

    18     <p>

    19       <FormattedMessage

    20         id="sidebar.categories_desc"

    21         defaultMessage="This is the list of tags we are going to focus on in this studies."

    22       />

    23     </p>

    24 

    25     <dl>

    26       {

    27         (topics || []).map(topic => (

    28           <div key={topic}>

    29             <dt><Tag tag={topic} categories={topics} metacategories={metacategories} /></dt>

    30           </div>

    31         ))

    32       }

    33     </dl>

    34   </div>

    35 );

    36 

    37 TopicsList.propTypes = {

    38   metacategories: PropTypes.arrayOf(PropTypes.object),

    39   topics: PropTypes.arrayOf(PropTypes.string),

    40 };

    41 

    42 TopicsList.defaultProps = {

    43   metacategories: [],

    44   topics: [],

    45 };

    46 

    47 const MetacategoriesList = ({ topics, metacategories }) => (

    48   <div>

    49     <h3>

    50       <FormattedMessage

    51         id="sidebar.annotation_protocol"

    52         defaultMessage="Annotation Protocol"

    53       />

    54     </h3>

    55     {

    56       (metacategories || []).map((metacategory) => {

    57         const descId = `data.metacategories.${metacategory.id}.desc`;

    58         return (

    59           <div key={metacategory.tag} className="sidebar-metacategories-entry">

    60             <dt><Tag tag={`cat:${metacategory.tag}`} categories={topics} metacategories={metacategories} /></dt>

    61             <div className="small"><FormattedMessage id={descId} /></div>

    62           </div>

    63         );

    64       })

    65     }

    66   </div>

    67 );

    68 

    69 MetacategoriesList.propTypes = {

    70   metacategories: PropTypes.arrayOf(PropTypes.object),

    71   topics: PropTypes.arrayOf(PropTypes.string),

    72 };

    73 

    74 MetacategoriesList.defaultProps = {

    75   metacategories: [],

    76   topics: [],

    77 };

    78 

    79 const Sidebar = ({ metacategories, topics }) => (

    80   <div>

    81     <MetacategoriesList metacategories={metacategories} topics={topics} />

    82     <TopicsList metacategories={metacategories} topics={topics} />

    83   </div>

    84 );

    85 

    86 Sidebar.propTypes = {

    87   metacategories: PropTypes.arrayOf(PropTypes.object),

    88   topics: PropTypes.arrayOf(PropTypes.string),

    89 };

    90 

    91 Sidebar.defaultProps = {

    92   metacategories: [],

    93   topics: [],

    94 };

    95 

    96 export default Sidebar;