Map Content Types to Views on Client

package.json

@@ -31,10 +31,9 @@
     "react-schema-form": "0.5.0",
     "react-scripts": "2.0.5",
     "react-tap-event-plugin": "3.0.2",
-    "resolve-relative-url": "1.0.0",
     "rxjs": "5.4.3",
+    "uri-js": "4.2.2",
     "uri-template": "1.0.1",
-    "url-join": "2.0.2",
     "uuid": "3.3.2"
   },
   "author": "thefringeninja <joao.paul@braganca.name>",

src/SqlStreamStoreBrowser.js

@@ -1,4 +1,4 @@
-import React, { createElement } from 'react';
+import React from 'react';
 import { CssBaseline, AppBar, Toolbar, Typography } from '@material-ui/core';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import { Observable as obs } from 'rxjs';
@@ -7,37 +7,43 @@ import {
     withAuthorization,
     AuthorizationProvider,
     Notifications,
-    HyperMediaControls,
-    NavigationLinks,
     Loading,
 } from './components';
 import { SqlStreamStore } from './components/Icons';
-import { actions, store, rels, views } from './stream-store';
+import { actions, store, Viewer } from './stream-store';
 import theme from './theme';
 import { createState, connect } from './reactive';
 import { mediaTypes } from './utils';
 
 const getSelfAlias = links =>
     Object.keys(links)
-        .filter(rel => rel.indexOf('streamStore:') === 0)
-        .filter(rel => links[rel].href === links.self.href)[0];
+        .flatMap(rel => links[rel])
+        .filter(({ rel }) => rel.indexOf('streamStore:') === 0)
+        .filter(
+            ({ rel, href }) =>
+                !!links.self.filter(link => link.href === href).length,
+        )
+        .map(({ rel }) => rel);
 
 const self$ = store.links$
     .filter(links => links.self)
     .map(getSelfAlias)
-    .filter(rel => !!rel);
+    .filter(rel => !!rel)
+    .map(([link]) => link);
 
 const state$ = createState(
     obs.merge(
         self$.map(self => ['self', () => self]),
         store.links$.map(links => ['links', () => links]),
         store.forms$.map(forms => ['forms', () => forms]),
         store.loading$.map(loading => ['loading', () => loading]),
+        store.mediaType$.map(mediaType => ['mediaType', () => mediaType]),
     ),
     obs.of({ links: {}, forms: {}, loading: false }),
 );
 
 const onNavigate = (link, authorization) =>
+    link.href.indexOf('#') === -1 &&
     actions.get.request.next({ link, headers: { authorization } });
 
 const initialNavigation = ({ authorization }) =>
@@ -46,13 +52,6 @@ const initialNavigation = ({ authorization }) =>
         authorization,
     );
 
