adding useful information to index page

Author: thefringeninja

package.json

@@ -22,6 +22,7 @@
     "@material-ui/icons": "3.0.1",
     "classnames": "2.2.6",
     "history": "4.7.2",
+    "inflector-js": "1.0.1",
     "jss": "9.4.0",
     "react": "16.5.2",
     "react-dom": "16.5.2",

src/stream-store/views/Home.js

@@ -1,48 +1,71 @@
 import React from 'react';
 import { Observable as obs } from 'rxjs';
-import { List, ListItem, Typography } from '@material-ui/core';
+import inflector from 'inflector-js';
 import { createState, connect } from '../../reactive';
-import rels from '../rels';
 import store from '../store';
-import { Hyperlink } from '../../components';
+import {
+    Table,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell,
+} from '../../components/StripeyTable';
 
-const links$ = store.links$.map(links => () => links);
+const provider$ = store.body$.map(({ provider }) => () => provider);
+
+const versions$ = store.body$.map(({ versions }) => () => versions);
 
 const recent$ = store.body$
     .filter(({ _embedded }) => _embedded)
     .map(({ _embedded }) => () => _embedded.recent);
 
 const state$ = createState(
     obs.merge(
-        links$.map(links => ['links', links]),
+        provider$.map(provider => ['provider', provider]),
+        versions$.map(versions => ['versions', versions]),
         recent$.map(recent => ['recent', recent]),
     ),
-    obs.of({ recent: { matches: [] }, links: {} }),
+    obs.of({ recent: { matches: [] }, provider: '', versions: {} }),
 );
 
-const relsToTitle = {
-    [rels.feed]: 'All Stream',
-};
-
-const Links = ({ links, onNavigate }) => (
-    <List>
-        {Object.keys(links).map((rel, key) => (
-            <ListItem key={key}>
-                <Hyperlink link={links[rel]} onNavigate={onNavigate}>
-                    <Typography variant={'h6'}>{relsToTitle[rel]}</Typography>
-                </Hyperlink>
-            </ListItem>
-        ))}
-    </List>
+const Links = ({ provider, versions }) => (
+    <Table>
+        <TableHead>
+            <TableRow>
+                <TableCell colspan={2}>{'Server Information'}</TableCell>
+            </TableRow>
+        </TableHead>
+        <TableBody>
+            <TableRow>
+                <TableCell>
+                    <strong>{'Provider'}</strong>
+                </TableCell>
+                <TableCell>
+                    {inflector.camel2words(inflector.underscore(provider))}
+                </TableCell>
+            </TableRow>
+            {Object.keys(versions).map(key => (
+                <TableRow>
+                    <TableCell>
+                        <strong>
+                            {inflector.camel2words(inflector.underscore(key))}{' '}
+                            {'Version'}
+                        </strong>
+                    </TableCell>
+                    <TableCell>{versions[key]}</TableCell>
+                </TableRow>
+            ))}
+        </TableBody>
+    </Table>
 );
 
 Links.defaultProps = {
     links: [],
 };
 
-const Index = ({ links, onNavigate }) => (
+const Index = ({ provider, versions }) => (
     <section>
-        <Links links={links} onNavigate={onNavigate} />
+        <Links provider={provider} versions={versions} />
     </section>
 );
 

yarn.lock

@@ -4172,6 +4172,10 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
+inflector-js@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/inflector-js/-/inflector-js-1.0.1.tgz#8f2b8dae06ba8c1a846e40a196a5e132721be0e0"
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"