links can be a single link or an array of links so just normalize to an array

Author: thefringeninja

src/SqlStreamStoreBrowser.js

@@ -17,13 +17,19 @@ 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(

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/Viewer/HalViewer/Stream.js

@@ -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/Viewer/HalViewer/StreamMessage.js

@@ -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/utils/index.js

@@ -1,14 +1,17 @@
 import { resolve } from 'uri-js';
 
+const toArray = maybeArray =>
+    !!maybeArray && Array.isArray(maybeArray) ? maybeArray : [maybeArray];
+
 export const resolveLinks = (url, links) =>
     Object.keys(links).reduce(
         (akk, rel) => ({
             ...akk,
-            [rel]: {
-                ...links[rel],
+            [rel]: toArray(links[rel]).map(({ href, ...link }) => ({
+                ...link,
                 rel,
-                href: resolve(url, links[rel].href),
-            },
+                href: resolve(url, href || './', { tolerant: true }),
+            })),
         }),
         {},
     );