-const formActions = {
-    [rels.append]: actions.post,
-    [rels.metadata]: actions.post,
-    [rels.deleteStream]: actions.delete,
-    [rels.deleteMessage]: actions.delete,
-};
-
 const Hero = () => (
     <AppBar position={'static'}>
         <Toolbar>
@@ -65,27 +64,13 @@ const Hero = () => (
 );
 
 const SqlStreamStoreBrowser = withAuthorization()(
-    mount(initialNavigation)(({ self, links, forms, loading }) => (
+    mount(initialNavigation)(({ loading, ...props }) => (
         <MuiThemeProvider theme={theme}>
             <div>
                 <CssBaseline />
                 <Hero />
                 <Loading open={loading} />
-                <section>
-                    <NavigationLinks onNavigate={onNavigate} links={links} />
-                    <HyperMediaControls
-                        actions={formActions}
-                        forms={forms}
-                        links={links}
-                        onNavigate={onNavigate}
-                    />
-                    {createElement(views[self] || views._unknown, {
-                        links,
-                        forms,
-                        self,
-                        onNavigate,
-                    })}
-                </section>
+                <Viewer {...props} onNavigate={onNavigate} />
                 <Notifications />
             </div>
         </MuiThemeProvider>

src/components/HyperMediaControls/index.js

@@ -7,7 +7,7 @@ import FormButton from './FormButton';
 import { rels } from '../../stream-store';
 
 const isNotSelf = (rel, links) =>
-    links[rels.self] && links[rel].href !== links[rels.self].href;
+    links[rels.self] && links[rel][0].href !== links[rels.self][0].href;
 
 const state$ = createState(store.url$.map(href => ['href', () => href]));
 
@@ -22,10 +22,10 @@ const HyperMediaControls = ({ forms, href, actions, links, onNavigate }) => (
                         <LinkButton
                             key={rel}
                             rel={rel}
-                            link={links[rel]}
+                            link={links[rel][0]}
                             onNavigate={onNavigate}
                             color={'active'}
-                            curies={[links[rels.curies]]}
+                            curies={links[rels.curies]}
                         />
                     ))}
             </div>
@@ -37,7 +37,7 @@ const HyperMediaControls = ({ forms, href, actions, links, onNavigate }) => (
                         link={{ href }}
                         actions={actions}
                         schema={forms[rel]}
-                        curies={[links[rels.curies]]}
+                        curies={links[rels.curies]}
                     />
                 ))}
             </div>

src/components/NavigationLinks.js

@@ -1,34 +1,50 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { IconButton } from '@material-ui/core';
 import RelIcon from './RelIcon';
 import { withAuthorization } from './AuthorizationProvider';
 import { navigation } from '../stream-store';
 import { preventDefault } from '../utils';
 
-const FeedNavigationLink = ({ disabled, onClick, rel }) => (
-    <IconButton
-        variant={disabled ? 'disabled' : 'raised'}
-        disabled={disabled}
-        onClick={onClick}
-    >
-        <RelIcon rel={rel} />
-    </IconButton>
+const FeedNavigationLink = withAuthorization()(
+    class FeedNavigationLink extends PureComponent {
+        _handleOnClick = e => {
+            const { onNavigate, authorization, link } = this.props;
+
+            e.preventDefault();
+
+            if (!link) {
+                return;
+            }
+
+            return onNavigate(link, authorization);
+        };
+
+        render() {
+            const { rel, link } = this.props;
+            return (
+                <IconButton
+                    variant={!link ? 'disabled' : 'raised'}
+                    disabled={!link}
+                    onClick={this._handleOnClick}
+                >
+                    <RelIcon rel={rel} />
+                </IconButton>
+            );
+        }
+    },
 );
 
-const NavigationLinks = ({ onNavigate, links, authorization }) => (
+const NavigationLinks = ({ onNavigate, links }) => (
     <nav>
         {[...navigation].map(rel => (
             <FeedNavigationLink
-                disabled={!links[rel]}
                 key={rel}
-                onClick={preventDefault(() =>
-                    onNavigate(links[rel], authorization),
-                )}
-                link={links[rel]}
+                link={(links[rel] || [])[0]}
+                onNavigate={onNavigate}
                 rel={rel}
             />
         ))}
     </nav>
 );
 
-export default withAuthorization()(NavigationLinks);
+export default NavigationLinks;

src/stream-store/views/Home.js → src/stream-store/Viewer/HalViewer/Home.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Observable as obs } from 'rxjs';
 import inflector from 'inflector-js';
-import { createState, connect } from '../../reactive';
-import store from '../store';
+import { createState, connect } from '../../../reactive';
+import store from '../../store';
 import {
     Table,
     TableBody,
     TableRow,
     TableHead,
     TableCell,
-} from '../../components/StripeyTable';
+} from '../../../components/StripeyTable';
 
 const provider$ = store.body$.map(({ provider }) => () => provider);
 

src/stream-store/views/Stream.js → src/stream-store/Viewer/HalViewer/Stream.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Observable as obs } from 'rxjs';
-import { createState, connect } from '../../reactive';
-import { resolveLinks } from '../../utils';
-import rels from '../rels';
-import store from '../store';
+import { createState, connect } from '../../../reactive';
+import { resolveLinks } from '../../../utils';
+import rels from '../../rels';
+import store from '../../store';
 import {
     Table,
     TableBody,
     TableRow,
     TableHead,
     TableCell,
-} from '../../components/StripeyTable';
-import { Hyperlink } from '../../components';
+} from '../../../components/StripeyTable';
+import { Hyperlink } from '../../../components';
 
 const messages$ = store.body$
     .zip(store.url$)
