Refactor and Update Dependencies

src/SqlStreamStoreBrowser.tsx

@@ -33,7 +33,7 @@ const getSelfAlias = (links: HalLinks) =>
         .flatMap(rel => links[rel])
         .filter(({ rel }) => rel && rel.indexOf('streamStore:') === 0)
         .filter(
-            ({ rel, href }) =>
+            ({ href }) =>
                 !!links.self.filter(link => link.href === href).length,
         )
         .map(({ rel }) => rel);
@@ -58,7 +58,7 @@ const state$ = createState<SqlStreamStoreBrowserState>(
         store.hal$.links$.map(links => ['_links', () => links]),
         store.hal$.forms$.map(forms => ['forms', () => forms]),
         store.hal$.loading$.map(loading => ['loading', () => loading]),
-        store.hal$.mediaType$.map(mediaType => ['mediaType', () => mediaType]),
+        store.mediaType$.map(mediaType => ['mediaType', () => mediaType]),
         themes.theme$.map(theme => ['theme', () => theme]),
     ),
     obs.of({

src/components/AuthorizationProvider.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentType, ReactNode, StatelessComponent } from 'react';
+import React, { ComponentType, FunctionComponent, ReactNode } from 'react';
 import { AuthorizationProps } from 'types';
 import getDisplayName from './getDisplayName';
 
 const { Consumer, Provider } = React.createContext<string | undefined>(
     undefined,
 );
 
-const AuthorizationProvider: StatelessComponent<
+const AuthorizationProvider: FunctionComponent<
     AuthorizationProps & {
         children: ReactNode;
     }

src/components/HyperMediaControls/Dialog.tsx

@@ -11,7 +11,7 @@ import {
 } from '@material-ui/core';
 import { SlideProps } from '@material-ui/core/Slide';
 import RelIcon from 'components/RelIcon';
-import React, { FormEvent, PureComponent, StatelessComponent } from 'react';
+import React, { FormEvent, FunctionComponent, PureComponent } from 'react';
 import { HalLink } from 'types';
 import HelpButton from './HelpButton';
 import RelButton from './RelButton';
@@ -22,7 +22,7 @@ const styles = (theme: Theme) => ({
     },
 });
 
