--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/pages/term.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,135 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { FormattedMessage } from 'react-intl';
+import {
+  Tab,
+  Tabs,
+  TabList,
+  TabPanel,
+} from 'react-tabs';
+
+import AnnotationsCards from '../ui/AnnotationsCards';
+import DefinitionsCards from '../ui/DefinitionsCards';
+import IssoThread from '../ui/IssoThread';
+import { toBase64 } from '../utils';
+
+import './term.scss';
+
+const TermPage = ({
+  term,
+  term64,
+  defAndRef: defAndRefProp,
+  messageId,
+  activeTab,
+  location,
+  metacategories,
+  topics,
+  viaBaseUrl,
+  discussionUrl,
+}) => {
+  const defAndRef = defAndRefProp || { definitions: [], references: [] };
+  let { pathname } = location;
+  const m = pathname.match(/(\/[^/]+\/[^/]+)(?:\/\d)?(?:\/.+)?/);
+  pathname = m ? m[1] : pathname;
+  return (
+    <div className="term-entry">
+      <h2>{term}</h2>
+      <Tabs selectedTabPanelClassName="show active" selectedTabClassName="active" defaultIndex={activeTab || 0} forceRenderTabPanel>
+        <TabList className="nav nav-tabs">
+          <Tab className="nav-item nav-link">
+            <FormattedMessage id="pages.glossary.definitions" defaultMessage="Definitions" />
+            {' ('}
+            {defAndRef.definitions && defAndRef.definitions.length}
+            {')'}
+          </Tab>
+          <Tab className="nav-item nav-link">
+            <FormattedMessage id="pages.glossary.references" defaultMessage="References" />
+            {' ('}
+            {defAndRef.references && defAndRef.references.length}
+            {')'}
+          </Tab>
+          <Tab className="nav-item nav-link">
+            <FormattedMessage id="pages.glossary.discussions" defaultMessage="Discussions" />
+            {' ('}
+            {defAndRef.messagesCount}
+            {')'}
+          </Tab>
+        </TabList>
+        <div className="tab-content term-tab-content">
+          <TabPanel className="tab-pane fade">
+            <DefinitionsCards annotations={defAndRef.definitions} metacategories={metacategories}><h4 className="text-muted text-capitalize"><FormattedMessage id="page.term.noDefinition" defaultMessage="No definition yet" /></h4></DefinitionsCards>
+          </TabPanel>
+          <TabPanel className="tab-pane fade">
+            <AnnotationsCards
+              annotations={defAndRef.references}
+              viaBaseUrl={viaBaseUrl}
+              metacategories={metacategories}
+              categories={topics}
+            >
+              <h4 className="text-muted text-capitalize">
+                <FormattedMessage id="page.term.noReference" defaultMessage="No reference yet" />
+              </h4>
+            </AnnotationsCards>
+          </TabPanel>
+          <TabPanel className="tab-pane fade">
+            <IssoThread
+              issoId={term64}
+              pathname={`${pathname}/2`}
+              messageId={messageId}
+              discussionUrl={discussionUrl}
+            />
+          </TabPanel>
+        </div>
+      </Tabs>
+    </div>
+  );
+};
+
+TermPage.propTypes = {
+  location: PropTypes.object.isRequired,
+  term: PropTypes.string.isRequired,
+  term64: PropTypes.string.isRequired,
+  viaBaseUrl: PropTypes.string.isRequired,
+  discussionUrl: PropTypes.string.isRequired,
+  defAndRef: PropTypes.object,
+  messageId: PropTypes.string,
+  activeTab: PropTypes.number,
+  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
+  topics: PropTypes.arrayOf(PropTypes.string).isRequired,
+  dashboardId: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+};
+
+TermPage.defaultProps = {
+  defAndRef: {},
+  messageId: null,
+  activeTab: 0,
+  dashboardId: '',
+};
+
+export default connect(
+  (state, props) => {
+    const { match, dashboardId } = props;
+    const { params } = match;
+
+    let { term } = (params || {});
+    term = term ? decodeURIComponent(term) : term;
+
+    const defAndRef = term ? state.terms[term] : {};
+
+    const term64 = toBase64(dashboardId ? `${dashboardId}::${term}` : term);
+
+    const { messageId } = (params || {});
+
+    const activeTab = Number((match.params || {}).activeTab || 0);
+
+    return {
+      term,
+      term64,
+      defAndRef,
+      messageId,
+      activeTab,
+    };
+  },
+)(TermPage);