clientjs/packages/dashboard-components/src/pages/glossary.jsx
changeset 0 5f4fcbc80b37
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/pages/glossary.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import md5 from 'md5';
+
+import { connect } from 'react-redux';
+
+import IndexList from '../ui/IndexList';
+import TermEntry from '../ui/TermEntry';
+
+import './glossary.scss';
+
+const GlossaryTerms = ({ termsDict }) => Object.keys(termsDict).sort().map((term, i) => {
+  const key = `${md5(term)}-${i}`;
+  return <TermEntry term={term} termDef={termsDict[term]} index={i} key={key} />;
+});
+
+GlossaryTerms.propTypes = {
+  termsDict: PropTypes.object.isRequired,
+};
+
+const GlossaryPage = ({ terms }) => (
+  <div className="row glossary-row">
+    <IndexList terms={Object.keys(terms)} className="col col-2 glossary-cols" />
+
+    <div className="col col-10 glossary-cols">
+      <table className="glossary-table table">
+        <tbody>
+          <GlossaryTerms termsDict={terms} />
+        </tbody>
+      </table>
+    </div>
+  </div>
+);
+
+GlossaryPage.propTypes = {
+  terms: PropTypes.object.isRequired,
+};
+
+
+export default connect(
+  (state) => {
+    const { terms } = state;
+    return {
+      terms,
+    };
+  },
+)(GlossaryPage);