@@ -44,12 +44,12 @@ const Message = ({
         <TableCell style={nowrap}>{createdUtc}</TableCell>
         <TableCell style={nowrap}>{type}</TableCell>
         <TableCell style={nowrap}>
-            <Hyperlink link={links[rels.feed]} onNavigate={onNavigate}>
+            <Hyperlink link={links[rels.feed][0]} onNavigate={onNavigate}>
                 {streamId}
             </Hyperlink>
         </TableCell>
         <TableCell>
-            <Hyperlink link={links.self} onNavigate={onNavigate}>
+            <Hyperlink link={links.self[0]} onNavigate={onNavigate}>
                 {streamId}
                 {'@'}
                 {streamVersion}

src/stream-store/views/StreamBrowser.js → src/stream-store/Viewer/HalViewer/StreamBrowser.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Observable as obs } from 'rxjs';
-import StreamBrowser from '../../components/StreamBrowser';
-import { createState, connect } from '../../reactive';
-import rels from '../rels';
-import store from '../store';
+import StreamBrowser from '../../../components/StreamBrowser';
+import { createState, connect } from '../../../reactive';
+import rels from '../../rels';
+import store from '../../store';
 
 const streams$ = store.body$.map(({ _embedded = {} }) => () =>
     (_embedded[rels.feed] || [])

src/stream-store/views/StreamMessage.js → src/stream-store/Viewer/HalViewer/StreamMessage.js

@@ -21,13 +21,13 @@ import {
     TableRow,
     TableHead,
     TableCell,
-} from '../../components/StripeyTable';
-import { Hyperlink, StreamBrowser } from '../../components';
-import { Notes, Settings } from '../../components/Icons';
-import { createState, connect } from '../../reactive';
-import rels from '../rels';
-import { http } from '../../utils';
-import store from '../store';
+} from '../../../components/StripeyTable';
+import { Hyperlink, StreamBrowser } from '../../../components';
+import { Notes, Settings } from '../../../components/Icons';
+import { createState, connect } from '../../../reactive';
+import rels from '../../rels';
+import { http } from '../../../utils';
+import store from '../../store';
 
 const tryParseJson = payload => {
     try {
@@ -73,15 +73,15 @@ const StreamMessageDetails = ({
 }) => (
     <TableRow>
         <TableCell style={nowrap}>
-            <Hyperlink link={links[rels.feed]} onNavigate={onNavigate}>
+            <Hyperlink link={links[rels.feed][0]} onNavigate={onNavigate}>
                 {streamId}
             </Hyperlink>
         </TableCell>
         <TableCell style={nowrap}>{messageId}</TableCell>
         <TableCell style={nowrap}>{createdUtc}</TableCell>
         <TableCell style={nowrap}>{type}</TableCell>
         <TableCell style={{ width: '100%' }}>
-            <Hyperlink link={links[rels.self]} onNavigate={onNavigate}>
+            <Hyperlink link={links[rels.self][0]} onNavigate={onNavigate}>
                 {streamId}
                 {'@'}
                 {streamVersion}

src/stream-store/views/StreamMetadata.js → src/stream-store/Viewer/HalViewer/StreamMetadata.js

@@ -6,18 +6,18 @@ import {
     ExpansionPanelSummary,
     ExpansionPanelDetails,
 } from '@material-ui/core';
-import { Code } from '../../components/Icons';
-import { createState, connect } from '../../reactive';
-import rels from '../rels';
-import store from '../store';
+import { Code } from '../../../components/Icons';
+import { createState, connect } from '../../../reactive';
+import rels from '../../rels';
+import store from '../../store';
 import {
     Table,
     TableBody,
     TableRow,
     TableHead,
     TableCell,
-} from '../../components/StripeyTable';
-import { Hyperlink } from '../../components';
+} from '../../../components/StripeyTable';
+import { Hyperlink } from '../../../components';
 
 const metadata$ = store.body$.map(metadata => () => metadata);
 

src/stream-store/views/Unknown.js → src/stream-store/Viewer/HalViewer/Unknown.js

@@ -5,9 +5,9 @@ import Inspector, {
     ObjectRootLabel,
     ObjectName,
 } from 'react-inspector';
-import { createState, connect } from '../../reactive';
-import store from '../store';
-import { Hyperlink } from '../../components';
+import { createState, connect } from '../../../reactive';
+import store from '../../store';
+import { Hyperlink } from '../../../components';
 
 const state$ = createState(
     store.body$.map(data => ['data', () => data]),