pulling out stream browser to own component

Author: thefringeninja

src/components/StreamBrowser.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { List, ListItem, Typography, withStyles } from '@material-ui/core';
+import Hyperlink from './Hyperlink';
+
+const StreamBrowser = ({ streams, onNavigate }) => (
+    <div>
+        <Typography variant={'title'}>Stream Browser</Typography>
+        {streams.length ? (
+            <List>
+                {streams.map(({ title, href }) => (
+                    <ListItem button key={href}>
+                        <Hyperlink href={href} onNavigate={onNavigate}>
+                            {title}
+                        </Hyperlink>
+                    </ListItem>
+                ))}
+            </List>
+        ) : (
+            <Typography variant={'body2'}>
+                No matching streams found.
+            </Typography>
+        )}
+    </div>
+);
+
+export default withStyles(theme => ({
+    paper: {
+        padding: theme.spacing.unit * 2.5,
+    },
+}))(StreamBrowser);

src/components/index.js

@@ -2,9 +2,10 @@ export {
     default as AuthorizationProvider,
     withAuthorization,
 } from './AuthorizationProvider';
+export { default as Hyperlink } from './Hyperlink';
+export { default as HyperMediaControls } from './HyperMediaControls';
+export { default as Loading } from './Loading';
 export { default as NavigationLinks } from './NavigationLinks';
 export { default as Notifications } from './Notifications';
-export { default as HyperMediaControls } from './HyperMediaControls';
+export { default as StreamBrowser } from './StreamBrowser';
 export { default as mount } from './mount';
-export { default as Hyperlink } from './Hyperlink';
-export { default as Loading } from './Loading';

src/stream-store/views/StreamBrowser.js

@@ -0,0 +1,19 @@
+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';
+
+const streams$ = store.body$.map(({ _embedded = {} }) => () =>
+    (_embedded[rels.feed] || [])
+        .map(({ _links = {} }) => _links[rels.feed])
+        .filter(link => link),
+);
+
+const state$ = createState(
+    streams$.map(streams => ['streams', streams]),
+    obs.of({ streams: [] }),
+);
+
+export default connect(state$)(StreamBrowser);

src/stream-store/views/StreamMessage.js

@@ -1,14 +1,11 @@
 import React, { PureComponent } from 'react';
 import { Observable as obs } from 'rxjs';
 import {
-    List,
-    ListItem,
     Popover,
     Typography,
     ExpansionPanel,
     ExpansionPanelSummary,
     ExpansionPanelDetails,
-    withStyles,
 } from '@material-ui/core';
 import Inspector, {
     ObjectLabel,
@@ -24,7 +21,7 @@ import {
     TableHead,
     TableCell,
 } from '../../components/StripeyTable';
-import { Hyperlink } from '../../components';
+import { Hyperlink, StreamBrowser } from '../../components';
 import { createState, connect } from '../../reactive';
 import rels from '../rels';
 import { http } from '../../utils';
@@ -38,14 +35,14 @@ const tryParseJson = payload => {
     }
 };
 
-const message$ = store.body$.map(({ payload, metadata, ...body }) => () => ({
+const message$ = store.body$.map(({ payload, metadata, ...body }) => ({
     ...body,
     payload: tryParseJson(payload),
     metadata: tryParseJson(metadata),
 }));
 
 const state$ = createState(
-    message$.map(message => ['message', message]),
+    message$.map(message => ['message', () => message]),
     obs.of({ message: {} }),
 );
 
@@ -102,45 +99,10 @@ const getStreamIds = ({ _embedded = {} }) =>
         .map(({ _links = {} }) => _links[rels.feed])
         .filter(link => link);
 
-const MatchingStreamIds = withStyles(theme => ({
-    paper: {
-        padding: theme.spacing.unit * 2.5,
-    },
-}))(({ matches, onNavigate, ...props }) => (
-    <Popover
-        transformOrigin={{
-            vertical: 'bottom',
-            horizontal: 'center',
-        }}
-        anchorOrigin={{
-            vertical: 'top',
-            horizontal: 'center',
-        }}
-        {...props}
-    >
-        <Typography variant={'subheading'}>Matching Stream Ids</Typography>
-        {matches.length ? (
-            <List>
-                {matches.map(({ title, href }) => (
-                    <ListItem button key={href}>
-                        <Hyperlink href={href} onNavigate={onNavigate}>
-                            {title}
-                        </Hyperlink>
-                    </ListItem>
-                ))}
-            </List>
-        ) : (
-            <Typography variant={'body1'}>
-                No matching streams found.
-            </Typography>
-        )}
-    </Popover>
-));
-
 class StreamMessageJson extends PureComponent {
     state = {
         anchorElement: undefined,
-        matches: [],
+        streams: [],
     };
 
     _handlePotentialStreamIdClick = async (
@@ -153,23 +115,19 @@ class StreamMessageJson extends PureComponent {
             anchorElement,
         });
 
-        const template = uriTemplate.parse(
-            decodeURI(links[rels.browse].href),
-        );
-
-        const url = template.expand({ p, t: 'e' });
+        const template = uriTemplate.parse(decodeURI(links[rels.browse].href));
 
         const responses = await Promise.all(
             [...new Set([p, String(p).replace('-', '')])].map(p =>
                 http.get({
-                    url,
+                    url: template.expand({ p, t: 'e' }),
                     headers: { authorization },
                 }),
             ),
         );
 
         this.setState({
-            matches: Object.values(
+            streams: Object.values(
                 responses.flatMap(({ body }) => getStreamIds(body)).reduce(
                     (akk, { href, title }) => ({
                         ...akk,
@@ -217,7 +175,7 @@ class StreamMessageJson extends PureComponent {
 
     render() {
         const { json, title, onNavigate } = this.props;
-        const { anchorElement, matches } = this.state;
+        const { anchorElement, streams } = this.state;
         return (
             <ExpansionPanel expanded>
                 <ExpansionPanelSummary expandIcon={<Code />}>
@@ -229,13 +187,24 @@ class StreamMessageJson extends PureComponent {
                         expandLevel={32}
                         nodeRenderer={this._renderNode}
                     />
-                    <MatchingStreamIds
+                    <Popover
                         open={!!anchorElement}
                         anchorEl={anchorElement}
                         onClose={this._handlePotentialStreamIdClose}
-                        matches={matches}
-                        onNavigate={onNavigate}
-                    />
+                        transformOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'center',
+                        }}
+                        anchorOrigin={{
+                            vertical: 'top',
+                            horizontal: 'center',
+                        }}
+                    >
+                        <StreamBrowser
+                            streams={streams}
+                            onNavigate={onNavigate}
+                        />
+                    </Popover>
                 </ExpansionPanelDetails>
             </ExpansionPanel>
         );

src/stream-store/views/index.js

@@ -1,5 +1,6 @@
 import Home from './Home';
 import Stream from './Stream';
+import StreamBrowser from './StreamBrowser';
 import StreamMessage from './StreamMessage';
 import StreamMetadata from './StreamMetadata';
 import Unknown from './Unknown';
@@ -10,5 +11,6 @@ export default {
     [rels.message]: StreamMessage,
     [rels.index]: Home,
     [rels.metadata]: StreamMetadata,
+    [rels.browse]: StreamBrowser,
     _unknown: Unknown,
 };