1 import React from 'react';

     2 import PropTypes from 'prop-types';

     3 import md5 from 'md5';

     4 

     5 import IndexEntryItem from './IndexEntryItem';

     6 

     7 const IndexEntry = ({ letter, items }) => (

     8   <li>

     9     { letter }

    10     <ul className="p-0 mb-2 small">

    11       {

    12         items.sort().map(indexEntryItem => <IndexEntryItem term={indexEntryItem} key={`${letter}_${md5(indexEntryItem)}`} />)

    13       }

    14     </ul>

    15   </li>

    16 );

    17 

    18 IndexEntry.propTypes = {

    19   letter: PropTypes.string.isRequired,

    20   items: PropTypes.arrayOf(PropTypes.string).isRequired,

    21 };

    22 

    23 const Index = ({ terms }) => {

    24   const termsIndex = terms.reduce((res, term) => {

    25     const firstLetter = term[0];

    26     res[firstLetter] = (res[firstLetter] || []);

    27     res[firstLetter].push(term);

    28     return res;

    29   }, {});

    30 

    31   return (

    32     <ul id="index" className="text-muted p-0">

    33       {

    34         Object.keys(termsIndex).sort().map(

    35           letter => <IndexEntry letter={letter} items={termsIndex[letter]} key={letter} />,

    36         )

    37       }

    38     </ul>

    39   );

    40 };

    41 

    42 Index.propTypes = {

    43   terms: PropTypes.arrayOf(PropTypes.string).isRequired,

    44 };

    45 

    46 const IndexList = ({ terms, className }) => (

    47   <div className={className}>

    48     <Index terms={terms} />

    49   </div>

    50 );

    51 

    52 IndexList.propTypes = {

    53   terms: PropTypes.arrayOf(PropTypes.string).isRequired,

    54   className: PropTypes.string.isRequired,

    55 };

    56 

    57 export default IndexList;