Merge pull request #6 from thefringeninja/list-streams

Add Support for Listing Streams

Author: thefringeninja

src/components/HyperMediaControls/LinkButton.js

@@ -37,6 +37,7 @@ const TemplatedLinkButton = withAuthorization()(
                                 key={name}
                                 label={name}
                                 onChange={this._onChange(name)}
+                                fullWidth
                             />
                         ))}
                 </Dialog>

src/components/HyperMediaControls/index.js

@@ -4,6 +4,10 @@ import { connect, createState } from '../../reactive';
 import { navigation, store } from '../../stream-store';
 import LinkButton from './LinkButton';
 import FormButton from './FormButton';
+import { rels } from '../../stream-store';
+
+const isNotSelf = (rel, links) =>
+    links[rels.self] && links[rel].href !== links[rels.self].href;
 
 const state$ = createState(store.url$.map(url => ['url', () => url]));
 
@@ -13,6 +17,7 @@ const HyperMediaControls = ({ forms, url, actions, links, onNavigate }) => (
             <div>
                 {Object.keys(links)
                     .filter(rel => !navigation.has(rel))
+                    .filter(rel => isNotSelf(rel, links))
                     .map(rel => (
                         <LinkButton
                             key={rel}

src/components/Icons/index.js

@@ -9,6 +9,7 @@ export { default as Error } from '@material-ui/icons/Error';
 export { default as Info } from '@material-ui/icons/Info';
 export { default as Publish } from '@material-ui/icons/Publish';
 export { default as Settings } from '@material-ui/icons/Settings';
+export { default as Notes } from '@material-ui/icons/Notes';
 export { default as DeleteForever } from '@material-ui/icons/DeleteForever';
 export { default as FirstPage } from '@material-ui/icons/FirstPage';
 export { default as LastPage } from '@material-ui/icons/LastPage';
@@ -18,3 +19,4 @@ export { default as RssFeed } from '@material-ui/icons/RssFeed';
 export { default as Refresh } from '@material-ui/icons/Refresh';
 export { default as SpaceBar } from '@material-ui/icons/SpaceBar';
 export { default as Search } from '@material-ui/icons/Search';
+export { default as List } from '@material-ui/icons/List';

src/components/RelIcon.js

@@ -11,6 +11,7 @@ import {
     Refresh,
     Search,
     SqlStreamStore,
+    List,
 } from './Icons';
 import { rels } from '../stream-store';
 
@@ -25,6 +26,7 @@ const fontIconByRel = {
     [rels.metadata]: Settings,
     [rels.delete]: DeleteForever,
     [rels.find]: Search,
+    [rels.browse]: List,
 };
 
 const RelIcon = ({ rel, ...props }) =>

src/components/StreamBrowser.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+    List,
+    ListItem,
+    ListItemText,
+    LinearProgress,
+    Typography,
+    withStyles,
+} from '@material-ui/core';
+import Hyperlink from './Hyperlink';
+
+const StreamBrowser = withStyles(theme => ({
+    browser: {
+        padding: theme.spacing.unit * 2.5,
+    },
+}))(({ streams, onNavigate, classes, loading }) => (
+    <div className={classes.browser}>
+        <Typography variant={'title'}>Stream Browser</Typography>
+        {loading ? (
+            <LinearProgress />
+        ) : streams.length ? (
+            <List>
+                {streams.map(({ title, href }) => (
+                    <ListItem key={href}>
+                        <ListItemText>
+                            <Hyperlink href={href} onNavigate={onNavigate}>
+                                {title}
+                            </Hyperlink>
+                        </ListItemText>
+                    </ListItem>
+                ))}
+            </List>
+        ) : (
+            <Typography variant={'body2'}>
+                No matching streams found.
+            </Typography>
+        )}
+    </div>
+));
+
+export default 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/rels.js

@@ -11,6 +11,7 @@ const rels = {
     append: 'streamStore:append',
     delete: 'streamStore:delete',
     find: 'streamStore:find',
+    browse: 'streamStore:feed-browser',
 };
 
 export default rels;

src/stream-store/views/Home.js

@@ -17,7 +17,7 @@ const state$ = createState(
         links$.map(links => ['links', links]),
         recent$.map(recent => ['recent', recent]),
     ),
-    obs.of({ recent: { streamIds: [] }, links: {} }),
+    obs.of({ recent: { matches: [] }, links: {} }),
 );
 
 const relsToTitle = {

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);