-const SlideUp: StatelessComponent<SlideProps> = props => (
+const SlideUp: FunctionComponent<SlideProps> = props => (
     <Slide direction={'up'} {...props} />
 );
 

src/components/HyperMediaControls/RelButton.tsx

@@ -1,14 +1,14 @@
 import { Button } from '@material-ui/core';
 import { ButtonProps } from '@material-ui/core/Button';
 import RelIcon from 'components/RelIcon';
-import React, { StatelessComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 
 interface RelButtonProps {
     rel: string;
     title?: string;
 }
 
-const RelButton: StatelessComponent<RelButtonProps & ButtonProps> = ({
+const RelButton: FunctionComponent<RelButtonProps & ButtonProps> = ({
     rel,
     onClick,
     title,

src/components/NavigationLinks.tsx

@@ -2,8 +2,8 @@ import { IconButton } from '@material-ui/core';
 import React, {
     ComponentType,
     FormEventHandler,
+    FunctionComponent,
     PureComponent,
-    StatelessComponent,
 } from 'react';
 import { navigation } from 'stream-store';
 import { HalLink, HalLinks, NavigatableProps } from 'types';
@@ -45,7 +45,7 @@ interface NavigationLinksProps {
     _links: HalLinks;
 }
 
-const NavigationLinks: StatelessComponent<NavigationLinksProps> = ({
+const NavigationLinks: FunctionComponent<NavigationLinksProps> = ({
     _links,
 }) => (
     <nav>

src/components/NavigationProvider.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, ReactNode, StatelessComponent } from 'react';
+import React, { ComponentType, FunctionComponent, ReactNode } from 'react';
 import { NavigatableProps, NavigationHandler } from 'types';
 import getDisplayName from './getDisplayName';
 
@@ -10,7 +10,7 @@ const { Consumer, Provider } = React.createContext<NavigationHandler>(
     defaultNavigationHandler,
 );
 
-const NavigationProvider: StatelessComponent<{
+const NavigationProvider: FunctionComponent<{
     onNavigate: NavigationHandler;
     children: ReactNode;
 }> = ({ onNavigate, children }) => (

src/stream-store/Viewer/HalViewer/Home.tsx

@@ -1,6 +1,6 @@
 import { Table } from 'components';
 import inflector from 'inflector-js';
-import React, { ComponentType, StatelessComponent } from 'react';
+import React, { ComponentType, FunctionComponent } from 'react';
 import { connect, createState } from 'reactive';
 import { Observable as obs } from 'rxjs';
 import rels from 'stream-store/rels';
@@ -63,7 +63,7 @@ const state$ = createState<IndexState>(
     obs.of<IndexState>({ recent: [], info: [] }),
 );
 
-const InfoLine: StatelessComponent<InfoLineProps> = ({ id, value }) => (
+const InfoLine: FunctionComponent<InfoLineProps> = ({ id, value }) => (
     <Table.Row>
         <Table.Cell>
             <strong>{id}</strong>
@@ -72,7 +72,7 @@ const InfoLine: StatelessComponent<InfoLineProps> = ({ id, value }) => (
     </Table.Row>
 );
 
-const Info: StatelessComponent<InfoState> = ({ info }) => (
+const Info: FunctionComponent<InfoState> = ({ info }) => (
     <Table>
         <Table.Head>
             <Table.Row>

src/stream-store/Viewer/HalViewer/Stream.tsx

@@ -1,5 +1,5 @@
 import { Table } from 'components';
-import React, { ComponentType, StatelessComponent } from 'react';
+import React, { ComponentType, FunctionComponent } from 'react';
 import { connect, createState } from 'reactive';
 import { Observable as obs } from 'rxjs';
 import rels from 'stream-store/rels';
@@ -37,7 +37,7 @@ interface MessagesState {
     messages: Array<Message & HalResource>;
 }
 
-const Messages: StatelessComponent<MessagesState> = ({ messages }) => (
+const Messages: FunctionComponent<MessagesState> = ({ messages }) => (
     <Table>
         <StreamHeader />
         <Table.Body>

src/stream-store/Viewer/HalViewer/StreamMetadata.tsx

@@ -1,5 +1,5 @@
 import { Hyperlink, Table } from 'components';
-import React, { CSSProperties, StatelessComponent } from 'react';
+import React, { CSSProperties, FunctionComponent } from 'react';
 import { connect, createState } from 'reactive';
 import { Observable as obs } from 'rxjs';
 import rels from 'stream-store/rels';
@@ -49,7 +49,7 @@ interface StreamMetadataDetailsProps {
     _links: HalLinks;
 }
 
-const StreamMetadataDetails: StatelessComponent<StreamMetadataDetailsProps> = ({
+const StreamMetadataDetails: FunctionComponent<StreamMetadataDetailsProps> = ({
     streamId,
     maxAge,
     maxCount,
@@ -68,7 +68,7 @@ const StreamMetadataDetails: StatelessComponent<StreamMetadataDetailsProps> = ({
     </Table.Row>
 );
 
-const StreamMetadata: StatelessComponent<
+const StreamMetadata: FunctionComponent<
     StreamMetadataState & HalViewerProps
 > = ({ metadata }) => (
     <section>

src/stream-store/Viewer/HalViewer/components/StreamMessageDetails.tsx

@@ -1,5 +1,5 @@
 import { Hyperlink, Table } from 'components';
-import React, { CSSProperties, StatelessComponent } from 'react';
+import React, { CSSProperties, FunctionComponent } from 'react';
 import rels from 'stream-store/rels';
 import { HalResource } from 'types';
 
@@ -14,7 +14,7 @@ interface StreamMessageDetailsProps {
     type: string;
 }
 
-const StreamMessageDetails: StatelessComponent<
+const StreamMessageDetails: FunctionComponent<
     StreamMessageDetailsProps & HalResource
 > = ({
     messageId,

src/stream-store/Viewer/HalViewer/index.tsx

@@ -1,5 +1,5 @@
 import { HyperMediaControls, NavigationLinks } from 'components';
-import React, { ComponentType, createElement, StatelessComponent } from 'react';
+import React, { ComponentType, createElement, FunctionComponent } from 'react';
 import actions from 'stream-store/actions';
 import rels from 'stream-store/rels';
 import Home from './Home';
@@ -26,7 +26,7 @@ const views: { [rel: string]: ComponentType<HalViewerProps> } = {
     _unrecognized: Unrecognized,
 };
 
-const HalViewer: StatelessComponent<HalViewerProps> = ({
+const HalViewer: FunctionComponent<HalViewerProps> = ({
     forms,
     _links,
     self,

src/stream-store/store/hal/body.ts

@@ -0,0 +1,11 @@
+import { HalResource } from '../../../types';
+import { hal, mediaTypes } from '../../../utils';
+import actions from '../../actions';
+import mediaType$ from '../mediaType';
+
+const body$ = actions.get.response
+    .zip(mediaType$)
+    .filter(([, mediaType]) => mediaType === mediaTypes.hal)
+    .map(([{ body }]) => hal.normalizeResource(body as HalResource));
+
+export default body$;

src/stream-store/store/hal/forms.ts

@@ -0,0 +1,23 @@
+import { JSONSchema7 } from 'json-schema';
+import { HalResource } from 'types';
+import body$ from './body';
+
+const isJsonSchema = (schema: JSONSchema7 & HalResource) =>
+    schema && schema.$schema && schema.$schema.endsWith('schema#');
+
+const forms$ = body$
+    .map(({ _embedded }) => _embedded)
+    .map(embedded =>
+        Object.keys(embedded)
+            .filter(rel => isJsonSchema(embedded[rel][0]))
+            .reduce(
+                (akk, rel) => ({
+                    ...akk,
+                    [rel]: embedded[rel][0],
+                }),
+                // tslint:disable-next-line:no-object-literal-type-assertion
+                {} as JSONSchema7,
+            ),
+    );
+
+export default forms$;

src/stream-store/store/hal/index.ts

@@ -0,0 +1,13 @@
+import body$ from './body';
+import forms$ from './forms';
+import links$ from './links';
+import loading$ from './loading';
+import url$ from './url';
+
+export default {
+    body$,
+    forms$,
+    links$,
+    loading$,
+    url$,
+};

src/stream-store/store/hal/links.ts

@@ -0,0 +1,9 @@
+import { hal } from 'utils';
+import body$ from './body';
+import url$ from './url';
+
+const links$ = body$
+    .zip(url$)
+    .map(([{ _links }, url]) => hal.resolveLinks(url, _links));
+
+export default links$;

src/stream-store/store/hal/loading.ts

@@ -0,0 +1,31 @@
+import { Observable as obs } from 'rxjs';
+import actions from '../../actions';
+
+const verbs = Object.keys(actions);
+
+const requests$ = obs.merge(
+    ...verbs.map((verb: keyof typeof actions) => actions[verb].request),
+);
+
+const responses$ = obs.merge(
+    ...verbs.map((verb: keyof typeof actions) => actions[verb].response),
+);
+
+const delayedRequests$ = requests$.delay(1000);
+
+const loading$ = requests$
+    .timestamp()
+    .combineLatest(
+        responses$.timestamp(),
+        delayedRequests$.timestamp(),
+        (
+            { timestamp: requestTs },
+            { timestamp: responseTs },
+            { timestamp: delayedTs },
+        ) =>
+            requestTs > responseTs &&
+            delayedTs > responseTs &&
+            delayedTs >= requestTs,
+    );
+
+export default loading$;

src/stream-store/store/hal/streamBrowser.ts

@@ -0,0 +1,29 @@
+import { createAction } from 'reactive';
+import { Observable } from 'rxjs';
+import rels from 'stream-store/rels';
+import uriTemplate from 'uri-template';
+import links$ from './links';
+
+const isPotentialStreamId = (data: any) =>
+    typeof data === 'number' || typeof data === 'string';
+
+const clickPotentialStreamId = createAction<any>().filter(
+    isPotentialStreamId,
+) as Observable<number | string>;
+
+const pattern$ = Observable.merge(
+    clickPotentialStreamId.map(pattern => pattern),
+    clickPotentialStreamId.map(pattern => String(pattern).replace(/-/g, '')),
+).distinct();
+
+const template$ = links$
+    .filter(links => !!links[rels.browse])
+    .map(links => links[rels.browse][0])
+    .map(link => uriTemplate.parse(decodeURI(link.href)));
+
+pattern$.combineLatest(template$, (p, template) => ({
+    headers: { authorization: '' },
+    link: {
+        href: template.expand({ p, t: 'e' }),
+    },
+}));