1 import React from 'react';

     2 import PropTypes from 'prop-types';

     3 import md5 from 'md5';

     4 

     5 import { connect } from 'react-redux';

     6 

     7 import IndexList from '../ui/IndexList';

     8 import TermEntry from '../ui/TermEntry';

     9 

    10 import './glossary.scss';

    11 

    12 const GlossaryTerms = ({ termsDict }) => Object.keys(termsDict).sort().map((term, i) => {

    13   const key = `${md5(term)}-${i}`;

    14   return <TermEntry term={term} termDef={termsDict[term]} index={i} key={key} />;

    15 });

    16 

    17 GlossaryTerms.propTypes = {

    18   termsDict: PropTypes.object.isRequired,

    19 };

    20 

    21 const GlossaryPage = ({ terms }) => (

    22   <div className="row glossary-row">

    23     <IndexList terms={Object.keys(terms)} className="col col-2 glossary-cols" />

    24 

    25     <div className="col col-10 glossary-cols">

    26       <table className="glossary-table table">

    27         <tbody>

    28           <GlossaryTerms termsDict={terms} />

    29         </tbody>

    30       </table>

    31     </div>

    32   </div>

    33 );

    34 

    35 GlossaryPage.propTypes = {

    36   terms: PropTypes.object.isRequired,

    37 };

    38 

    39 

    40 export default connect(

    41   (state) => {

    42     const { terms } = state;

    43     return {

    44       terms,

    45     };

    46   },

    47 )(GlossaryPage);